CSS总结
CSS是什么?
- css是层叠样式表(英文全称:2113Cascading Style Sheets)是一种5261用来表现HTML(标准通用4102标记语言的一个应用)或1653XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS的作用
css的作用
• 1.实现了样式和html的代码分离。
• 2.弥补html对属性的的控制不足。
• 3.精确的控制页面的布局。
• 4.可以提高页面的执行效率。
• 5.css还有特殊的功能。
CSS的特性
•1.继承性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> CSS的继承性 </title>
<style>
body{
font-size:105px;
color:red;
}
p{
font-size:25px;
}
</style>
</head>
<body>
<p>HelloWord</p>
</body>
</html>
•2.层叠性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> CSS的层叠性 </title>
<style>
body{
font-size:105px;
color:red;
}
p{
font-size:25px;
}
</style>
</head>
<body>
<p>HelloWord</p>
</body>
</html>
CSS的基本语法
基本语法
<style type="text/css">
选择器{
属性1:属性值;
属性2:属性值
}
</style>
CSS选择器
1.类选择器
<html>
<head>
<title> 类选择器 </title>
<style>
.p1{ color:red }
</style>
</head>
<body>
<p class="p1">欢迎来到我的博客</p>
</body>
</html>
2.id选择器
<html>
<head>
<title> id选择器 </title>
<style>
#p2{ font-size:100px;}
</style>
</head>
<body>
<p id="p2">欢迎来到我的博客</p>
</body>
</html>
3.标签选择器
<html>
<head>
<title> 标签选择器 </title>
<style>
p{color:red;}
</style>
</head>
<body>
<p>欢迎来到我的博客</p>
<p>HelloWord</p>
</body>
</html>
4.包含选择器
<html>
<head>
<title> 包含选择器 </title>
<style>
ol ul li{font-size:50px; color:red}
</style>
</head>
<body>
<ol>
<li>欢迎
<li>23
<ul>
<li>来到博客
</ul>
</ol>
</body>
</html>
5.伪类
1.未连接 a:link
2.已经访问链接 a:visited
3.进入链接 a:hover
4.激活(按下)状态 a:active
其中的hover 和active*可以用于其他控制
<html>
<head>
<title> 伪类选择器 </title>
<style>
a:hover{font-size:50px;}
</style>
</head>
<body>
<a href="#">超链接</a>
</body>
</html>
6.通配符选择器
* {
}
选择所有标签
7.相邻选择器
div +p{
}
8.相邻所有选择器div ~p
div ~p{
}
选择器的优先级
优先级关系:内联样式>ID 选择器 >类选择器 = 属性选择器 = 伪类选择器 > 标签选择器= 伪元素选择器