第7部分CSS基础知识_第1页
第7部分CSS基础知识_第2页
第7部分CSS基础知识_第3页
第7部分CSS基础知识_第4页
第7部分CSS基础知识_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

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

文档简介

第7部分CSS基础知识7.1样式表的概念

7.2CSS的特点

7.3CSS的类型

7.4CSS的基本写法及引入

17.1样式表的基本概念CSS的全称为Cascadingstylesheets，是W3C在1996年提出的一个定义HTML的级联/层叠样式表，很快就成为一个被广泛采纳的标准。到1998年，W3C在原有草案的基础上进行了扩展，建立了CSS2规范，它不仅包括了原有的表现形式与标准，还有许多增强功能。元素：指表示文档格式的一个模块，包括一个开始标签、一个结束标签和包含在这两个标签里的所有内容。属性：在HTML文档中属性是指元素某方面的特性。规则：“属性:值”对的集合，用来控制网页元素的显示方式。27.2CSS的特点简化了网页格式设计，增强了网页的可维护性。加强了网页的表现力，更多的效果扩展了表现形式。增强了网站格式的一致性，降低网站开发与维护工作量。允许作者独立控制文档中所有标签的显示形式。37.3CSS的类型7.3.1CSS的类型7.3.2样式优先权原则

47.3.1CSS的类型内联样式：是给某个元素设定具体的样式规则。它在元素的开始标签内写入具体的样式规则(写法参见下一节)，作用范围仅限于本元素。文档级样式：是将所有样式规则都罗列在HTML文档的头部(<head>和</head>之间)，其作用范围是整个文档。外部样式：是将所有样式规则整合成一个独立的文档(.css文件)，作用范围是所有引用或链接它的HTML文档。本节目录57.3.2样式优先权原则

当多个样式表对某元素的规则定义发生冲突时，浏览器会按如下优先权原则进行处理：

若在同一个类型的样式表中发生冲突，那么按最后定义的样式来显示。若在不同类型的样式表中发生冲突，那么按照内联样式表、文档级样式表、外部样式表从高到低的优先权顺序显示。本节目录67.4CSS的基本写法及引入

7.4.1规则的写法

7.4.1.1基本写法

7.4.1.2多个选择符7.4.1.3规则的引用7.4.1.4样式类7.4.2样式表的引入7.4.2.1内联样式表7.4.2.2文档级样式表7.4.2.3外部样式表77.4.1.1基本写法

样式规则的一般格式：样式符{属性1:值1;属性2:值2;…}一条规则包括一个选择符(样式符)及其声明，放在“{}”中的“属性:值”对称之为声明，各“属性:值”对之间用“;”分隔。基本写法中的选择符是HTML标签名，如p、body、hr等。如规则p{color:red;font-size:20pt;}，其中p是选择符，color:red、font-size:20pt是属性:值对，本规则表示所有<p>标签中的文字颜色为红色、大小为20磅。本节目录87.4.1.2多个选择符

对大量标签作重复性设定时，如将h1~h6的6级标题都设为红色时，可以分条书写规则如下： h1{color:red;} h2{color:red;} … h6{color:red;}多个选择符的分组写法：多个选择符用逗号分隔，后跟声明部分，上面的例子就可以书写为：

h1,h2,h3,h4,h5,h6{color:red;}

本节目录97.4.1.3规则的引用

对于已定义了规则的标签，在HTML文档的正文部分不需要作任何改动，例如，对于上一小节的例子，可直接在正文部分添加“<h2>二号标题</h2>”，这和以前的使用没有任何区别。对于后面介绍的样式类/ID规则的引用，只需在标签内添加少量语句即可。本节目录107.4.1.4样式类

常规类选择符：规则的选择符是“标签名.类名”，如p.red{color:red}

定义了一个p的名叫red的类。在正文中引用时要在标签中通过类属性指定类名(class=类名)，如

<pclass=red>正文内容</p>通用类选择符：规则的定义和常规类相似，只是去掉了标签名，比如.red{color:red}。引用时和常规类的方法一样。ID选择符：规则的定义是把通用类定义中的“.”改为“#”，如#red{color:red}，引用时在标签中使用id属性指定id名，如

<pid=red>正文内容</p>

本节目录？11问题与解答Q1：通用类选择符、常规类选择符、ID选择符的规则冲突时，优先权如何确定？A1：低高Q2：类/ID选择符、标签选择符的规则冲突时，优先权又如何确定？A2：高低本节目录127.4.2.1内联样式表

内联样式表：在标签中包含style属性及其值，中间用“=”连接，值是一个规则的简写，它省略了规则的选择符和“{}”，如：

<h2style="color:red;font-style:italic;">欢迎光临</h2>本节目录137.4.2.2文档级样式表文档级样式表：在网页的<head>和</head>之间添加<style>和</style>标签，在<style>标签中指定属性type=“text/css”，将规则置于这两个标签之间，如：<head><styletype="text/css">h2{color:red;font-style:italic;}</style></head>实例本节目录14实例<html><head><title></title><styletype="text/css">h2{color:red;font-style:italic;}</style></head><body><h2>欢迎光临</h2></body></html>本节目录15效果图本节目录167.4.2.3外部样式表外部样式表的使用链接外部样式表的方法：在文档的<head>与</head>标签之间使用<link>标签，并指定该标签的rel属性、type属性、href属性的值，如 <linkrel="stylesheet"type="text/css

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论