标签:
css指层叠样式表(Cascading Style Sheet)
css规则由两个主要部分构成:选择器,以及一条或者多条声明。例如:selector{declaration1,declaration2,declaration3……declarationN}
用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。用于控制网页的外观,包括内容和图像的定位,不同颜色的使用等。作为web核心语言之一。
比如说想要设置h1元素的文字颜色问红色,字体大小设置为14像素。其中h1是选择器,color和font-size是属性,red和14px是值。
如果值为若干单词,则要给值加引号:p{font-family:“sans-serif";}
p {text-align:center;
color:red;
}
大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:
body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; }
CSS选择器分类
比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:
li strong
{
font-style: italic;
font-weight: normal;
}
请注意标记为 <strong> 的蓝色代码的上下文关系:
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p> <ol><li><strong>
我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li> </ol>
下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
#red
{color:red;}#green
{color:green;}
下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。
<pid="red"
>这个段落是红色。</p> <pid="green"
>这个段落是绿色。</p>
在现代布局中,id 选择器常常用于建立派生选择器。
3.类选择器:在CSS中,类选择器以一个点号来定义。(类名第一个字符不能使用数字)
4.属性选择器:可以为拥有指定属性的HTML元素设置样式,而不仅限于class和ID。(只有在规定了!DOCTYPE时,IE7和IE8才支持属性选择器,在IE6及更低的版本中,不支持属性选择器)
<h1>可以应用样式:</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />
<h1>无法应用样式:</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W:3School students!</p>
<h1>可以应用样式:</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
<h1>无法应用样式:</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
插入样式表方式
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:
<head> <link
rel="stylesheet" type="text/css" href="mystyle.css
" /> </head>
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:
hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}不要在属性值与单位之间留有空格。
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:
<head><style type="text/css">
hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}</style>
</head>
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:
<p style
="color: sienna; margin-left: 20px">
This is a paragraph
</p>
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
例如,外部样式表拥有针对 h3 选择器的三个属性:
h3 { color: red; text-align:left
; font-size:8pt
; }
而内部样式表拥有针对 h3 选择器的两个属性:
h3 { text-align:right
; font-size:20pt
; }
假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:
color:red
; text-align:right
; font-size:20pt
;
即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。
标签:
原文地址:http://www.cnblogs.com/Shirley-He/p/4906672.html