后代选择器选择标签
- 选择器1 选择器2 { css的属性名：属性值； }
hover伪类选择器设置标签的鼠标悬停状态
- a:hover { css的属性名：属性值； }
设置标签的背景颜色和背景图片
-
背景颜色
- background-color
-
背景图片
- background-image:url(图片的路径)
常见元素显示模式分为哪三种
-
块级元素
- display:block
-
行内元素
- display：inline
-
行内块元素
- display：inline-block
块级元素、行内元素、行内块元素的显示特点
-
块级元素
- 1、独占一行
- 2、宽度默认占满父元素的宽度，高度默认由内容撑开
- 3、可以设置宽高
-
行内元素
- 1、一行可以显示多个
- 2、宽度和高度默认由内容撑开
- 3、不可以设置宽高
-
行内块元素
- 1、一行可以显示多个
- 2、可以设置宽高
块级元素和行内元素的区别
-
块级元素
- 1、独占一行
- 2、宽度默认占满父元素的宽度，高度默认由内容撑开
- 3、可以设置宽高
-
行内元素
- 1、一行可以显示多个
- 2、宽度和高度默认由内容撑开
- 3、不可以设置宽高
将元素转换成块级元素和行内块元素的代码
-
转换成块级元素
- display:block
-
转换成行内块元素
- display:inline-block
有哪些常见属性可以继承
-
color
-
font相关属性
- font-style
- font-weight
- font-size
- font-family
-
text相关属性
- text-indent
- text-align
-
line-height
块级元素水平居中的方法
- margin:0 auto
行内元素、行内块元素水平居中的方法
- text-align：center
选择器进阶
-
复合选择器
-
后代选择器
-
结构
- 选择器1 选择器2 {css}
-
作用：
- 先通过选择器1找到一堆标签，再一堆标签的后代（儿子、孙子、重孙子....）中找到满足选择器2的标签，设置样式
-
-
子代选择器
-
结构
- 选择器1>选择器2 {css}
-
作用：
- 先通过选择器1找到一堆标签，再一堆标签的子代（儿子）中找到满足选择器2的标签，设置样式
-
-
-
并集选择器
-
结构
- 选择器1,选择器2 {css}
-
作用：
- 找到选择器1和选择器2对应的标签，设置样式
-
注意点
- 1、并集选择器中可以同时写多个选择器，多种选择器，选择器之间以逗号隔开
-
-
交集选择器
-
结构
- 选择器1选择器2 {css}
-
作用：
- （既又原则）
- 找到页面中既满足选择器1又满足选择器2的标签，设置样式
-
注意点
- 1、交集选择器中可以同时写多个选择器，多种选择器，选择器之间紧挨着的
- 2、如果交集选择器中有标签选择器，此时标签选择器必须写在第一个
-
-
emmet语法
-
hover伪类选择器
- 鼠标悬停的状态
背景相关属性
-
background-color
-
背景颜色
-
取值
- 关键字
- rgb表示法
- rgba表示法
- 十六进制表示法
-
-
background-image
-
背景图片
-
取值
- url( 图片的路径 )
-
-
background-repeat
-
背景平铺
-
取值
-
1、平铺
- repeat
-
2、不平铺
- no-repeat
-
3、沿着水平方向平铺
- repeat-x
-
4、沿着垂直方向平铺
- repeat-y
-
-
-
background-position
-
背景位置
-
取值
-
1、方位名词（最多只能表示9个位置）
-
水平方向
- left
- center
- right
-
垂直方向
- top
- center
- bottom
-
-
2、数字+px（坐标）
-
坐标系
-
原点（0,0）
- 盒子的左上角
-
x轴
- 水平向右
-
y轴
- 垂直向下
-
-
操作
- 将图片左上角与坐标点重合即可
-
-
-
-
连写形式
-
属性名
- background
-
属性值
- 单个属性值的合写，取值之间以空格隔开
-
注意点
-
书写顺序
- 推荐：color image repeat position
-
省略问题
-
按照你的需求省略
-
特殊情况
- 如果盒子的大小和背景图片一样大，此时可以直接写background：url();
-
-
如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
-
-
-
img标签和背景图片的区别
-
img标签
- 不设置宽高会显示默认宽高
-
div + 背景图片
-
需要给div设置宽高
- 因为背景图片只是一个css样式，不是html中的内容，不能撑开div标签
-
-
元素显示模式
-
块级元素
-
display：block
-
特点
- 1、独占一行
- 2、宽度默认占满一行，高度默认由内容撑开
- 3、可以设置宽高！！
-
代表标签
- div
- p
- h系列标签
-
-
行内元素
-
display：inline
-
特点
- 1、一行可以显示多个
- 2、宽度和高度默认都是由内容撑开
- 3、不可以设置宽高！！！
-
代表标签
- a
- span
-
-
行内块元素
-
display：inline-block
-
特点
- 1、一行可以显示多个
- 2、可以设置宽高
-
代表标签
-
input
-
特殊情况
- img标签有行内块元素的特点，但是调试工具中显示默认显示模式为inline
-
-
-
三种显示方式的转换
-
display
-
块级元素
- block
-
行内元素
- inline
-
行内块元素
- inline-block
-
-
-
html的嵌套规范
- 1、a标签中不能嵌套a标签
- 2、p标签中不能嵌套div、h系列标签常见的块级元素
-
居中方法再总结
-
水平居中
-
text-align：center；
-
1、文本
-
2、行内元素
- 如：span、a
-
3、行内块元素
- 如：input、img
-
注意点：如果需要让以上元素水平居中，此时直接以上元素的父元素设置即可
-
-
margin：0 auto；
- 1、块级元素
- 注意点：直接给当前元素设置的
-
-
垂直居中
-
line-height
- 单行文本
-
-
CSS 三大特性
-
1、继承性
-
子承父业：子元素有默认继承父元素样式的效果
-
有哪些常见的样式可以继承
- 1、color
- 2、font-相关的属性
- 3、text-相关的属性
- 4、line-height：行高
-
继承的小应用
-
去除列表默认的样式（小圆点）
- ul { list-style：none； }
-
统一不同浏览器默认文字大小
- 谷歌浏览器默认文字大小：16px
- 不同浏览器可能显示的默认字体大小不一致，开发的时候通常会给body标签设置统一的font-size保证不同浏览器效果一致
-
-
继承失效的特殊情况
-
1、a标签的颜色会继承失效
- 其实已经继承下来了，但是被浏览器默认设置的样式给覆盖掉了
-
2、h系列标签的font-size会继承失效
- 其实已经继承下来了，但是被浏览器默认设置的样式给覆盖掉了
-
3、div的高度不能继承，但是宽度有继承的效果
- 因为div有独占一行的特性
-
-
-
2、层叠性
-
1、给同一个标签设置了相同的属性
-
此时样式会覆盖
- 最后写在下面的会生效
-
-
2、给同一个标签设置了不同的样式
-
此时样式会叠加
- 最后会共同作用在标签上
-
-
前提：只有当优先级相同是，此时才会比较层叠性
-
-
3、优先级
拓展：Chrome调试工具-查错流程（经验）
-
遇到样式不出来时，学会通过调试工具找错！！！
-
查错流程
-
1、右击检查
-
2、哪里不会点哪里
- 在elements找到对应的元素
-
3、看styles中有没有自己设置的选择器
-
如果没有，一般是选择器写错了
- 常见原因1：选择器单词拼错
- 常见原因2：选择器结构写错
-
-
4、如果选择器有，但是样式没出来
-
看是否有删除线（没生效）
- 常见原因1：样式被注释
- 常见原因2：样式被覆盖
-
看是否有小三角形（报错）
- 属性名或者属性值有错误
- 常见原因1：属性值后没有分号
- 常见原因2：出现中文标点
- 常见原因3：属性名或者属性值单词拼错
-
-
