CSS总结（持续更新）

CSS梗概

CSS是一门样式层叠语言，HTML用于结构，CSS用于美化页面
CSS格式：

<style>
选择器{ 
属性：属性值
}
<style>

不认识的单词

翻译：
font：字体
align：校准
decoration：装饰
transform：使改变
indent：缩进 italic：斜体字 oblique：倾斜的 bold：粗体
capitalize：首字母大写 uppercase：全部大写 lowercase：全部小写
margin：白边，外边距，盒子与盒子之间的距离
padding：内边距，元素到盒子的距离
wrapper：封装
sculpture：雕像 vertical：垂直的 collapse：坍塌
disc： 圆片 square：四方形 carousel：轮播插件 banner：横幅
split:分裂 cursor：光标 opacity：不透明度 container：容器
column：柱

CSS引用方式

1.行间样式：直接在标签内部上书写样式，只作用于当前标签
2.内部样式：在文件内部书写样式，内部样式只作用于当前文件
3.外部样式：
1.创建一个CSS文件
2.用link：css标签引用这个文件，可以被多个html文件引用
4.导入外部样式：1.创建一个CSS文件
2.在style标签中用import导入这个样式文件
tips：外部样式和导入外部样式的区别：
1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务，@import属于CSS范畴，只能加载CSS
2.link引用CSS时，在页面载入时同时加载，@import需要页面完全载入以后加载
3.link是XHTML标签，无兼容问题，@import低版本浏览器不支持
4.link支持使用JavaScript控制DOM改变样式，@import不支持。
以上，建议使用link引用CSS文件。

属性选择器

1.*匹配所有标签，性能太差，不推荐使用
2.标签选择器：
标签{
XXX}
对于单个标签
3.类选择器
.类名{
XXX}
对于一个类（class）有用
4.ID选择器
#ID名{
XXX}
对于一个ID有用
5.派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。通常作用与列表

样式权重

！important（10000）>内联样式（1000）>id选择器（100）>类、伪类选择器（10）>标签选择器（1）

CSS背景

格式
style
body{
background-xxxx
}
style

标签	属性	作用
background-color/transform	颜色名	背景颜色
background-image	none/url	背景图片
background-repeat	repeat/no-repeat/repeat-x/repeat-y	背景图片铺排方式
background-attachment	scroll/fixed	背景图片滚动位置
background	背景综合写法

伪类选择器

表示元素的一种特殊状态
格式

<style>
标签名:xxx{
xxx
}
<style>

常用：
a标签伪类：
:link/:visited（访问后）/:hover(翻译：不稳定状态，鼠标移到那里的状态)/:active
Focus：获得焦点

CSS字体

---

格式：

标签名{
Font-xxxx
}

常用标签：

标签名	属性	作用
font-size	px/%	字号
font-family	字体	字体，建议设置两种以上字体，用逗号隔开
font-style	normal/obliqueitalic/	斜体或正常
font-weight	normal/bold/bolder/lighter/100-900	字体粗细
line-height	px/em	字体底部到上一行字体底部的距离
font-color	字体颜色
Text-decoration	none/underline/overline/line-through（穿越文字线）	修饰
Text-align	left/right/center	文本对齐方式
Text-transform	capitalize/uppercase/lowercase/none	字母大小写
Text-indent	px/em/%/pt	缩进，就是段落前空几格的意思

关系选择器&伪元素&属性选择器

关系选择器：
1.空格：后代选择器
2.>:只选择儿子元素
3.+：只选择兄弟元素，有几个元素就表明从第几个元素开始
后代选择器：后代选择器可以选择作为某元素后代的元素。

 h1 strong{
           color:red;
       }
<h1><strong>关系1</strong><span><strong>关系2</strong></span></h1>

效果图：

伪元素：用于向某些选择器设置特殊效果
常用：
:first-letter
向文本第一个元素添加样式
:first-line
文本第一行添加样式
:before
文本第一个元素添加样式
:after
文本最后一个元素添加样式

属性选择器：属性选择器可以根据元素的属性及属性值来选择元素。
常用的有：
（1）标签.类名[元素]{
XXX
}
（2）标签[元素=元素值]{
XXX
}

浮动&盒子模型

浮动：让块级标签不独占一行
目的：把块级标签元素排在一行上
原理：让元素脱离文档流，不占用标准流
float的属性值：left：左浮动
right：右浮动
none：默认值、取消浮动
浮动后，后面的无论块级行级元素都不获显示在下一行，解决方法：清除浮动，目的：让后面元素自动掉到下一行，方法：
1).添加空标签，设置样式：clear:both;
Clear:left:清除左浮动
Clear:right:清除右
Clear:both:清除左右
Clear:none:不清除
2).在要清除浮动的父级添加样式overflow:hidden
overflow:hidden:超出部分隐藏，也可以用来清除浮动
3).增加伪元素:after并设定样式
父元素:after{
Content:"";
Display:block;
Clear:both;
}
在实际项目开发中，我们一般首选第二种方法。CSS盒子模型：
每一个元素都是一个盒子，一个盒子由margin（外边距）、border（边框线）、padding（内边距）、content（内容）组成
区别内外边距是以边框为参照，系统默认外边距为8px。
1.magin：指元素边框线外的距离
Margin-left：左边距
Margin-right:右
Margin-top：上
Margin-bottom：下
magin可用来设定任意一个边的边距，可以带1到4个参数
1个（apx）：表上下左右都用这样的外边距px
2个：（apx bpx）：表上下外边距为apx，左右为bpx
3个（apx bpx cpx）：表上为apx，下为cpx，左右为bpx
4个：上右下左
当给一个元素设置margin 负值（top/left）,该元素将在该方向上产生位移
当给一个元素设置margin负值（bottom/right）,这个元素并不会像你所预想的产生位移，而是将任何紧随其后的元素“拉”过来，覆盖在自己的上边。

2.内边距padding：跟margin用法一样

3.display：设置元素的显示方式
属性值：
none：不显示元素
block：块显示，在元素前后设置换行符，把行级标签转换成块级，因为行级不识别宽高，而块级识别，转换后，行级标签也可以设置宽高。
inline：行内显示，将块级转换成行级
Inline-block：将块级或者行级标签转换为行内块级标签

4.table样式
table一般不用来布局，用来格式化数据。
属性：
width：表格宽
height：高
Border-collapse：collapse，单线边框
border：边框线
td，tr属性：
width：表格宽
height：高
border：边框线
Text-align：文本对齐方式（left/center/right）
Vertical-align：文本垂直对齐（top/middle/bottom）