CSS教程
Table of Contents
什么是CSS
CSS是一门语言, 该语言指定了文档该如何呈现给用户.
emacs doc1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
这边还没有用到CSS, 下面开始使用CSS来指定样式.
为何使用CSS
CSS帮助我们将文档信息的内容和如何展现它的细节相分离. 这样可以:
- 避免重复
- 易于维护
我们的网站可能有成千上万的页面外观相似. 使用CSS, 可以将样式信息存储在公共的文件中以供所有的页面共用.
当用户显示页面时, 用户的浏览器将样式信息和页面内容一同加载.
当用户打印页面时, 可以提供不同的样式信息, 以便于打印出来的页面更易于阅读.
在与 doc1.html 相同的目录中, 新建另一个文件, 作为样式表.
emacs style.css:
strong {color: red;}
为了将HTML与CSS相连, 修改HTML中的文件, 在 <title> 和 </head> 中间, 插入一行:
<title>Sample document</title> <link rel="stylesheet" href="style.css"> </head>
CSS如何工作
浏览器在展现一个文档的时候, 必须要把文档内容和相应的样式信息结合起来展示. 这个处理过程一般分两个阶段:
- 浏览器先将标记语言和CSS转换成DOM(文档对象模型)结构. 这时DOM就代表了电脑内存中的相应文档, 因为它已经融合了文档内容和相应的样式表.
- 最后浏览器把DOM的内容展示出来.
层叠和继承
对于层叠来说, 共有三种主要的样式来源:
- 浏览器对HTML定义的默认样式.
- 用户定义的样式.
- 开发者定义的样式, 可以有三种形式: 定义在外部文件(外链样式); 在页面的头部定义(内联样式), 通过这种形式定义的样式只在本页面内生效; 定义在特定的元素身上(行内样式).
网页开发者定义的样式会覆盖用户样式, 用户定义的样式表会覆盖浏览器定义的默认样式.
而继承, 以 doc1.html 为例, <strong> 作为 <p> 的子元素, 继承了 <p> 的样式, 同样的, <p> 也从 <body> 中继承了许多样式.
编辑 style.css, 在头部加上如下代码:
p {color:blue; text-decoration:underline;}
<strong> 会继承 <p> 的样式, 然后重复的样式, <strong> 的优先级会更高, 覆盖上层样式.
选择器
规则以选择器开始, 由一系列键值对组成. 如下面这段就是一条规则:
strong {
color: red;
}
这边, strong是选择器.
除了标签名称, 还可以在选择器中使用属性值. 其中, class 和 id 两个属性是比较重要的.
通过设置元素的 class 属性, 可以为元素指定类名, 类名可自定义, 文档中多个元素可以拥有同一个类名. 写样式表时, 类选择器以.开头.
通过设置元素的 id 属性, 可以为元素制定ID, ID可自定义, 每个ID在文档中必须是唯一的. 写样式表时, ID选择器以#开头.
如, 有以下HTML语句:
<p class="key" id="principal">
在CSS样式表中, 如下规则可以让所有class属性等于key的元素文字颜色呈现绿色, 让id等于principal的元素文字变粗:
.key{
color: green;
}
#principal{
font-weight: bolder;
}
伪类选择器(pseudo-classes selectors)
CSS伪类加在选择器后面, 用来指定元素状态的关键字. 如, :hover 会在鼠标悬停在选中元素上时应用相应的样式.
语法规则:
selector:pseudo-class {
property: value;
}
练习
使用类选择器和ID选择器
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p id="first">
<strong class="carrot">C</strong>ascading
<strong class="spinach">S</strong>tyle
<strong class="spinach">S</strong>heets
</p>
<p id="second">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
style1.css:
strong { color: red; }
.carrot { color: orange; }
.spinach { color: green; }
#first { font-style: italic; }
可以发现优先级: ID选择器 > 类选择器 > 标签选择器
伪类选择器
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
</body>
</html>
编辑CSS:
a.homepage:link, a.homepage:visited {
padding: 1px 10px 1px 10px;
color: #fff;
background: #555;
border-radius: 3px;
border: 1px outset rgba(50,50,50,.5);
font-family: georgia, serif;
font-size: 14px;
font-style: italic;
text-decoration: none;
}
a.homepage:hover, a.homepage:focus, a.homepage:active {
background-color: #666;
}
运行后可将鼠标放在链接上查看效果.
文本样式 颜色
关于文本样式和颜色, 直接查看 CSS参考手册.
内容
CSS的一个重要优势是它可以帮助你将文档内容和其样式分离. 但是有时候在样式而非文档中定义一些内容也是很有用的.
在样式中可以定义文本内容和图片内容, 当内容与文档结构紧密相关的时候, 可以在样式表中指定内容.
文本内容
CSS可以在标签的前后插入文本, 在标签对应的选择器的后面加上 ::before 或者 ::after, 在声明中, 指定 content 属性, 设置文本内容.
.ref::before {
font-weight: bold;
color: navy;
content: "Reference: ";
}
在所有类名包含ref的元素前面加上 Reference:.
图片内容
可以通过 content 属性值设置为某个图片的URL, 可以将图片插到元素的前面或后面.
可以通过 background 属性值设为图片的URL, 这样图片就成了该标签的背景图.
Generated by Emacs 25.x(Org mode 8.x)
Copyright © 2014 - Pinvon - Powered by EGO
