CSS是用来控制HTML标签的样式，在美化网页中起到非常重要的作用，CSS的编写格式是键值对形式的，比如
color: red;
CSS有3种书写形式
行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
页内样式：在本网页的style标签中书写
<style>
body {
color: red;
}
</style>
外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">
css的两大重点
- 属性
通过属性的复杂叠加才能做出漂亮的网页 - 选择器
通过选择器找到对应的标签设置样式
CSS选择器
标签选择器: div {}
类选择器: .class {}
id选择器：id只能对应一个标签 #id {}
并列选择器：（逻辑或） #id,.class {}
复合选择器：（逻辑与）#id.class {} （没有逗号）
后代选择器：（子子孙孙都会改变，p以及p的子孙p标签都会变）div p {}
直接后代选择器：（儿子会变,孙子不会变，p会变）div>p {}
相邻兄弟选择器：（相邻标签，按顺序来的，p会变颜色） div+p {}
属性选择器：（有指定属性的标签改变,属性都是自定义的）
p[name]{}
p[name][age]{}
p[name=“jack”]{}
伪类（动作发生时需要执行的，或许焦点，鼠标移动到标签上等）当事件发生时
image.png
伪元素（给某一个定义好的标签添加样式上去）
image.png
选择器优先级
/快捷键 cmd + shift + UP 挪动整个代码块/
/快捷键 alt + shift + UP 挪动一行代码块/
通配符（*）:
1.优先级非常低
2.性能比较差
3.叠加样式
css样式遵守的规则:
1.相同类型的选择器遵守:a.就近原则 b.叠加原则
2.不同类型的选择器遵守:
important > 内联(行内) > id选择器 > 类选择器 > 标签选择器>通配符
详细版的：
important > 内联 > id > 类 | 标签 | 伪类 | 属性选择 | 伪元素 > 通配符 > 继承
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
CSS选择器代码附录
<head>
<meta charset="UTF-8">
<title>CSS的常见的选择器</title>
<style>
/* 标签选择器 */
/*div{*/
/*color: red;*/
/*}*/
p{
color: blue;
}
/* 类选择器 */
.test1{
color: yellow;
}
/* id选择器 */
#main{
/*background-color: red;*/
}
/* 并列选择器 */
#main,.test1{
border: 1px solid rebeccapurple;
}
/* 符合选择器 */
p.test1{
background-color: blue;
}
/*后代选择器*/
.test1 .test2{
color: red;
}
/* 直接后代选择器 */
.test1>a{
color: red;
}
</style>
</head>
<body>
<!---->
<div class="test1">我是div</div>
<div class="test1">
我是div
<div class="test2">
我是test2
<a href="#">我是超链接</a>
</div>
</div>
<div>
我是div
<a href="#">我是超链接</a>
</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<p class="test1">我是段落</p>
<p id="main">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<br><br><br><br><br>
<div class="test1">
我是div
<a href="#">我是超链接</a>
<div>
<a href="#">我是二级连接</a>
</div>
</div>
</body>
</html>
以下是伪类和属性选择器代码附录
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style>
p[name="jack"]{
color: red;
}
/* 伪类 */
input:focus{
/* 去掉外边框 */
outline: none;
width: 150px;
}
/*当鼠标移动上来的时候*/
.main:hover{
width: 300px;
height: 200px;
background-color: yellow;
}
p[age="10"]:first-letter{
color: red;
}
p[age="10"]:before{
content: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489214950&di=1bb3d1e5e35071948dc673441355524c&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.qqzhi.com%2Fuploadpic%2F2014-09-09%2F073645962.jpg");
}
</style>
</head>
<body>
<p age="10">与div相邻的p</p>
<div class="main">
<p name="jack" age="20">div里面的p</p>
<span>
<p name="rose">div里面的span</p>
</span>
</div>
<p>与div相邻的p</p>
<br><br><br><br><br><br>
<input placeholder="我是输入框">
</body>
</html>
网友评论