A4CSS基础.ppt

1、CSS基础,课程介绍,目标：掌握CSS的基础应用 内容：理解层叠样式表的作用及使用它的好处，了解 CSS的基本结构，掌握多种选择器用法，熟练 使用常用的样式属性 重点：选择器、常用样式属性 难点：选择器、常用样式属性,CSS基础,样式表概述 CSS的基本结构 选择器 常用的样式属性,CSS概述,CSS全称Cascading Style Sheets，就是“层叠样式表”。 它可以使页面上应用了相同层叠样式表的元素在浏览器中显示出来相同的结果，或是定义页面元素的属性。 CSS层叠样式表是一组样式的集合，我们可以定义许多的类来控制页面上不同元素的样式。,CSS优点,表现与结构分离 浏览器支持完善 提

2、高页面浏览速度 继承性能优越（层叠处理）,CSS基本结构,样式表由定义在标记之间很多样式规则构成，每个样式规则包括选择器（selector）和声明两个部分 ,声明写在大括号之间，用来定义属性和属性值 。 语法： 选择器 属性：值 选择器是指从网页的所有元素中选择目标元素，声明的样式将作用于目标元素。 属性是CSS样式控制的核心，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。 值是指属性的值，形式有两种，一种是指定范围的值;另一种为数值,body background-color:#FF0000;,选择器,选择器从网页的所有元素中选择目标元素，将声明的样式作用于目标元素 选择器分

3、为以下几种类型： 标签选择器 类选择器 ID选择器 群组选择器 派生选择器 伪类选择器 属性选择器 通配选择器,选择器标签选择器,标签选择器是直接将HTML标签作为选择器。 标签选择器一旦声明，那么网页上所有使用该标签的元素样式都是一样的。, p font-size:14px; font-family:宋体; color:#0000ff; CSS层叠样式表 选择器分类之标签选择器,选择器类别选择器,类别选择器解决个别元素的不同样式，任何类选择器都适应于所有的HTML标签。类别选择器实现了样式的灵活共享,p font-size:12px; font-family:宋体; color:#0000f

4、f; .red color:#ff0000; CSS层叠样式表 选择器分类之类选择器 没有应用类样式的效果,选择器 ID选择器,ID选择器的使用方法与类别选择器基本相同。 不同之处在于ID选择器只能在HTML页面中使用一次。 id属性是HTML标签的通用属性，ID选择器就是通过引用标签的的id属性值为元素指定样式。, #red color:red; #green color:green; 这个段落是红色。 这个段落是绿色。,选择器群组选择器,当几个元素都应用相同的样式属性时，可以将它们应用的样式属性集中定义到一个声明中，然后将对应的选择器的名称使用逗号连接，定义成一个样式规则，称为群组选择器，

5、也称为并集选择器 。, p font-size:12px; font-family:宋体; text-align:left; h2 text-align:center; p,h2 color:#0000ff; CSS层叠样式表 选择器分类之群组选择器,选择器派生选择器,派生选择器根据文档的上下文关系来确定某个标签的样式，包括后代选择器、子选择器、相邻兄弟选择器。 后代选择器：为某个元素内包含的元素设置样式，如对中包含的进行样式设置 ，嵌套在内层的元素就称为外层元素的后代，就可以称为的后代。 子元素选择器：子元素选择器相当于后代选择器的子集，是后代选择器的一种特例，它只针对某元素的直接子元素设置

6、其样式，缩小了控制范围。 相邻兄弟选择器：相邻兄弟选择器是指为一个元素后的相邻元素设置样式，他们两者具有相同父元素。,选择器伪类选择器,伪类选择器是一种特殊选择器，主要用来为某些选择器附加特殊效果。常用来设置链接文字的显示效果。 网页中的链接文字的默认效果是由IE浏览器定义的。 使用CSS中的锚伪类选择器可以将网页中链接的不同状态以不同的样式效果显示。包括四种状态: 未被访问状态，已被访问状态，活动状态，和鼠标悬停状态。,a:link /*未访问的链接*/ a:visited /*已访问的链接*/ a:hover /*鼠标移动到链接上*/ a:active /*选定的链接*/,选择器属性选择器

7、,属性选择器是CSS2中新引入的选择器，浏览器可以根据元素的属性和属性值选择元素应用相应的样式规则。 1、匹配属性名 例如：divid 2、匹配属性值 例如：imgalt=图片title=标题,选择器通配选择器,通配选择器使用“*”来表示，用来对页面中所有元素设置共有样式。 例如：*color:red; 另外通配选择器还可以和后代选择器搭配使用。 例如：h1 * font-size:16px;,选择器选择器优先级,实际应用中常常将多种选择器结合起来使用，这就涉及到一个优先级的问题。通常来说，选择器越特殊，控制的范围越小，指向越精确，它的优先级就越高。 将某一个CSS样式规则转换成一个三位数，通

8、过比较数字的大小来计算样式优先级的高低，既简单又准确。 百位数是该选择器上的id选择器的数量的总和； 十位数表示该选择器上的类选择器、伪类选择器和属性选择器的数量的总和; 个位数表示标签选择器的数量的总和; 如果两个选择器对应的数字相等，也就是具有同样的优先级，在样式表中后面的会将前面的覆盖，后边的那个起作用。,常用样式属性文本属性,文本属性主要用来定义文本的外观,常用样式属性字体属性,字体属性包括文本的字体类型、字体的大小、字体加粗和字体风格等。,常用样式属性背景属性,可以使用CSS背景属性设置页面的背景图片显示效果。,常用样式属性列表属性,列表属性可以改变HTML列表的显示方式 。,本章小

9、结,本章主要介绍了层叠样式表的概念及它在应用中的优势。了解了CSS样式表的语法结构。重点学习了CSS的选择器，最后详细说明了CSS中几类常用样式属性。作为CSS篇的第一个章节，本章的内容是使用CSS进行网页设计的最基础、最核心的部分，因此只有深入理解并熟练运用本章内容，才能进一步的学习后续内容，从而创建出界面优美、性能优良的网页。,习题2-1,1.分析下面的HTML代码片段，则选项中的说法错误的是（）。 a.“red”为类样式 b.“P”为文档样式 c.“你好”和“欢迎”都应用了类样式“red” d.“你好”的文本颜色为蓝色, .redcolor:red;font-family:”宋体”;font-size:15px; pcolor:blue;font-family:”隶书”;font-size:20px; 你好 欢迎 ,习题2-2,2.下列在HTML中，以下关于CSS样式中文本属性的说法，错误的是（）。 a.font-size用来设置文本的字体大小 b.font-family用来设置文本的字体类型 c.color用来设置文本的颜色 d.text-align用来设置文本的字体形状 3. 使用CSS设置格式时,p em