CSS 初识
2018-11-25 本文已影响0人
roy_pub
CSS 用来设置HTML外观显示样式。
样式表
- 内部样式表
<head>
<style type="text/css">
p {
color: red;
font-size: 25;
}
</style>
</head>
- 行内样式表（内联样式）
<p style="color: pink; font-size: 25px;">Hello World CSS</p>
- 外部样式表（外链式）
<head>
<link href="css file path" type="text/css" rel="stylesheet">
</head>
基础选择器
- 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p {
color: red;
font-size: 25;
}
</style>
</head>
<body>
<p>Hello World</p>
<p>CSS</p>
</body>
</html>
- 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
span {
font-size: 100px;
}
.g {
color: deepskyblue;
}
.o {
color: red;
}
.oo {
color: orange;
}
.l {
color: green;
}
</style>
</head>
<body>
<span class="g">G</span>
<span class="o">o</span>
<span class="oo">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="o">e</span>
</body>
</html>
多类名选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.green {
color: green;
}
.font {
font-size: 50px;
}
</style>
</head>
<body>
<div class="green font">Hello World!</div>
</body>
</html>
- id 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#green {
color: green;
}
</style>
</head>
<body>
<div id="green">Hello World!</div>
</body>
</html>
- 通配符选择器
适用所有标签，很少使用
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
* {
color: green;
}
</style>
</head>
<body>
<div>Hello World!</div>
<div>How are you</div>
</body>
</html>
复合选择器
- 后代选择器
后代选择器又称包含选择器，用来选择后代元素或元素组的后代，写法为把后代标签写在前面，内层标签写在后面，中间用空格分隔。
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div p {
color: cyan;
}
</style>
</head>
<body>
<div>
<p>Hello World</p>
</div>
<div>Hello World</div>
<p>Hello World</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div a {
color: cyan;
}
</style>
</head>
<body>
<div>
<a href="#">AliBaBa</a>
<ul>
<li>
<a href="#">AliPay</a>
</li>
</ul>
</div>
</body>
</html>
- 子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div > a {
color: cyan;
}
</style>
</head>
<body>
<div>
<a href="#">AliBaBa</a>
<ul>
<li>
<a href="#">AliPay</a>
</li>
</ul>
</div>
</body>
</html>
- 交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div.red {
color: cyan;
}
</style>
</head>
<body>
<div>Hello world</div>
<div class="red">Hello world</div>
<p>Hello world</p>
<p class="red">Hello world</p>
</body>
</html>
- 并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div,span {
color: cyan;
}
</style>
</head>
<body>
<div>Hello world</div>
<p>Hello world</p>
<span>Hello world</span>
</body>
</html>
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，如如给链接添加效果。伪类选择器使用":"
链接伪类选择器
- :link 未访问的链接
- :visited 已访问的链接
- :hover 鼠标移动到链接上
- :active 选定的链接
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
a {
font-size: 20px;
font-weight: 400;
}
a:link {
color: gray;
}
a:visited {
color: red;
}
a:hover {
color: green;
}
a:active {
color: cyan;
}
</style>
</head>
<body>
<a href="#">Baidu</a>
</body>
</html>
