当前位置:首页 >> 其它课程 >> 层叠样式表(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层叠样式学习笔记

样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文 档内部引用多个外部样式表层叠次序当同...

CSS层叠样式表

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

Css层叠样式表笔记

Css层叠样式表笔记_文学_高等教育_教育专区。Css 层叠样式表 1、 css 与 html 的四种结合方式 (1) 在每个 html 标签上面都有一个属性 style,把 css 和 html...

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

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

编写css代码(新手看)

二.认识 CSS CSS 就是 Cascading Style Sheets,中文翻译为“层叠样式表”,简称样式表,它是一种制作 网页的新技术。 网页设计最初是用 HTML 标记来定义页面文档...

CSS层叠样式表命名参考 CSS层叠样式表命名参考

CSS层叠样式表(上) 19页 免费 第14章 CSS层叠样式表 54页 1下载券C...一些比较好的 css 样式命名,记录下来,以后做网站的时候就直接用这个,省的 ...

层叠样式表CSS

42页 免费 css层叠样式表简介 24页 免费 层叠样式表入门 31页 免费如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请点击此处进行反馈。 ...

CSS层叠样式表

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

css 层叠样式表

Css 控制页面 行内样式 内嵌式 链接式 导入样式 css 层叠样式表 引入层叠样式表的方法包括: 1 ,外联式样式表 2 ,内嵌样式表 3 ,元素内定 4 ,导入样式表 ...

CSS层叠样式表

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

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