学习网址：
【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
一.主要内容
二.css的基本使用：
[1]css的定义：
?? ??? ?选择器名字{
?? ??? ??? ?属性名：属性值；
?? ??? ??? ?属性名：属性值；
?? ??? ??? ?...
?? ??? ??? ?}
注意：1.声明需要用{}括起来，每个声明以分号；结尾
?? ??? ??? ? 2.一行建议一个声明
?? ??? ??? ? 3.如果样式的属性值由多个单词组成，则用引号引起来
实例：
<style>
h2{
color: aqua;
}
</style>?[2]?? ?css的注释/*注释内容*/
?[3]css的三种使用方式： ?1.行内样式：直接写在标签上的样式，在标签上通过style属性定义的样式
?? ??? ??? ??? ??? ??? ??? ? ?2.内部样式：定义在style标签中的样式，style标签一般设置在head标签中
?? ??? ??? ??? ??? ??? ??? ? ?3.外部样式：定义在外部的css文件中，通过link标签引入
?? ??? ??? ??? ??? ??? ??? ? ?<link rel="stylesheet"type="text/css" href="css文件的路径"/>?
实例及运行效果：
<link rel="stylesheet"type="text/css" href="css/style.css"/>
<h2>hello world</h2>
<h2 style="color: aquamarine;font-family: 楷体;">hello world</h2>
<h2>hello world</h2>
style.css:
h2{
font-size: 40px;
}
?三.选择器
?[1]css基本选择器
?? ??? ??? ?1.通用选择器 *
?? ??? ??? ?* {
?? ??? ??? ??? ?属性名：属性值；
?? ??? ??? ? ? ? ...
?? ??? ??? ??? ? }
?? ??? ? ? ?2.元素选择器?
?? ??? ??? ??? ? 元素名/标签名 {
?? ??? ??? ??? ? ?? ?属性名：属性值；
?? ??? ??? ??? ? ? ? ?...
?? ??? ??? ??? ? ?? ? }
?? ??? ??? ?3.ID选择器 #
?? ??? ??? ?#id属性值 {
?? ??? ??? ??? ?属性名：属性值；
?? ??? ??? ? ? ? ...
?? ??? ??? ??? ? }
?? ??? ??? ?4.类选择器?
?? ??? ??? ?.class属性值{
?? ??? ??? ??? ?属性名：属性值；
?? ??? ??? ? ? ? ...
?? ??? ??? ??? ? }
?? ??? ??? ?5.分组选择器?
?? ??? ??? ?选择器1，选择器2，选择器3{
?? ??? ??? ??? ?属性名：属性值；
?? ??? ??? ? ? ? ...
?? ??? ??? ??? ? }
实例及运行效果：
<style type="text/css">
/*通用选择器*/
*{
color: #00FFFF;
}
/*元素选择器*/
div{
font-size: 30px;
}
/*ID选择器*/
#p1{
background-color: bisque;
color: black;
}
/*类选择器*/
.cls1{
font-family: 楷体;
}
/*分组选择器*/
#p1,.cls1,font {
text-decoration: line-through;
}
</style>
<div class="cls1">这是一个div</div>
<div>这是一个div</div>
<p id="p1">这是一个p</p>
<span class="cls1">这是一个div</span>
<br>
<font>这是一个font</font>
[2]?css组合选择器：
?? ??? ??? ?后代选择器：选择指定元素的所有指定后代元素，以空格隔开
?? ??? ??? ??? ??? ??? ?选择器 ?指定元素{
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?属性名；属性值；
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?...
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ?获取class属性值时food的元素的所有对应li列表项
?? ??? ??? ?子代选择器：选择指定元素的下一个指定元素，以加号>隔开
?? ??? ??? ?选择器 > 指定元素{
?? ??? ??? ??? ??? ??? ??? ?属性名：属性值；
?? ??? ??? ??? ??? ??? ??? ?...
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ?相邻兄弟选择器：选择指定元素的第一代子元素(只会找一个)，两者若有父元素则以加号+隔开
?? ??? ??? ?选择器 + 指定元素{
?? ??? ??? ??? ??? ??? ??? ?属性名：属性值；
?? ??? ??? ??? ??? ??? ??? ?...
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ?普通兄弟选择器：选择指定元素的所有元素(只会找一个)，两者若有父元素则以加号+隔开
?? ??? ??? ?选择器 + 指定元素{
?? ??? ??? ??? ??? ??? ??? ?属性名：属性值；
?? ??? ??? ??? ??? ??? ??? ?...
?? ??? ??? ??? ??? ??? ??? ?}
注意：样式的优先级是根据选择器的精确度/权重来决定的，权重越大，优先级越高
实例及运行效果：
1.后代选择器
<style type="text/css">
/*后代选择器*/
.food li{
border: #00FFFF solid 1px;
}
</style>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>卷心菜</li>
<li>菠菜</li>
</ul>
</li>
</ul>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
?2.子代选择器
/* 子代选择器*/
#food2 > li{
border: #FFE4C4 dotted 1px;
}
<ul class="food2">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>卷心菜</li>
<li>菠菜</li>
</ul>
</li>
</ul>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
3.相邻兄弟?/普通兄弟选择器
/* 相邻兄弟选择器*/
#mydiv + div {
background-color: #aa007f;
}
/* 普通兄弟选择器*/
#mydiv2 ~ div {
background-color: #7FFF00;
}
<div>这是相邻兄弟选择器1</div>
<div id="mydiv">这是相邻兄弟选择器2</div>
<div>这是相邻兄弟选择器3</div>
<hr>
<div>这是普通兄弟选择器1</div>
<div id="mydiv2">这是普通兄弟选择器2</div>
<div>这是普通兄弟选择器3</div>
?? ??? ?