CSS 指层叠样式表 (Cascading Style Sheets)
内联样式(行内样式)
在开始标记中通过style属性(attribute)来设置元素的样式。注意,这里的 property 指的是 CSS 属性(property)
<table align="center"
style="background-color: aquamarine; width: 300px;height: 200ox;">
<caption>
<b>购物清单</b>
</caption>
<tr>
<th>商品名</th>
<th>数量</th>
<th>价格(元)</th>
</tr>
<tr>
<td>牙刷</td>
<td>2</td>
<td>10.5</td>
</tr>
<tr>
<td>毛巾</td>
<td>4</td>
<td>24</td>
</tr>
<tr>
<td>衣架</td>
<td>20</td>
<td>16.8</td>
</tr>
<tr>
<td>牙刷</td>
<td>2</td>
<td>10.5</td>
</tr>
</table>
内嵌样式(内部样式)
在 HTML 文档中通过 style 元素插入CSS样式。通常将 内嵌样式(内部样式) 添加到 head 区域内。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
caption{
font-size: 20px;
color: darkblue;
}
th{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<table align="center">
<caption>
<b>购物清单</b>
</caption>
<tr>
<th>商品名</th>
<th>数量</th>
<th>价格(元)</th>
</tr>
<tr>
<td>牙刷</td>
<td>2</td>
<td>10.5</td>
</tr>
<tr>
<td>毛巾</td>
<td>4</td>
<td>24</td>
</tr>
<tr>
<td>衣架</td>
<td>20</td>
<td>16.8</td>
</tr>
<tr>
<td>牙刷</td>
<td>2</td>
<td>10.5</td>
</tr>
</table>
</body>
</html>
其中内嵌样式的 style元素 实在head元素中的。
<style type="text/css">
caption{
font-size: 20px;
color: darkblue;
}
th{
background-color: cornflowerblue;
}
</style>
选择器
Type Selector
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:
<style type="text/css">
html{
color: rgb(191, 121, 248);
}
caption{
font-size: 20px;
color: darkblue;
}
th{
background-color: cornflowerblue;
}
</style>
Type Selector
也称作 tag name selector
,国内资料上通常称作 标签选择器 <p>
Type Selector是根据元素类型(即标签名称)来选择页面上的元素。
type selector
在 W3C 标准中,元素选择器又称为类型选择器(type selector)。
“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
h1 {font-family: sans-serif;}
class selector
class selector允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用,也可以与其他元素结合使用。所有元素的 calss 属性值中都可以包含多个 class-name (它们之间使用空格隔开即可)
<style type="text/css">
/* 选择页面上显式书写了class属性(attribute)且该属性值中包含`odd`一词的元素 */
/*[class~=odd] { */
.odd{
background-color: #dfdfdf;
}
/* 选择页面上显式书写了class属性(attribute)且该属性值中包含`even`一词的元素 */
.even {
background-color: #ffff00;
}
.yuan-fang {
border: 1px solid blue;
}
</style>
ID selector
首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
#seventh {
border: 1px solid green;
}
并且要保证元素中的 id属性 是唯一的。
<div id="first" class="odd afang yuan-fang di-pang lao-wang">第一个</div>
<p id="second" class="even yuan-fang">老二</p>
<div id="third" class="odd di-pang">小三</div>
<section id="fourth" class="even lao-wang">老四</section>
<div id="fifth" class="odd laowu">小五</div>
<div class="even xiaoliu">小六汤包</div>
<div id="seventh">每一天</div>
Attribute Selector
Attribute Selector
被翻译为属性选择器。[attribute]用于选择显式定义了指定属性的元素。
[attribute~=word]用于选择显式定义了指定属性并且该属性值中包含指定单词的元素。[attrivute=value]用于选择显式定义了指定属性并且该属性值等于给定值的元素。
[id] {
color: blue;
border: 1px solid green;
}
/* 选择页面上显式书写了 class 属性(attribute)的元素 */
[class] {
text-align: right;
border: 1px solid green;
}
/* 选择页面上显式书写了class属性(attribute)且该属性值中包含`odd`一词的元素 */
[class~=odd] {
background-color: #dfdfdf;
}
/* 选择页面上显式书写了id属性(attribute)且该属性值等于给定值的元素 */
[id=seventh] {
background-color: #ff0;
}
structural pseudo-classes
-
超链接
本例演示如何向文档中的超链接添加不同的颜色。
-
超链接 2
本例演示如何向超链接添加其他样式。
-
超链接 - :focus 的使用
本例演示如何对超链接应用 :focus 伪类(无法在 IE 中工作)。
-
:first-child(首个子对象)
本例演示 :first-child 伪类的用法。
-
: lang(语言)
本例演示 : lang 伪类的用法。
/* Universal Selector */
* {
margin: 50px;
border: 1px solid blue;
}
/* structural pseudo-classes */
:root {
border-color: red;
}
:empty {
height: 20px;
background-color: #dfdfdf;
}