当前位置:首页 >> 其它课程 >> 层叠样式表(CSS)

层叠样式表(CSS)


层叠样式表(CSS)
1.CSS概念
CSS是一种可嵌入HTML、控制HTML文件显示格式 的语言,有的书称作“级联样式表”或简称为“样式 表”。 优秀的杂志不仅仅是具备一套完整的结构内容、巧 妙出奇的页面布局,还需要一个统一的风格,好的风格 代表了一种高级的品味。优秀的网页制作也不再是漂亮 的图形、优美的布局和完整的结构就能满足了,使网站 整体保持一致的风格,例如字体字形的显示,页面边距 等等,也是使网站作品有美感有品味的关键一步。层叠 样式表就是设置整体风格这一任务的最好方法。

层叠样式表(CSS)
CSS的作用:

①将网面显示格式控制与内容分离;
②使得HTML各个标记的属性更具有一般性和通用性。然而建立样式 单的意义在于把对象真正引入了HTML,使得可以使用脚本调用 对象属性,并且可以改变对象属性,达到动态的目的。

③简化了HTML中各种繁琐的标记,使得各个标记的属性更具有一般 性和通用性。
例如: HTML方法: <p><font color=“red”>这是显示红色字</font></p> css方法: <p style="color:red">这是显示红色字</p>

层叠样式表(CSS)
2.样式表语法 ? 样式表基本语法:
?
?

HTML标记 { 属性1:属性值1;属性2:属性值2;…… }

?

放置样式表有嵌入式、内联式和外联式三种不 同的方法。

NEXT

? ? ?

⑴嵌入式: 把样式表信息包括在<style>和</style>标记中,并 嵌入到<HEAD>和</HEAD>之中。 例如:将页面中所有H1标题字显示为蓝色: <HTML> <HEAD> <TITLE>This is a CSS samples</TITLE> <STYLE TYPE="text/css"> <!-H1{ color:blue } --> </STYLE> </HEAD> <BODY> ... 页面内容… </BODY> </HTML> NEXT

?

?

注意:<STYLE>标记中包括了TYPE= "text/css",这是 让浏览器知道你是使用 CSS1 样式规则。加入<!--和->这一对注释标记是防止有些老式的浏览器不认识样式 表规则,可以把该段代码忽略不计。 在使用样式表过程中,经常会有几个标志用到同 一个属性,比如我们规定 HTML 页面中凡是粗体字、 斜体字、H1号标题字显示为红色,我们可以写成:

?
?

B,I,H1{color:red}
此外,同一个HTML标志,可能定义到多种属性, 例如,我们规定把从H1到H6各级标题定义为红色黑体 字,带下划线,则应写为:

?

H1,H2,H3,H4,H5,H6{color:red;textdecoration:underline;font-family:"黑体"}

⑵内联式: ? 将样式直接插入到某一个标记中,规 定其风格样式。 ? 例如: <p style="font-size:10pt;color:blue">
?

?

⑶外部式:

?

?

编制一个网站的分类页面,其风格往往是相同的 或说是类似的,每次都在<HEAD>和</HEAD>中插入 相同的繁琐复杂的样式表规则,显然不是我们的愿望。 写一个样式表,以期实现于各风格相同的不同页 面,这一点即可借助于引入外部样式表来实现。并且 当外部样式表被更改时,各引用该样式表的HTML页面 风格也随之发生变化,而不需要手工一个个去更改。

?

?

?

外部样式表是指建立一个完全独立的文本文件,其扩 展名为 .css ,文件内容则输入样式表信息,除去任何 相关的 HTML 语言。 例如:在外部样式表文件(lx.css)中输入:

?

body {line-height:130pt} H1,H2,H3,H4,H5,H6{color:red;textdecoration:underline;font-family:"黑体"} b{font-style:italic;color:#FF3333;textdecoration:underline }
引用外部样式表。

?

?
?

<link rel=stylesheet href="lx.css">
注:link标记应将嵌入到<HEAD>和</HEAD>之中; href中应包含路径信息,这里所指是该样式表文件与 HTML文档在同一目录下。

3.选择符
?

Selector{属性1:属性值1;属性:属性值2;...} ? 其中selector分为三类:标记选择符、类 选择符和id选择符。上面所介绍的样式表规则 中使用的都是标记选择符。 ? 有时候会有同一个HTML标记需要呈现不 同的风格;有若干个不同的HTML标记采用相 同的样式规则;此时可以用类选择符。

NEXT

? ? ? ?
?

⑴类选择符: [标记].类名{属性:值;属性:值;……} 引用方法是: <标记 class="类名"> 例如:让某一些段落缩进0.5in,另一些段落缩进1.0in。
<html> <head> <title>This is a sample< /title> <style type="text/css"> <!-p.first { text-indent::0.5in} p.second { text-indent::1.0in} --> </style> </head> <body bgcolor="#FFFFFF"> …… <p class="first">这个段落将缩进0.5in</p> <p class="second">这个段落将比上面缩进一倍距离</p> …… </body> </html>

⑵直接定义CLASS: ? 作用:应用于HTML页面中的各个标记。
?
? ?

? ?

?

?

?

例如: <style type="text/css"> <!-.note { font-size:10pt;color:blue} --> </style> 引用方法是: <HTML任意标记 class="类名"> 例如: <p class="note">……</p> <h4 class="note">……</h4> 注意: 这种省略HTML标记的类选择符是我们以后最常用的CSS方法, 使用这种方法,我们可以很方便的在任意元素上套用预先定义好 的类样式。 我们可以在同一HTML文档中多次引用这个类,引用该类的地 方都将呈现同一种风格。

? ?
? ? ? ?

⑶id选择符 创建CLASS并不是建立多种风格的唯一手段, id 也可以用来实现同一规则被应用到页面中不同的地方。
它的语法是: #id名{属性:值;属性:值;……属性:值} 例如: <style type="text/css"> <!-#001{font-size:10pt;color:red} #002{font-size:12pt;color:blue} --> </style> 引用的方法: <HTML标记 id="id名">

? ?

?
?

?

? ?

?

注:定义ID选择符的属性也有两种方法。 下面这个例子,ID属性将匹配所有id="intro"的 元素: #intro {font-size:110%;fontweight:bold;color:#0000ff;backgroundcolor:transparent} (字体尺寸为默认尺寸的 110%;粗体;蓝色;背景颜色透明) 下面这个例子,ID属性只匹配id="intro"的段落 (p)元素: p#intro{font-size:110%;fontweight:bold;color:#0000ff;backgroundcolor:transparent} 注意:ID选择符局限性很大,只能单独定义某 个元素的样式,一般只在特殊情况下使用。

?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

示例

<html> <head> <title>ID选择符</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> #i3em{text-indent:3em;color:red} h3#i5em{text-indent:5em;color:green} </style> </head> <body> <h3>这是标题h3中没有含id属性的文字显示结果。</h3> <h3 id=i5em>这是标题h3中含有id=i5em标志,故标题文字用green颜色显示,同时 首行也缩进5em。</h3> <p id=i3em>这是段落p中含有id=i3em标志,故本段文字用red颜色显示,同时首行 也缩进3em。</p> <h3 id=i3em>本标题h2标记中含有id=i3em的属性,故本标题文字用red颜色显示, 同时首行也缩进3em。</h3> <p id=i5em>本段p标记中含有id=i5em的属性,但i5em选择符只对h3标记起作用, 故本段文字并没有用green颜色显示,同时首行也没有缩进5em。</p> <div align="center"><br> <img border="0" src="../images/BD10297_1.GIF" width="15" height="15"><a href="dhtml4.htm#ll">返回</a></div> </body> </html>

4.样式表的层叠性
?

层叠性就是继承性,样式表的继承规则是外部的元 素样式会保留下来继承给这个元素所包含的其他元素。 事实上,所有在元素中嵌套的元素都会继承外层元素 指定的属性值,有时会把很多层嵌套的样式叠加在一 起,除非另外更改。例如在DIV标记中嵌套P标记: div { color:red;font-size:9pt} …… <div> <p>这个段落的文字为红色9号字</p> </div> (P元素里的内容会继承DIV定义的属性) 注意:有些情况下内部选择符不继承周围选择符的值, 但理论上这些都是特殊的。例如,上边界属性值是不 会继承的,直觉上,一个段落不会同文档BODY一样 的上边界值。 NEXT

4.样式表的层叠性
?

另外,当样式表继承遇到冲突时,总是以最后定义的 样式为准。如果上例中定义了P的颜色: div {color:red;font-size:9pt} p {color:blue} …… <div> <p>这个段落的文字为蓝色9号字</p> </div> 我们可以看到段落里的文字大小为9号字是继承 div属性的,而color属性则依照最后定义的。

4.样式表的层叠性
?

?

?

不同的选择符定义相同的元素时,要考虑到不同的选 择符之间的优先级。ID选择符,类选择符和HTML标记 选择符,因为ID选择符是最后加上元素上的,所以优 先级最高,其次是类选择符。如果想超越这三者之间 的关系,可以用!important提升样式表的优先权。 例如: p {color:#FF0000!important} .blue {color:#0000FF} #id1 {color:#FFFF00} 我们同时对页面中的一个段落加上这三种样式, 它最后会依照被!important申明的HTML标记选择符样 式为红色文字。如果去掉!important,则依照优先权最 高的ID选择符为黄色文字。

5.锚的伪类
?

?

?

?

我们最常用的是4种a(锚)元素的伪类,它表示动态链接在4种 不同的状态:link、visited、active、hover(未访问的链接、已访 问的链接、激活链接和鼠标停留在链接上)。我们把它们分别定 义不同的效果: a:link {color:#FF0000;text-decoration:none} /*未访问的链接 */ a:visited {color:#00FF00;text-decoration:none} /*已访问的链接 */ a:hover {color:#FF00FF;text-decoration:underline} /* 鼠标在链接 上 */ a:active {color:#0000FF;text-decoration:underline} /* 激活链接 */ (上面这个例子中,这个链接未访问时的颜色是红色并无下划线, 访问后是绿色并无下划线,激活链接时为蓝色并有下划线,鼠标 在链接上时为紫色并有下划线) 注意:有时这个链接访问前鼠标指向链接时有效果,而链接访问 后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了 a:visited的前面,这样的话由于后面的优先级高,当访问链接后 就忽略了a:hover的效果。所以根据叠层顺序,我们在定义这些链 接样式时,一定要按照a:link, a:visited, a:hover, a:actived的 顺序书写。

6.多重样式表的叠加
? ?

如果在同一个选择器上使用几个不同的样式表时,属性值将会叠 加几个样式表,遇到冲突的地方会以最后定义的为准。 例如,我们首先链入一个外部样式表,其中定义了h3选择符的 color 、text-align和font-size属性: h3 {color:red;text-align:left;font-size:8pt} (标题3的文字颜色为红色;向左对齐;文字尺寸为8号字) 然后在内部样式表里也定义了h3选择符的text-align和font-size属 性: h3{text-align:right;font-size:20pt} (标题3文字向右对齐;尺寸为20号字) 那么这个页面叠加后的样式就是: color:red;text-align:right;font-size:20pt (文字颜色为红色;向右对齐;尺寸为20号字) 字体颜色从外部样式表里保留下来,而对齐方式和字体尺寸都有 定义时,按照后定义的优先而依照内部样式表。 注意:依照后定义的优先,所以优先级最高的是内嵌样式,链入 的外部样式表和内部样式表之间是最后定义的优先级高。

?

BOX对象及属性
1.BOX概念 ? CSS把HTML中以<标记>……</标记> 的部分称为BOX(容器)。 ? 2.BOX的三类属性 ? margin属性 ? padding属性 ? Border属性
?
NEXT

? ?

? ?

⑴margin属性 margin属性分为:边距(margin)、左边界(margin-left)、 右边界(margin-right)、上边界(margin-top)、下边距 (margin-bottom)五个属性,分别表示BOX离边框的距 离。 ⑵padding属性 padding属性也分为:填充(padding)、左填充 (padding-left)、右填充(padding-right)、上填充 (padding-top)、下填充(padding-bottom)五个属性,分 别表示BOX中的内容离BOX边线框的距离。

? ?

⑶Border属性 Border属性是描述DOX的边框,分为border-width、 border-color和border-style(即边框线宽度、颜色和样 式)。

? ? ? ? ? ?

?
? ? ? ? ? ? ?

?
? ? ? ? ?

<html> <head> <title>box示例</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> .box{border-color:red;border-style:double;border-width:medium} p{color:blue;margin:20pt;padding:10pt;text-indent:3em} #margin{color:#cc3399;padding:5pt;border-color:#993399; border-style:solid;border-width:thin} </style> </head> <body class=box> <h1 style="color:#339933;margin:10 30pt;padding:10pt;textalign:center;border-style:solid"> <span id=margin>TCP/IP</span>网络管理的发展</h1> <p class=box> 直到70年代,还一直没有网络管理协议,只有互联网络控制信息协议 (ICMP)可以作为网络管理的工具。 </p><p> </p> <img border="0" src="../images/BD10297_1.GIF" width="15" height="15"><a href="dhtml5.htm#ll">返回</a></p> </body> </html>

文本和字体属性
? ?

?
? ?

1.文本属性 ⑴词间距:word-spacing 例如:p{ word-spacing:0.4cm} ⑵字间距:letter-spacing 例如:p{ letter-spacing:0.3em} ⑶文字缩进:text-indent 例如:body{ text-indent:3em} ⑷行间距:line-height 例如:body{ line-height:10pt}

文本和字体属性
? ? ? ?

?

2.字体属性 ⑴字体大小:font-size 例如:p{font-size:25pt} ⑵字体字型:font-family 例如:p{font-family:"宋体","黑体"} ⑶字体粗细:font-weight (值可为:100、200、 300、400、500、600、700、800、900,其 中400就是normal,700就是bold。) 例如:p{ font-weight:800} ⑷字体风格:font-style (值为normal和italic) 例如:p{ font-style:italic}

颜色与背景属性
⑴background-color:color ? ⑵background-image:url
?

CSS属性一览表
?


更多相关文档:

css样式表学案

css 层叠样式表 分 实例 类 嵌入式内 先定义:必须在 head 区定义 联 1 标签定义:该样式实际上是对现有 HTML 标式 记的一种重新定义。 适用 范围 本标签...

CSS样式表不可能实现( )功能。 A.将格式和结构分离B.一...

CSS样式表不可能实现( )功能。 A.将格式和结构分离B.一个CSS文件控制多个网页C.控制图片的精确位置D.兼容所有的浏览器_答案解析_2016年_一模/二模/三模/联考...

使用样式表的三种方式

后面的样式设定>前面的样式设定; 3、特殊的样式设定>一般的样式设定; 4、行内样式>ID 样式>类别样式>HTML 标签样式; css:又叫即层叠样式表, 布局与美化网页的...

CSS层叠样式表

CSS层叠样式表_互联网_IT/计算机_专业资料。1.使用 CSS 样式的方式 1.1. HTML <!DOCTYPE> 声明标签 定义和用法 <!DOCTYPE> 声明必须是 HTML 文档的第一行,...

CSS样式表总结

CSS样式表总结_计算机软件及应用_IT/计算机_专业资料。CSS 样式表 总结 简单 ...层叠样式表 一、CSS 的基本语法: Css 由三部分组成:选择符、样式属性、值; ...

第四章 CSS层叠样式表_图文

第四章 CSS层叠样式表_理学_高等教育_教育专区。gggg 第四章 4.1 CSS 的概述 CSS 层叠样式表 CSS 是 Cascading Style Sheets(层叠样式表)的缩写,其作用是提供...

CSS层叠样式表学习

层叠样式表学习 CSS 层叠样式表学习 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设 计必不可少的工具...

CSS层叠样式表

第1 页共 4 页 CSS 层叠样式表什么是样式表: CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」 。是用于(增强)控制网页样 式并允许将样式信息与...

CSS指层叠样式表(Cascading Style Sheets)

CSS层叠样式表(Cascading Style Sheets) CSS 语法由三部分组成:选择器、属性和值: Selector {property: value} body {color:blue;} 若值为若干单词,需加...

CSS层叠样式表

CSS 层叠样式表(一次课) 1、 css 简介: 设置 css(层叠样式表), 可以随意地控制网页中字体的大 小颜色,便于统一网站的整体风格,方便地为网页中的 各个元素设置...
更多相关标签:
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com