CSS 的基本规则总结

网页设计 everyinch 5137℃ 0评论

这段代码展示了CSS 注释与HTML 注释在格式上的区别。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>HTML5 Template</title>
	<style>
		/* CSS 规则放在<style>标签中 */
	</style>
</head>
<body>
	<!-- HTML 元素放在<body>标签中 -->
</body>
</html>

一、剖析CSS规则

下面就是一条CSS 规则，它可以把段落的文本设置为红色。

p {color:red;}

把它应用给以下HTML 标记

<p>This text is very important!</p>

把以上代码放在HTML5 模板中，就是这样。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>HTML5 Template</title>
	<style>
		/*CSS 样式要嵌入在页面head 元素中的<style>标签里*/
		p {color:red;}
	</style>
</head>
<body>
	<!-- HTML 元素放在<body>标签中 -->
	<p>This text is very important!</p>
</body>
</html>

1. 为文档添加样式的三种方法

（1）行内样式：写在特定HTML 标签的style 属性里的，比如：

<p>This paragraph simply takes on the browser's default paragraph style.</p>
<p style="font-size: 12px; font-weight:bold; font-style:italic; color:red;">By adding inline CSS styling to this paragraph, you override the default styles.</p>

（2）嵌入样式：嵌入的CSS 样式是放在HTML 文档的head 元素中的，比如：

<head>
	<!-- 其他head 元素（如meta、title）放在这里 -->
	<style type="text/css">
		h1 {font-size:16px;}
		p {color:blue;}
	</style>
</head>

（3）链接样式：可以在任意多个HTML 页面中链接同一个样式表文件，每个页面中只需加入类似下面的这一行代码即可：

<link href="styles.css" rel="stylesheet" type="text/css" />

2. CSS命名规则

ch2_cssrule1

对这个基本的结构，有三种方法可以进行扩展。

第一种方法：多个声明包含在一条规则里

p {color:red; font-size:12px; font-weight:bold;}

第二种方法：多个选择符组合在一起

h1, h2, h3 {color:blue; font-weight:bold;}

第三种方法：多条规则应用给一个选择符

h1, h2, h3 {color:blue; font-weight:bold;}
h3 {font-style:italic;}

所有用于选择特定元素的选择符可以分为三种。

  • 上下文选择符。基于祖先或同胞元素选择一个元素。
  • ID 和类选择符。基于id 和class 属性的值（你自己设定）选择元素。
  • 属性选择符。基于属性的有无和特征选择元素。

二、上下文选择符

上下文选择符的格式如下：

标签1 标签2 {声明}

例如：只有是article 后代的p 元素才会应用后面的样式。

article p {font-weight:bold;}

可以通过下面这段代码来更深入地理解上下文选择符的含义。

<body>
	<article>
		<h1>Contextual selectors are <em>very</em> selective</h1>
		<p>This example shows how to target a <em>specific</em> tag.</p>
	</article>
	<aside>
		<p>Contextual selectors are <em>very</em> useful!</p>
	</aside>
</body>

ch2_dom

em {color:green;}			// 此三个em 元素中的文本都会变成绿色
p em {color:green;}			// 选择以p 元素为祖先的所有em 元素
article em {color:green;}		// 选择以article 元素为祖先的所有em 元素

三、特殊的上下文选择符

下面我们再用另一段标记来演示几种特殊的上下文选择符。

<section>
	<h2>An H2 Heading</h2>
	<p>This is paragraph 1</p>
	<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
	<a href="#">Link</a>
</section>

1. 子选择符 >

标签1 >  标签2

标签2 必须是标签1 的子元素，或者反过来说，标签1 必须是标签2 的父元素。

section > h2 {font-style:italic;}

2. 紧邻同胞选择符 +

标签1 + 标签2

标签2 必须紧跟在其同胞标签1 的后面。

h2 + p {font-variant:small-caps;}

3. 一般同胞选择符 ~

标签1 ~ 标签2

标签2 必须跟（不一定紧跟）在其同胞标签1 后面。

h2 ~ a {color:red;}

4. 通用选择符 *

通用选择符 * 是一个通配符，它匹配任何元素

* {color:green;}
p * {color:red;}                // 只把p 包含的所有元素的文本变成红色

四、ID和类选择符

1. 类属性

（1）类选择符

.类名

类选择符就是在HTML 类名前面加一个点，例如：

p {font-family:helvetica, sans-serif; font-size:1.2em;}
.specialtext {font-style:italic;}

（2）标签带类选择符

如果只想选择带有这个类的段落，可以把标签名和类选择符写在一块，比如：

p {font-family:helvetica, sans-serif; font-size:1.2em;}
.specialtext {font-style:italic;}
p.specialtext {color:red;}

（3）多类选择符

可以给元素添加多个类，比如：

<p class="specialtext featured">Here the span tag <span>may or may not</span>be styled.</p>

要选择同时存在这两个类名的元素，可以这样写：

.specialtext.featured {font-size:120%;}

注意，CSS 选择符的两个类名之间没有空格

2. ID属性

如果有一个段落像下面这样设定了ID 属性

<p id="specialtext">This is the special text.</p>

那么，相应的ID 选择符就是这样的：

#specialtext {CSS 样式声明}

或者这样的：

p#specialtext {CSS 样式声明}

3. 什么时候使用ID，什么时候使用类

  • ID 的用途是在页面中唯一地标识一个元素。正因为如此，同一个页面中的每一个ID属性，都必须有独一无二的值。
<nav id="mainmenu">
	<ul>
		<li><a href="#">Yin</a></li>
		<li><a href="#">Yang</a></li>
	</ul>
</nav>
  • 类的目的是为了标识一组具有相同特征的元素
<nav>
	<ul>
		<li class="boy"><a href="#">Alan</a></li>
		<li class="boy"><a href="#">Andrew</a></li>
		<li class="girl"><a href="#">Angela</a></li>
		<li class="boy"><a href="#">Angus</a></li>
		<li class="girl"><a href="#">Anne</a></li>
		<li class="girl"><a href="#">Annette</a></li>
	</ul>
</nav>

五、属性选择符

1. 属性名选择符

标签名[属性名]

选择任何带有属性名的标签名。如，下面的CSS会导致像下面这个带有title 属性的HTML img 元素显示2 像素宽的蓝色边框

img[title] {border:2px solid blue;}

2. 属性值选择符

标签名[属性名=”属性值”]

这个选择符可以控制到属性的值是什么。例如，这条规则在图片的title 属性值为red flower 的情况下，才会为图片添加边框。

img[title="red flower"] {border:4px solid green;}

六、伪类

伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种。

  • UI（User Interface，用户界面）伪类会在HTML 元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS 样式。
  • 结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS 样式。

1. UI伪类

（1）链接伪类

  • Link：链接
  • Visited。点击过这个链接
  • Hover。鼠标指针悬停在链接上
  • Active。链接正在被点击（鼠标在元素上按下，还没有释放）

4个伪类选择符：

a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}

（2）:focus伪类

e:focus

e 表示任何元素，如p、h1、section，等等。例如，下面会在光标位于input 字段中时，为该字段添加一个蓝色边框

input:focus {border:1px solid blue;}

（3）:target伪类

e:target

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target 伪类选中它。

例如，下面的链接ID 为more_info 的那个元素就是目标：

<a href="#more_info">More Information</a>

目标元素可能是这样的：

<h2 id="more_info">This is the information you are looking for.</h2>

那么，如下CSS 规则

#more_info:target {background:#eee;}

会在用户单击链接转向ID 为more_info 的元素时，为该元素添加浅灰色背景。

2. 结构化伪类

（1）:first-child 和:last-child

e:first-child
e:last-child

:first-child 代表一组同胞元素中的第一个元素，而:last-child 则代表最后一个。

例如，下面的HTML标记：

<ol class="results">
	<li>My Fast Pony</li>
	<li>Steady Trotter</li>
	<li>Slow Ol' Nag</li>
</ol>

使用如下的CSS会使“My Fast Pony”变成蓝色：

ol.results li:first-child {color:blue;}

（2）:nth-child

e:nth-child(n)

e 表示元素名，n 表示一个数值（也可以使用odd 或even）。

例如，下面的CSS会选择列表中的第三项：

li:nth-child(3)

七、伪元素

1. ::first-letter 伪元素

e::first-letter

比如，以下CSS 规则可以将段落的首字符放大：

p::first-letter {font-size:300%;}

2. ::first-line 伪元素

e::first-line

可以选中文本段落（一般情况下是段落）的第一行。例如

p::first-line {font-variant:small-caps;}

可以把第一行以小型大写字母显示

3.::before 和::after 伪元素

以下两个伪元素

e::before
e::after

以下标记

<p class="age">25</p>

和如下样式

p.age::before {content:"Age: ";}
p.age::after {content:" years.";}

能得到以下结果：

Age: 25 years.

八、层叠

层叠，就是层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值。

1. 样式来源

  • 浏览器默认样式表
  • 用户样式表
  • 链接样式表（按照它们链接到页面的先后顺序）
  • 嵌入样式
  • 行内样式

2. 层叠规则

层叠规则一：找到应用给每个元素和属性的所有声明

层叠规则二：按照顺序和权重排序

层叠规则三：按特指度排序。特指度（specificity）其实表示一条规则有多明确

层叠规则四：顺序决定权重

3. 计算特指度

每个选择符都要按下面的“ICE”公式计算三个值：

I – C – E

  1. 选择符中有一个ID，就在I 的位置上加1；
  2. 选择符中有一个类，就在C 的位置上加1；
  3. 选择符中有一个元素（标签）名，就在E 的位置上加1；
  4. 得到一个三位数

例如：

P 									0-0-1 特指度=1
p.largetext 							0-1-1 特指度=11
p#largetext 							1-0-1 特指度=101
body p#largetext 						1-0-2 特指度=102
body p#largetext ul.mylist 				1-1-3 特指度=113
body p#largetext ul.mylist li 				1-1-4 特指度=114

九、规则声明

一个声明包含两部分：属性和值。属性指出要影响元素的哪个方面（颜色、高度，等等），而值表示把属性设定为什么（绿色、12px，等等）。

CSS 属性值主要分以下三类。

  • 文本值。例如，font-weight:bold 声明中的bold 就一个文本值。文本值也叫做关键字。
  • 数字值。数字值后面都有一个单位，例如英寸或点。在声明font-size:12px 中，12是数字值，而px 是单位（像素）。如果数字值为0，那么就不用带单位了。
  • 颜色值。颜色值可以用几种不同的格式来写，包括RGB（Red, Green, Blue，红绿蓝）、HSL（Hue, Saturation, Luminance，色相，饱和度，亮度）和十六进制值（例如color:#336699）。

1. 文本值

所有CSS 属性都有文本值。例如，visibility 属性有visible 和hidden 值，border-style 属性有solid、 dashed 以及inset 值

2. 数字值

数字值主要分两类：绝对值和相对值。

绝对值及示例：

绝对值 单位缩写 示例
英寸 in height:6in
厘米 cm height:40cm
毫米 mm height:500mm
点 Pt height:60pt
皮卡 pc height:90pc
像素 px height:72px

相对值及示例

相对值 单位缩写 示例
Em em height:1.2em
Ex ex height:6ex
百分比 % height:120%

3. 颜色值

（1）颜色值：W3C 定义了16 个颜色关键字：aqua（浅绿色）、black（黑色）、blue（蓝色）、 fuchsia（紫红色）、gray（灰色）、green（绿色）、lime（黄绿色）、 maroon（褐红色）、navy（深蓝色）、olive（茶青色 ）、purple（紫色）、red（红色）、silver（银色）、teal（青色）、white（白色）和 yellow（黄色）。要了解这些颜色名及其对应的RGB 颜色值，请参考：http://www.w3.org/TR/css3-color/#html4。

（2）十六进制颜色（#RRGGBB 或#RGB）

#rrggbb

例如橙色是：

#ff8800

（3）RGB 颜色值（R, G , B）

每种颜色都可以用一个0 到255（包含）之间的值指定。格式如下：

rgb(r, g, b)

比如，rgb(0,255,0)表示纯绿色。

（4）RGB 百分比值（R%, G%, B%）

这是用百分比来表示每种颜色值的一种方法，格式如下：

r%, g%, b%

可以接受的值是0%到100%，例如：

rgb(46%, 76%, 80%)接近深蓝绿色

（5）HSL (色相, 饱和度%, 亮度%)

HSL 格式如下：

HSL(0,0%,0%)

（6）Alpha通道

RGB 和HSL 都支持Alpha 通道，用于设置颜色的不透明度（换句话说，就是能够透过多少背景）。相应的格式分别叫RGBA 和HSLA

分享&收藏

转载请注明：陈童的博客 » CSS 的基本规则总结

喜欢 (0)
发表我的评论
取消评论

表情

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 好东西 CSS+div对于建站来说很重要
    网络兼职2014-12-17 16:42 回复
'; } if( dopt('d_footcode_b') ) echo dopt('d_footcode'); ?>