CSS快速入门

CSS（Cascading Style Sheets）翻译为层叠样式表或级联样式表，简称样式表。

一、语法

二、书写方式

嵌入式：通过<style></style>标签嵌入到html中，html5中，type可以省略不写

外链式：使用link标签<link></link>

行内式：直接卸载html标签的style属性中

三、选择器

基本选择器

使用id选择器时，id必须唯一，一个标签可以有多个类名，空格隔开即可。

复合元素选择器

这里注意

后代元素选择器和子元素选择器，子元素只匹配一级，后代是匹配所有符合条件的元素
相邻元素选择器只匹配紧挨着、下一个、兄弟元素

伪类选择器

给超级链接的不同状态设置样式，这里必须遵循L,V,H,A的书写顺序，不然会失效

属性选择器

四、尺寸样式、字体与文本属性

尺寸样式属性

宽度不设置时，自动占据父元素的100%
只有块级元素才可以设置宽度和高度，span标签不可以设置宽高，因为span标签是行内元素

文本属性

字体属性

注意font简写，顺序不可随意变动

六、列表样式属性

注意
list-style-image: url(图片地址)

七、背景样式属性

前面四个比较常用

简写属性，可以多个，顺序可以随意

八、继承

外层元素的属性会被内层元素所继承
当内层元素的样式与外层元素相同时，内层元素的样式会覆盖外层元素
只有文本与字体样式属性可以被继承

优先级
行内样式>ID选择器>类选择器>标签选择器
通常来说，指向约准确优先级就越高，也可以用以下计算方法
标签选择器 1
类选择器 10
ID选择器 100
行内样式 1000
复合选择器的权重相加，就是当前的权重值

注意加了!important 的属性，权重相当于无穷大，写法：接在属性值后面（属性：值 !important）。它只提升属性的权重，而不是选择器的权重。

九、标准文档流

指的是在HTML中，文本排列遵循，「从左到右」「从上到下」「高矮不齐，底部对齐」

十、浮动

要实现多个元素排在同一行，并且设置不同的大小，宽高，就要让元素脱标（脱离标准文档流），可以通过浮动的属性来设置。

浮动元素脱标之后，就不再占用空间了
浮动元素的层级比标准文档流里的层级要高，所以它会盖住标准文档流的元素
浮动元素可以向左或向右浮动
浮动元素遇到上级浮动元素和父级边框时会停止浮动
浮动元素浮动后，父级元素不会再包裹着浮动元素
行内元素设置浮动后，该元素会变成块级元素

写法：
float: left
float: right

案例：导航栏

十一、清除浮动

上面的div浮动之后父元素不再包裹着子元素，影响到了下面的「浮动与清除浮动」的文字块，让它没有在这三个块的下方，而是跑上去了。
上面浮动的元素，会影响到下面其他元素，这时候需要用到清除浮动，有三种方法。

给父级元素加一个高（不建议使用，因为一个元素的高度一般不是手动设置的，应该由其内容撑高）
使用clear属性清除浮动（写法：clear: left, clear: right ,clear: both）
使用overflow:hidden清除浮动（原意是将溢出的部分进行隐藏如下图，也可以用来清除浮动）

第二种一般通过，在最后一个浮动元素下，加一个空的块元素，然后不给它设置任何样式，增加clear属性，clear:both，来实现清除浮动，这样就不会影响到下面的元素了。

第三种原本的含义是隐藏溢出，比如下面这中情况，可以给块增加一个overflow:hidden，就可以实现隐藏溢出了。

这个用来清除浮动，一般用于列表内，因为列表内不能新增一个块元素div，所以将overflow:hidden的属性以行内样式的形式，写在ul这个父级元素内

十二、盒子模型

padding内边距

属性格式：
大属性：padding: xx px
小属性：
padding-top: xx px;
padding-bottom: xx px;
padding-left: xx px;
padding-right: xx px;
简写属性：
遵循顺时针，上，右，下，左的顺序
padding: 10px; 表示四个内边距都为10px
padding: 10px 20px; 表示上和下内边距为10px，左和右内边距为20px
padding: 10px 20px 30px; 表示上为10px，左和右为20px，下为30px
padding: 10px 20px 30px 40px; 表示上为10px，右为20px，下为30px，左为40px

margin外边距

属性格式：
大属性：margin: xx px
小属性：
margin-top: xx px;
margin-bottom: xx px;
margin-left: xx px;
margin-right: xx px;
简写属性：
遵循顺时针，上，右，下，左的顺序
margin: 10px; 表示四个外边距都为10px
margin: 10px 20px; 表示上和下外边距为10px，左和右外边距为20px
margin: 10px 20px 30px; 表示上为10px，左和右为20px，下为30px
margin: 10px 20px 30px 40px; 表示上为10px，右为20px，下为30px，左为40px

可以用来实现盒子的水平居中 margin: auto;
只有块元素才可以水平居中，行内元素不可（行内元素用text-align: center;）。
只有标准文档流的元素才可以水平居中

开始写CSS时需要清除默认的HTML内边距和外边距等。这样就不会影响到我们自己的布局。

Border边框

属性：border: 1px solid #f00;
border-top: xx px;
border-bottom: xx px;
border-left: xx px;
border-right: xx px;

盒子塌陷

标准文档流中，盒子的竖直方向边距是不会叠加的，只会取较大值。这就是盒子塌陷现象。（图一）
水平方向，是不会出现盒子塌陷现象的（边距会叠加）。
浮动元素，是不会出现盒子塌陷现象的，如下（图二）

善用父元素padding而不是子元素的margin，margin通常是用来描述兄弟元素的关系的，父子关系尽量用padding解决。

十三、display

可以用于转换块元素和行内元素
可以将隐藏的元素显示：display: block（主要是js用）
可以将显示的元素隐藏：display: none（主要是js用）
display: inline行内 block块级

案例，行内元素转化成块级元素，在导航栏中，导航栏内的文字是行内元素，无法设置宽高，那么在给它hover效果的时候，就只有上面文字的部分有效果，想要做到图一的效果，就需要把行内元素转化成块级元素。

十四、定位

position属性

position:fixed 固定定位
position:relative 相对定位
position:absolute 绝对定位
定位是要配合坐标一起使用的
top:xxpx
right: xxpx
bottom:xxpx
left:xxpx

固定定位

固定定位是以浏览器窗口定位的
固定定位元素脱离了标准文档流
固定定位层级比标准文档流层级高
固定定位不再占用空间

常用于实现顶部栏悬浮、返回顶部按钮。

相对定位

相对定位是相对于原来的自己来定位
相对定位元素没有脱离标准文档流
相对定位元素层级比原来的标准文档流高，会压盖其他元素
相对定位元素，会在原来的地方留下一个“坑”，所以很少单独使用，常用于跟绝对定位元素配合使用

绝对定位

绝对定位是相对于“祖级元素的位置”来定位的
祖级元素：先回查找父级元素有没有定位，没有就查父级元素的上一级的定位，如果都没有，就以浏览器窗口来定位
绝对定位脱离了标准文档流
绝对定位层级比标准文档流层级高
子绝父相

案例

这里需要给父元素设置一个定位，此时子元素就会参照父元素的位置来进行定位了。这里给父元素设置的定位可以是固定定位，也可以是相对。但是我们一般给父元素使用相对定位。“子绝父相”。

z-index

表示谁压盖谁，数值大的会压盖数值小的（常用于解决压盖，一般导航条都需要设置成超大的值）
只有设置了position属性的元素，才能拥有z-index
z-index是没有单位的，直接用正整数表示
如果多个定位元素没有设置z-index或者他们的值为一样，那么在html中（注意是在html中，不是css中），写在后面的会压盖前面的元素

十五、CSS3新属性

以下属于CSS3中新语法

结构伪类选择器

boder-collapse:collapes 合并表格线

伪元素选择器

注意，后面两个使用的时候需要加入内容content

阴影

文本阴影

text-shadow:水平阴影垂直阴影模糊的距离阴影的颜色
其中水平和垂直阴影是必须值，且可为负数。

其中水平和垂直阴影是必须值，且可为负数
文字阴影可以有多组值，逗号隔开即可
模糊的距离数值越大越模糊

盒子阴影

box-shadow:水平阴影垂直阴影阴影的清晰程度阴影的大小阴影的颜色内外阴影（默认外）

圆角矩形

boder-radius: 左上右上右下左下（表示转化为圆角的长度）

如果四个都是一样的可以简写为一个值即可
如果想让某个角变回直角，设置成0px即可
将四个角的值设置为宽度/高度的一半，就可以变成圆形
将左上和右上角设置为宽高的一半，就可以变成扇形半圆
将四个角设置为宽度的一半，就可以变成椭圆

案例各种圆角按钮、圆形图片

透明度

rgba（a,b,c,x）
x就是透明度，0-1之间，越低越透明。