Cascading Style Sheets, CSS 层叠样式表,定义了如何显示 HTML 中的元素,为了方便管理,通常会将样式表单独保存在 CSS 文件中,利用 CSS 可以很方便控制网页的样式和布局,会大大提升网页开发效率。
以一个很简单的示例开始。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello CSS</title>
<style>
body {
background-color:#d0e4fe;
}
h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>
CSS 规则由选择器以及声明组成,声明可以有多条,通过 ;
分割;每条声明由一个属性和一个值组成。
另外,可以通过 /*
和 */
进行注释。
插入样式表方法有三种:A) 外部样式表;B) 内部样式表;C) 内联样式。
在需要多个页面时使用,可以通过改变一个文件来改变整个站点,需要在每个页面使用 <link>
标签链接到样式表文件。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
在浏览器渲染页面时,会从文件 style.css
中读到样式声明,例如如下的示例。
p {margin-left:20px;}
body {background-image:url("/images/backgroud.gif");}
注意,在属性值和单位之间不要留空格,例如 margin-left: 20 px
是有问题的。
对单个页面需要特殊样式时,就可以使用内部样式表,也就是在头部使用 <style>
标签进行声明。
<head>
<style>
p {margin-left:20px;}
body {background-image:url("images/backgroud.gif");}
</style>
</head>
在具体的元素上添加,不过会损失灵活性,所以,不建议使用。
<p style="margin-left:20px;color:red">Hello World</p>
如果样式被多次定义,那么属性会从多个样式中继承过来;当存在重复时,会按照内联样式、内部样式、外部样式、浏览器默认样式的优先级覆盖。
h3 { /* 外部样式 */
color:red;
font-size:8pt;
}
h3 { /* 内部样式 */
font-size:20pt;
}
那么最终得到的样式为。
color:red;
font-size:20pt;
也就是说,颜色继承于外部样式表,而字体大小会被内部样式表中的规则覆盖。
另外,注意,在上述的继承顺序中,需要保证外部样式在内部样式之前引入,否则,外部样式的优先级要高于内部样式。
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
h3{color:green;}
</style>
</head>
最常见的就是元素选择器,也就是 DOM 中所使用的最原始元素。
html {color:black;}
h1 {color:blue;}
如果样式表中有很多样式的元素,那么可以使用分组选择器,每个选择器用逗号分隔。
h1, h2, p {color: green;}
还有一个比较特殊的通配符选择器,会直接匹配所有元素,例如 *{color: red}
会使每个元素都为红色。
类选择器可以独立于文档元素存在,只要在元素中通过 class="XXX"
进行了标识,那么就可以通过类选择器修饰,当然,也可以在元素中指定多个类选择器,例如如下。
<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
</style>
</head>
<body>
<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="warning important ">This paragraph is a very important warning.</p>
</body>
</html>
其中元素中类的顺序没有关系,上述 important
类是粗体,warning
为斜体,而同时包含 important
和 warning
的所有元素添加一个红色背景。注意,除了这两个类之外,还可以有其它类,也是可以匹配的。
另外,通过 p.marked { }
为所有 class="marked"
的 p
元素指定一个样式。
在元素中通过 id="XXX"
使用,样式表中则使用 #
标识。
<html>
<head>
<style type="text/css">
#intro{font-weight:bold;}
</style>
</head>
<body>
<p id="intro">This is a paragraph of introduction.</p>
</body>
</html>
虽然在使用方法上两者基本类似,但是有如下区别:
所以,通常来说,ID 具有特殊的含义,而且于无需直到具体元素,例如标识一个 important
ID ,不需要关心其对应的是 p
span
h1
等等。
根据 HTML 的属性名称以及值进行匹配。
<html>
<head>
<style type="text/css">
[title] { color:red; }
</style>
</head>
<body>
<h2 title="Hello world">Hello world</h2>
</body>
</html>
如上,只匹配属性的 Key 为 title
的元素,另外,还可以针对属性 Key/Value 分别进行匹配,常见的有如下几种方式。
选择器 | 描述 |
---|---|
[attribute] |
选取带有指定属性的元素。 |
[attribute=value] |
选取带有指定属性和值的元素。 |
[attribute~=value] |
选取属性值中包含指定词汇的元素。 |
[attribute|=value] |
选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
[attribute^=value] |
匹配属性值以指定值开头的每个元素。 |
[attribute$=value] |
匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] |
匹配属性值中包含指定值的每个元素。 |
可以用来选择某元素后代的元素,例如只希望对 h1
元素中的 em
元素应用样式,那么可以写成 h1 em {color:red;}
,中间通过空格分开。
通过大于号 >
分割,相比后代选择器,子元素选择器的范围更小,仅严格对某个元素的子元素生效。
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>
其中只有第一行的内容,在 <h1>
之后会紧跟着 <strong>
,也就是子元素,那么会变红;而第二行,因为中间隔着 <em>
,所以 <strong>
实际是孙子元素,也就不会被渲染为红色。
也可以将后代和子选择器结合,例如 table.company td > p
。
用来选择紧接某一元素后的元素,且二者有相同父元素,通过加号 +
标识。
<html>
<head>
<style type="text/css">
h1 + p {color:red;}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph A</p>
<p>Paragraph B</p>
<p>Paragraph C</p>
</body>
</html>
如上,只有 Paragraph A
作为相邻兄弟元素,会变为红色。
用于向某些选择器添加特殊的效果,最常用的就是超链接。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
通常用在编写响应式应用的时候,在 css2
中已经支持 @media
属性,但实现功能比较少,通常仅用做打印时定制化。
@media screen {
body{ font-size:12pt; }
}
@media print {
@import "print.css"
body{ font-size:8pt; }
}
而在 CSS3 中,增加了 media queries 功能,这样就可以根据具体的设备进行适配。
/* 宽度小于 500px 时显示绿色 */
@media screen and (max-width:500px) {
body{ background:green; }
}
/* 宽度大于 800px 时显示红色 */
@media screen and (min-width:800px) {
body{ background:red; }
}
详细可以查看 Using Media Queries 中的介绍。
如果喜欢这里的文章,而且又不差钱的话,欢迎打赏个早餐 ^_^