css

css
外部引用
标签名：link
href属性值是css所在的路径

内部引用
标签名：style
style的元素内容是css代码
即css代码时卸载html文件当中的

行内引用：
在引用开始标签里面加：style="属性值"

css注释： /*注释内容*/

css代码由一个规则组成
每个规则指定了对哪些元素用什么样式

选择器：该样式规则应用到哪些元素是哪些元素
声明规范：有哪些样式规则，由多个声明组成，用 ； 分隔
元素选择器书写格式
标记名{声明块}所有与该标记名匹配的元素，都将应用

ID选择器书写格式
#id值{声明块}
在同一个html文档中，元素的值id必须唯一，不同页面就可以相同
区别：一个与多个

类选择器书写格式：
.类名
所有class属性为指写类名的元素，都将应用声明块中的规则，在同一标签可以起多个类名，类名在class值里分隔符为空格

---

层叠机制
当一个标签发省声明冲突时，浏览器会自动触发层叠机制

声明冲突
同一个标签名下相同属性名，不同属性值

层叠的过程
1，比较优先级（每一个声明都有一个优先级，一个声明的优先级与它的来源和重要性有关）
2，比较特殊性
3，比较源次序

---

若属性值后跟上（！importaut）则表示一条重要声明，否则表示普通声明

---

行内样式 > id样式 > 类选择器 > 元素选择器 > 通配符选择器（特殊性为0）

规则：适用范围越大，特殊性越低，适用范围越小，特殊性越高

比较特殊性具体规则
冲突的声明，会生成4个数字
a：若声明是内样式，则为0，否则为1
b：规则中id选择器的个数
c：规则中类选择器，韦类选择器和属性选择器的个数
d：规则中元素选择器，伪元素选择器的个数

---

继承（inherit）
子元素会自动拥有父元素的某些css属性
可被继承元素的属性：color font-size font-weight text-align
不可被继承的属性：background-color

继承发生的场景
一个元素的某个css属性，只有满足下面两个条件，才会继承父元素
（1）该属性是可继承的属性
（2）该属性在样式表中没有声明  
强制继承
强制继承，也叫做显示继承，是指将css属性值设置为inherit
（1）为了继承不可继承的属性

content

每一个标签，都将使用display属性，不会被继承，默认值inline
content内容
含义：用于存放文本或其他元素，类似于一个箱子中存放

---

设置content区域的大小 
width: （）px;
height:（）px; 
background-color: 颜色;

溢出内容的展示方式：
    1、hidden溢出部分隐藏
    2、visible溢出部分显示(默认值)
    3、auto（XY轴方向中，哪个有溢出，哪个方向才会出现滚动条）
    4、scroll两个方向都会现在滚动条

overflow: hidden;
overflow: visible;
overflow: scroll;
overflow: auto; 

X轴方向溢出部分显示方式
    auto显示
    hidden不显不（隐藏）
    overflow-x: auto;  
    Y轴方向溢出部分显示方式
    auto显示
    hidden不显不（隐藏）
    overflow-y: auto;

---

width: 200px;
background-color: yellowgreen;
给一个值是四个方向 
padding: 10px;
给1个值是上下 左右
第2个值是1上下，2左右
第3个值是1上，2左右，3下
第4个值是1上，2右，3下，4左

内容与边框的间距
padding: 1px 2px 3px 4px;
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px; 

边框的样式
border-top-style: dotted;点线
border-right-style: double;双实线
border-bottom-style: dashed;虚线
border-left-style: solid;实线 

边框的粗细 
设置4条边框的粗细（ border-width: 20px;） 
设置上边框的粗细 （border-top-width: 5px; ）
 
边框的颜色
border-color: red; 
默认值是当前标签的文本颜色 

画三角形
step1:
width:0;
height:0;

step2:
border-方向-style:solid;

step3:
border-方向-width:尺寸;

step4:
border-方向-color:颜色值;
其它3个方向color取值为transparent（透明色） 

缩写 
设置某一条边的缩写 
border-top: red 3px solid; 

设置4条边的缩写
border: solid 10px deeppink; 
属性值除了样式都可以省略
省略颜色，默认值是文本颜色
省略粗细，默认值是3px(实现展示双实线与空格)
border: solid; 

圆角边框 
border: solid 30px red; 
取1个值代表4个角都是一个样的半径弧度 
取2个值：
    第1个值是左上和右下
    第2个值是左下和右上

取3个值：
    第1个值是左上
    第2个值是左下和右上
    第3个值是右下
取4个值：
    第1个值是左上
    第2个值是右上
    第3个值是右下
    第4个值是左下

---

[扩展] 
border-radius: n/m;
n代表X轴半径
m代表Y轴半径
当n与m不相等时，会画出一个椭圆形的圆角边框

注：宽和高取值一致
width: 100px;
height: 100px;
border: solid 3px red;
border-radius: 50%;
background-color: yellowgreen; 

width: 100px;
height: 100px;

外边距
给一个值是四个方向
margin: 10px;
注：只有margin可以取负值
margin-left:10px; 元素向右移动10px;
margin-left:-20px; 元素向左移动20px;

单行文本省略号
适用场景：相关推荐

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

选择器

伪类选择器	
	动态伪选择器的书写顺序：
	1、link和visited必须放在最前面（无先后顺序,静态伪类选择器）
	2、link和visited只能用于a标签
	3、link和visited后面是focus
	4、focus后面是hover
	5、hover后面是active
	
	即顺序有两种情况：
	情况1：link、visited、focus、hover、active
	情况2：visited、link、focus、hover、active
	
	网络通用：爱恨原则（love hate）

结构伪类选择器
	父元素>子元素
	first-child第一个元素 
	last-child最后一个元素 
	nth-child(n)某一个元素  选择第几个，n就取值多少
    nth-child(2n)偶数项元素  n起始值是0
	nth-child(2n+1)奇数项元素  
	 nth-child(-n+m)选中前m个元素 
	元素名：nth-of-type(n) 选中第n个
	nth-last-child(n) 选中倒数第n个元素

否定伪类选择器
	:not() 除了某个元素，其它元素添加样式
	:not():not() 除了某几个元素，其它元素添加样式 

伪元素选择器
	CSS创建的元素,都是选中元素的子元素
	格式：元素名A：before
	A的第1个子元素
	格式：元素名A：after
	A的最后1个子元素
	 格式：元素名A：first-letter
	元素A的第1个字
	 格式：元素名A：first-line
	元素A的第1个行
	
属性选择器
	 格式：元素名称[属性名="属性值"]
	 例：input[type="text"]
	
	 属性选择器扩展
	格式： 元素名[属性名^=属性值开头的内容]
	选中以XXX开头的元素 
	格式： 元素名[属性名$=属性值结尾的内容]
	选中以XXX结尾的元素
	格式： 元素名[属性名*=属性值包含的内容]
	选中包含XXX的元素 

内容盒
    内容盒：content
    填充盒：content+padding(overflow截取的区域)
    边框盒：content+padding+border（背景色的渲染区域）
   
    box-sizing设置盒子的尺寸（修改盒模型计算规则）
    取值：
    1、content-box（默认值）
    注：设置宽高时，设置的是内容盒的尺寸
    2、border-box
    注：设置宽高时，设置的是边框盒的尺寸
    即，padding和border的尺寸不变，content的尺寸减少
    
    适用场景：当一个元素宽度取值为100%时，并添加了padding或border时。
    就会出现横向滚动条。 为了去除滚动条，则修改当前的box-sizing值为border-box