一.CSS 概述
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率。允许同时控制多重页面的样式和布局。
多重样式将层叠为一个。 即可同名的样式表,最后会按照优先顺序,只有最优先的起作用。
样式的优先规则从大到小排列按下面进行排列,数字越大,优先度越高。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
css对大小写不敏感。
二.CSS 语法
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
declaration1: property: value
颜色属性值的3种写法:
1. 除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:
p { color: #ff0000
; }
2. 为了节约字节,我们可以使用 CSS 的缩写形式:
p { color: #f00
; }
3. 我们还可以通过两种方法使用 RGB 值:
p { color:rgb(255,0,0)
; } p { color:rgb(100%,0%,0%)
; }
选择器的分组
被分组的选择器就可以分享相同的声明
h1,h2,h3,h4,h5,h6
{
color: green;
}
通常来说,CSS是支持继承的,即子元素会直接继承父元素的属性。
例如:
body {
font-family: Verdana, sans-serif;
}
body所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。
但Netscape 4 和IE6都对继承属性支持的不好。
当不想子元素继承父元素时,只需为子元素声明一个式样即可。
派生选择器(上下文选择器,后代选择器)
li strong
{
font-style: italic;
font-weight: normal;
}
请注意标记为 <strong> 的蓝色代码的上下文关系:
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p> <ol><li><strong>
我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li> </ol>
在上面的例子中,只有 li 元素中的 strong 元素的样式为斜体字,无需为 strong 元素定义特别的 class 或 id,代码更加简洁。同时,两个元素之间的层次间隔可以是无限的。
ul em {color:red;}
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
子元素选择器
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的 strong 元素变为红色,但是第二个 strong 不受影响:
<h1>This is <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器
id 选择器
id 选择器以 "#" 来定义
在现代布局中,id 选择器常常用于建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
id选择器经常与派生选择器一块使用
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
类选择器
在 CSS 中,类选择器以一个点号显示:
.center {text-align: center}
我们假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作:
.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}
通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。
属性选择器
[title]
{
color:red;
}
IE6还不支持属性选择器
如何插入样式表
1.外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
2.内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
#red
{color:red;}#green
{color:green;}
下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。
<pid="red"
>这个段落是红色。</p> <pid="green"
>这个段落是绿色。</p>
3.内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>