HTML与CSS前台页面设计课件第05章 使用CSS样式_第1页
HTML与CSS前台页面设计课件第05章 使用CSS样式_第2页
HTML与CSS前台页面设计课件第05章 使用CSS样式_第3页
HTML与CSS前台页面设计课件第05章 使用CSS样式_第4页
HTML与CSS前台页面设计课件第05章 使用CSS样式_第5页
已阅读5页，还剩16页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第五章使用CSS样式HTML与CSS前台页面设计本章要点对HTML文档应用样式的方法CSS样式代码编写规则CSS样式选择器的种类及使用第五章使用CSS样式HTML与CSS前台页面设计目录：

5.1对HTML文档应用样式

5.2CSS样式代码编写规则

5.3CSS样式选择器

5.4综合实例5.1对HTML文档应用样式1.应用样式的方法

当设计好样式之后，需要将样式应用到HTML文档中，可以用下面的三种方式，将CSS应用于HTML页面上。

（1）内联样式内联样式是将样式写在标记里面的，它只对己所在的标记起作用。内联样式表用到<style>标记。5.1对HTML文档应用样式（2）内部样式表内部样式表是写在<head></head>里面的，它只针对所在的HTML页面有效。内部样式表也用到<style>标记，写法为：<styletype="text/css"> /*样式规则*/</style>

（3）外部样式表

CSS允许将所有样式放在一个或多个以.css为结尾的外部样式表文件中。通过将外部样式表附加到HTML文档上的方法可以灵活的应用样式。附件外部样式表上有两种方法。可以链接它们，也可以导入它们。5.1对HTML文档应用样式2.应用样式的优先级所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，如果遇到不同的样式表的规则有冲突的地方，将按优先级来确定应用哪一个规则,内联样式拥有最高的优先权。（1）浏览器缺省设置（2）外部样式表（3）内部样式表（4）内联样式5.2CSS样式代码编写规则1.样式代码编写规则CSS规则由一个选择符（selector）和一个声明（declaration）构成。声明由属性（properties）和属性的取值（value）组成，声明用来设置指定选择符的样式。 selector{property:value}

---如果需要对一个选择符指定多个属性时，使用分号将所有的属性和值分开。---为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号（，）隔开。5.2CSS样式代码编写规则2.规则的注释在样式表中的规则的比较多时，可以通过注释来管理样式表。所有的注释都以斜杠和星号（/*）开始，以星号加斜杠结束（*/）。可以在复杂和重要的样式中使用，这样当以后再看以前设计的样式表时，就知道各个规则是的作用了。5.2CSS样式代码编写规则3.规则的标志注释对于阅读整个样式表很重要，但通过引入了标志的概念可以追踪单个规则，这对复杂的样式表非常有用。标志使用样式表中不常用的字符作为注释的起始，有助于结合文本编辑器的查找工具来检索规则。5.2CSS样式代码编写规则4.规则的排版缩进主要是为了保证代码的清晰可读。在实际的使用中，可以单击一次Tab键来缩进选择器，而单击两次Tab键来缩进声明和结束大括号。这样的排版规则可以使查询规则非常容易。这样做可以使得即使在样式表不断增大的情况下，仍然可以避免混乱。5.2CSS样式代码编写规则5.样式命名的通用规则（1）命名所选用的单词应选择不过于具体表示某一状态（如颜色、字号大小等）的单词，以避免当状态改变时名称失去意义。（2）样式CLASS名由以字母开头的小写字母（a-z）、数字（0-9）、下划线（_）、减号（-）组成。（3）样式ID名称由不以数字开头的小写字母（a-z）、数字（0-9）、下划线（_）组成。（4）模块、类型、状态、位置等的所使用的单词或其缩写，保持上面的顺序，尽量保持用两到三个单词说清用途。5.3CSS样式选择器1.HTML标记选择器一个HTML页面由很多不同的标记组成，CSS中的HTML标记选择器用来声明哪些标记采用哪种CSS样式。因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。

5.3CSS样式选择器2.CLASS选择器

CLASS（class）选择器是一类最常用的选择器，它用来定义HTML页面中需要特殊表现的样式。class选择器的名称可以由用户自定义，属性和值跟HTML标记选择器一样，也必须符合CSS规范，class选择器的名称前有一个圆点（.）做为前缀。如果要使用指定的class选择器，需要在相应的HTML标记中，通过class=“class选择器名字”的形式进行声明。5.3CSS样式选择器3.ID选择器

ID（id）选择器只能在HTML页面中使用一次，针对性更强。在HTML的标记中只需要用id属性，就可以调用CSS中的id选择器。id选择器的名称由用户自定义，属性和值的写法和其他标记选择器一样，但在CSS中，id选择器的名称前有一个“#”符号做为前缀。

5.3CSS样式选择器4.高级选择器（1）伪class选择器和伪元素选择器伪class选择器和伪元素选择器，可以为文档中非具体存在的结构指定样式，或者为某些元素（包括文档本身）的状态指定样式，它会根据某种条件而非文档结构应用样式。表

常用的伪类5.3CSS样式选择器（2）交集选择器交集选择器由两个选择器组成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是class选择器或者id选择器。两个选择器之间不能有空格，必须连续书写。p.classname{color:#339;

font-size:16px;

}5.3CSS样式选择器（3）后代选择器后代选择器可用来寻找特定元素或元素组的后代。后代选择器是用一个用空格符隔开的两个或更多的单一选择器组成的字符串。后代选择器是根据文档中的上下文来选取元素的。两个选择器之间用有空格隔开。divp{ color:red;}5.3CSS样式选择器（4）子选择器这个选择器与后代选择器的区别：子选择器（childselector）仅是指它的直接后代，或者可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。div>p{ color:red;}5.3CSS样式选择器（5）属性选择器属性选择器可以根据某个属性是否存在或属性的值来寻找元素，因此能够实现某些非常有意思的效果。可以认为class和id选择器其实就是属性选择器，只不过是选择了class或者id的值而已。低版本的浏览器不支持属性选择器，但当前主流的标准浏览器都很好的支持属性选择器。属性选择器的格式是元素后跟中括号，中括号内带属性，或者属性表达式。有简易属性选

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论