1、第11章 CSS语法基础,清华大学出版社,主要内容,CSS在页面风格设计中的作用,CSS的定义,CSS的语法,CSS类型,伪类与伪元素,11.1 CSS的概述,CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。 CSS能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。,11.1 CSS的概述,使用传统的HTM
2、L来表现设计方式复杂控制区域较多代码繁杂易读性差,用CSS来表现设计简单易于控制代码简单易于修改,11.1 CSS的概述,CSS的优点：（1）方便网页格式的修改，不需要逐一更新（2）便于减少网页体积（3）能使网页元素更准确的定位，轻松控制页面的布局（4）良好的适应性，几乎在所有的浏览器上都可以使用,11.1 CSS的概述,使用了css样式的网页,11.1 CSS的概述,取消了css样式的网页,11.1 CSS的概述,概述CSS的作用, 内容和样式的分离，使得网页设计趋于明了、简洁。 弥补HTML对标记属性控制的不足，如：背景图像重复的控制和标题大小的控制等。在HTML中可控制的标题仅有7级，即
3、h1h7，而利用CSS可以任意设置标题大小。 精确控制网页布局，如行间距、字间距、段落缩进和图片定位等属性。,11.1 CSS的概述,概述CSS的作用, 提高网页效率，因为多个网页同时应用一个CSS样式，即减少了代码的下载，又提高了浏览器的浏览速度和网页的更新速度。如上图中的网页，内容已定，如果CSS样式不满意，可以随便修改，丝毫不会对内容有影响，而且这个CSS样式，也可以同时用到多个网页内容上。 CSS还有好多特殊功能，如鼠标指针属性控制鼠标的形状和滤镜属性控制图片的特效等。,11.1.1 CSS基本概念,CSS（Cascading Style Sheet）即层叠样式表，简称样式表。要理解层
4、叠样式表的概念先要理解样式的概念。样式就是对网页中的元素（字体、段落、图像、列表等）属性的整体概括，即描述所有网页对象的显示形式（例如，文字的大小、字体、背景及图像的颜色、大小等都是样式）。层叠就是指当HTML文件引用多个CSS文件时，如果CSS文件之间所定义的样式发生了冲突，将依据层次的先后来处理其样式对内容的控制。,11.1.2 CSS的特性,1继承性2层叠性,11.1.2 CSS的特性继承性,html,body,head,p,h1,ul,meta,title,li,li,ul,li,li,em,em,图11-3 HTML树形结构,11.1.2 CSS的特性继承性,继承查看该文字的字体,P
5、继承了body的样式,该文字的字体为“隶书”,11.1.2 CSS的特性层叠性,当我们为同一个标签多次设置样式表的时候，这些样式表会最终层叠成一个样式表来作用于标签。例如，你在外部样式表中为p定义了如下样式： p text-align: left; 而在内部样式表中又定义了如下样式： p font-size: 24px; 那么最终网页内p标签的样式将为： p text-align: left; font-size: 24px;。,11.1.2 CSS的特性层叠性,层叠查看该文字的字体,应用了后定义的规则,该文字的字体为“隶书”,11.2 CSS的使用,11.2.1 CSS的基本语法11.2.2
6、 CSS选择符类型11.2.3 选择符的优先级,11.2.1 CSS的基本语法,CSS语法包括三部分：选择符、样式属性和属性值CSS基本语法,selector property: value; property: value ,11.2.1 CSS的基本语法,语法说明,语法中selector代表选择符，property代表属性，value代表属性值。 选择符包括多种形式，所有的HTML标记都可以作为选择符，如body、p、table等都是选择符。但在利用CSS的语法给他们定义属性和值时，属性和值要用冒号隔开。 例如：bodycolor:red 如果属性的值由多个单词组成，并且单词间有空格，那么
7、必须给值加上引号，如字体的名称经常是几个单词的组合。 例如：pfont-family:”Courier New”,11.2.1 CSS的基本语法,语法说明,如果需要对一个选择符指定多个属性时，用分号将属性分开。例如：ptext-align:center;color:red;font-family:calibri为了提高代码的可读性，上面的例子也可以分行写。ptext-align:center;color:red;font-family:calibri,11.2.1 CSS的基本语法,语法说明,相同属性和值的选择符组合起来称为选择符组。如果需要给选择符组定义属性和值，只要用逗号将选择符分开即可，
8、这样可以减少重复定义样式。例如p,tablefont-size:10pt其效果完全等效于：p font-size:10pttablefont-size:10pt,11.2.2 CSS选择符类型,1类选择符,用类选择符可以把相同的元素分类定义成不同的样式。在定义类选择符时，在自定义类名称的前面加一个句点（.）。类选择符语法：标记名.类名样式属性:取值;样式属性:取值;,11.2.2 CSS选择符类型,1类选择符,预定义了段落的两个类选择符：一个文字为红色，一个文字为蓝色,例如：要设置两个不同文字颜色的段落，一个为红色，一个为蓝色，可以利用如下代码预定义两个类：p.redcolor:redp.bl
9、uecolor:blue,11.2.2 CSS选择符类型,1类选择符,省略了HTML标记的类选择符,注意：这里的p（HTML标记）是可以省略的。 省略了HTML标记的类选择符是最常用的CSS方法，因为使用这种方法定义的类选择符没有适用范围的限制。省略了HTML标记的类选择符： .redcolor:red .bluecolor:blue,11.2.2 CSS选择符类型,1类选择符,应用了上面定义的两个类选择符,类选择符的应用方法： 在HTML标记里加入已经定义的class参数即可。例如： 或者是,11.2.2 CSS选择符类型,2id选择符,在HTML文档中，需要唯一标识一个元素时，就会赋予它一
10、个id标识，以便在对整个文档进行处理时能够很快地找到这个元素。而id选择符就是用来对这个单一元素定义单独的样式。其定义方法与类选择符大同小异，只需要把句点（.）改为井号（#），而调用时需要把class改为id。,11.2.2 CSS选择符类型,2id选择符,id选择符语法：标记名#标识名样式属性:取值;样式属性:取值;,11.2.2 CSS选择符类型,2id选择符,段落p中所有id为salary的元素均显示为红色,页面中所有id为salary的元素均显示为红色,例如：要在页面中定义一个id为salary的元素，并要设置这个元素为红色。那么要添加如下代码：#salarycolor:red或者：#
11、salarycolor:red,11.2.2 CSS选择符类型,3包含选择符,包含选择符是对某种元素包含关系（如元素1里包含元素2）定义的样式表。这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。,11.2.2 CSS选择符类型,3包含选择符,例如：table bfont-size: 11px这里只是说明表格b内的字号为11像素，对表格外的字号没有影响。,11.2.2 CSS选择符类型,4伪类,伪类不属于选择符，它是让页面呈现丰富表现力的特殊属性。之所以称为“伪”，是因为它指定的对象在文档中并不存在，它们指定的是元素的某种状态。 应用最为广泛的伪类是链接的4个状态未链接状态（a
12、:link）、已访问链接状态（a:visited）、鼠标指针悬停在链接上的状态（a:hover）以及被激活（在鼠标单击与释放之间发生的事件）的链接状态（a:active）。,11.2.2 CSS选择符类型,4伪类,伪类的语法：选择符名:伪类名称在使用伪类的时候，要对应某个其他的选择符，这个选择符可以使用id选择符或者类选择符，但通常会将伪类定义在链接内容。伪类都有固定的写法，一般格式为英文的“:”加上伪类名称。,11.2.2 CSS选择符类型, a /*设置超链接不带下划线*/ color: blue; text-decoration: none; /*文本修饰：无*/ a:hover /*鼠
13、标在超链接上方停留时，带下划线 */ color: red; text-decoration:underline; /*文本修饰：下划线*/ 我是超链接，鼠标移动过来我就显示下划线 ,11.2.2 CSS选择符类型,网页效果,设置不带下划线的超链接,当鼠标移至超链接，就显示下划线并呈红色字体。,11.2.3 选择符的优先级,在应用选择符的过程中，可能会遇到同一个元素由不同选择符定义的情况，这时候就要考虑到选择符的优先级。 通常我们使用的选择符包括id选择符，类选择符，包含选择符和HTML标记选择符等。id选择符优先级最高，其次是类选择符。,11.2.3 选择符的优先级,!important语法
14、主要用来提升样式规则的应用优先级。只要使用了!important语法声明，浏览器就会优先选择他声明的样式来显示。若想打破已定义的优先级顺序，可以使用!important声明。例如：pcolor:red !important.bluecolor:blue#id1color:yellow,优先级,11.3 插入CSS样式表,11.3.1 链入外部样式表11.3.2 内部样式表11.3.3 嵌入样式表11.3.4 导入外部样式表,11.3 插入CSS样式表,根据CSS文件的定义放置在HTML文件的位置的不同，分为头部、主体和外部。CSS文件的定义在HTML文件头部的方法：内部样式表CSS文件的定义在
15、HTML文件主体的方法：行内样式表CSS文件的定义在HTML文件外部的方法：链入外部样式表 、导入外部样式表,11.3.1 链入外部样式表,链入外部样式表要先把样式表保存为一个单独的文件，然后在HTML文件中使用标记链接，同时这个标记必须放到HTML代码的区域内基本语法：,11.3.1 链入外部样式表,语法说明, rel=stylesheet是指在HTML文件中使用的是外部样式表。 type=text/css指明该文件的类型是样式表文件。 href中的样式表文件地址，可以为绝对地址或相对地址。 外部样式表文件中不能含有任何HTML标签，如或等。 CSS文件要和HTML文件一起发布到服务器上，这
16、样在用浏览器打开网页时，浏览器会按照该HTML网页所链接的外部样式表来显示其风格。,11.3.1 链入外部样式表,特点,一个外部样式表文件可以应用于多个HTML文件。当改变这个样式表文件时，所有网页的样式都随之改变。因此常用在制作大量相同样式的网页中，因为使用这种方法不仅能减少重复工作量，而且方便以后的修改和编辑，有利于站点的维护。同时在浏览网页时一次性将样式表文件下载，减少了代码的重复下载。,11.3.2 内部样式表,内部样式表是通过标记把样式表的内容直接定义在HTML文件的标记内。基本语法,11.3.2 内部样式表,语法说明, 标记用来说明所要定义的样式。 type=text/css说明这
17、是一段CSS样式表代码。 标记的加入是为了防止一些不支持CSS的浏览器，将与之间的CSS代码当成普通的字符串显示在网页中。 选择符也就是样式的名称，这里的选择符可以选用HTML标记的所有名称。,11.3.2 内部样式表,特点,内部样式表方法就是将所有的样式表信息都列于HTML文件的头部，因此这些样式可以在整个HTML文件中调用。如果想对网页一次性加入样式表，即可选用该方法。,11.3.2 内部样式表, h2 background-color: #CCFF33; text-align: center;p font-family: System; font-size: 18px;color: #3
18、333CC; h2的样式：背景颜色为#CCFF33，居中对齐p的样式：字体为System，大小为18px，颜色为#3333CC ,11.3.2 内部样式表,网页效果,11.3.3 行内样式表,行内样式表是在HTML代码的主体，即标记中直接加入样式表的方法，这种方法可以很直观地对某个元素直接定义样式。基本语法,11.3.3 行内样式表,语法说明, HTML标记就是页面中标记HTML元素的标记，例如body、p等。 style参数后面引号中的内容就相当于样式表大括号里的内容。需要指出的是，style参数可以应用于HTML文件中的body标记，以及除了basefont、param和script之外的
19、任意元素。,11.3.3 行内样式表,特点,利用这种方法定义的样式，其效果只能控制某个标记。所以比较适用于指定网页中某小段文字的显示风格，或某个元素的样式。,11.3.3 行内样式表, 嵌入样式表 嵌入样式表 嵌入样式表,11.3.3 行内样式表,网页效果,11.3.4 导入外部样式表,导入外部样式表是指在样式表的区域内引用一个外部的样式表文件，和链入外部样式表的方法相似，但导入时需要使用import做声明。 import声明可以放到head外，也可以放到head内，但根据语法规则，一般都放在head内来使用。,11.3.4 导入外部样式表,基本语法,import url（外部样式表文件地址）
20、；,11.3.4 导入外部样式表,语法说明, Import语句后面的“；”是不可省略的。 外部样式表文件的文件扩展名必须为.css。 样式表地址可以是绝对地址，也可以是相对地址。,11.3.4 导入外部样式表,特点,在使用中，某些浏览器可能会不支持导入外部样式表的import声明。所以此方法不经常用到。,11.4 编写CSS文件,11.4.1 编写头部的CSS11.4.2 编写主体的CSS11.4.3 编写外部的CSS,11.4.1 编写头部的CSS, 编写头部CSS文件 编写头部CSS文件 在HTML文件的头部应用内部样式表方法添加CSS。,11.4.1 编写头部的CSS,在上面代码中的与之
21、间插入如下代码。, ,内部样式表的开头标记和声明文件,定义标题h3的样式：字体颜色为黑色，字号为35像素，字体为黑体,定义段落p的样式：背景颜色为黄色，字体颜色为红色，字体为宋体,内部样式表的结束标记,11.4.1 编写头部的CSS,网页效果,未使用CSS时的网页效果,使用了CSS后的网页效果,11.4.2 编写主体的CSS, 编写主体CSS文件 编写主体CSS文件 在HTML文件的主体应用嵌入样式表方法添加CSS。,定义了h1的样式：字体颜色为绿色，字号为35像素，字体为黑体。,定义了段落p的样式：背景颜色为青色，字体颜色为红色，字号为25像素，字体为隶书。,11.4.2 编写主体的CSS,
22、网页效果,11.4.3 编写外部的CSS,1应用链入外部样式表方法在HTML文件内调用外部定义的CSS文件（1）打开记事本，编写如下一段CSS文件的代码，并保存为11-4-1.css,h3 color: black;font-size:35px;font-family:黑体 pbackground:orange;color: blue; font-size:25;font-family:隶书,11.4.3 编写外部的CSS,1应用链入外部样式表方法在HTML文件内调用外部定义的CSS文件（2）建立一个新的HTML文件，并链接到上面定义的CSS文件上, 编写外部CSS文件 编写外部CSS文件 在
23、HTML文件应用链入外部样式表方法调用外部CSS。,将同一文件夹下的11-4-1.css文件链入HTML文件中。,11.4.3 编写外部的CSS,1应用链入外部样式表方法在HTML文件内调用外部定义的CSS文件网页效果,11.4.3 编写外部的CSS,2应用导入外部样式表方法在HTML文件内调用外部定义的CSS文件 （1）建立如下的HTML文件, 编写外部CSS文件 import url(11-4-2.css ); 编写外部CSS文件 在HTML文件中应用导入外部样式表方法调用外部CSS。,将同一文件夹下的11-4-2.css文件导入HTML文件中。,11.4.3 编写外部的CSS,2应用导入外部样式表方法在HTML文件内调用外部定义的CSS文件 （2）再建立单独的CSS文件：11-4-2.css,h1color:blue;font-size:30px;font-family:黑体 pbackground:pink;color:black;font-size:20;font-family:宋体,11.4.3 编写外部的CSS,2应用导入外部样式表方法在HTML文件内调用外部定义的CSS文件网页效果,
