css

css语法

css规则由两个主要的部分构成：选择器，以及一条或多条声明

CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

css背景

css背景属性用于定义html元素的背景。

css属性定义背景效果：

• background-color　　//定义元素的背景颜色，默认覆盖border+padding+content
• background-image　　//定义元素的背景图像，默认覆盖padding+content且背景图像进行平铺重复显示，以覆盖整个元素实体。
• background-repeat　　//定义平铺方向，属性值(no-repeat)不平铺。
• background-attachment　　//设置背景图像是否固定或者随着页面的其余部分滚动。默认值scroll
• background-position　　//设置背景图像的起始位置。默认值0% 0% 。如果只设置一个，第二个值默认center。

注意：背景属性可简写，简写顺序如上列出顺序

css文本格式

text-decorator属性用来设置或删除文本的装饰。主要用来删除链接的下划线。

a {text-decorator:none;}

css字体

css字体属性定义字体，加粗，大小，文字样式。

css轮廓

轮廓（outline）是绘制与元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline属性指定元素轮廓的样式、颜色和宽度。

注意：outline是不占空间的，既不会增加额外的width或height。（这样不会导致浏览器渲染时出现reflow或是repaint）。

css显示

display:none　　//隐藏元素后，不占原位置

visibility：hidden　　//隐藏元素后，仍占用原位置。

css居中显示

1.块级水平居中 --- （margin：0 auto）

前提：元素不能有浮动的属性且必须设置宽度，否则这个属性就会失效。

2，非块级元素水平居中 ---（text-align:center）

前提：元素没有浮动的情况下且为行内元素或者行内块元素，然后再其父元素添加text-align:center。

3.利用flex布局的容器属性justify-content：center 和align-items:center实现垂直水平居中。

4.利用定位（子绝父相），并且margin值减去自己宽高的一半

核心代码（需要居中的元素添加该代码）：

top:50%;left:50%;margin-top:负的自身高度的一半;margin-left:负的自身宽度的一半;

前提：必须设置自己的宽高。

5.利用定位（子绝父相）和transform

核心代码（需要居中的元素添加该代码）：

top:50%;left:50%;transform:translate(-50%,-50%);

注意：transform是css3属性，有兼容性问题，translate(-50%,-50%)中的百分比是相对自身宽高。

6.利用定位（子绝父相），并且margin：auto

核心代码（需要居中的元素添加该代码）：

top:0;right:0;bottom:0;left:0;margin:auto;

css选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同的父元素。

div+p　　表示选择div元素后面紧跟的第一个兄弟p元素

 

后续兄弟选择器可选择指定元素后相邻的所有兄弟元素。

div~p　　表示选取了div元素之后的所有的相邻兄弟元素<p>