前端 HTML&CSS 学习笔记4（基于尚硅谷教学视频）
三十一集（兄弟选择器）
后一个兄弟选择器
可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个{ }
例如：为p元素后的紧挨着的兄弟span元素设置背景颜色为绿色
p + span{
background-color:green;
}
后所有兄弟选择器
可以选中一个元素后所有的指定兄弟元素
语法：前一个 ~ 后面所有{ }
例如：为p元素后面的所有兄弟span元素设置背景颜色为绿色
p ~ span{
background-color:green;
}
三十二集（否定伪类）
否定伪类：可以从已选中的元素中剔除某些元素
语法：:not(选择器){ }
例如：
选中所有p元素，并将他们的背景颜色设置为绿色，除了class值为hello的p元素
p:not(.hello){
background-color: green;
}
选中所有p元素，并将他们的背景颜色设置为绿色，除了id值为p1的p元素
p:not(#p1){
background-color: green;
}
三十三集（样式的继承）
1.祖先元素上的样式，也会被其后代样式继承
2.利用继承可以将一些基本样式设置给祖先元素，后代元素会自动继承
3.不是所有祖先元素中的样式都会被继承，例如背景，边框，定位相关的样式等
三十四集（选择器的优先级）
当用不同的选择器选中同一个样式，并且设置相同的样式时，
最终到底采用哪种选择器所设置的样式，取决于选择器的优先级
优先级规则：
内联样式：优先级 1000
id选择器：优先级 100
类以及伪类选择器：优先级 10
元素选择器：优先级 1
通配选择器：优先级 0
继承样式 没有优先级
1.当选择器中含有多种选择器时，需要将选择器的优先级相加然后再比较
2.但是，选择器优先级计算不会超过他的数量级
3.如果选择器的优先级一样，则选择靠后的样式
4.并集选择器的优先级是独立计算的
5.可以在样式的分号前添加一个 !important ,则此时该样式会获得一个最高的优先级，但不建议使用
三十五集（伪类的顺序）
1. :link和:visited必须放在:hover和:active的前面，否则:hover和:active将会失效
2. :hover必须在:active前面，否则:active将会失效（因为要求发生:active时，就意味着:hover和:active同时发生，如果此时:hover在后面，因为优先级相同，则会采用:hover）
综上，建议顺序为 :link :visited :hover :active
三十六集（文本标签）
1.表示语气上的强调，通常以斜体显示
2.表示内容上的强调，通常以粗体显示
3.内容以斜体显示
4.内容以粗体显示
注：h5中规定：对于不需要着重显示的内容，而只是想单纯的斜体或加粗就可以用元素i b来表示
5.其中内容会比其父元素中的文字小一些
注：在h5中常用其表示一些细则类的内容，如网站版权声明，合同中的小字等
6.表示引用内容（书名，音乐名等）
7.表示一个短引用（行内引用），其中引用的内容浏览器会默认加上引号
8.表示一个长引用（块级引用），内容会独占一行
9.用来设置一个上标
10.用来设置一个下标
11.
System.out.println("如果能避开猛烈的狂喜");
三十七集（无序列表和有序列表）
列表就相当于去超市购物时的购物清单
无序列表
1.使用
标签创建一个无序列表
2.使用 标签在
中创建一个一个的列表项
3.通过
标签的type属性可以修改列表项的项目符号，默认的项目符号我们一般都不用
4.可以通过css选择器去掉项目符号，例如：
ul{
list-style:none;
}
5.如果需要项目符号，可以采用为设置背景图片的方式
6.
和都是块元素
有序列表
1.和无序列表类似，只不过用
来创建
2.有序列表通过有序的序号作为项目符号
3.type属性：
1（默认值）采用阿拉伯数字作为序号
a/A 采用英文字母作为序号
i/I 采用罗马数字作为序号
4.
也是块元素
5.也可以去掉项目符号，类似无序列表
三十八集（定义列表）
1.定义列表用来对一些词汇或者内容进行定义
2.使用
来创建定义列表
3.
中包含两个子标签
表示被定义的内容
表示对被定义内容的描述
例如
- 未来
- 明天会好吗？
注：上述三种列表之间都可以互相嵌套
三十九集（长度单位）
1. px 像素
2. n% 百分比（浏览器会根据其父元素的样式来计算该值，改变父元素时，子元素也会相应改变，所以创建自适应页面时，经常使用百分比作为单位）
3. em 类似于百分比（相对与当前元素的字体大小来计算 1em = 1font-size，常用来设置字体相关样式）
例如：通过css设置class值为"box"的div元素
.box{
font-size: 100px;
width: 1em;
height: 1em;
background-color: greenyellow;
}
四十二集（RGB值）
颜色单位：
1.在css中可以用单词表示颜色
2.使用RGB值表示颜色（red green blue三原色，通过它们不同的浓度来表示不同的颜色）
3.颜色的浓度是一个0-255之间的值
用法例如：
background-color:rgb(255,0,0);
4.颜色浓度也可以采用一个百分数来设置（0%-100%），其实最后也是转换成了0-255
用法例如：
background-color:rgb(100%,0%,0%);
四十集（十六进制RGB值）
1.也可以用十六进制的rgb值（00-ff）表示颜色，使用三组两位十六进制数,每组表示一种颜色浓度
2.语法：#颜色颜色颜色
例如：background-color:#ff0000;（像这种特殊的也可以写成 background-color:#f00; ）