A4CSS基础

CSS基础课程介绍目标：掌握CSS的基础应用内容：理解层叠样式表的作用及使用它的好处，了解CSS的基本结构，掌握多种选择器用法，熟练使用常用的样式属性重点：选择器、常用样式属性难点：选择器、常用样式属性CSS基础样式表概述CSS的基本结构选择器常用的样式属性CSS概述CSS全称CascadingStyleSheets，就是“层叠样式表”。它可以使页面上应用了相同层叠样式表的元素在浏览器中显示出来相同的结果，或是定义页面元素的属性。CSS层叠样式表是一组样式的集合，我们可以定义许多的类来控制页面上不同元素的样式。CSS优点表现与结构分离浏览器支持完善提高页面浏览速度继承性能优越（层叠处理）CSS基本结构样式表由定义在style标记之间很多样式规则构成，每个样式规则包括选择器（selector）和声明两个部分,声明写在大括号之间，用来定义属性和属性值。语法：•选择器{属性：值}–选择器是指从网页的所有元素中选择目标元素，声明的样式将作用于目标元素。–属性是CSS样式控制的核心，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。–值是指属性的值，形式有两种，一种是指定范围的值;另一种为数值body{background-color:#FF0000;}选择器选择器从网页的所有元素中选择目标元素，将声明的样式作用于目标元素选择器分为以下几种类型：•标签选择器•类选择器•ID选择器•群组选择器•派生选择器•伪类选择器•属性选择器•通配选择器选择器……标签选择器标签选择器是直接将HTML标签作为选择器。标签选择器一旦声明，那么网页上所有使用该标签的元素样式都是一样的。styletype=text/cssp{font-size:14px;font-family:宋体;color:#0000ff;}/style……pCSS层叠样式表/pp选择器分类之标签选择器/p选择器……类别选择器类别选择器解决个别元素的不同样式，任何类选择器都适应于所有的HTML标签。类别选择器实现了样式的灵活共享p{font-size:12px;font-family:宋体;color:#0000ff;}.red{color:#ff0000;}……h2class=redCSS层叠样式表/h2pclass=red选择器分类之类选择器/h2p没有应用类样式的效果/p选择器……ID选择器ID选择器的使用方法与类别选择器基本相同。不同之处在于ID选择器只能在HTML页面中使用一次。id属性是HTML标签的通用属性，ID选择器就是通过引用标签的的id属性值为元素指定样式。styletype=text/css#red{color:red;}#green{color:green;}/style……pid=red这个段落是红色。/ppid=green这个段落是绿色。/p选择器……群组选择器当几个元素都应用相同的样式属性时，可以将它们应用的样式属性集中定义到一个声明中，然后将对应的选择器的名称使用逗号连接，定义成一个样式规则，称为群组选择器，也称为并集选择器。styletype=text/cssp{font-size:12px;font-family:宋体;text-align:left;}h2{text-align:center;}p,h2{color:#0000ff;}/style……h2CSS层叠样式表/h2p选择器分类之群组选择器/h2选择器……派生选择器派生选择器根据文档的上下文关系来确定某个标签的样式，包括后代选择器、子选择器、相邻兄弟选择器。•后代选择器：为某个元素内包含的元素设置样式，如对h1中包含的span进行样式设置，嵌套在内层的元素就称为外层元素的后代，span就可以称为h1的后代。•子元素选择器：子元素选择器相当于后代选择器的子集，是后代选择器的一种特例，它只针对某元素的直接子元素设置其样式，缩小了控制范围。•相邻兄弟选择器：相邻兄弟选择器是指为一个元素后的相邻元素设置样式，他们两者具有相同父元素。选择器……伪类选择器伪类选择器是一种特殊选择器，主要用来为某些选择器附加特殊效果。常用来设置链接文字的显示效果。网页中的链接文字的默认效果是由IE浏览器定义的。使用CSS中的锚伪类选择器可以将网页中链接的不同状态以不同的样式效果显示。包括四种状态:未被访问状态，已被访问状态，活动状态，和鼠标悬停状态。a:link{……}/*未访问的链接*/a:visited{……}/*已访问的链接*/a:hover{……}/*鼠标移动到链接上*/a:active{……}/*选定的链接*/选择器……属性选择器属性选择器是CSS2中新引入的选择器，浏览器可以根据元素的属性和属性值选择元素应用相应的样式规则。•1、匹配属性名•例如：div[id]{……}•2、匹配属性值•例如：img[alt=’图片’][title=’标题’]{……}选择器……通配选择器通配选择器使用“*”来表示，用来对页面中所有元素设置共有样式。•例如：*{color:red;}另外通配选择器还可以和后代选择器搭配使用。•例如：h1*{font-size:16px;}选择器……选择器优先级实际应用中常常将多种选择器结合起来使用，这就涉及到一个优先级的问题。通常来说，选择器越特殊，控制的范围越小，指向越精确，它的优先级就越高。将某一个CSS样式规则转换成一个三位数，通过比较数字的大小来计算样式优先级的高低，既简单又准确。•百位数是该选择器上的id选择器的数量的总和；•十位数表示该选择器上的类选择器、伪类选择器和属性选择器的数量的总和;•个位数表示标签选择器的数量的总和;•如果两个选择器对应的数字相等，也就是具有同样的优先级，在样式表中后面的会将前面的覆盖，后边的那个起作用。常用样式属性……文本属性文本属性主要用来定义文本的外观属性名称说明color设置文本的颜色。background-color设置文本的背景颜色。letter-spacing设置字符间距。line-height设置段落中的行间距。text-align设置文本的对齐方式。text-decoration向文本添加修饰。text-indent对文本块的首行进行缩进。text-transform设置文本的大小写。常用样式属性……字体属性字体属性包括文本的字体类型、字体的大小、字体加粗和字体风格等。属性名称说明font-family定义字体类型。多个字体之间用逗号分隔。font-style定义字体风格。font-size定义字体大小。默认字体是16px。font-variant以小型大写字体或者正常字体显示文本font-weight定义字体粗细。包括100～900共9级粗度。常用样式属性……背景属性可以使用CSS背景属性设置页面的背景图片显示效果。属性名称说明background复合属性，将各种具体背景属性设置写到一个声明中background-color设置背景颜色background-image设置背景图片background-repeat定义背景图片的重复方式background-attachment定义背景图片随滚动轴的移动方式。background-position定义背景图片的起始位置。常用样式属性……列表属性列表属性可以改变HTML列表的显示方式。属性名称说明list-style复合属性。将各种具体列表属性设置写到一个声明中list-style-image将图像设置为列表项标记list-style-position设置列表项标记如何根据文本排列。list-style-type设置列表项所使用的标记类型本章小结本章主要介绍了层叠样式表的概念及它在应用中的优势。了解了CSS样式表的语法结构。重点学习了CSS的选择器，最后详细说明了CSS中几类常用样式属性。作为CSS篇的第一个章节，本章的内容是使用CSS进行网页设计的最基础、最核心的部分，因此只有深入理解并熟练运用本章内容，才能进一步的学习后续内容，从而创建出界面优美、性能优良的网页。习题2-11.分析下面的HTML代码片段，则选项中的说法错误的是（）。a.“red”为类样式b.“P”为文档样式c.“你好”和“欢迎”都应用了类样式“red”d.“你好”的文本颜色为蓝色headstyletype=”text/css”.red{color:red;font-family:”宋体”;font-size:15px;}p{color:blue;font-family:”隶书”;font-size:20px;}/style/headbodypclass=”red”你好/ph1class=”red”欢迎/h1/body习题2-22.下列在HTML中，以下关于CSS样式中文本属性的说法，错误的是（）。a.font-size用来设置文本的字体大小b.font-family用来设置文本的字体类型c.color用来设置文本的颜色d.text-align用来设置文本的字体形状3.使用CSS设置格式时,pem{color:blue}表示（）。a.p元素内的em元素为蓝色b.p元素内的元素为蓝色c.em元素内的p元素为蓝色d.em元素内的元素为蓝色4.在CSS语言中下列哪一项是text-decoration属性的允许值（）。a.transparentb.underlinec.URL地址d.repeat