本篇内容
- 选择器
- 属性
一、 选择器
1.id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#red{
color:red;
}
#green{
color:green;
}
</style>
<body>
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
</body>
</html>
2.类选择器
在 CSS 中，类选择器以一个点号显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.center{
text-align: center
}
</style>
<body>
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
</body>
</html>
3.派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
li strong{
font-style: italic;
font-weight: normal;
}
</style>
<body>
<p>
<strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong>
</p>
<ol>
<li>
<strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong>
</li>
<li>我是正常的字体。</li>
</ol>
</body>
</html>
4.伪类
CSS 伪类用于向某些选择器添加特殊的效果。
（1）link
向未被访问的链接添加样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a:link{
color: #FF0000
}
</style>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
（2）visited
向已被访问的链接添加样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a:visited{
color: #00FF00
}
</style>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
（3）hover
当鼠标悬浮在元素上方时，向元素添加样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a:hover{
color: #FF00FF
}
</style>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
（4）active
向被激活的元素添加样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a:active{
color: #0000FF
}
</style>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
二、 属性
1.position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.right{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
<body>
<div class="right">
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
</div>
</body>
</html>
（2）display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
p{
display: inline
}
div{
display: none
}
</style>
<body>
<p>把段落元素设置为内联元素</p>
<p>而 div 元素不会显示出来</p>
<div>
div 元素的内容不会显示出来
</div>
</body>
</html>