一、内联样式表(在标签内设置元素的样式)
二、嵌入样式表(需要在head标签内写<style type="text/css"></style>)
三、外部样式表 link
优先级:
内敛样式表>嵌入样式表>外部样式表
样式表加入到Html中的三种方式:
一、内联样式表(在标签内设置元素的样式)
二、嵌入样式表(需要在head标签内写<style type="text/css"></style>)
三、外部样式表 link
优先级:
内敛样式表>嵌入样式表>外部样式表
同一种样式,HTML选择器样式最为简单
都选择同一类样式,用Class类选择器
id每个标签都要尽量保证唯一,才选择ID选择器,如果非得两个都显示相同样式,就用Class选择器
单一的话,选择ID选择器,同一类的话,选择Class选择器
样式规则的选择器(通过怎样的途径来获得页面上要设置样式的元素)
1)、HTML Selector
2)、Class Selector(需要给要设置样式的元素的class属性赋值)
3)、ID Selector(需要给要设置样式的id属性赋值)
4)、关联选择器 PEM{background-Color:Yellow}
5)、组合选择器<table></table>
6)、伪元素选择器
伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。
例如,对于超链接标签(<a></a>)的正常状态(没有任何动作前)、访问过的状态、选中
状态、光标移到超链接文本上的状态,对于段落的首字母和首行,都可以使用伪元素
选择器来定义。
目前的伪元素有以下几种:
A:active选中超链接时的状态
A:hover 光标移动到超链接上的状态
A:link 超链接的正常状态
A:visited 访问过的超链接状态
P:first-line 段落中第一行文本
p:first-letter 段落中第一个字母
HTML.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="Testcss.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
p{
background: yellow;
font-size: xx-small;
}
</style>
</head>
<body>
<p style="background: red;font-size: xx-large">处处好风光</p>
<p>处处好风光</p>
<p>处处好风光</p>
<p>处处好风光</p>
<tt>床前明月光</tt>
</body>
</html>
Testcss.css
tt{
background: green;
font-size: xx-large;
}
p{
background: green;
}
HTML选择器.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
background-color: yellow;
}
tt{
background-color: green;
}
</style>
</head>
<body>
<p>处处好风光</p>
<p>处处好风光</p>
<p>处处好风光</p>
<p>处处好风光</p>
<tt>床前明月光</tt>
<tt>床前明月光</tt>
<tt>床前明月光</tt>
<tt>床前明月光</tt>
</body>
</html>
Class类选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
tt.tt1{
background-color: red;
}
tt.tt2{
font-size: xx-large;
}
tt.tt3{
background-color: red;
}
</style>
</head>
<body>
<tt class="tt1">床前明月光</tt>
<tt class="tt1">床前明月光</tt>
<tt class="tt2">床前明月光</tt>
<tt class="tt3">床前明月光</tt>
</body>
</html>
ID选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
background-color: red;
}
#p2{
background-color: green;
}
#p3{
background-color: blue;
}
#p4{
background-color: black;
}
</style>
</head>
<body>
<p class="p1">处处好风光</p>
<p class="p1">处处好风光</p>
<p id="p2">处处好风光</p>
<p id="p3">处处好风光</p>
<p id="p4">处处好风光</p>
</body>
</html>
关联选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p em{
background-color: red;
}
</style>
</head>
<body>
<p><em>今天天气不错</em></p>
<em>Ha</em>
<em>Ha</em>
<em>Ha</em>
<em>Ha</em>
<em>Ha</em>
<p>天气不错</p>
<p>天气不错</p>
<p>天气不错</p>
<p>天气不错</p>
<p>天气不错</p>
</body>
</html>
组合选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1,h2,h3,h4,h5,h6,td{
background-color: red;
}
</style>
</head>
<body>
<h1>我是一个粉刷匠</h1>
<h2>我是一个粉刷匠</h2>
<h3>我是一个粉刷匠</h3>
<h4>我是一个粉刷匠</h4>
<h5>我是一个粉刷匠</h5>
<h6>我是一个粉刷匠</h6>
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
</tr>
<tr>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
</tr>
<tr>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
</tr>
<tr>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
</tr>
</table>
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
A:active{
text-decoration: none;
}
A:hover{
font-size: xx-large;
}
p::first-letter{
font-size: xx-small;
}
p::first-line{
font-size: xx-large;
}
</style>
</head>
<body>
<p>晋太元中,武陵人以捕鱼为业,<br/>
缘溪行</p>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
</body>
</html>