下面是我对css样式总结，可能很多刚接触的伙伴不知道怎么使用，没关系我也给大家准备了一套2019非常适合0基础学习视频资料。 需要的伙伴可以私信我，发送“前端”就可以获取领取地址，免费送给大家。

CSS2.0(Cascading Style Sheet)层叠样式表

作用：CSS用来修饰网页的(网页表现)

w3c规定尽量用css样式替代XHTML的属性

css的使用

a.内部样式(写在网页的头部)

<style>

.......

</style>

b. 内联样式(写在网页标记中)

<标记名称 style="css代码"/>

<标记名称 style="css代码">...</标记名称>

c.外部样式

<link type="text/css" rel="stylesheet" href="css样式URL" media="all|print|screen|tv"/>

(1)type :链接页面的文档类型

(2)rel:当前文档和目标文档的关系

(3)href:css样式目标页面

(4)media:根据媒体类型使用不同的css样式

all所有|screen计算机屏幕|tv电视|print打印机

说明： 内联样式优先级最高 ,如果内部样式和外部

样式冲突，后面的覆盖前面的样式

css的语法结构

选择器{属性:值;属性:值;...}

selector{attrbute:value}

选择器（selector）

(1)通配选择器 ==== *(自动应用所有标记)

(2)标记（类型）选择器 ==== 标记名称(自动应用指定标记)

(3)class类选择器=== .class名称

(手动应用任意标记中,一个标记中多个class名称用空格隔开)

应用:在标记中 属性 class="class名称"

(4)id选择器 ==== #id名称

(手动应用唯一标记中)

应用:在标记中 属性id="id名称"

(5)群组选择器 === 选择器名称,选择器名称...

(多个选择器有相同属性的缩写)

(6)后代选择器 === 选择器名称 选择器名称

(两个选择器至少是父子关系)

(7)子代选择器=== 选择器名称>选择器名称

(两个选择器必须是父子关系)

颜色值

a.单词字符： red红,green绿...

b.十六进制: #ff0000 ===#f00 红色

c.rgb()：rgb:分别是red,green,blue

0-255或百分比

例如:

红色: #f00 rgb(255,0,0) rgb(100%,0%,0%)

文本样式

(1)文本颜色 color:颜色值

(2)文本大小 font-size:value (单位： 像素px,

em:网页默认字体大小的比例 例如：1.5em默认字体的1.5倍)

(3)文本加粗 font-weight:normal|bold|值(100-900)

(normal==400 bold==700)

(4)文本倾斜 font-style:normal|italic

(5)文本字体 font-family:宋体,微软雅黑,'Times New Roman'

(6) text-decoration:none|underline下划线|

overline上划线|line-through删除线

选择器优先级

标记选择器 权值 0001

class类选择器 权值 0010

id 选择器 权值 0100

内联样式 权值 1000

说明：选择器权值越大优先级有高，

样式显示选择器优先级高的

继承的样式优先级最低,

如果权值相同后面的覆盖前面的样式

!important 的优先级最大

伪类选择器：

a.行为伪类

:link：链接未访问状态

:visited：链接已访问状态

:hover:设置鼠标悬停状态

:active:设置鼠标激活状态

说明: LVHA 顺序设置

伪元素选择器

:before

:after

例如：

:before{

content:"内容"|url(图像URL);

}

布局样式中盒子属性：

1.width:宽度

2.height：高度

div标记：块元素，宽度是父级百分之百

span标记：行元素,宽度是元素的宽度

说明：行元素不能设置宽高，只能给块元素

设置宽高，及有宽高属性的元素设置 img,input等

padding:内边距（边框和内容的距离）

padding-top:value 上内边距

padding-right:value 右内边距

padding-bottom:value 下内边距

padding-left:value 左内边距

margin:外边距（元素边框的外围）

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:左外边距

border (边框)

border-top-width:上边框宽度

border-top-sytle:上边框样式

(实线 solid, 虚线 dashed,

点线 dotted,双线 double)

border-top-color:上边框颜色

border-right-width:右边框宽度

border-right-sytle:右边框样式

border-right-color:右边框颜色

border-bottom-width:下边框宽度

border-bottom-sytle:下边框样式

border-bottom-color:下边框颜色

border-left-width:左边框宽度

border-left-sytle:左边框样式

border-left-color:左边框颜色

盒子的总宽度计算

总宽度= 左外边距+左边框+左内边界+盒子width

+右内边界+右边框+右外边距

文本样式2

font:font-style 倾斜

|font-variant 小号的大写字母

|font-weight 加粗

|font-size 字大小

|line-height 行高

|font-family 字体

font-style:normal|italic

font-variant:normal|small-caps小号的大写字母

font-weight:normal|bold|值(100-900)

normal==400 bold==700

font-size:value (单位: px, em)

font-family:宋体,Arial,'Times New Roman';

line-height:value 行高

说明:元素的行高等于盒子的

高度，实现元素的垂直居中

text-align:left|center|right

元素的水平对齐

text-decoration:none|underline

|overline|line-through

text-transform:none

|capitalize首字母大写

|uppercase 大写字母

|lowercase 小写字母

text-indent: value (单位 px em)首行缩进

说明：只能对块元素使用 text-indent

浮动（Float）

float:left左浮动

|right右浮动

|none不浮动

清除浮动

clear:both 清除两边浮动

|left 清除左浮动

|right 清除右浮动

布局显示

(1) display:none|

block 块

inline 行

inline-block 内联块

(2) visibility：visble 默认值

| hidden 隐藏

背景(background)

background-color:value 背影颜色

background-repeat:

repeat(重复默认值)

|repeat-x 水平重复

|repeat-y 垂直重复

|no-repeat 不重复

background-image:url(图片路径)

背影图片

background-attachment:scroll(滚动)

|fixed(固定)

background-position:

value(水平位置) value(垂直位置)

布局：

文档流布局

浮动布局

定位布局

定位(Position)

(1)属性值

a. static(默认值):标准文档流

b. fixed(固定定位):脱离文档流(不占位)，

通过 top,left,right

,bottom属性定位置

c. absolute(绝对定位)：脱离文档流(不占位)，

通过 top,left,right

,bottom属性定位置

(2) z-index (实现层排序)

说明：z-index属性只能有 fixed,absolute

relative 属性值时使用

可以是正值，负值；默认值是0

值越大定位层越在上面

透明度属性

(1) opacity:0~1;

(2) filter:alpha(opacity=1~100)

(支持的浏览器:IE)

一.定位(Position)

（1）属性值

static：默认值（标准文档流）

fixed(固定定位):脱离文档流(不占位),通过top,left

,right,bottom属性移动

absolute(绝对定位):脱离文档流(不占位),通过top,left

,right,bottom属性移动

说明:默认坐标在浏览器的左上角，通过左上角坐标来移动

fixed 有滚动条时与 absolute有区别

relative(相对定位):根据自身文档流定位(保留位置)

说明 ：默认坐标自身盒子的左上角

透明度

(1) opacity:0~1

说明: chrome(谷歌)，firefox(火狐)

safari (苹果浏览器),opera（欧朋）

(2)：filter:alpha(opacity=1~100)

说明： IE支持

总结:

1.css样式链接方法（内部链接，外部链接，内联样式）

2.选择器(

通配符选择器

标记选择器

class类型选择器

id 选择器

群组选择器

后代选择器

子代选择器

)

3.伪类选择器

4.盒子属性（width,height,padding,margin,border,background）

5.全局样式

6.布局中浮动

7.布局定位

8.hack 兼容