CSS样式表

内联样式 宽度无px，内外部样式有px

一、CSS创建

1. 内联样式 style=“ ”：不建议，耦合度高
2. 内部样式 <style type=“text.css”>：在head中
3. 外部样式<link rel="stylesheet" href=" css文件路径">

二、选择器

1. 标签选择器
2. 类选择器

<div  class=“ abc”>
.abc{}

3.id选择器：唯一

<div id="abc">
#abc{}

优先级
！important>id选择器>类选择器>标签选择器>*

• [ 层级选择]
• [ 组合选择]

1. 后代选择器：空格，管下面所有级
2. 子元素：>，管下一级
3. 相邻兄弟：+
4. 普通兄弟：~
5. 伪类
   5.1. ：first-child //第一个子元素
   5.2. ：first-of-type //选择每一个p元素是其母元素的第一个元素
   5.3. ：last-child //最后一个子元素
   5.4. ：last-of-type //选择每一个p元素是其母元素的最后一个p元素
   5.5. ：not(selector) //选择所有selector以外的元素
   5.6. ：nth-child(n) //选择所有 p 元素的父元素的第n个子元素
   5.7. ：nth-last-child(n) //选择所有p元素倒数的第n个子元素
   5.8. ：nth-last-of-type(n) //选择所有p元素倒数的第n个为p的子元素
   5.9. ： p:nth-of-type(n) //选择所有p元素第n个为p的子元素
   5.10. ：first-letter //选择每个元素的第一个字母，只用于块级元素
   5.11. ：first-line //选择每个元素的第一行
   5.12. ：before //之前插入内容
   5.13. ：after //之后插入内容
   !](https://img-blog.csdnimg.cn/20210224165121345.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NocmlzdGluYV9jeXc=,size_16,color_FFFFFF,t_70)

三、文本

四、字体

五、背景

六、链接

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

顺序：love&hate
hover不一定在链接上，在input上也可用
：focus{ border：outline} //光标获得焦点

七、列表

八、表格边框

边框宽度

1. 上，下，左，右
2. 上，左右，下
3. 上下，左右
4. 上下左右
   

九、轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

十、盒子模型

十一、Display(显示) 与 Visibility（可见性）

visibility：=hidden，隐藏某个元素，但不释放空间
display：=none，隐藏某个元素，释放空间
更改内联/块级元素：display=inline | block | inline-block

十二、Position(定位)

• static：默认，遵循正常的文档流对象
• relative：相对其正常位置。原本所占的空间不会改变。经常被用来作为绝对定位元素的容器块。
• fixed：相对于浏览器窗口是固定位置。与文档流无关，即使窗口是滚动的它也不会移动。
• absolute：相对于最近的已定位父元素。与文档流无关
• sticky：它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

十三、Overflow

用于控制内容溢出元素框时显示的方式。

十四、浮动

float=right | left | none
clear=both | left | right //当前元素两侧或左或右不出现浮动元素

十五、透明度rgba（，，，透明度）

十六、对齐

1. 元素居中对齐/图片居中对齐 margin: auto;
2. 文本居中对齐text-align: center;
3. 垂直居中对齐 padding