目录
CSS前戏
主要用来调节html标签的各种样式
"""
思考:页面都是由HTML构成的 并且页面上有很多相同的HTML标签 但是相同的HTML标签在不同的位置可能有不同的样式 我们如何区分标签
标签的两大重要属性>>>:区分标签
1.class属性
分门别类 主要用于批量查找
2.id属性
精确查找 主要用于点对点
学习css的流程
1.先学习如何查找标签
2.再学习如何调整样式
css注释语法
/*注释内容*/
"""
1.css语法结构
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
选择器 {
样式名1:样式值1;
样式名2:样式值2
}
2.css注释语法
/*注释内容*/
3.引入css的多种方式
1.head内style标签内部编写(学习的时候使用)
<p style="color: red">Hello world.</p>
2.head内link标签引入(标准的方式)
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
3.标签内部通过style属性直接编写(不推荐)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
CSS基本选择器
1.标签选择器
直接按照标签名查找标签
div {
color: red;
}
<div>cloud</div>
2.类选择器
按照标签的class值查找标签
.c1 {
color: green;
}
<p class="c1">cloud</p>
3.id选择器
根据标签的id之精准查找标签
#d1 {
color: yellow;
}
<p id="c1">cloud</p>
4.通用选择器
直接选择页面所有的标签
* {
color:blue;
}
CSS组合选择器
css选择器的组合使用 ---> 组合选择器
用家族关系来描述CSS嵌套层级
示例：
<p>ppp</p>
<p>ppp</p>
<div>div
<div>div div
<p>div div p
<span>div div p span</span>
</p>
</div>
<p>div p</p>
<span>div span</span>
</div>
<p>ppp</p>
<span>span span</span>
<!--
针对标签的上下层级以及嵌套有另外的说法
父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签
我们选定一个标签 那他同级上面的标签为哥标签，同级下面的标签为弟标签。
-->