网页制作教程教学课件(共10章)第四章-CSS入门

网页制作教程第四章 CSS入门目录 CSS基础4.1 CSS选择器4.2 CSS设置丰富字体效果4.3 CSS文本外观属性4.4 CSS复合选择器4.5 阶段性案例百度搜索页面4.6学习目标1）掌握CSS样式规则，能够书写规范的CSS样式代码2）掌握字体样式及文本外观属性，能够控制页面中的文本样式3）掌握CSS复合选择器，能快捷选择页面中的元素4）理解CSS层叠性、继承性与优先级，学会高效控制网页元素4.1CSS基础4.1 CSS基础如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS，实现结构与表现的分离。下面将对CSS样式规则、引入CSS样式表、CSS选择器进行详细讲解。4.1.1 CSS样式规则选择器 声明1;声明2;语法语法语法语法h1 font-size:36px;color:red;选择器选择器声明声明属性属性值值注意注意注意注意CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;”都要写上。!4.1.2 CSS样式表引入行内式内嵌式链入式行内式也称为内联样式，是通过标记的style属性来设置元素的样式。语法格式 内容 4.1.2 CSS样式表引入行内式内嵌式链入式行内式也称为内联样式，是通过标记的style属性来设置元素的样式。举例4.1.2 CSS样式表引入行内式内嵌式链入式内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用标记定义。语法格式选择器 属性1:属性值1;属性2:属性值2;属性3:属性值3;4.1.2 CSS样式表引入行内式内嵌式链入式 p font-size:30px;color:red;举例4.1.2 CSS样式表引入行内式内嵌式链入式链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。语法格式4.1.2 CSS样式表引入行内式内嵌式链入式举例链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。4.2CSS选择器4.2 CSS选择器标签选择器ID选择器 通配符选择器标签选择器是指用HTML标记名称作为选择器，按标签名称分类，为页面中某一类标记指定统一的CSS样式。语法格式标签名属性1:属性值1;属性2:属性值2;属性3:属性值3;类选择器4.2 CSS选择器标签选择器ID选择器 通配符选择器标签选择器是指用HTML标记名称作为选择器，按标签名称分类，为页面中某一类标记指定统一的CSS样式。举 例 p font-family:微软雅黑;font-size:20px;color:red;类选择器4.2 CSS选择器标签选择器ID选择器 通配符选择器类选择器使用“.”（英文点号）进行标识，后面紧跟类名。语法格式.类名属性1:属性值1;属性2:属性值2;属性3:属性值3;类选择器4.2 CSS选择器标签选择器ID选择器 通配符选择器类选择器使用“.”（英文点号）进行标识，后面紧跟类名。举例.red font-family:微软雅黑;font-size:20px;color:red;类选择器4.2 CSS选择器标签选择器ID选择器 通配符选择器id选择器使用“#”进行标识，后面紧跟id名。语法格式#id名属性1:属性值1;属性2:属性值2;属性3:属性值3;类选择器4.2 CSS选择器标签选择器ID选择器 通配符选择器id选择器使用“#”进行标识，后面紧跟id名。举例#red font-family:微软雅黑;font-size:20px;color:red;类选择器4.2 CSS选择器标签选择器ID选择器 通配符选择器通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。语法格式*属性1:属性值1;属性2:属性值2;属性3:属性值3;类选择器4.3CSS设置丰富字体效果4.3 CSS文字样式常见CSS字体样式属性属性描述font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size指定文本的字体大小font-style指定文本的字体样式font-variant以小型大写字体或者正常字体显示文本。font-weight指定字体的粗细。4.3 CSS文字样式常见CSS字体样式属性-font-familyfont-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：p font-family:微软雅黑;4.3 CSS文字样式常见CSS字体样式属性-font-size相对长度单位说明em相对于当前对象内文本的字体尺寸px像素，最常用，推荐使用绝对长度单位说明in英寸cm厘米mm毫米pt点font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。4.3 CSS文字样式常见CSS字体样式属性-font-stylefont-style属性用于定义字体风格，如设置斜体、倾斜或正常字体。normal：默认值，浏览器会显示标准的字体样式;italic：浏览器会显示斜体的字体样式;oblique：浏览器会显示倾斜的字体样式;4.3 CSS文字样式常见CSS字体样式属性-font-variantfont-variant属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。normal：默认值，浏览器会显示标准的字体;small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写;4.3 CSS文字样式常见CSS字体样式属性-font-weightfont-weight属性用于定义字体的粗细。值描述normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。100900（100的整数倍）定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗。4.3 CSS文字样式font属性用于对字体样式进行综合设置选择器font:font-style font-variant font-weight font-size/line-height font-family;使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。4.4CSS文本外观属性4.4 CSS文字外观属性CSS文本属性可定义文本的外观。通过文本属性，可以修改文本的颜色、行高、对齐方式、字符间距、段首缩进位置等属性以及修饰文本等功能。常用的文本属性有以下几个：颜色属性：color文本水平对齐属性：text-align首行缩进属性：text-indent文本修饰属性：text-decoration字符间距属性：letter-spacing字间距属性：word-spacing行高属性：line-height4.4 CSS文字外观属性color属性用于定义文本的颜色，其取值方式有如下3种：预定义的颜色值，如red，green，blue等。十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。1.color属性4.4 CSS文字外观属性2.text-align属性在CSS代码中，使用text-align属性来设置文本水平对齐，设置语法如下：text-align:left|right|center|inherit;语法说明：text-align属性可取居左、右、中或继承父元素的水平对齐方式，默认值为居左对齐。4.4 CSS文字外观属性在CSS中使用 text-indent 属性可以设置每段文本的首行字符的缩进距离，设置语法如下：text-indent:length|百分数|inherit;语法说明：“length”表示单位为 px|pt|em的某个具体的正数或负数。正数表示向右缩进，负数表示向左缩进。注：px:像素；pt:点；em相对长度，具有可伸缩性，相对当前文本的大小，文字的默认大小为16px，1em=12pt=16px。“百分数”表示相对于父级元素宽度的百分比。text-indent属性的默认值为0。3.text-indent属性4.4 CSS文字外观属性在CSS中使用text-decoration属性可以设置文本是否显示下划线或上划线或删除线等修饰样式，设置语法如下：text-decoration:none|underline|overline|line-through|inherit;语法说明：“none”表示没有任何修饰，为默认取值。“underline”设置文本显示下划线。“overline”设置文本显示上划线。“line-through”设置文本显示删除线。“inherit”设置文本继承父元素的修饰。4.text-decoration属性4.4 CSS文字外观属性在CSS中使用使用letter-spacing属性可以增加或减小字符与字符之间的间隔，设置语法如下：letter-spacing:normal|length|inherit;语法说明：“normal”表示正常间距，取值为0，为默认取值。“length”表示以 px|em|pt 为单位的某个数值，可以为负值。为正值时，字符间距增大；为负值时，字符间距减小。“inherit”设置文本继承父元素的字符间距。5.letter-spacing属性4.4 CSS文字外观属性6.word-spacing属性在CSS中使用使用word-spacing属性可以增加或减小字与字之间的间隔，设置语法如下：word-spacing:normal|length|inherit;语法说明：word-spacing属性的各个取值的含义和letter-spacing属性的各个取值的含义完全一样。word-spacing属性只对包含两个以上单词的英文文本起作用，对汉语文本不起作用。4.4 CSS文字外观属性7.line-height属性行高（line-height）是指上下文本行的基线间的垂直距离。基线是指大部分字母所“坐落”其上的一条看不见的线。下图中两条红线就是文本基线，它们之间间垂直距离就是行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。4.5CSS复合选择器4.5.1 复合选择器 书写CSS样式表时，可以使用CSS基础选择器选中目标元素。但是在实际网站开发中，一个网页可能包含成千上万的元素，如果仅使用CSS基础选择器，不可能良好地组织页面样式。为此CSS提供了几种复合选择器，实现了更强、更方便的选择功能。4.5.1 复合选择器1.交集选择器 “交集”复合选择器由两个选择器直接连接构成；其中第一个必须是标签选择器，第二个必须是类选择器或者ID选择器；这两个选择器之间不能有空格。4.5.1 复合选择器2.后代选择器 后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就成为外层标记的后代。4.5.1 复合选择器3.子元素选择器 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器，也就是只对直接后代有影响的选择器，而对子孙以及多层的后代不会产生作用。4.5.1 复合选择器4.并集选择器 并集选择器是多个选择器通过逗号连接而成的。任何形式的选择器（包括标记选择器、class类选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。4.5.2 CSS继承性与层叠性 有一些属性，当给自己设置的时候，自己的后代都继承上了，如color、text-开头的、line-开头的、font-开头的。1.继承性 4.5.2 CSS