CSS
1.网页分为3个部分
html(结构)
css(表现)
javascript(行为)
2.声明方式
选择器{
样式
};
3.编写位置
<!-- 1.内联样式：在标签内部通过style设置属性
缺点：改变样式时，需要一个一个一次的修改，并且不能同时设置样式
-->
<p>这是<span style="color: red;">一个</span>p标签</p>
<!-- 2.内部样式表:写在head中的style标签内部 写css选择器选中元素设置样式
缺点：在不同页面中无法直接使用，只能对一个网页起效
-->
<p>这是一个p标签</p>
<style>
p{
font-size: 20px;
color:purple;
}
</style>
<!-- 3.外部样式表：写在网页外面，编写进一个.css文件,之后link标签引入当前网页中 -->
p{
color: tomato;
text-decoration: underline;
}
<!-- 放的位置更改样式，后面覆盖前面 -->
4.选择器
4.1标签选择器
<!-- 标签{
样式
} -->
<h1>zzh是猪</h1>
h1{
color: royalblue;
text-decoration:overline;
}
4.2类选择器
<!-- .类名{
样式
}
作用：选中一组元素
-->
<p><span class="green">成功</span>的项目管理</p>
.green{
color: green;
}
4.3 id选择器
<!-- #id名{
样式
}
作用：选中一个元素
-->
<div id="red">我是红色的</div>
#red{
color: red;
}
/* 可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的 */
4.6 通用选择器
<!--
*{}
作用：选中所有的标签元素
-->
* {
color: red;
font-size:20px;
}
4.4 子代选择器
<!-- A > B {
样式
} -->
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
.food>li {
/*添加边框样式（粗细为2px， 颜色为红色的实线）*/
border: 2px solid red;
}
4.5 后代选择器
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
.food li {
/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
border: 2px solid red;
}
4.7 交集选择器
<!--
作用:选中同时满足条件的元素(相交的部分)
用法:选择器1选择2{}
-->
<h1 class="red">sdaf</h1>
<p class="red">13223</p>
<h2 class="blue">da fasdf </h2>
h1.blue{
color: red;
}
4.8并集选择器(分组选择器)
<!--
作用：同时选中多个元素
用法：选择器1，选择器2{}
-->
4.9属性选择器
<!--
[属性名] 选择含有指定属性的元素
用法：
[属性名=属性值]选中属性名 等于 属性值的元素
[属性名^=属性值]选中以属性值 开头 的元素
[属性名$=属性值]选中以属性值 结尾 的元素
[属性名*=属性值]选中 含有 属性值的元素
-->
<p title="abc">床前明月光</p>
<p title="abcdef">疑是地上霜</p>
<p title="def">举头望明月</p>
<p>低头思故乡</p>
/* [title] */
/* [title=abc] */
/* [title^=abc] */
[title$=def]
{
color: red;
}
4.10 伪类选择器，伪元素选择器
4.10.1
<!--
伪类(不存在的类，特殊的类):描述一个元素的特殊状态
伪元素
-->
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
/* ul>li:first-child 选中第一个元素,使用类选择器与位置耦合了 */
/* ul>li:last-child 最后一个元素 */
/* ul>li:nth-child() 选中第n个元素 n,even,odd*/
/* first-of-type */
ul>li:nth-child(n)
{
color: red;
}
4.10.2 a标签的伪类
<!--
超链接的伪类(4)
1.没访问过的链接
2.访问过的链接
-->
<a href="https:www.baidu123.com">百度</a>
<a href="https:www.baidu.com">百度</a>
/* 从未被访问过 */
a:link{
color: red;
}
/* 已访问 */
a:visited{
color: blanchedalmond;
}
/* 悬浮状态 */
a:hover{
color: green;
}
/* 鼠标长按状态 */
a:active{
color: hotpink;
}
4.10.3伪元素
<p>lorem</p>
<!--
first-letter
first-line
selection 选中的内容
before:元素的开始
after:元素的结尾 结合content
-->
p::first-letter{
font-size: 50px;
}
p::before{
color: red;
content: "adaf ads ";
}
4.11 继承
<!--
继承：设置的元素会被其后代继承
背景，布局不会被继承
-->
4.12 选择器的优先级
<!--
内联样式 > 1000
id选择器 > 100
类选择器 > 10
元素选择器 > 1
-->
<div id="red" class="blue">dsa fasd f</div>
#red{
color: red;
}
.blue{
color: royalblue;
}
div{
color: yellow;
}