代码:
body {
font-family: sans-serif;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
em {
font-family: serif;
}
p.greentea {
color: green;
}
p.blueberry {
color: purple;
}
p.raspberry {
color: blue;
}
CSS设计
CSS里面的每个语句包括一个场所(就像卧室),一个属性(就像窗帘或地毯)和一个提供给属性的样式(就如蓝色,或者一寸的瓷砖)。
使用CSS设计XHTML
p {
background-color:red;
}
整个过程为规则
1. 选择你要添加样式的元素 (场所) p元素
2. 指定所添加样式的属性 (属性)background-color 属性
3. 在属性和它的值之间有一个冒号。red值前添加冒号
4. 最后添加一个分号。
5. 所有样式置于大括号内。
可以在每个CSS规则里添加若干属性和值。
p {
background-color: red;
border:1px solid gray;
}
为什么需要CSS
为什么要用另一种语言定义这些样式,而不是XHTML呢,既然我们用XHTML编写元素,那为什么不直接用XHTML写样式呢?
CSS比XHTML更合适指定样式的信息。使用一个小的CSS部件,就能对XHTML的设计产生明显的效果。你还会发现CSS适合于处理多页面网页的样式。
引入CSS
在XHTML中引入CSS
<style type="text/css">
</style>
在<head>
元素里添加样式开始和结束标记。
在标记中添加CSS规则
若想为多一个元素写统一个规则,只需要选择符之间加逗号,如h1, h2。
给一个元素写多个规则的原则:
大体上,试着把元素之间共有的样式组合在一起,就如我们对<h1>
和<h2>
所做的那样,而把特定于一个元素的样式写在另一个规则里面,如给主标题添加下划线样式。
Q&A:
为什么不把每个元素分开设计?
如果把共有的样式结合在一起,如果要改动,只需要修改一个规则。如果把它们拆开,那你就不得不修改每一个规则,这样反而容易出错。为什么不用已有的下划线样式,而用底部边框的方式加下划线
显示效果有区别,如果是底部边框,那么标题下的线将延伸到网页边沿,而下划线样式只在文本下方显示
下划线样式:属性 text-decoration 值underline。
选择符工作方式
CSS允许定义各种选择符来决定你的样式使用与哪些元素。
以页面XHTML的结构图为切入点。
提取XHTML中的CSS规则到单独的CSS样式表文件
在XHTML页面中引入外部样式表
<link rel="stylesheet" type="text/css" href="lounge.css">
link 使用link元素来链接外部信息
type=”text/css” 信息的类型是”text/css”也就是一个CSS样式表。
rel 指明XHTML文件和要链接的东西之间的关系。要链接到一个样式表,设置属性值为”stylesheet”
href 定位样式表,可以使用相对链接,也可以使用完整的URL
不再需要<style>
元素了,删除掉
<link>
是一个空元素
了解继承
当像”p”选择符添加font-family属性时,存在与<p>
元素中的元素的字体也受到影响。
<p>
中的元素从<p>
元素继承了font-family样式
元素从它的父母那儿继承样式(不是所有样式都可以被继承,只是一部分,如字体)。
<a>
,<em>
元素继承了font-family样式,而<p>
元素是它们的父亲。
通过XHTML树状结构了解继承如何起作用。将字体属性上移到body。
继承的覆盖
在子元素中提供一个具体的规则来覆盖它的继承属性。
例子:
font-family属性上移到了body从而设置了整个网页的字体。
但如果你不想子所有的元素中都使用sans-serif字体呢?比如,想在<em>
元素中使用serif字体。
那就为<em>
元素提供一个具体的规则来覆盖它继承的属性。
在CSS里,被应用的规则总是最具体的。因此,如果<body>
元素由一个规则,<em>
元素也有一个更具体的规则,那么浏览器一般会执行更加具体的规则。
那些CSS属性可被继承,哪些不能被继承!
大体上,
影响文本外观的样式:
字体颜色(颜色属性)
字体
还有其他和字体有关的属性:
字体大小
字体宽度
字体样式
都可以被继承
其他的属性(如边框)不被继承
很多情况下你可以根据自己的理解(或者验证一下),随着对各种属性的作用越来越熟悉,就能掌握这方面的知识。
注释
只需要在首尾分别添加/* 和 */
注意,一个注释可以跨越多行。你可以在CSS周围添加注释、而浏览器将忽略它。
类
比喻成俱乐部,如果加入了这个俱乐部,就可以获得相应的权利和责任。
<p class="greentea">
<img src="../images/green.jpg" alt="Green Tea Cooler" />
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>
要把元素添加到一个类中,只需添加一个带有类名的“class”属性。
类的选择符
p.greentea {
color: green;
}
首先是P选择符
然后用一个”.”来指定一个类
最后是类的名称
p.greentea
这个选择符选择绿茶类里的所有段落
- 想要对所有
<blockquote>
进行相同的操作
blockquote.greentea, p.greentea {
color: green;
}
只需要另一个选择符来处理绿茶类里的<blockquote>
现在这个规则将适用于绿茶类里的<p>
元素和<blockquote>
元素。
在XHTML里,修改
<blockquote class="greentea">
- 想让greentea类里的所有元素拥有同一样式,
.greentea {
color: green;
}
省略所有的元素名称,而用一个句点并且后接一个类名,那么这个规则将会使用于该类内的所有成员。
一个元素可以加入多个类
定义一个属于greentea、raspberry、blueberry类的<p>
元素
<p class="greentea raspberry blueberry">
将每个类名赋给”class”属性值,类名之间用一个空格隔开。顺序无关紧要。
如果想让一个元素拥有不同类中定义的样式,可以让它同时加入多个类。
比如现在的情形,与商品类关联的<h1>
元素都有一个特定样式,但不是所有的产品都同时降价销售。在另一个类中设置了”specials”颜色,就可以很容易地把降价销售的商品添加到”specials”类中,使它们拥有你想要的红色。
样式应用的最快捷最小巧手册
如果一个元素属于多个类,而这些类定义的是相同的属性,那么那个类定义的属性会被应用呢???
首先,是否有选择符选择你的元素
假设你想知道一个元素的font-family属性值,你首先要核实的是:在你的CSS文件里是否有选择符选择你的元素?如果有,确定它有font-family属性和值,而这值就是用来修饰你的元素的。
那么继承呢?
如果没有选择符与你的元素匹配,那么你就得依赖继承了。观察该元素的父母,父母的父母,依次上推,直到你找到被定义的属性。如果你找到了,那就是你要找的值。 还是没有找到?那么使用默认值。 如果你的元素没有从你的任何祖先那里继承属性值,那么你将使用浏览器定义的默认值。事实上这种情况比我们现在描述得要复杂。
如果有多个选择符选择一个元素呢?
<p class="greentea raspberry blueberry">
多个选择符匹配一个元素并且都定义了同一属性,称为冲突。 如果一个规则比其他的更具体,那它将胜出。 确定一个选择符的具体性。
是否还没有一个明显的胜出者?
如果你让一个元素值属于greentea类,那么将有一个明显的胜出:p.greentea选择符是最具体的,因此文本将会是绿色。 但如果你让一个元素属于所有的三个类:greentea, raspberry和blueberry。那么p.greentea、p.raspberry和p.blueberry都会选择这个元素,并且它们具有相同的具体性。现在该怎么办呢,选择CSS文件里最靠后的规则。 如果因为两个选择符具有相同的具体性而无法解决冲突。可以使用你样式表里的规则排序来解决冲突。也就是,使用CSS文件里最靠近(最接近底部)的规则。而在上面的例子中将选择p.blueberry规则。
如果你的CSS有错误,通常错误后面的所有规则都会被忽略。因此,要通过做这个练习,养成检错的习惯。
CSS校验器
http://jigsaw.w3.org/css-validator/
CSS属性大杂烩
color 用来设置文本元素的字体颜色。
font-weight 这个属性用来控制文本的粗细,用它把文字加粗。
left 用它告诉元素如何放置它的左侧。
line-height 这个属性用来设置文本元素的行间距。
top 控制元素顶部的位置。
letter-spacing 这个属性用来设置字母之间的间距。
background-color 这个属性用来控制元素的背景颜色。
border 这个属性用来在元素周围加边框,可以设置成实心边框,虚线边框。
margin 如果想在元素的边缘和内容之间有一些空间。就用边界。
font-size 把文字变大或变小。
text-align 用这个属性让文本左对齐,右对齐或居中。
font-style 用这个属性得到斜体文本
list-style 这个属性用来设置列表项的样式。
background-image 用这个属性把一个图像放到元素后面。
要点
CSS中简单的表达式,称为规则。
每个规则为选定的XHTML元素提供样式。
一个典型的规则包括一个选择符、若干属性和属性值。
选择符指定对哪些元素应用规则。
每个属性声明以一个分号结束。
一个规则里的所有属性和属性值包含在括号{}之间。
你可以用元素名作为选择符来选择任意的元素。
你可以一次选择多个元素,只需要逗号把那些元素名隔开就可以了。
在HTML中引入一个样式的最简单的方法使用
<style>
标记。你应当给XHTML和复杂的站点链接一个外部样式表。
<link>
元素用来引入一个外部样式表。许多属性可以被继承。举个例子,如果给
<body>
元素设置一个可被继承的属性,那么<body>
的所有子孙元素将继承这个属性。你可以给你要修改的元素创建一个更具体的规则,来覆盖继承的属性。
用class 属性将元素加入到一个类中。
在元素名和类名”.”来选择类里的某个元素。
用”.classname”来选择类里的所有元素。
一个元素可以属于多个类,只需要在class属性里放置许多类名,并用空格把它们隔开。
在http://jigsaw.w3.org/css-validator上,你可以用W3C验证器验证你的CSS。
整理自Head First HTML