HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第7章 认识CSS.pptx

第7章认识CSS;7.1CSS简介;7.2CSS样式表的设置方法;7.2.1内联样式表;【示例7-1】使用内联样式表来设置网页样式。;7.2.2内部样式表;【示例7-2】使用内部样式表来设置网页样式。;7.2.3外部样式表;【示例7-3】将示例7-2中的如下代码剪切到一个文本文件中，并命名为7.3.css。;删除示例7-2文件中的代码;7.2.4引用多个CSS外部样式表;【示例7-4】引用两个外部样式表：7.4.1.css和7.4.2.css。;7.2.5使用@import引用外部样式表;【示例7-5】使用@import引用外部样式表。;7.2.6CSS注释;无论怎么使用注释都可以，但是注释不能嵌套，例如以下注释是不正确的。

styletype=text/css

@importurl(sample08_1.css);

/*

怎么样使用注释都可以

/*

注释不能嵌套

*/

就是不能使用注释的嵌套

*/

cite{color:green}

/style

;7.3选择器;7.3.1元素选择器;【示例7-6】元素选择器的使用。;7.3.2类选择器;1．内联样式表方法;【示例7-7】内联样式表的使用。;2．类选择器方法;【示例7-8】类选择器的使用。;【示例7-9】单独使用类选择器。;7.3.3ID选择器;【示例7-10】ID选择器的使用。;7.3.4包含选择器;16 td这是另一个表格的单元格/td

17 /tr

18 /table

19 /td

20 /tr

21 /table

22 ul

23 li无序列表项一/li

24 li无序列表项二/li

25 li无序列表项三

26 ol

27 li有序列表项一/li

28 li有序列表项二/li

29 /ol

30 /li

31 /ul

32 /body

33 /html

;HTML代码的结构图如图7.11所示。;包含选择器;【示例7-11】包含选择器的使用。;20 tableborder=2

21 tr

22 td这是另一个表格的单元格/td

23 /tr

24 /table

25 /td

26 /tr

27 /table

28 ul

29 li无序列表项一/li

30 li无序列表项二/li

31 li无序列表项三

32 ol

33 li有序列表项一/li

34 li有序列表项二/li

35 /ol

36 /li

37 /ul

38 /body

39 /html

;【示例7-12】在包含选择器中包含类选择器。;7.3.5分组选择器;分组选择器;【示例7-13】分组选择器的使用。;7.3.6通用选择器;【示例7-14】通用选择器的使用。;通用选择器;【示例7-15】某个标签下的所有标签使用通用选择器。;7.3.7子选择器;【示例7-16】子选择器的使用。;【示例7-17】比较子选择器与包含选择器的区别。;7.3.8相邻选择器;【示例7-18】相邻选择器的使用。;7.3.9属性选择器;1．第一种表达方式;【示例7-19】属性选择器的使用。;2．第二种表达方式;【示例7-20】使用属性选择器的第二种表达方式来设置样式。;3．第三种表达方式;【示例7-21】使用属性选择器的第三种表达方式来设置样式。;4．第四种表达方式;【示例7-22】使用属性选择器的第四种表达方式来设置样式。;7.4伪类和伪元素;7.4.1伪类;【示例7-23】使用伪类来设置样式。;7.4.2伪元素;7.5CSS优先级;有关权重的一些规定;【示例7-25】比较