2021-04-27 CSS3学习第二天

目录

复合选择器（基本选择器的组合）

后代选择器

子选择器

并集选择器

伪类选择器

元素显示模式

块元素

行内元素

行内块元素

元素显示模式转换

背景样式

背景颜色 background-color

背景图片 background-image

背景图片位置 background-position

背景图片固定 background-attachment

背景复合写法

背景色半透明

---

• 复合选择器（基本选择器的组合）

  • 后代选择器

    • 元素1 元素2 { 样式声明 } 两元素中间用空格隔开，表示选中1中的所有2
    • 元素1、2 可以是任意基础选择器
    • 比如 div a { color: pink; } 选中所有div中的a
    • 元素1与2只要是父辈与子辈的关系就可以，即只要2包含在1里面，无论隔了多少层都可以
    • 选中之后表示选中的是整个2，2里面再嵌套别的也会一并被选中
    • 后代选择器不限于两层，也可以多层嵌套，只要各自满足前后辈关系就可以 比如 div span a {...}

  • 子选择器

    • 元素1>元素2 { 样式声明 } 两元素之间用>连接，表示选中1中的所有2
    • 元素1、2 可以是任意基础选择器，但2必须是紧挨着1的下一层（亲儿子）

  • 并集选择器

    • 元素1,元素2 { 样式声明 } 两元素之间用,连接，表示同时选中1和2，对它们作相同修改(集体声明)
    • 元素1、2可以是任意选择器
    • 也可以多个， 元素1，元素2，元素3(通常多个时习惯写一个加逗号就换行，最后一个不加逗号)

  • 伪类选择器

    • 链接伪类选择器
      • 四种链接伪类选择器
        • a:link 未被访问过的链接
        • a:visited 访问过的链接
        • a:hover 鼠标悬停的链接
        • a:active 鼠标点下去还没弹起来的链接
      • lvha一定要按顺序写
      • a链接在浏览器中有默认样式(蓝色+下划线)所以实际都要给链接单独指定样式
      • 实际开发中一般先给链接a修改个样式(color text-decoration),然后再改个hover,其他的不常用
  • :focus伪类选择器
    • 用于选取获得焦点（光标）的表单元素，常用于input类表单元素

• 元素显示模式

  • 块元素

    • <div> <h1>-<h6> <p> <ul> <ol> <li>等
    • 特点
      • 独占一行
      • 宽、高、内边距可以设置（默认宽度=父级宽度）
      • 可当作容器，里面可放块元素或行内元素
    • 易错点:文字类的元素内不能放块元素
      • <p>主要用于放文字，所以里面不能放块元素，尤其不能放<div>
      • <h1>-<h6>都是文字类标签，里面也不能放块元素

  • 行内元素

    • <span> <a> <strong> <b> <em> <i> <del> <s> <ins> <u>等
    • 特点
      • 一行可以放多个行内元素（不手动换行的话会在一行上显示）
      • 不能直接设置宽高（默认宽度=它自己本身的宽度）
      • 行内元素里面只能容纳文本或其他行内元素
    • 易错点：链接里面不能再放链接（即a不能套娃）
      • 特殊情况下a里面可以放块元素，不过转换一下再放会好一点

  • 行内块元素

    • <img> <input> <td>
    • 特点
      • 可以一行放多个，但之间会有空白缝隙（行内）
      • 默认宽度=本身内容宽度（行内）
      • 宽、高、内外边距都可以设置（块）

  • 元素显示模式转换

    • 转换成块元素 display:block;
      • 行内元素a→块元素，使其可以设置宽高（块特点），增加链接的触发范围（常用）
      • tip:让文本的line-height=块本身的高度就可以实现垂直居中
    • 转换成行内元素 display:inline;
      • 块元素→行内元素，原先的宽高不再起作用
    • 转换成行内块元素 display:inline-block;
      • 块元素→行内块元素,原先的宽高(块特点)还能起作用,不过可以多个放同一行了(行内特点)
      • 行内元素→行内块元素,原先能一行多个的特性(行内特点)保留,还可以设置宽高(块特点)

• 背景样式

  • 背景颜色 background-color:颜色值;（颜色值三种表示方式）

    • 默认值为transparent透明

  • 背景图片 background-image:none; 或 background-image:url(里面是链接，绝对地址或相对地址);

  • 背景平铺 background-repeat: repeat | no-repeat | repeat-x | repeat-y ;
    • 默认会在x横y竖两个方向上重复平铺

  • 背景图片位置 background-position: x y;

    • 方位名词
      • 横向 left right center
      • 纵向 top bottom center
      • 用两个方位名词会自动识别哪个横向哪个纵向，所以顺序可以颠倒
      • 只用一个方位名词，另一方向上就会默认居中
    • 具体数值
      • 用两个具体数值，一定是前x后y，先横后纵
      • 只用一个具体数值，一定是x，另一个纵上默认居中
    • 方位名词+具体数值
      • 一定是前一个表示x，后一个表示y

  • 背景图片固定 background-attachment: scroll; 或 background-attachment: fixed;

    • 默认为scroll，背景图随内容一起滚动
    • fixed图片固定不动

  • 背景复合写法

    • background: 颜色 图片url 平铺 滚动 位置;
    • background: color image repeat attachment position; cirap色图铺滚位

  • 背景色半透明

    • background: rgba(x , y , z , 0.8)
    • xyz分别表示rgb值，0-255，全0黑，全255白
    • 最后一个数字表示透明度，取值0-1，数值越大浓度越高（习惯省略不写0，写成 .8）

---

连着学了几天开始犯懒了，回家不得直接躺尸？

翻课表才发现后面新开了实验课，又把票改签了提前回来，五一怎么那么难买票啊，唯一一个时间合适的是早上八点多，唉，头大。