CSS知识点总结

谷歌和苹果：-webkit-

火狐：-moz-

IE：-ms-

欧朋：-o-

一．什么是css？

CSS（Cascading Style Sheets）层叠样式表，专注于页面的表现层。

二．CSS引入方式

1.行内样式

在开始标签上加style=”样式属性名

1:样式属性值1;样式属性名2:样式属性值2;...”属性

2内嵌式

把所有的css样式都写在<style></style>标签内，<style></style>放在head标签内

3.外链式

把所有的css样式均放在一个css单独的文件里（后缀名xx.css）,在html里通过<link rel="stylesheet" href="css文件路径">来引入外部的css

优先级：

行内最大，其次谁离标签近，谁的优先级高（最晚优先级最高）

三．选择器

1. 统配符选择器选择所有的元素   0.5

 *{}

2.标签选择器                                   1

标签名{}例如：p{}

3.类选择器                                       10

 .类值{}例如：.content{}

拓展：选择器.类值{}    div.box{}  类叫box的div元素

4.id选择器                                       100

#id值{}      例如：#con{}

5.包含选择器（后代选择器）           权重相加

6.分组选择器

选择器1，选择器2，...{}

扩展：选择器直接子元素：

选择器a>选择器b{}  选择器a里的所有直接选择器b               父子关系

.box>span{}                                      类box里的所有直接子元素span

7.相邻兄弟元素选择器（E+F）

EF两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻

8.通用兄弟选择器（E~F）

E和F元素是属于同一父元素之内，并且F元素在E元素之后，那么E~F选择器将选择所有E元素后面的F元素

9.E[attr]:只使用属性名，但没有确定任何属性值

10.E[attr="value"]

E[attr="value"]是指定了属性值

11.E[attr~="value"]

只要属性值中有一个value相匹配就可以选中该元素

12.E[attr^="value"]

选择attr属性值以“value”开头的所有元素

13.E[attr$="value"]

选择元素attr属性，并且他的属性值是以value结尾的

.14E[attr*="value"]

所选择的属性，其属性值中有这个"value"值都将被选中

15.E[attr^="value"]

选择器会选择attr属性值等于value或以value-开头的所有元素

选择器权重：

行内样式> id选择器 > 类选择器 > 标签选择器 > 通配符选择器

伪类：

a:link a:visited a:hover a:active

遵循爱（LoVe）恨（HAte）

:hover用于当用户把鼠标移动到元素上面时的效果；

:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）

:focus用于元素成为焦点，这个经常用在表单元素上

:enabled :disabled :checked主要是针对于HTML中的Form元素操作

CSS3的:nth选择器

1、:first-child

2、:last-child

3、:nth-child(n)    数字、even偶数、odd奇数

4、:nth-last-child(n)

5、:only-child

:nth-child(n)，其中n是一个简单的表达式，那么"n"取值从“1”开始计算,不能取负值

5、:nth-of-type() :nth-child()

6、:nth-last-of-type()            :nth-last-child()

7、:first-of-type和:last-of-type      :first-child  :last-child

8、:only-of-type                :only-child

9、:empty    p:empty {display: none;}

否定选择器 :not()

input:not([type="submit"]) {border: 1px solid red;}

IE6-8浏览器不支持:not()选择器

伪元素 CSS 伪元素用于将特殊的效果添加到某些选择器。

::first-letter

::first-line

::before

::after可以用来清除浮动：

::after{

display:block;

content:"";

clear=both;

}

::selection  改变网页被选中文本的样式

四．字体样式

1. font-family字体系列

例如：font-famiy:”宋体”,”微软雅黑”,...

2. font-size字体大小

3. font-style字体风格

值：1）normal   默认  不倾斜

2）italic      斜体

3）oblique    倾斜

4. font-weight 字体粗细

值：1）bold 粗体

2）bolder更粗体

3）lighter     细体

4）100-900    数值越大，字体越粗

5. line-height行高

值：1）数值+单位

2）数值字体的倍数

缩写：

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

五．文本样式

1. text-decoration 文本修饰

值：1）none     无修饰

2）underline  下划线

3）line-through中划线

4）overline     上划线

2. text-align文本对齐方式

值：1）left      默认左对齐

2）center      居中对齐

3）right       右对齐

4）justify两端对齐

3. text-indent文本缩进

值：数值+单位（px或em）  为正数时，缩进；为负数时，悬挂

4.text-transform文本大小写转换

值：1）uppercase    全大写

2）lowercase全小写

3）capitalize首字母大写

5. text-overflow文本溢出处理

值：1）ellipsis      文本溢出以省略号显示

2）].....

6.文本阴影语法：

text-shadow:h-shadow    v-shadow    blur   color;空格隔开

(必需，水平阴影位置，可为负值) （必需。垂直阴影的位置。允许负值）

（可选。模糊的距离。）（可选。阴影的颜色）

可以重复添加文本阴影，用，隔开

盒子阴影

box-shadow:值1值2   值3  值4  值5  值6;

值1：必需的  水平阴影  为正往右投影 为负往左投影

值2：必需的  垂直阴影  为正往下投影 为负往上投影

值3：可选    阴影的模糊距离

值4：可选    阴影的扩展半径

值5：可选    阴影的颜色   默认黑色

值6：可选    投影方式   默认外投影   如果设置为inset 则为内投影

圆角

border-radius

值：

值1                   四个角的圆角一样

值1值2              值1代表左上角和右下角，值2代表右上角和左下角

值1值2  值3         值1代表左上角，值2代表右上角和左下角，值3代表右下角

值1值2  值3  值4     按照顺时针方向，值1代表左上角，值2代表右上角，值3代表右下角，值4代表坐下角

文本溢出以省略号显示

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;强制不换行

6. letter-spacing字母与字母之间的距离   汉字与汉字之间的距离

7.word-spacing单词与单词之间的距离

8. overflow         内容溢出处理

值：1）visible       溢出部分可见

2）hidden       溢出部分隐藏

3）scroll        溢出部分以滚动条形式显示

4）auto         溢出部分浏览器自动处理

六．盒子模型

1.border边框

border-width边框的宽度

border-color边框的颜色

border-style 边框的样式

值：1）solid实线

2）double    双实线

3）dotted     点状线

4）dashed    虚线

....

缩写:

border : border-width值   border-style值   border-color值;

border-top上边框

border-bottom 下边框

border-left 左边框

border-right右边框

2.padding    内边距内补丁内填充

padding-top上内边距

padding-bottom 下内边距

padding-left左内边距

padding-right 右内边距

缩写：

padding:值;               上下左右的内边距一样

padding:值1  值2;         值1代表上下内边距，值2代表左右内边距

padding:值1  值2  值3;    值1代表上内边距，值2代表左右内边距，值3代表下内边距

padding:值1  值2  值3  值4;      值1代表上内边距，值2代表右内边距，值3代表下内边距，值4代表左内边距，按照顺时针方向。

3.margin    外边距

margin-top上外边距

margin-bottom 下外边距

margin-left左外边距

margin-right右外边距

缩写：

margin:同padding

margin:0 auto;块级元素居中显示

 

4.background   背景

1）background-color背景颜色

2）background-image背景图片

值：url(“图片的路径”)

3）background-repeat背景图片是否平铺

值：a）repeat     默认水平、垂直都平铺

b）no-repeat 水平、垂直都不平铺

c）repeat-x        水平平铺

d）repeat-y        垂直平铺

4）background-position背景图片的位置

语法：x轴坐标  y轴坐标

值：a）表示位置的英文单词   例如：left center right top bottom

b）百分比

c）数字+单位

5）background-size背景图片的大小

语法：背景图片的宽度背景图片的高度

值：a）百分比    （盒子的百分比）

b）数字+单位

c）cover   背景图片等比例的扩展至足够大，以使它铺满整个区域，可能会引起图片裁剪。

d）contain  背景图片等比例地扩展至足够大，以使它的宽度或高度适应内容区域，可能会使区域留白。

6）background-origin背景图片开始渲染的位置

值：a）padding-box     默认   从左上角内边距的位置开始渲染

b）content-box     从内容区域左上角开始渲染

c）border-box      从左上角边框区域开始渲染

7）background-attachment背景图片是否固定

值：1）scroll     默认图片随页面其余部分滚动而滚动

2）fixed     图片固定不动

缩写：

background :背景颜色  背景图片   背景是否平铺  背景位置/背景大小背景渲染位置背景是否固定;

元素的相互转换

其他元素转换为块级元素display:block

其他元素转换为行内元素display:inline（内边距都能设置  外边距只能设置左右的外边距）

其他元素转换为行内块级元素display:inline-block

任何元素隐藏display:none

五．定义字体

先定义字体

@font-face{

font-family:”自己起的名字”；

src:url(“字体路径”),url(“字体路径”),....;

}

再应用字体

div{

font-family:上面定义的字体名字

}

变换

transform

值：

1. translate()移动

a) translateX()    水平移动

b)TranslateY()    垂直移动

 

2.rotate()旋转

a) rotateX(角度)  deg   绕x轴旋转

b)rotateY(角度)  deg   绕y轴旋转

c)rotateZ(角度)  deg   绕z轴旋转

 

3.scale()缩放

a) scaleX()数字     x轴的缩放

b) scaleY()      y轴的缩放

 

4.skew()扭曲

a) skewX()     deg     水平方向扭曲

b) skewY()             垂直方向扭曲

 

缩写：

transform:translate()  rotate()  scale()  skew();

Keyframes “关键帧”

@keyframes 动画的名称{

from{}

to{}

}或

@keyframes IDENT {

      0% {

        Properties:Properties value;

      }

      Percentage {

        Properties:Properties value;

      }

      100% {

        Properties:Properties value;

      }

    }

1、animation-name: 动画名称

animation-name: none | IDENT

IDENT是由Keyframes创建的动画名，可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开

2、animation-duration 动画持续时间

取值:为数值，单位为s （秒.）其默认值为“0”

3.animation-timing-function: 动画速度

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,,,)

4。animation-delay: 动画延迟时间

取值为为数值，单位为s(秒)，其默认值也是0

5.animation-iteration-count 动画次数

animation-iteration-count:infinite | <number>

6.animation-direction 动画运动方向

animation-direction: normal | alternate

7.animation-fill-mode 动画填充模式

规定动画在播放之前或之后，其动画效果是否可见。

animation-fill-mode : none | forwards | backwards | both;

none 不改变默认行为。   

both 向前和向后填充模式都被应用。

forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值 （在第一个关键帧中定义）。

animation-play-state: running/paused 动画的播放状态

CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)