前端 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.为内容设置删除线

12.表示插入一个内容，且内容会自动添加下划线（类似于横线被填上内容的意思）

13.
预格式标签，会将代码中的格式保存，且不会忽略多个空格
14.专门用来表示代码，但不会保存格式

注：一般结合使用pre 和code来表示代码，例如：
    
    	 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; ）