《（本科）第4章 用CSS修饰HTML标签ppt课件.pptx》由会员分享，可在线阅读，更多相关《（本科）第4章 用CSS修饰HTML标签ppt课件.pptx（81页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程主讲人：第4章 用CSS修饰HTML标签第 4 章 用CSS修饰HTML标签HTMLCSS简介CSS修饰文本CSS核心基础CSS高级属性CSS修饰图像CSS修饰表格表单 目录4.14.1CSS简介4.24.2CSS的添加方法4.34.3CSS基础选择器4.44.4链接伪类选择器4.54.5CSS修饰文本 目录4.64.6CSS修饰图像4.74.7CSS修饰表格4.84.8CSS修饰表单4.94.9CSS高级属性 知识架构4.1CSS简介什么是CSSCSS发展史 知识架构4.2CSS的添加方法行内式嵌入式链入式 知识架构4.3CSS基础选择器标签选择器类选择器id选择器通配符选择器后代选择器
2、交集选择器并集选择器 知识架构4.44.54.6链接伪类选择器CSS修饰文本CSS修饰图像4.74.8CSS修饰表格CSS修饰表单 知识架构4.9CSS高级属性CSS层叠性CSS继承性CSS优先级4.1 CSS简介什么是CSS什么是什么是CSS？什么是CSSCSS英文全称为“Cascading Style Sheet”，中文译为“层叠样式表”。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。CSS的表现与HTML的内容相分离，CSS通过对页面结构的风格进行控制，进而控制整个页面的风格。CSS不仅可以静态地修饰网页，还可以
3、配合各种脚本语言动态地对网页各元素进行格式化。4.1 CSS简介CSS3是CSS技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。CSS3规范的一个新特点是被分为若干个相互独立的模块。CSS发展史4.1 CSS简介4.2 CSS的添加方法CSS样式规则CSS样式的添加方法有哪些？样式的添加方法有哪些？CSSCSS样式样式修饰的修饰的网网页大家页大家随处可见随处可见网上购物网上购物热门游戏热门游戏下拉菜单下拉菜单4.2 CSS的添加方法行内式是通过标签的style属性来设置元素的样式，其基本语法格式如下:行内式行内式内嵌式链入式 内容内容 4.2 CSS的
4、添加方法嵌入式是将CSS代码集中写在HTML文档的头部标签中，并且用标签定义，其基本语法格式如下:嵌入式行内式嵌入式链入式选择器选择器 属性属性1:属性值属性值1; 属性属性2:属性值属性值2; 属性属性3:属性值属性值3;4.2 CSS的添加方法链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签将外部样式表文件链接到HTML文档中，其基本语法格式如下:链入式行内式内嵌式链入式4.3 CSS基础选择器CSS基础选择器要想将CSS样式应用于特定的HTML标签，首先需要找到该目标标签。在CSS中，执行这一任务的样式规则部分被称为选择器，而选择器又分为标签选择器、类选择
5、器、id选择器、通配符选择器、后代选择器、交集选择器和并集选择器。4.3 CSS基础选择器标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：标签标签名名属性属性1:属性值属性值1; 属性属性2:属性值属性值2; 属性属性3:属性属性值值3; 标签选择器定义定义标签选择器通配符选择器类选择器id选择器4.3 CSS基础选择器类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：class类选择器定义定义标签选择器类选择器通配符选择器id选择器.标识符标识符属性属性1:属性值属性值1; 属性属性2:属性值属性
6、值2; 属性属性3:属性值属性值3; class=“标识符标识符”调用调用4.3 CSS基础选择器通配符选择器id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：#标识符标识符属性属性1:属性值属性值1; 属性属性2:属性值属性值2; 属性属性3:属属性值性值3; id选择器定义定义标签选择器类选择器id选择器id=“标识符标识符”调用调用4.3 CSS基础选择器案例4-1CSS选择器的使用4.3 CSS基础选择器通配符选择器通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：通配符选择器定义定义标签选择器类选择器id选择器*属
7、性属性1:属性值属性值1; 属性属性2:属性值属性值2; 属性属性3:属性值属性值3; 演示案例演示案例4-1-14.3 CSS基础选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h2#special 或 p.one。后代选择器用来选择元素或元素组的后代，其写法就是把父元素写在前面，子元素写在后面，中间用空格分隔。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开即可，例如 p em strong并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些
8、选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。如h1,h2,pcolor:red;交集选择器后代选择器并集选择器演示案例演示案例4-1-2演示案例演示案例4-1-3演示案例演示案例4-1-44.4 链接伪类选择器在CSS中通过链接伪类可以实现不同的链接状态定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。4.4 链接伪类选择器什么是伪类？什么是伪类？4.4 链接伪类选择器伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标签名、类名或id名加“：”构成。4.4 链接伪类选择器超链接标签的伪类含义a:l
9、ink CSS样式规则; 未访问时超链接的状态a:visited CSS样式规则; 访问后超链接的状态a:hover CSS样式规则; 鼠标经过、悬停时超链接的状态a:active CSS样式规则; 鼠标点击不动时超链接的状态超链接标签的伪类4.4 链接伪类选择器a:link,a:visitedcolor:#FC0;text-decoration:none; /*清除超链接默认的下划线*/margin-right:20px;a:hover color:#0F0;text-decoration:underline; /*鼠标悬停时出现下划线*/a:active color:#F00; 未访问和访
10、问后鼠标悬停鼠标点击不动例如：4.4 链接伪类选择器1、使用超链接的4种伪类时，对排列顺序是有要求的。通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。2、超链接的4种伪类状态并非全部定义，一般只需要设置3种状态即可，如link、hover和active。如果只设定是2种状态，即link、hover来定义。3、除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。4.4 链接伪类选择器案例4-2超链接伪类的使用学习HTML时，可以使用文本样式标签及其属性控制文本的显示样式，但是这种方式繁琐且不利于代码的共享和移植。为此
11、，CSS提供了相应的文本设置属性。为什么使用CSS修饰文本？4.5 CSS修饰文本4.5 CSS修饰文本font-family属性属性font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。font-family属性p font-family: “黑体”;例如将网页中所有段落文本的字体设置为黑体，可以使用如下CSS样式代码：4.5 CSS修饰文本font-size属性属性font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，具体如下表所示：font-size属性相对长度单位相对长度单位说明说明em相对于当前对象内文本的字体尺寸px
12、像素，最常用，推荐使用绝对长度单位说明in英寸cm厘米mm毫米pt点4.5 CSS修饰文本font-weight属性属性font-weight属性用于定义字体的粗细，其可用属性值如下表所示：font-weight属性值值描述描述normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。100900（100的整数倍）定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗。4.5 CSS修饰文本font-style属性属性font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
13、font-style属性normal：默认值，浏览器会显示标准的字体样式;italic：浏览器会显示斜体的字体样式;oblique：浏览器会显示倾斜体的字体样式;4.5 CSS修饰文本font-face属性属性font-face属性用于设置服务器字体。通过font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。font-face属性font-facefont-family:字体名称;src:字体路径;4.5 CSS修饰文本文本外观属性color属性用于定义文本的颜色，其取值方式有如下4种：预定义的颜色值：如red，green，blue等。十六进制：如#FF0000，#F
14、F6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。RGB代码：如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。RGBA：RGBA是CSS3新增的颜色模式，它是RGB颜色模式的延伸，该模式是在红绿蓝三原色的基础上添加了不透明度参数alpha。alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。4.5 CSS修饰文本文本外观属性text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果。其可用属性值如下：none：没有装饰（正常文本默认值）。underline：下划线。overline：上划线。lin
15、e-through：删除线。4.5 CSS修饰文本文本外观属性text-align属性用于设置文本内容水平对齐。其可用属性值如下：left：左对齐（默认值）right：右对齐center：居中对齐justify：两端对齐4.5 CSS修饰文本文本外观属性text-indent属性用于设置首行文本的缩进。其属性值可为不同单位的数值、em为字符宽度、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位，如2em为首行缩进两个字符。4.5 CSS修饰文本文本外观属性line-height属性用于设置行间距，一般称为行高，具体的计算如下图。line-height常用的属性值单位有
16、三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。4.5 CSS修饰文本文本外观属性letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。letter-spacing属性，其属性值可为不同单位的数值，允许使用负值，默认为normal。4.5 CSS修饰文本文本外观属性text-overflow属性用于标示对象内溢出的文本。选择器text-overflow:属性值;text-overflow属性的常用取值有两个： clip：修剪溢出文本，不显示省略标签“”。 ellipsis：用省略标签“”标示被修剪文本，省略标签插入的位置是最后一个字符。
17、4.5 CSS修饰文本案例4-3CSS修饰文本图像是网页中不可缺少的内容，它使网页更加的丰富多彩。本节将详细介绍CSS设置图像样式的方法。为什么使用CSS修饰图像？4.6 CSS修饰图像4.6 CSS修饰图像设置图像边框none：没有边框solid：边框为单实线dashed：边框为虚线dotted：边框为点线double：边框为双实线边框样式（border-style）属性值border-style综合属性 border-style:solid ; /*四边均为实线*/ border-style:solid dotted ; /*上下实线、左右点线*/border-style:solid do
18、tted dashed; /*上实线、左右点线、下虚线*/4.6 CSS修饰图像设置图像边框边框颜色（border-color）属性值颜色值，例：red、green#十六进制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r%,g%,b%)#十六进制色值，例：#ccc4.6 CSS修饰图像设置图像边框边框颜色（border-color）属性值border-color:#f00; /*四边均为红色*/border-color:#f00 #00f ; /*上下红色、左右蓝色*/border-color:#f00 #00f #0f0; /*上红色、左右蓝色、下绿色*/bor
19、der-color综合属性4.6 CSS修饰图像设置图像边框边框颜色（border-color）属性值CSS3在原边框颜色属性（border-color）的基础上派生了4个边框颜色属性。border-top-colorsborder-right-colorsborder-bottom-colorsborder-left-colors4.6 CSS修饰图像设置图像边框边框宽度（border-width）属性值在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。注意：常用取值单位为像素。4.6 CSS修饰图像设置图像边框边框宽度（border-wid
20、th）属性值border-width:5px; /*四边宽度均为5像素*/border-width:5px 3px ; /*上下边框5像素宽度、左右边框3像素宽度*/border-width:5px 3px 4px; /*上边框5像素宽、左右边框3像素宽度、下边框4像素宽度*/border-width综合属性4.6 CSS修饰图像案例4-4 CSS修饰图像边框4.6 CSS修饰图像设置图像的缩放使用CSS样式设置图像的缩放，可以通过width和height两个属性来实现当width和height两个属性的取值使用百分比数值时，它是相对于父元素缩放的大小。注意：常用取值单位为像素。4.6 CSS
21、修饰图像案例4-5 CSS设置图像的缩放设置背景图像4.6 CSS修饰图像在CSS中，还可以将图像作为网页元素的背景，通过background-image属性实现。background-image :设置背景图像设置背景图像例如：body background-image:url(images/img2.jpg); 设置背景图像的重复4.6 CSS修饰图像默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。background-repeat图像平铺属性平铺属性值平铺属性值含义含义repeat沿
22、水平和竖直两个方向平铺（默认值）no-repeat不平铺（图像位于元素的左上角，只显示一次）repeat-x只沿水平方向平铺repeat-y只沿垂直方向平铺4.6 CSS修饰图像案例4-6 CSS设置图像背景设置背景图像的位置4.6 CSS修饰图像background-position图像位置属性位置属性取值位置属性取值含义含义像素值像素值设置图像左上角在元素中的坐标，例如background-position:20px 20px;关键字关键字水平方向值：left、center、right。垂直方向值：top、center、bottom。百分比百分比0% 0% ：图像左上角与元素的左上角对齐。
23、50% 50%：图像50% 50%中心点与元素50% 50%的中心点对齐。20% 30%：图像20% 30%的点与元素20% 30%的点对齐。100% 100%：图像右下角与元素的右下角对齐，而不是图像充满元素。4.6 CSS修饰图像案例4-7 CSS设置图像的位置设置背景图像固定4.6 CSS修饰图像background-attachment设置背景图像固定属性固定属性取值固定属性取值含义含义scroll图像随页面元素一起滚动（默认值）。fixed图像固定在屏幕上，不随页面元素滚动。4.6 CSS修饰图像案例4-8 CSS设置图像的位置固定设置背景图像的大小4.6 CSS修饰图像backgr
24、ound-size:属性值1 属性值2;background-size属性可以轻松控制背景图像的大小。属性值属性值说说 明明像素值像素值设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto；百分比百分比以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto；cover使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景区域中。contain使背景图像的宽度高度完全适应背景区域。4.6 CSS修饰图像案例4-9 CSS设置图像的大小设置表格边框合并4.7 CSS
25、修饰表格border-collapse属性用来设置表格边框合并。属性值属性值说说 明明seperate默认值，边框会被分开，不会忽略 border-spacing 和 empty-cells 属性。collapse边框合并，会忽略 border-spacing 和 empty-cells 属性。4.7 CSS修饰表格案例4-10 CSS设置表格边框合并设置单元格边框距离4.7 CSS修饰表格border-spacing属性用来设置相邻单元格边框间的距离（仅用于“边框分离”模式）其属性值为相邻单元格边框之间的距离，除非 border-collapse 被设置为 separate，否则将忽略这个属
26、性。使用 px、cm 等单位。不允许使用负值。l 如果定义一个 length 参数，则定义的是水平和垂直间距。l 如果定义两个 length 参数，则第一个设置水平间距，而第二个设置垂直间距。4.7 CSS修饰表格案例4-11 CSS设置单元格边框距离隐藏表格中空单元格上的边框4.7 CSS修饰表格empty-cells属性用来隐藏表格中空单元格上的边框（仅用于“边框分离”模式）属性值属性值说说 明明show默认值，在空单元格周围显示边框。hide单元格无内容时隐藏单元格边框。4.7 CSS修饰表格案例4-12隐藏表格中空单元格上的边框4.8 CSS修饰表单使用CSS可以轻松地控制表单控件的样
27、式，主要体现在控制表单控件的字体、边框、背景和内边距等。本节将通过一个具体案例来讲解CSS对表单样式的控制。4.8 CSS修饰表单案例4-13CSS修饰表单4.9 CSS高级属性4.9.1 CSS层叠性所谓层叠性是指相同选择器给同一个元素设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。层叠性4.9 CSS高级属性案例4-14CSS的层叠性4.9 CSS高级属性4.9.2 CSS继承性所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。继承性4.9 CSS高级属性4.
28、9.2 CSS继承性恰当地使用继承可以简化代码，降低CSS样式的复杂性。例如下面的代码：p, h1,ul,li color: blue; 可以写成：body color: blue; 因为p，h1，ul，li标签都嵌套在body标签中，是body的子标签，所以只需要在body中设置color属性的颜色即可。4.9 CSS高级属性4.9.2 CSS继承性并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性： 边框属性 内/外边距属性背景属性定位属性布局属性元素宽高属性4.9 CSS高级属性4.9.3 CSS优先级网页制作时，对统一元素，应用不同的背景，会出现什么情况？思考backgr
29、ound-color:pink;background-color:blue;background-color:red;【结论】定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。4.9 CSS高级属性4.9.3 CSS优先级l通配符选择器权重为0l继承样式的权重为0l标签选择器权重为1l类选择器权重为10lID选择器权重为100l行内样式的权重为1000l!important命令的权重为无穷大。优先级是指当一个元素指定多个选择器，就会有优先级的产生。选择器相同，则执行层叠性。选择器不同，则根据选择器权重执行。具体如下：4.9 CSS高级属性案例4-15CSS的优先级4.9 CSS高级属性案例4-16 CSS中的 !important命令