科技: 人物 企业 技术 IT业 TMT
科普: 自然 科学 科幻 宇宙 科学家
通信: 历史 技术 手机 词典 3G馆
索引: 分类 推荐 专题 热点 排行榜
互联网: 广告 营销 政务 游戏 google
新媒体: 社交 博客 学者 人物 传播学
新思想: 网站 新书 新知 新词 思想家
图书馆: 文化 商业 管理 经济 期刊
网络文化: 社会 红人 黑客 治理 亚文化
创业百科: VC 词典 指南 案例 创业史
前沿科技: 清洁 绿色 纳米 生物 环保
知识产权: 盗版 共享 学人 法规 著作
用户名: 密码: 注册 忘记密码?
    创建新词条
科技百科
  • 人气指数: 7622 次
  • 编辑次数: 1 次 历史版本
  • 更新时间: 2009-03-11
admin
admin
发短消息
相关词条
SIM卡
SIM卡
WEBSPHERE
WEBSPHERE
FTP
FTP
並行計算
並行計算
国外计算机科学状况
国外计算机科学状况
混龄教育
混龄教育
学科信息门户
学科信息门户
UBUNTU
UBUNTU
恩尼格玛
恩尼格玛
广播工程师
广播工程师
推荐词条
希拉里二度竞选
希拉里二度竞选
《互联网百科系列》
《互联网百科系列》
《黑客百科》
《黑客百科》
《网络舆情百科》
《网络舆情百科》
《网络治理百科》
《网络治理百科》
《硅谷百科》
《硅谷百科》
2017年特斯拉
2017年特斯拉
MIT黑客全纪录
MIT黑客全纪录
桑达尔·皮查伊
桑达尔·皮查伊
阿里双十一成交额
阿里双十一成交额
最新词条

热门标签

微博侠 数字营销2011年度总结 政务微博元年 2011微博十大事件 美国十大创业孵化器 盘点美国导师型创业孵化器 盘点导师型创业孵化器 TechStars 智能电视大战前夜 竞争型国企 公益型国企 2011央视经济年度人物 Rhianna Pratchett 莱恩娜·普莱契 Zynga与Facebook关系 Zynga盈利危机 2010年手机社交游戏行业分析报告 游戏奖励 主流手机游戏公司运营表现 主流手机游戏公司运营对比数据 创建游戏原型 正反馈现象 易用性设计增强游戏体验 易用性设计 《The Sims Social》社交亮 心理生理学与游戏 Kixeye Storm8 Storm8公司 女性玩家营销策略 休闲游戏的创新性 游戏运营的数据分析 社交游戏分析学常见术语 游戏运营数据解析 iPad风行美国校园 iPad终结传统教科书 游戏平衡性 成长类型及情感元素 鸿蒙国际 云骗钱 2011年政务微博报告 《2011年政务微博报告》 方正产业图谱 方正改制考 通信企业属公益型国企 善用玩家作弊行为 手机游戏传播 每用户平均收入 ARPU值 ARPU 游戏授权三面观 游戏设计所运用的化学原理 iOS应用人性化界面设计原则 硬核游戏 硬核社交游戏 生物测量法研究玩家 全球移动用户 用户研究三部曲 Tagged转型故事 Tagged Instagram火爆的3大原因 全球第四大社交网络Badoo Badoo 2011年最迅猛的20大创业公司 病毒式传播功能支持的游戏设计 病毒式传播功能 美国社交游戏虚拟商品收益 Flipboard改变阅读 盘点10大最难iPhone游戏 移动应用设计7大主流趋势 成功的设计文件十个要点 游戏设计文件 应用内置付费功能 内置付费功能 IAP功能 IAP IAP模式 游戏易用性测试 生理心理游戏评估 游戏化游戏 全美社交游戏规模 美国社交游戏市场 全球平板电脑出货量 Facebook虚拟商品收益 Facebook全球广告营收 Facebook广告营收 失败游戏设计的数宗罪名 休闲游戏设计要点 玩游戏可提高认知能力 玩游戏与认知能力 全球游戏广告 独立开发者提高工作效率的100个要点 Facebook亚洲用户 免费游戏的10种创收模式 人类大脑可下载 2012年最值得期待的20位硅谷企业家 做空中概股的幕后黑手 做空中概股幕后黑手 苹果2013营收 Playfish社交游戏架构

CSS
CSS
CSS是Cascading Style Sheet 的缩写。译作”层叠样式表单“。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式可以控制许多仅使用HTML无法控制的属性。HTML是一种标记性语言。当在浏览器中打开一个HTML网页时,浏览器将读取该网页中的HTML标签,并根据内置的解析规则将网页元素呈现出来。CSS层叠样式表则用于重新设置浏览器解析HTML元素时的表现形式。换而言之,CSS就是描述HTML元素的规则。

目录

[显示全部]

基本简介编辑本段回目录

CSS
CSS
CSS层叠样式表是一系列格式设置的规则,它们控制网页内容的外观。使用CSS设置页面格式时,可以将内容与表现形式分开。网页内容(即HTML代码)驻留在HTML文件自身中,而用于定义代码表现形式的CSS规则驻留在另一个文件(外部样式表)或HTML文档的另一部分(通常为文件头部分)中。使用CSS可以更加灵活地控制具体的页面外观,从精确的布局定位到特定的字体和样式。

CSS允许控制HTML无法独自控制的许多属性。例如,可以为选定的文本指定不同的字体大小和单位(像素、磅值等)。通过CSS可以用像素为单位来设置字体大小,从而可以确保在多个浏览器中以更一致的方式处理页面布局和外观。除设置文本格式外,还可以使用CSS控制网页中块级别元素的格式和定位。例如,可以设置块级别元素的边距和边框,其他文本周围的浮动文本等。

CSS格式设置规则由选择器和声明两部分组成,其中选择器是标识格式元素的术语(如p、h1、类名或id),声明用于定义元素样式。

CSS的主要优点是提供了便利的更新功能。设计网站时,可以创建一个CSS样式表文件,然后将网站中的所有网页都连接到该样式表文件,这样很容易为Web站点内的所有网页提供一致的外观和风格。当更新某一样式属性时,使用该样式的所有网页的格式都会自动更新为新样式,而不必逐页进行修改。

样式表格编辑本段回目录

CSS
CSS
可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

1、 链入外部样式表文件 (Linking to a Style Sheet)

可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:

http://www.dhtmlet.com/rainer.css type="text/css">;

而在XML中,你应该如下例所示在声明区中加入:

http://www.dhtmlet.com/rainer.css>;

2、定义内部样式块对象 (Embedding a Style Block)

可以在你的HTML文档的和标记之间插入一个 块对象。

请注意,这里将style对象的type属性设置为“text/css”,是允许不支持这类型的浏览器忽略样式表单。

3、内联定义 (Inline Styles)

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。

这一行被增加了左右的外补丁

样式表语法 (CSS Syntax)

Selector { property:value }

参数说明:

Selector -- 选择符

property: value -- 样式表定义。属性和属性值之间用冒号(:)隔开。定义之间用分号(;)隔开

继承的值 (The ‘Inherit ’Value)每个属性都有一个指定的值:Inherit。它的意思是:将父对象的值等同为计算机值得到。这个值通常仅仅是备用的。显式的声明它可用来强调。上面这些可能对于初学者来说还不太好理解,但主要是明白CSS就相当于网页的衣服一样,学会用了就好办。WEB标准提倡样式(即CSS)与结构(HTML,XML等)分离,所以学会CSS的应用就显得更加重要了。 ;

历史说明编辑本段回目录

CSS
CSS
从1990年代初HTML被发明开始样式表就以各种形式出现了,不同的浏览器结合了它们各自的样式语言,读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的,最初的HTML版本只含有很少的显示属性,读者来决定网页应该怎样被显示。

随着HTML的成长,为了满足设计师的要求,HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。

1994年哈坤·利提出了CSS的最初建议。伯特·波斯(Bert Bos)当时正在设计一个叫做Argo的浏览器,他们决定一起合作设计CSS。有过一些样式表语言的建议,但CSS是第一个含有“层叠”的主意的。在CSS中,一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承,或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合各人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议,1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立,W3C对CSS的发展很感兴趣,它为此组织了一次讨论会。哈坤、波斯和其他一些人(比如微软的托马斯·雷尔登)是这个项目的主要技术负责人。1996年底,CSS已经完成。1996年12月CSS要求的第一版本被出版。

1997年初,W3C内组织了专门管CSS的工作组,其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题,其结果是1998年5月出版的第二版要求。到2004年为止,第三版还未出版。

1996年W3C正式推出了CSS1;
1998年W3C正式推出了CSS2;
CSS2.1是W3C现在正在推荐使用的;
CSS3现在还处于开发中。

网页设计中常用的CSS属性

文字或元素的颜色 color
背景颜色 background-color
背景图像 background-image
字体 font-family
文字大小 font-size
列表样式 list
鼠标样式 cursor
边框样式 border
内补白 padding
外边距 margi

语法介绍编辑本段回目录

CSS
CSS
CSS的定义是由三个部分构成:

选择符(selector),属性(properties)和属性的取值(value)。
语法:selector {property:value} (选择符 {属性:值})

1、说明

选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:例子:body {color:black},此例的效果是使页面中的文字为黑色。如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:例子:p {font-family: "sans serif"} (定义段落字体为sans serif)如果需要对一个选择符指定多个属性时,使用分号将所有的属性和值分开:例子:p {text-align:center;color: red} (段落居中排列;并且段落中的文字为红色)

2、选择符组

可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:h1, h2, h3, h4, h5, h6 { color: green } (这个组里包括所有的标题元素,每个标题元素的文字都为绿色)p, table{ font-size:9pt } (段落和表格里的文字尺寸为9号字)
效果完全等效于:
p { font-size:9pt }
table { font-size:9pt }

3、类选择符

用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:

p.right {text-align: right}
p.center {text-align:center}

然后用不在不同的段落里,只要在HTML标记里加入你定义的class参数:
这个段落向右对齐的
这个段落是居中排列的

类选择符还有一种用法,在选择符中省略HTML标记名,CSS这样可以把几个不同的元素定义成相同的样式:
center {text-align: center} (定义.center的类选择符为文字居中排列)这样的类可以被应用到任何元素上。下面使h1元素(标题1)和p元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:

这个标题是居中排列的
这个段落也是居中排列的

这种省略HTML标记的类选择符是经后最常用的CSS方法,使用这种方法,可以很方便的在任意元素上套用预先定义好的类样式。

4、ID选择符

在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代:这个段落向右对齐定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同,定义ID选择符的属性也有两种方法。下面这个例子,ID属性将匹配所有id="intro"的元素:

#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
} (字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明)

下面这个例子,ID属性只匹配id="intro"的段落元素:

p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

ID选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。

CSS
CSS
5、包含选择符

可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,例如:

table a
{
font-size:12px
}

在表格内的链接改变了样式,文字大小为12象素,而表格外的链接的文字仍为默认大小。

6、样式表的层叠性
  
层叠性就是继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值,有时会把很多层嵌套的样式叠加在一起,除非另外更改。例如在DIV标记中嵌套P标记:

div { color: red; font-size:9pt}

这个段落的文字为红色9号字(P元素里的内容会继承DIV定义的属性)
  
有些情况下内部选择符不继承周围选择符的值,但理论上这些都是特殊的。例如,上边界属性值是不会继承的,直觉上,一个段落不会同文档BODY一样的上边界值。另外,当样式表继承遇到冲突时,总是以最后定义的样式为准。如果上例中定义了P的颜色

div { color: red; font-size:9pt}
p {color: blue}

CSS
CSS
这个段落的文字为蓝色9号字。段落里的文字大小为9号字是继承div属性的,而color属性则依照最后定义的。不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级。ID选择符,类选择符和HTML标记选择符,因为ID选择符是最后加上元素上的,所以优先级最高,其次是类选择符。如果想超越这三者之间的关系,可以用!important提升样式表的优先权,例如:
p { color:#FF0000!important }
blue { color:#0000FF}
#id1 { color:#FFFF00}

同时对页面中的一个段落加上这三种样式,它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important,则依照优先权最高的ID选择符为黄色文字。
  
7、注释

在CSS中插入注释来说明你代码的意思,注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中,注释是不显示的。CSS注释以"/*" 开头,以"*/" 结尾,如下:

/* 定义段落样式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial /* 字体为arial */
}

CSS
CSS

css可以用任何写文本的工具进行开发,如文本工具,dreamweaver开发。css也是一种语言,这种语言要和html或者xhtml语言相结合才起作用,css简单来说就是用来美化网页用的,用css语言来控制网页的外观举个例子xhtml部分:主页、留言、论坛,此时在页面上的表达形式是一个竖向列表,这样不够美观,可以css来改善这个列表为一个横向导航条和超链接:

css部分:
ul{list-style:none;margin:0px;padding:0px}
ul li{margin:0px;padding:0px;float:left;}
ul li a{display:block;width:100px;height:30px;background:#efefef;color:#333;text-decoration:none;text-align:center}
ul li a:hover{background:#333;color:#fff;}

添加上css后,这个列表变成横向的导航条了,超级链接是淡色背景,灰色字体,没有下划线,高度是30像素,宽度是100像素当鼠标经过这个超级链接时候,变成灰色背景,白色字体在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。

它的作用可以达到:

(1)在几乎所有的浏览器上都可以使用。

(2)以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。

(3)使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。

(4)你可以轻松地控制页面的布局 。

(5)你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。

没有使用CSS前是如何控制字体的颜色和大小以及所使用的字体的?一般使用HTML标签来实现,代码非常烦琐。很难想象,如果在一个页面里需要频繁地更替字体的颜色大小,最终生成的HTML代码的长度一定臃肿不堪。CSS就是为了简化这样的工作诞生的,当然其功能决非这么简单。CSS是通过对页面结构的风格控制的思想,控制整个页面的风格的。式样单放在页面中,通过浏览器的解释执行,是完全的文本,任何懂得HTML的人都可以掌握,非常的容易。甚至对一些非常老的浏览器,也不会产生页面混乱的现象。CSS的一大优点是它的图片传输速度比较完全的HTML网页要快一点。

页面布局编辑本段回目录

CSS
CSS
CSS具有两面性。就像它在格式化文本、导航栏、图片以及其他小小的网页方面很棒一样,当你准备好布局完整的网页时,它真正可怕的一面也展现出来了。

CSS布局有两种风格——绝对定位和浮动。绝对定位让你把一个元素以像素级的精确性定位在网页的任何位置——或者理论上是这样。这种整体控制令人兴奋,就如你将在下一章中所看到的,但是实际上很难实现。这就是大量网页使用基于浮动的布局的原因,也是本章的主题。

CSS布局如何进行(How CSS Layout Works)

HTML的局限性迫使设计师们去开发更聪明的方式来使他们的网页更美观。过去最常用的工具是[table]标签,它本是用来创建电子数据表——比如由数据行和列组成的信息显示表。但是设计师们却用HTML的表格来创建一种用来组织网页内容的脚手架。可是由于[table]标签本来不是要用于布局的,因此设计师们不得不经常以各种不寻常的方式来使用这个标签——比如把一个表格放在另一个表格的单元里面——仅仅为了得到他们想要的效果。这种方法的工作量很大,增加了大量额外的HTML代码,并使得后面要修改设计很难。

在CSS出现之前,那就是网页设计师们所拥有的一切办法。如果你已经习惯于使用[table]标签,那么当你开始使用CSS进行布局时,必须发展一种新的思维。首先,忘掉行和列(运用表格时的一种重要的观念)。没有列跨度、行跨度和格子状的表格结构在CSS中是找不到的。然而,你可以把一个标签当成一个表格单元。有了表格单元,标签就是把你要的内容定位在网页区域的一个逻辑位置。此外,如你所见,CSS设计经常把一个div嵌套在另一个div里面,就像你把表格嵌套在表格里面来获得特定的效果一样——但是,幸运的是,CSS方法只用少得多的HTML代码。

标签功能编辑本段回目录

CSS
CSS
无论使用表格还是CSS,网页布局都是把大块的内容放进网页的不同区域里面。有了CSS,最常用来组织内容的元素就是标签。如第18页所述,标签是没有固有格式化属性的一个HTML元素(除了浏览器把这个标签当成前后有换行的块之外);反之,它被用来标识元素的一个逻辑组合或者网页中的一个分区。

将代表性地把一大块属于一起的HTML包围在一个里面。图11-1中包含logo和导航栏的元素占据了网页顶部,因此用一个标签把它们包围起来很有意义。至少,你要给网页的所有主要区域包含标签,例如横幅、主要内容区域、工具条、页脚,等等。但是它也可能把一个或者更多的div包在一个里面。一种最常用的方法就是把标签里面的HTML包在一个里面。然后可以通过把CSS应用到包装,设置基础的页面属性。你可以给网页内容设定一个整体的宽度,设置左边距和右边距,或者把所有网页内容在屏幕的中间居中。(在第313页的教程中,你有机会用到一个包装。)

一旦已经把标签放在了适当的位置上,再给每个标签添加一个类或者ID,变成你分别对每个定义样式的句柄。对于只出现一次和形成网页的基本构建块的网页部位,设计师们通常使用一个ID。一个网页横幅区域的标签看起来可能像这样。你可以对一个ID每页只使用一次,因此当有一个多次显示的元素时,就用一个类代替。如果你有几个定位照片和照片说明的div时,可以创建一个样式像这样。

有了类似这些的样式,就可以定位各种各样的网页元素了。利用CSS的float属性,你可以定位不同的内容块给一张网页的左边或者右边(或者一个包含块比如另一个的左边或者右边)。

相关词条编辑本段回目录

参考资料编辑本段回目录

→如果您认为本词条还有待完善,请 编辑词条

词条内容仅供参考,如果您需要解决具体问题
(尤其在法律、医学等领域),建议您咨询相关领域专业人士。
0

标签: CSS

收藏到: Favorites  

同义词: 暂无同义词

关于本词条的评论 (共0条)发表评论>>

对词条发表评论

评论长度最大为200个字符。