css

CSS

CSS(Cascading Style Sheets) 层叠样式表

CSS引入方式

1.行内样式

在开始标签上加style属性，样式值是style的属性值

2.内嵌式

所有的样式都写在内，一般放在内

3.外链式

所有的样式均写到一个单独的文件内（该文件后缀名.css）,通过来连接到html文件里。link标签一般放到head标签内部

优先级：

原则：谁离标签近，谁的优先级高

CSS语法规则

选择器{

样式属性名 : 属性值 ;

...

}

选择器

通配符选择器  权重 0.5

*{ }

选择所有的标签

标签（元素）选择器  权重 1

标签名{  }

例如：div{ }

类选择器  权重 10

.类名{ }

例如： .box{ }

id选择器  权重100

#id值{ }

例如： #con{ }

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

选择器a  选择器b{ }

例如： .box span{ }

直接后代选择器

选择器a>选择器b{ }

选择器b必须是选择器a的直接子元素

分组选择器

选择器a , 选择器b , ...{ }

字体相关样式

font-family  字体系列

值：  多个字体之间用 逗号 隔开， 字体的中间有空格的用引号把该字体引起来

font-size  字体大小

单位：px（像素）

em（字体倍数）

font-style  字体风格

normal  不倾斜

italic  倾斜

oblique  倾斜

font-weight  字体粗细

normal  正常  不加粗

bold  加粗

bolder  更粗

lighter  细体

100-900  9个层次

700-900 加粗

line-height 行高

值：

1.数值+单位

2.数字    倍数

缩写：

font ： font-style值  font-weight值  font-size值 / line-height值  font-family值;

文本相关样式

text-align

文本的水平对齐方式

left 默认 左对齐

center 居中对齐

right 右对齐

justify 两端对齐

text-indent

首行缩进/悬挂

单位可以px 也可以是em

值可以为正（缩进），也可以为负（悬挂）

text-decoration

文本修饰

none 无修饰

underline 下划线

line-through 中划线/删除线

overline 上划线

text-transform

文本大小写转换

uppercase 全大写

lowercase 全小写

capitalize 首字母大写

letter-spacing

字母与字母之间 或 汉字与汉字之间的距离

word-spacing

单词与单词之间的距离

单行溢出默认出现省略号

overflow : hidden

text-overflow : ellipsis

white-space : nowrap

盒子模型

content 内容

width 宽度

height 高度

overflow

内容溢出处理

visible 默认 溢出部分 可见

hidden  溢出部分 隐藏

scroll  溢出部分 出现滚动条

auto  浏览器自动处理

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代表左内边距，按照顺时针方向，上右下左。

border  边框

border-width  边框宽度

border-color  边框颜色

border-style  边框样式

none  无边框

solid  实线

dotted  点状线

dashed  虚线

double  双实线

缩写：

border ： border-width值  border-style值  border-color值 ;

border-top

border-bottom

border-left

border-right

margin 外边距

margin-top 上外边距

margin-bottom  下外边距

margin-left  左外边距

margin-right  右外边距

缩写：  同padding

margin ： 值；

margin ： 值1  值2；

margin :  值1  值2  值3；

margin :  值1  值2  值3  值4；

margin:0 auto;  块元素水平居中

background  背景

background-color 

背景颜色

background-image

背景图片

url("图片路径")

background-repeat 

背景是否平铺

repeat  默认 垂直水平都平铺

no-repeat  不平铺

repeat-x  水平平铺

repeat-y  垂直平铺

background-position

背景位置

x轴坐标  y轴坐标

background-size

背景大小

width  height

值：

1.数字+单位

2.百分比

3.cover  把背景图片扩展至足够大，以使它铺满整个背景区域，可能会被裁切

4.contain  把背景图片扩展至最大尺寸，可以有留白

background-origin

背景图片开始渲染位置

padding-box

border-box

content-box

background-attachment

背景图片是否固定

scroll  默认 随页面滚动

fixed  固定不动

缩写：

background : bg-color值  bg-image值  bg-repeat值  bg-position值/bg-size值  bg-origin值  bg-attachment值;

浮动 float

none  默认  不浮动

left 左浮动

right  右浮动

定位 position

static  默认 不定位

relative  相对定位

相对于原来正常文档流的自己定位

absolute 绝对定位

1.包含框无定位，相对于浏览器定位

2.包含框有定位，相对于离自己最近的有定位的包含框定位

fixed  固定定位

始终相对于浏览器定位

需要依靠left，right，top，bottom的值发生位置改变

z-index 用来决定z轴上堆叠顺序， 值：无单位  可为负可为正

z-index越大，越靠上，值越小越靠下。

清除浮动

1.给父元素加height

2.给父元素加overflow：hidden

3.在所有有浮动的元素后加一个空元素，给此空元素加样式clear:both/left/right

clear:left  清除左浮动

clear:right  清除右浮动

clear:both  清除左右浮动

4.给父元素加伪元素 ::after    .clearfix::after{ display:block；content:""; clear:both }

伪类

:link  未访问状态

:visited  访问后状态

:hover 鼠标悬停状态

:active 鼠标激活状态

原则：

LoVe HAte  爱恨原则

元素转换

display

inline  转换为内联(行内)元素

block  转换为块元素

inline-block 转换为内联块元素

none 元素隐藏

列表样式

list-style

list-style-type

列表样式类型

none  无列表样式

disc  实心圆

circle  空心圆

square  实心方块

decimal  数字

list-style-image

列表样式图片

url("图片路径")

list-style-position

列表样式位置

outside  样式在外侧

inside  样式在内部

缩写

list-style:none

opacity 不透明度

取值范围 0-1

兼容ie8以下版本

filter:alpha(opacity=数值)    数值取值范围0-100