CSS基本使用复习(1)
2016-07-17 13:01
555 查看
样式表加入到Html中的三种方式：
一、内联样式表(在标签内设置元素的样式)
二、嵌入样式表（需要在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
一、内联样式表(在标签内设置元素的样式)
二、嵌入样式表（需要在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.csstt{
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 