css汇总

css简介

CSS是Cascading Style Sheet的缩写，层叠样式表，是一种用来表现文件样式的计算机语言。是我们在建立网页时用于装饰网页的美观度，主要是用于修饰html，XHTML，HTML5，xml等使这些网页得以有着千变万化的形式。

css语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开，选择符{属性：值}
例如：
其中body是我需要改变样式的HTML元素（也是一个选择符，下边会详细说明）font-size我想要修改的样式属性，16px是我进行修改的值。

css特点

1.继承特点：

网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。

2.层叠特点：

网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式
后面定义的样式，会覆盖前面定义的样式

css书写格式

css书写格式有四种引入格式

1.内嵌式引入

把style标签嵌套在head标签中
例如：

2.行内样式

对单一元素进行修饰
例如：
将style嵌入元素属性内进行修改

3.外链样式

把css当成是一个文件，通过link标签引入到html中
例如：

4.嵌入样式

内嵌和外链一种综合性的使用，不太常用了解即可
例如：

对于以上四种样式也具有优先级区分
会显示哪种样式取决于哪种样式离修饰的目标越近，在四种样式中行内样式>剩下的其它三种形式，样式的显示取决于距离

css选择符

1.标签选择符

标签选择器是同通过标签的名字来进行命名的
格式为：标签+{}
例如：

2.ID选择器

当标签中出现id属性的，那么可以使用id选择器。其中Id选择器通常应用于某些标签中独有的样式，Id选择器的标识是#
格式为： #+id+{}
例如：

3.类选择器

当标签中出现class属性的时候可以使用类选择器，类选择器通常应用于某几个标签具有相同的样式。其中类选择器的标识是.
格式为：.+class属性+{}
例如：

4.全选择器

全选择器 使用*号来表示 对整个html中的所有标签都起作用
格式为 *+{}
例如：
适用场景： 因为每种浏览器的默认属性的相关值都不一样，所以在初始阶段需要把所有浏览器的默认值，都归到一个统一的默认值下。然后再进行具体其他操作。

5.包含选择符

包含选择符特点为嵌套，中间用空格间隔 ，包含选择符的标识是空格
格式为#content+空格+标签
例如：

6.分组选择符

多个选择符同时具备同一种样式，使用分组选择符，分组选择符的标志是，
格式为标签一，标签二，标签三等等+{}
例如：

7.标签指定式选择符

标签指定式选择符中间不会存在任何符号
格式：标签+#content+{}
例如：

8.组合选择符

就像在《武状元苏乞儿》中苏乞儿与无极对决时一样，苏乞儿打完了降龙十七掌，只差最后一掌第十八掌不会，因为在练习过程中一直没有悟出来。无极没有被打倒，反过来就把苏乞儿打倒了，对苏乞儿嘲讽说：“太可惜了，只剩下最后一掌了，为什么不打出来？”千钧一发之际，大风吹开掌谱一页页翻过，倒在地上的苏乞儿突然开悟——第十八掌，就是要把前面的十七掌系统地整合起来！
而正如我们的选择符一样最后一个选择符就是将前边的选择符系统地使用一起

控制文本及字体

字体

1.字号

对于字号的控制，采用font-size标签，值有px，em，%等
例如：

2.字色

对于字色的控制，采用color标签，可以使用
颜色和十六进制颜色值
例如：

3.字体

对于字体的控制，采用font-family标签，可以使用指定的系列名称（例如：“times”、“courier”、“arial”。）
和通常字体系列名称例如：（“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”）
例如：

4.行高

对于字体的控制，采用line-height标签，可以使用%，em，px来定义行高的值
例如：

5.字体的粗细

对于字体的控制，采用font-weight标签，可以使用normal[正常]bold[粗体]进行文字粗细的定义
例如：

文本

1.文本缩进

对于文本缩进的控制，采用text-indent标签，可以使用em，px进行定义缩进的值，缩进的值可以为负数
例如：

2.文本水平对齐方式

对于文本水平对齐的控制，采用**text-align
**标签，可以使用left[（左）center（中）]right（右）进行定义水平对齐的方式
例如：

3.对象中空白处理

对于对象中空白处理的控制，采用white-space标签，可以使用normal（自动换行），pre（换行和空白受保护），nowrap（强制在同一行显示）进行对象中空白处理
例如：

4. 文本大小写控制

对于文本大小写控制的控制，采用text-transform标签，可以使用none（正常大小），capitalize（每个单词的第一个字母转换成大写）uppercase（转换成大写）lowercase（转换成小写）进行文字大小写控制
例如：

5.元素的垂直对齐方式

对于元素的垂直对齐方式的控制，采用vertical-align标签，可以使用sub（设置文字为下标），super（设置文字为上标），
top（把元素的顶端与行中最高元素的顶端对齐），text-botton（把元素的低端与父元素字体的低端对齐）对元素的垂直对齐方式进行修改
例如：

伪类的链接

我们在链接上对于伪类的使用具有四种，分别为未访问的链接，已访问的链接，鼠标移动到链接上，鼠标按下到链接上

1.未访问的链接

是当前并未访问的链接的属性
格式为 **a:link+{color：}**后color属性使用与平时一样
例如：

2.已访问的链接

是当前已经访问的链接的属性
格式为 **a:visited+{color：}**后color属性使用与平时一样
例如：

3.鼠标移动到链接上

是表示当鼠标悬浮在链接上显示的属性
格式为 **a:hover+{color：}**后color属性使用与平时一样
例如：

4.鼠标按下到链接上

是表示当鼠标按在链接上显示的属性
格式为 **a:active+{color：}**后color属性使用与平时一样
例如：

注

text-decoration: none;可以消除下划线

盒子模型

内边距 (padding)

用于填充内容内部
padding用于元素与内容之间的间隔，让内容与元素之间有一段距离。
使用地点：
1.当需要在border内测添加空白时。
2.当空白处需要背景（色）时。
2.当上下相连的两个盒子之间的空白希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

外边距 (margin）

用于描述浏览器边缘到内容的之间的距离
margin是用来隔开元素与元素的间距；是用于布局分开元素使元素与元素互不相干。
使用地点：
1.当需要在border外侧添加空白时
2.当空白处不需要背景时
3.当具有上下相连的两个盒子之间空白需要相互消除的时候
其中Margin：1px ，；后边加一个数值时表示上下左右都是1px的距离
Margin：2px 4px；后边加两个数值时表示上下为2px距离、左右 4px距离
Margin：8px 2px 4px 后边加两个数值时表示上为8px距离 左右为2px距离 下为4px距离
Margin：1px 2px 3px 4px 后边加两个数值时表示 上、右、下、左分别对应的数值

边框（border）

border：1px （像素值）solid（实线 ） black（颜色），以上数值均可改动
例如：

块状元素和内联元素

块状元素

具有高度和宽度的属性，但是它不允许其他元素和它同行显示
代表标签 div，p 等等
块状元素的默认属性： display:block;

内联元素

不具有宽度和高度的属性 允许其他元素与其同行显示
代表标签 a，span
内联元素的默认属性 display:inline;
块状元素和内联元素之间可以进行转换
Display：none 可以隐藏元素

控制背景

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
在Css中可以使用background-image url();来控制背景

1.背景颜色

和HTML中使用方法相似
采用background-color：#ccc；值可使用颜色和十六进制颜色值
例如：

背景图像

background-image：url（背景图像的位置及全称）
例如：

背景图像的重复方式

背景图片由于尺寸问题，通常可以进行选择重复方式
background-repeat:（repeat、no-repeat、repeat-x、repeat-y）
其中repeat表示背景图像重复；no-repeat表示不重复；repeat-x表示在x轴上进行重复；
repeat-y表示在y轴上进行重复
例如：

背景图像的位置

对于背景图像的位置可以进行定位使用background-position进行定位
其中可以使用如下四种方法进行定位
top[left center right]
表示在顶端的左中右
center[left center right]
表示在居中位置的左中右
bottom[left center right]
表示在底端的左中右
x坐标 y坐标[第一个值是水平位置，第二个值是垂直位置。左上角是0 0.单位是像素（0px 0px）]

背景图像的依附方式

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
其中scroll为默认值，表示背景图像会随着页面其余部分的滚动而移动。
fixed表示当页面的其余部分滚动时，背景图像不会移动。
inherit表示规定应该从父元素继承 background-attachment 属性的设置。
例如：

布局

表格布局 table

已经淘汰掉了

浮动布局 float 属性

1.什么是浮动
浮动是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。
2.值
none：不浮动
left：对象向左浮动，而后面的内容流向对象的右侧
right：对象向右浮动，而后面的内容流向对象的左侧
前面的元素浮动效果后，会对后面的元素产生影响
例如：

清除浮动 （clear）
当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过消除浮动的方法来解决，浮动元素的影响
值：
none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：左右两侧不允许有浮动对象
例如：

定位布局

我们可以使用positon属性进行定位布局
其中值：
static 静态定位：页面中的每一个对象的默认值。sa
absolute 绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
relative 相对定位：对象不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位
例如：

overflow

有以下四种
visible[默认值。不剪切内容也不添加滚动条]
auto[在必需时对象内容才会被裁切或者显示滚动条]，
hidden[ 不显示超过对象的尺寸的内容]，
scroll[总是显示滚动条]
3种隐藏元素的方法：
1.display：none
2.width：0 height0
3.overflow:hidden
例如：

zoom

zoom进行缩放：
可以用一下两种
normal：默认值。使用对象的实际尺寸
number：百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值

css3

1.圆角边框

可以使用Border-radius：
通常使用单位 像素 百分比 em来进行将边框圆角化

方向定位
可以通过方向来进行定位
border-top-left-radius:100%;
先上下，后左右

阴影效果
给div 中的图片 加阴影效果比较常用
Box-shadow 10px 10px 5px #888888;
颜色是对阴影进行改动
例如：

文本效果

文本阴影

与边框阴影相似，为text-shadow; 用法和 box-shadow类似

自动换行

我们可以使用word-wrap 属性允许文本强制文本进行换行
其中值为以下三种
1.normal：使用浏览器默认的换行规则
2.break-all：允许在单词内换行。
3.keep-all：只能在半角空格或连字符处换行。
例如：

background 新增属性

Background-size：800px 800px;
用于改变图片或者背景图片的大小

Background-origin: content-box 对内容的定位；padding-box 是对内边距的定位；border-box是对和对边框的定位

2D动画效果

平移

我们可以使用translate() 方法通过x和y表示的屏幕横向的坐标位置和屏幕纵向的坐标位置
两个值分别为x轴与y轴移动的位置
例如：

旋转

我们可以使用rotate() 方法进行角度旋转
rotate(30deg) 里面的参数描述的是角度 deg是角度单位 表示旋转（顺时针）
例如：

缩放

根据给定的宽度（X 轴）和高度（Y 轴）参数，通过 scale() 方法，元素的尺寸会增加或减少，值为倍数
例如：
其中scale(2,2) 第一个表示宽度2倍 第二个表示高度2倍

翻转

skew表示翻转效果，skew里面具有两个参数
参数一表示X轴的角度
参数二表示Y轴的角度
例如：

过渡transiction

在过渡效果中，有以下三种属性
property(参与过渡效果的属性)
duartion(过渡效果花费的时间)
timing（执行速度的快慢）
其中的值及效果分别是
1.linear
规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
2.ease
规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
3.ease-in
规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
4.ease-out
规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
5.ease-in-out
规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）

动画

@keyframes 规则 用于声明动画的效果
From-----To
0%-100%
自定义的名称

Animation：自定义的名称 5s(执行时间)

透明度:

opacity: 0.8; 从0-1 1表示不透明 0 表示完全透明。