Web前端基础——CSS总结1

（1）CSS概述：

        层叠样式表(Cascading Style Sheets)，是一种样式表语言，用来描述HTML文档的呈现（美化内容）。

（2）代码格式：

（3）CSS引用方式：

• 内部样式表：CSS代码写在style标签里面。
• 外部样式表：CSS代码写在单独的CSS文件中(.css) ；在HTML使用link标签引入，格式如下。

• 内行样式：配合JavaScript使用；CSS写在标签的style属性值里。 

这是div标签

（4）基本选择器（格式使用外部选择器）：

• 标签选择器

• 类选择器

    

    
    
这是div标签

• id选择器

    

    
    
这是div标签
    
    

• 通配符选择器

 （5）文字控制属性：

描述	属性	说明补充
字体大小(字号)	font-size	PC端常用单位px，谷歌浏览器默认字号16px
字体粗细	font-weight	属性值——正常：400/normal        加粗：700/bold
字体倾斜	font-style	属性值——正常(不倾斜)：normal        倾斜：italic
行高	line-height	属性值——数字+px        数字(当前标签font-size属性值的倍数) 行高由上间距，文本高度和下间距组成。
字体族	font-family	属性值——字体名1,字体名2...，字体族名（可只写一个字体名）  font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
字体复合属性	font	是否倾斜 是否加粗 字号/行高 字体（必须按照顺序书写，字号和字体值必须书写，否则font属性不生效）
文本缩进	text-index	属性值——数字+px        数字+em(1em=1个字号大小)
文本对齐	text-align	控制文本水平对齐，属性值——左对齐：left        居中对齐：center         右对齐：right
修饰线	text-decoration	属性值——无：none        下划线：underline        删除线：line-through 上划线：overline

•  color 文字颜色

颜色表示方法	属性值	说明
颜色关键字	颜色英文单词	red，green，blue...
rgb表示法	rgb(r,g,b)	r,g,b表示红绿蓝三原色，取值0-255
rgba表示法	rgba(r,g,b,a)	a表示透明度，取值：0-1
十六进制表示法	#RRGGBB	#000000，#ffcc00，简写：#333，#fc0

（6）复合选择器 

• 后代选择器

1.选中某元素的后代元素

2.写法：（父子选择器用空格隔开）

父选择器 子选择器{CSS属性}，

• 子代选择器

1.选中某元素的子代元素（最近的子级）

2.写法：（父子选择器用>隔开）

父选择器 > 子选择器{CSS属性}

• 并集选择器

1.选中多组标签设置相同的样式

2.写法：（选择器之间用，隔开）

选择器1，选择器2，...，选择器N {CSS属性}

• 交集选择器

1.选中同时满足多个条件的元素

2.写法：（选择器之间连写，没有任何东西隔开）

选择器1选择器2{CSS属性}

3.注意：如果交集选择器中含有标签选择器，标签选择器必须写在最前面。

• 伪类选择器

1. 伪类表示元素状态，选中元素的某个状态设置样式。

2.鼠标悬停状态：选择器:hover{CSS属性}

超链接伪类：

• 如果要给超链接设置以下四种状态，需要按LVHA的顺序书写。

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时（激活）

（7）CSS特性：

• 继承性
  • 子级默认继承父级的文字控制属性；
  • 注意：如果标签有默认文字样式会继承失败，例如：a标签的颜色，标题的字体大小。
• 层叠性
  • 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性；
  • 不同的属性会叠加：不同的CSS属性都会生效；
  • 注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断；
• 优先级

1. 基础选择器：通配符选择器<标签选择器<类选择器
2. 复合选择器：叠加计算，计算公式:(行内样式，id选择器个数，类选择器个数，标签选择器个数)

•   规则        
  •   从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
  • !important 权重最高
  • 继承权重最低

（8）背景属性

描述	属性	属性值
背景色(bgc)	background-color
背景图(bgi)	background-image	url(背景图路径)，背景图默认有平铺(复制)效果
背景图平铺方式(bgr)	background-repeat	no-repeat:不平铺        repeat:平铺(默认效果)   repeat-x:水平反向平铺        repeat-y:垂直方向平铺
背景图位置(bgp)	background-position	水平方向位置 垂直方向位置        关键字——left:左 right:右 center:居中 top:顶部 bottom:底部（只写一个，另外一个居中，可颠倒取值顺序） 坐标(数字+px，正负都可以)——水平：正数向右，负数向左；垂直：正数向下，负数向上。（只写一个值代表水平方向，垂直方向居中）
背景图缩放(bgz)	background-size	关键字——cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见 contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白。 百分比：根据盒子尺寸计算图片大小 3.数字 + 单位（例如：px） 当图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。
背景图固定(bga)	background-attachment	fixed 背景不会随着元素的内容滚动
背景复合类型	background	背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）

（9）显示模式

• 块级元素
  • 独占一行
  • 宽度默认是父级的100%
  • 添加宽高属性生效
• 行内元素
  • 一行可显示多个(不换行)
  • 宽高尺寸由内容撑开
  • 添加宽高属性不生效
• 行内块元素 
  • 一行可以显示多个
  • 宽高尺寸可以由内容撑开
  • 添加宽高属性生效

转换显示模式

属性值：

block——块级

inline-block——行内块

inline——行内