CSS

CSS引入方式

CSS基础选择器

标签选择器

最大的优点就是为页面中同类型的标签统一样式。

标签名{属性1：属性值1；属相2：属性值2；}

类选择器

.class名{属性1：属性值1；属性2：属性值2；}

class可重复

多类名选择器

样式显示效果和书写css样式的上下顺序有关

ID选择器

#id名{属性1：属性值1；属性2：属性值2；}

元素的id值是唯一的

通配符选择器

*{属性1：属性值1；属性2：属性值2；}

*代表选中整个HTML页面中的所有元素。

*{
    margin:0px;
    padding:0px;
}

CSS复合选择器

交集选择器

标签名+类名/ID名（紧跟）

并集选择器

各个选择器（标签，类名，ID名）中间用逗号隔开

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择，能选择任何包含在内 的标签。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

伪类选择器

:link 未访问前的样式

:visited 访问过后的样式

:hover 鼠标悬停时的样式

:active 鼠标点击时的样式

CSS字体样式属性

em 相当于对象内文本的字体尺寸

font

font:font-style font-weight font-size line-height font-family

可以省略，但不可颠倒顺序

font-family字体

现在网页普遍字体使用14px+

CSS Unicode字体【非重点】

xp系统不支持类似微软雅黑的字体

font-weight：字体粗细

数字400相当于normal

数字700相当于bold

font-style：字体风格

font-style:normal | italic | oblique

normal 默认值，正常字体

italic 斜体

oblique 倾斜的字体

CSS外观属性

line-height 行高

text-align 水平对齐方式

text-indent 首行缩进

text-decoration 文本装饰

text-align:center;
text-indent:2em;
text-decoration:none | underline;
none:	    取消样式
underline： 添加下划线

标签显示模式

行内元素

<a> <span> <strong>
特点：
1.和相邻元素在一行
2.宽高不能设置，但水平方向的padding和margin可以设置，垂直方向无效
3.默认宽度为它本身内容的宽度
4.行内元素只能容纳文本或其它文本元素（a除外）

块级元素

<h1>~<h6>  <p> <div> <ul> <ol> <li>
特点：
1.总是从新行开始
2.宽高，行高，外边距，内边距都可设置
3.宽度默认为容器的100%
4.容纳内联元素和块元素

行内块元素

<img />  <input />  <td>
可以设置宽高，对齐方式
特点：
1.和相邻元素在一行，但之间有空白缝隙
2.默认宽度是其内容宽度
3.宽高，行高，外边距，内边距都可设置

标签显示模式转换display

块转行内：display：inline；

行内转块：display：block；

块，行转行内快：display：inline-block；

CSS书写规范

空格规范

1.选择器与大括号之间需要一个空格

2.属性名与之后的冒号之间不允许出现空格

行高

文字的行高是其盒子模型的高度（显示垂直居中对齐）

CSS三大特性

CSS层叠性

所谓层叠性是指多种CSS样式的叠加。

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。

2. 样式不冲突，不会层叠
   
   

CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。

CSS优先级

在考虑权重的情况下，基层样式权重为0，优先级是最低的，行内样式优先。应用在style属性的元素，它的优先级是非常高的，但不建议使用。

可定义一个！important命令，该命令被赋予最大的优先级。

继承或*（通配符）的权重 0,0,0,0

元素选择器的权重 0,0,0,1

类选择器（伪类属性） 0,0,1,0

ID选择器权重 0,1,0,0

行为样式权重 1,0,0,0,

使用！important命令 无限大

CSS背景（background）

背景颜色 background-color

背景图片（image）

background-image

语法：

background-image : none | url (url) 

背景平铺（repeat）

background-repeat

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

参数：

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

背景位置(position)

语法：

background-position : length || length
background-position : position || position 

参数：

length : 　百分数 | 由浮点数字和单位标识符组成的长度值
position : 　top | center | bottom | left | center | right

注意：

如果只设置了一个值，那么这个值默认表示x轴上，另一个y轴上的值默认为center

背景附着

语法：

background-attachment : scroll | fixed 

参数：

scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

背景透明（CSS3）

语法：background：rgba（0,0,0，透明度）

透明度取值0~1之间

背景简写

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

盒子模型（CSS重点）

边框（border）

border-width 边框宽度

border-color 边框颜色

border-style 边框样式

属性值：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

简写 border：宽度 样式 颜色

盒子边框（上右下左边框写法）

上边框 border-top-width 上边框宽度

​ border-top-style 上边框样式

​ border-top-color 上边框颜色

简写 border-top：宽度 样式 颜色

上右下左只需将top替换 top right bottom left

表格的细线边框

border-collapse：collapse

圆角边框（CSS3）

语法

border-radius:左上角  右上角 右下角  左下角 

内边距（padding）

上右下左

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注意： 后面跟几个数值表示的意思是不一样的。

实质上会撑大外面的自己

两个值的情况：上下同值 左右同值

三个值的情况：上一个值 左右同值 下一个值

外边距（margin）

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

清除元素的默认内外边距

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

嵌套块元素垂直外边距的合并

在嵌套块元素中，如果父元素没有边框，内边距，而子元素有外边距，会连带元素一起移动。

1.可以为父元素设置1px的边框或内边距

2.可以为父元素添加overflow：hidden

盒子水平居中

margin：auto；

文字盒子居中图片和背景的区别

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

盒子模型的稳定性

优先级顺序：width>padding>margin

盒子阴影

语法

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

浮动（float）

float:left | right | none;

普通流（normal flow）

按照块元素从上往下的顺序排列或是行内元素从左往右的顺序排列（页面默认布局）

注意：

1.浮动元素永远影响的是其下一个元素

2.浮动元素他的上一个元素，如果也浮动那么当前元素的顶部会和上一个元素的顶部对齐两个元素会成一行

浮动可以使元素的显示模式体现为行内块元素的特性