CSS第二天

这是一篇关于前端第二天的思维导图，包含了复合选择器，hover伪类选择器，emmet语法等方面的内容。

CSS第二天

• 复合选择器
  • 后代选择器
    • 语法：选择器1 选择器2 ... { css }
    • 选择器与选择器之间以空格隔开； 后代选择器选择的是所有的后代（儿子，孙子，重孙子...）
    • 在工作中最常用
  • 子代选择器
    • 语法：选择器1 > 选择器2 > ... { css }
    • 选择器与选择器之间以大于号连接; 子代选择器亲儿子子元素
  • 并集选择器
    • 语法：选择器1,选择器2,.... { css }
    • 作用：一次性选择多个标签统一修改样式
    • 注意点：每个选择器都是独立的，他们可以没有任何关系
  • 交集选择器
    • 语法：选择器1选择器2.... { css }
    • 作用：利用多个条件选中一个标签
    • 注意点：如果有标签选择器在里面，标签选择器必须要放在最前面
• hover伪类选择器
  • 作用：当鼠标悬停的时候，才会触发里面的css样式
  • 比如：a:hover 表示a标签被鼠标悬停的时候，他们是一个整体，中间不能用任何符号隔开
• emmet语法
  • 作用：vscode给我们集成的语法，快速生成结构或者样式
  • 1.div标签带有类名red .red; 2.生成子代标签 ul>li; 3.生成多个子代标签 ul>li*10 4.$自增符号，从1开始自增； 5.{}用来包裹内容的； 6.指定数字开始 @1990 7.快速生成样式，一般都是首字母的连写 + 表示并列 --- 例如：w100+h100
• 背景相关属性
  • 背景颜色
    • 语法：background-color bgc
    • 取值： 1.预定义颜色值； 2.十六进制； 3.rgb(); 4.半透明 rgba(0~255,0~255,0~255,0~1) a取值为0，完全透明；a取值为1，完全不透明
    • 默认值就是透明的 transparent rgba(0,0,0,0)
  • 背景图片
    • 语法：background-image bgi
    • 取值：url(图片的路径)
    • 特点： 1.背景图片不占位置，不能撑开盒子； 2.默认图片默认是平铺的，默认会把盒子平铺满；
    • 与img标签区别： 1.img标签是占位置的，它可以撑开盒子的； 2.经常更换的图片就用img，不经常更换就用bgi
  • 背景平铺
    • 语法：background-repeat bgr
    • 取值： 1.repeat 默认值，默认是平铺的； 2.no-repeat 让背景图片不平铺，使用的是最多； 3.repeat-x 让背景图片在水平方向平铺； 4.repeat-y 让背景图片在垂直方向上平铺
  • 背景位置
    • 语法：background-position bgp
    • 取值： 1.方位名词 left center right top bottom； a.没有顺序之分的； b.遇到center可以省略，不写默认就是center，但是遇到两个center必须要写一个； 2.数字+px 一般是配合精灵图使用 a.是有严格的顺序之分的，第一个值必须是水平，第二个值必须是垂直； b.正负都可以取； 3.混合单位 方位名词+数字px使用 a.是有严格的顺序之分的，第一个值必须是水平，第二个值必须是垂直
  • 背景复合属性
    • 语法：background bg
    • 特点： 1.没有任何要求 --- 吐血推荐； 2.属性值与属性值之间要以空格隔开； 3.约定顺序：color url() no-repeat position;
    • 小技巧：用复合属性快速插入图片 bgurl
• 元素显示模式
  • 块级元素
    • 属性：display:block
    • 特点： 1.独占一行； 2.默认宽度为元素的宽度，默认的高度由内容撑开； 3.可以设置宽高
    • 代表标签：div,p,ul,li,h1~h6,dl,dt,dd...
  • 行内元素
    • 属性：display:inline
    • 特点： 1.一行显示多个； 2.宽高由内容所撑开； 3.不能设置宽高
    • 代表标签：span,a,8个文本格式化标签
  • 行内块元素
    • 属性：display:inline-block
    • 特点： 1.一行显示多个； 2.可以设置宽高
    • 代表标签：input,button,select,textarea
    • 特殊：img属性行内元素，但是它具有行内块元素的特点
  • 元素显示模式的转换
    • display:block; 将元素转换为块级元素 --- 主要是给a标签设置，为了增大响应区域； display:inline-block; 将元素转换为行内块元素； display:inline; 将元素转换为行内元素
• 继承性
  • 说明：子元素会继承父元素的某些属性(子承父业)
  • 可被继承的属性： 1.color; 2.font- 3.text-align,text-indent; 4.line-height; 5.list-style:none 清除li标签前面的小圆点 lin
  • 继承失效： 1.a标签文字颜色会继承失效，要改变a标签里面的文字颜色，必须要选中a标签； 2.标题标签的文字大小会继承失效，要改变标题标签的文字大小，必须要把标题标签选中