第一章 CSS样式表基础Word下载.docx
《第一章 CSS样式表基础Word下载.docx》由会员分享，可在线阅读，更多相关《第一章 CSS样式表基础Word下载.docx（18页珍藏版）》请在冰点文库上搜索。
图1-3HTML树形结构
CSS样式对内容控制能力的基础就在于图中元素的继承关系，可以发现每个元素都有一个“父”级元素或是“子”级元素，也可能“子”级和“父”级元素都有，并且“子”级元素又会继承“父”级元素的样式。
实例1.html。
<
html>
head>
title>
继承<
/title>
styletype="
text/css"
>
body
{
font-family:
"
隶书"
;
font-size:
105px
}
p
25px
/style>
p>
查看该文字的字体<
/p>
/body>
/html>
在1.html代码中，body{font-family:
105px}定义了网页主体内容body的字体为隶书，字号为105像素；
p{font-size:
25px}定义了段落p的字号为25像素，字体为默认字体（宋体）。
执行结果浏览器显示的字体为25像素大小的隶书，段落p的字体是继承了body所定义字体，显示为“隶书”，而字号是25像素，说明子级元素在继承父级元素属性时，仅继承的是本身没有定义的属性。
网页效果如图1-4所示。
图1-4继承代码效果图
2.1.2层叠性
同一个HTML文件引用了多个样式表文件时，浏览器会按照样式定义的先后层次来应用样式，如果不考虑样式的优先级，一般都遵守“最近优先原则”。
实例2.html，分别定义段落字体颜色的代码，该段文字应用的是后定义的样式规则，即字体显示为“蓝色”。
层叠性<
color:
red;
blue;
body>
查看该文字的字体颜色<
网页效果如图1-5所示。
图1-5使用CSS的网页效果
3CSS的使用
3.1CSS的基本语法
CSS语法包括三部分：
选择符，样式属性和属性值。
selector{property:
value;
property:
value……property:
value}
✓selector代表选择符，property代表属性，value代表属性值。
✓选择符包括多种形式，所有的HTML标记都可以作为选择符，如body、p、table等都是选择符。
但在利用CSS的语法给它们定义属性和值时，其中属性和值要用冒号隔开。
如：
body{color:
red},页面文字是红色。
✓如果属性的值由多个单词组成，并且单词间有空格，那么必须给值加上引号，如字体的名称经常是几个单词的组合。
p{font-family:
CourieNew"
}，定义段落字体为CourieNew。
✓如果需要对一个选择符指定多个属性时，用分号将属性分开。
p{text-align:
center;
calibri}，定义段落居中排列，并且段落中的文字为红色，字体为calibri。
为了提高代码的可读性，也可以分开写：
text-align:
calibri
✓相同属性和值的选择符组合起来称为选择符组。
如果需要给选择符组定义属性和值，只要用逗号将选择符分开即可，这样可以减少重复定义样式。
p,table{font-size:
10pt}，定义段落和表格里文字的尺寸大小为10号字。
其效果完全等效于：
10pt}
table{font-size:
★
3.2CSS选择符类型
3.2.1类选择符
用类选择符可以把相同的元素分类定义成不同的样式。
在定义类选择符时，在自定义类名称的前面加一个句点（.）。
类选择符语法：
标记名.类名{样式属性:
取值;
样式属性:
…}
例如，要设置两个不同文字颜色的段落，一个为红色，一个为蓝色，可以利用如下代码预定义两个类：
p.redclass{color:
red}
p.blueclass{color:
blue}
预定义了段落的两个类选择符，一个是文字为红色，一个是文字为蓝色。
定义了段落选择符p的redclass和blueclass两个类，即redclass和blueclass称为类选择符。
其中类的名称可以是任意英文字母或是字母开头的数字组合。
要注意的是，这里的p是可以省略的。
而且在实际应用中，这种省略HTML标记的类选择符是最常用的CSS方法，因为使用这种方法定义的类选择符没有适用范围的限制。
而不省略HTML标记的类选择符，其适用范围仅限于该标记所包含的内容。
例如下面是省略了HTML标记的类选择符：
.redclass{color:
.blueclass{color:
要在不同的段落里应用这些样式，只要在HTML标记里加入已经定义的class参数即可。
如下应用了刚才定义的两个类选择符：
pclass=redclass>
或者是<
pclass=blueclass>
3.2.2id选择符
在HTML文档中，需要唯一标识一个元素时，就会赋予它一个id标识，以便在对整个文档进行处理时能够很快地找到这个元素。
而id选择符就是用来对这个单一元素定义单独的样式。
其定义方法与类选择符大同小异，只需要把句点（.）改为井号（#），而调用时需要把class改为id。
id选择符语法：
标记名#标识名{样式属性:
如果要在页面中定义一个id为salary的元素，并要设置这个元素为红色，那么需要代码：
#salary
red
pid="
salary"
段落p中所有id为salary的元素均显示为红色。
3.2.3包含选择符
包含选择符是对某种元素包含关系（如元素1里包含元素2）定义的样式表。
这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。
tableb{font-size:
11px}
说明表格b内的字号为11像素，对表格外的字号没有影响。
3.2.4伪类
伪类不属于选择符，它是让页面呈现丰富表现力的特殊属性。
之所以称为“伪”，是因为它指定的对象在文档中并不存在，它们指定的是元素的某种状态。
应用最为广泛的伪类是链接的4个状态——未链接状态（a:
link）、已访问链接状态（a:
visited）、鼠标指针悬停在链接上的状态（a:
hover）以及被激活（在鼠标单击与释放之间发生的事件）的链接状态（a:
active）。
在HTML页面内，使用<
a>
来标识链接元素，而并没有设置4个状态的代码，但是可以通过设置链接的伪类来使其呈现这些状态。
选择符和伪类之间用英文分号隔开。
3.3选择符的优先级
在应用选择符的过程中，可能会遇到同一个元素由不同选择符定义的情况，这时候就要考虑到选择符的优先级。
通常使用的选择符包括id选择符、类选择符、包含选择符、HTML标记选择符等。
因为id选择符是最后被加到元素上的，所以优先级最高，其次是类选择符。
!
important语法主要用来提升样式规则的应用优先级。
只要使用了!
important语法声明，浏览器就会优先选择它声明的样式来显示。
所以若想打破已定义的优先级顺序，可以使用!
important声明。
p{color:
red!
important}
#id1{color:
yellow}
使用了!
important定义了段落p的字体颜色为红色。
使用类选择符blueclass定义了段落字体颜色为蓝色。
使用id1选择符定义段落字体为黄色。
实例3.html。
选择符的优先级<
pclass=blueclassid=id1>
网页效果如图1-6所示。
图1-6选择符的优先级效果图
同时对页面的一个段落加上三种样式，如果去掉!
important，则会依照优先级最高的id选择符为黄色字体显示。
实例4.html。
图1-7使用!
important声明
同时对页面的一个段落加上三种样式，最后段落依照被!
important声明的HTML标记选择符样式为红色字体显示。
4插入CSS样式表
4.1链入外部样式表
链入外部样式表要先把样式表保存为一个单独的文件，然后在HTML文件中使用<
link>
标记链接，同时这个<
标记必须放到HTML代码的<
区域内。
基本语法：
…
linkrel="
stylesheet"
type="
href="
样式表文件的地址"
/head>
语法说明：
✓rel="
是指在HTML文件中使用的是外部样式表。
✓type="
指明该文件的类型是样式表文件。
✓href中的样式表文件地址，可以为绝对地址或相对地址。
✓外部样式表文件中不能含有任何HTML标签，如<
或<
style>
等。
✓CSS文件要和HTML文件一起发布到服务器上，这样在用浏览器打开网页时，浏览器会按照该HTML网页所链接的外部样式表来显示其风格。
特点：
一个外部样式表文件可以应用于多个HTML文件。
当改变这个样式表文件时，所有网页的样式都随之改变。
因此常用在制作大量相同样式的网页中，因为使用这种方法不仅能减少重复工作量，而且方便以后的修改和编辑，有利于站点的维护。
同时在浏览网页时一次性将样式表文件下载，减少了代码的重复下载。
4.2内部样式表
内部样式表是通过<
标记把样式表的内容直接定义在HTML文件的<
标记内。
--
选择符{样式属性:
……
-->
✓<
标记用来说明所要定义的样式。
说明这是一段CSS样式表代码。
--与-->
标记的加入是为了防止一些不支持CSS的浏览器，将<
与<
之间的CSS代码当成普通的字符串显示在网页中。
✓选择符也就是样式的名称，这里的选择符可以选用HTML标记的所有名称，参见3-2。
内部样式表方法就是将所有的样式表信息都列于HTML文件的头部，因此这些样式可以在整个HTML文件中调用。
如果想对网页一次性加入样式表，即可选用该方法。
4.3嵌入样式表
嵌入样式表是在HTML代码的主体，即<
标记中直接加入样式表的方法。
这种方法可以很直观地对某个元素直接定义样式。
某个HTML标记style="
…"
✓HTML标记就是页面中标记HTML元素的标记，例如body、p等。
✓style参数后面引号中的内容就相当于样式表大括号里的内容。
需要指出的是，style参数可以应用于HTML文件中的body标记，以及除了basefont、param和script之外的任意元素。
利用这种方法定义的样式，其效果只能控制某个标记。
所以比较适用于指定网页中某小段文字的显示风格，或某个元素的样式。
4.4各种方式的优先级问题
3种方法中优先级最高的是嵌入样式表方法（也叫行内样式）。
链入外部样式表和内部样式表若同时出现，浏览器会遵守“最近优先的原则”，即与内容最靠近的那个样式表决定显示格式。
5编写CSS文件
CSS文件的编写主要是为了应用到HTML文件，所以在掌握编写CSS文件的同时更要掌握CSS文件和HTML文件的结合。
根据在HTML文件中定义CSS样式表的位置特征，将CSS文件分为：
头部CSS、主体CSS和外部CSS。
5.1编写头部的CSS
要将CSS文件定义在HTML文件头部的方法为内部样式表方法。
首先在记事本中输入一段普通的HTML代码：
编写头部CSS文件<
<
h3align="
center"
/h3>
hr>
在HTML文件的头部应用内部样式表方法添加CSS。
标题h3居中显示，应用<
插入一个水平线。
在上面代码的<
之间插入如下代码。
h3
black;
35px;
黑体
}
background:
yellow;
red;
宋体
其中，<
为内部样式表的开头标记和声明文件，h3{color:
黑体}定义标题h3的样式为字体颜色为黑色，字号大小为35px，字体为黑体。
p{background:
宋体}定义段落p的样式，背景颜色为黄色，字体颜色为红色，字体为宋体。
网页保存为5.html。
图1-8应用内部样式表的显示效果
5.2编写主体的CSS
将CSS文件定义在HTML文件中主体的方法为嵌入样式表方法。
实例6.html。
编写主体CSS文件<
center>
h1style="
green;
黑体"
/h1>
/center>
pstyle="
cyan;
color:
font-size:
25;
在HTML文件的主体应用嵌入样式表方法添加CSS。
图1-9应用嵌入样式表方法的显示效果
5.3编写外部的CSS
应用链入外部样本方法在HTML文件内调用外部定义的CSS文件。
打开记事本，输入一段CSS文件的代码。
CSS文件1.css：
h3{color:
黑体}
p{background:
orange;
blue;
隶书}
建立一个新的HTML文件，并链接到上面定义的CSS文件上。
编写外部CSS文件<
<
linkrel=stylesheettype="
1.css"
在HTML文件应用链入外部样式表方法调用外部CSS。
将HTML文件保存为7.html。
网页效果如图1-10所示。
图1-10应用链入外部样式表方法的显示效果
升级会员 