HTML5教案第7讲认识CSS

web前端开发认识CSS（教案）教学内容及教学过程说明步骤一问题引入层叠样式表（CSS，cascadingstylesheets）又称为级联样式表，是用于控制或增强网页的外观样式，并且可以与网页内容相分离的一种标签性语言。在HBuilder中打开两个页面。一个页面使用HTML格式化；另一个页面使用CSS格式化，产生了同样的页面效果，如图4-1所示。<P>标签内的文字只能使用<font>标签进行格式化，而<font>标签不建议使用<P>标签内的文字只能使用<font>标签进行格式化，而<font>标签不建议使用CSS代码：<p>标签样式，字体大小14px，红色步骤二讲授4.4CSS选择器4.4.1元素选择器在CSS中最常见的选择器就是元素选择器，即采用HTML文档中的元素名称进行样式的规定。其特点元素自动匹配调用。例如，定义元素p的字体类型、字体大小、颜色和行高的样式，则页面中所有的p元素都会生效。元素选择器的基本语法如下。元素名{属性：属性名；……}例如：p{font-family:"宋体";font-size:14px;color:#000000;line-height:18px;}4.4.2通配符选择器通配符选择器（universalselector）是对页面中的所有HTML元素应用样式，用*表示通配符，其基本用法如下。*{margin:0px;padding:0px;}4.4.3属性选择器对带有指定属性的HTML元素设置样式，能够根据某个属性是否存在或者通过属性值来查找元素。可以为拥有指定属性的HTML元素设置样式，而不仅限于class和id属性。其基本语法如下。元素名称[元素属性]{属性名称：属性值；……}任务实例4-1：属性选择器的简单应用使用两个图像元素<img>作为参照对比，仅为其中一个图像元素设置alt属性，并使用属性选择器对其进行CSS样式设置。4.4.4ID选择器ID选择器在声明时需要在id名称前面加#号。其语法规则如下。#id名称{属性名称：属性值；……}例如，为某个段落元素<p>添加id="test"：<pid="test">这是一个段落</p>若要对其中id名为test的标签设置样式，其代码如下。#test{ color:#FF0000; text-align:center;}4.4.5类选择器类选择器可以将不同的元素定义为共同的样式。类选择器在声明时需要在前面加.号，为了和指定的元素关联使用，需要自定义一个class名称。其语法规则如下。.class名称{属性名称：属性值；……}例如，有两个不同的类别元素，一个是<p>元素，另一个是<h1>元素，它们都采用了相同的样式。<pclass="test">这是一个段落</p><h1class="test">这是一个一级标题</h1>若要对其中class名为test的标签设置样式，其代码如下。.test{ color:blue; font-size:16px;}4.4.6包含选择器和群选择器1.包含选择器例如，表示table标签内的a对象的样式，即表格内的超级链接样式，对表格外的超级链接文字无效。其代码如下。tablea{ color:red; text-decoration:none;}2.群选择符器在使用选择器时，有的元素样式是一样的，每次都为不同的选择器单独定义样式的话太烦琐，此时就可以使用群选择器集中定义样式。不同元素或类以逗号隔开。例如：h1,h2,h3,h4,h5,h6{ font-family:"黑体";}4.4.7伪类选择器伪类是指那些处在特殊状态的元素。伪类名可以单独使用，泛指所有元素，也可以和元素名称连起来使用，特指某类元素。伪类以冒号:开头，元素选择符和冒号之间不能有空格，伪类名中间也不能有空格。表4-2CSS中常见的伪类伪类名含义:active向被激活的元素添加样式:focus向拥有输入焦点的元素添加样式:hover向鼠标悬停在上方的元素添加样式:link向未被访问的链接添加样式:visited向已被访问的链接添加样式:first-child向元素添加样式，且该元素是它的父元素的第一个子元素:lang向带有指定lang属性的元素添加样式任务4.4.8伪元素选择器伪元素是指那些元素中特别的内容，与伪类不同的是，伪元素表示的是元素内部的东西，逻辑上存在，但在文档树中并不存在与之对应关联的部分。表4-3CSS中常见的伪元素伪元素名含义:first-letter向文本的第一个字母添加样式:first-line向文本的第一行添加样式:after在元素之后添加样式:before在元素之前添加样式步骤三课堂小结CSS选择器元素选择器、通配符选择器、属性选择器、id选择器、类选择器、包含选择符合和群选择符、伪类选择符。步骤四作业1.实践练习标题h1元素的文字颜色为红色，字体为黑体。2.实践练习表格中的td元素的属性选择器的应用。3.实践练习使用ID选择器设置段落文本。4.对比类选择器与ID选择器，实践练习使用这两种选择器设置段落文本。使用CSS样式，将网页内容与网页样式分离，使网页更小、下载速度更快，还可以更加方便地更新和维护网页举例、对比、启发教授CSS选择器用于指明样式对哪些元素生效其中*号表示所有对象需要将属性用方括号括起来，表示这是一个属性选择器。举例说明ID选择器是使用频率非常高的一种选择器类型，其中的ID可理解为一个标志，网页中每个ID名称只能使用一次，不可能重复。提示：类选择符可以应用在多种不同的标签中包含选择器是可以单独对某种