css样式表讲解
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS的选择器类型：
1．通用选择器
指定的样式可应用在页面里的所有元素。
例如：把页面中所有支持字体属性的样式都 设为“宋体”：
* { font-family: "宋体"; }
2．HTML标记符选择器
应用到指定类型的HTML元素中。
例如：对HTML语言中的分段标记P进行字体定义： p{ font-family: "宋体"; } 说明： 1.可以定义几乎所有HTML标记中内容的样式，例如正 文标记 body、标题标记h等。 2.也可同时为几个标签定义一组样式，标签之间用逗 号“,”隔开。 例如：把标题标记h2和h4定义了同一个样式 h2,h4 { font-size: 12px; color: Red;}
在HTML标记中使用style属性，直接写入需要定义的样式。 例如： <p style="color:Blue; font-size:12px" >内嵌样式表<p> 其中各个属性之间用“;”隔开，属性与属性值之间用“:”隔开.
内联式样式表是在现有HTML元素的基础上，用style属性把 特殊的样式直接加入到那些控制信息的标记中，比如下面的 例子： <p style="color：#ff0000">内联式样式表</p> 这种样式表只会对使用它的元素起作用，而不会影 响HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。
CSS 样 式 表
CSS 样 式 表
CSS样式表概述 样式表的基本语法 样式表的使用规则 样式表中的常用属性 布局与定位
CSS样式表概述
CSS是Cascading Style Sheet的缩写，称为“层叠样
式表”，简称为“样式表”
层叠是指多个样式可以同时应用于同一个页面或网页
中的同一个元素，执行的效果按照“层叠规则” 所谓“层叠规则”即当标记的样式定义发生冲突时， 靠近标记的定义将生效
主要用来定义一个HTML或一类HTML标记的显示样式，
以便实现对页面样式的独立管理,可以将样式信息与 网页内容分离的一种标记性语言。 CSS样式的主要优点是提供便利的更新功能，更新CSS 样式时，使用该样式的所有文档都自动更新格式
这表示只有位于h2一标记符内的b元素具有指定样式，而其他b 元素不具有该样式。实际上，这种嵌套关系可以有多层，不过 通常仅用一层。
3．class选择器
是一种特殊类型的CSS选择器，可将同一类型的 HTML标记定义出不同的样式。 为页面中的某个元素指定一个类选择器，类选择 器的名字可以用class属性来定义，在类名的前面有一 个前缀句点“.”。 例如：在页面中有两种不同样式的段落，一种右 对齐，一种左对齐。 p.right {text-align:right } p.left {text-align:left } 在页面中使用定义的样式： <p class=“right">学校网站开发</p> <p class=“left">学校网站开发</p>
以上几种用法的对比分析：
1.外部样式表：使用外部样式表可以使该样式表 应用于多张网页，通过这种方式，只需改动一个 文件就能改变整个网站的外观。 2.内部样式表：嵌入在一个页面内，只有这一个 页面可以使用该样式。 3.行内样式表：使用行内样式就失去了样式表的 优势而将内容和形式相混淆了。一般这类方法在 个别标记需要改变样式的时候使用。
注： HTML标记符是最典型的选择器类型，网页设 计者可以为某个或某些具体的HTML元素应用样式定义。
如果需要为位于某个标记符内的标记符设置特定的样式规则， 则应将选择器指定为具有上下文关系的HTML标记符。例如， 如果只想使位于h2标记符内的b标记符具有特定的属性，则 应使用以下格式： h2 b{color:blue} /*注意h2和b之间以空格分隔*/
·CSS是一种用来装饰HTML的标记集合，是 对HTML标记的一种扩展，可以进一步美化 HTML页面 样式表的作用： 覆盖浏览器 页面布局 可以重用 多个文档可以链接到一个样式表
样式表的Βιβλιοθήκη Baidu用规则
样式表的分类
按加入的方式不同，可以分为：
行内样式表、
内部样式表
外部样式表。
1．行内样式表(内嵌样式表)
3．外部样式表
先创建一个CSS文件，然后在页面中调用这个CSS文
件。
调用的方法:在页面的头部标记<HEAD>中加入下面的
代码 <head> <link href="school.css" rel="stylesheet" type="text/css" />
</head>
<link>标记，用来调用外部的样式表文件。
外部CSS样式：一个以.css为后缀的CSS文件 里，然后在每个需要用到这些样式的网页里 引用这个CSS文件。
使用外部样式表，相对于内嵌和内部样式表， 有以下优点： 样式代码可以复用。 便于修改。 提高网页显示的速度。
样式表的基本语法
选择器简介 样式表文件由三部分组成：选择器、属性和属性值。 selector {property : value;property : value} 例如：
body { margin: 0px; font-size: 12px; line-height: 150%; }
选择器是你希望定义的 HTML标记
为了增强可读性， 可以分行描述
“属性”和“属性值”之间用冒号“ :”隔开，多个 属性定义之间用分号“;”隔开，所有属性内容都需 要用大括号“{ }”括起来
2．内部样式表 在HTML文档头部标记<HEAD>中，用<STYLE>标记来 存放样式表代码。 例如：在<STYLE>标记中加入样式表代码，书写格式如下： <head> <style type="text/css"> body { background-color: Blue; } </style> </head> 嵌入式样式表首先可以为某个HTML标记定义样式，定义好之后， 整个网页中所有的这个标记都会采用这种样式来显示其中的网 页对象。