复合选择器，块元素，行内元素，CSS背景，CSS层叠性、继承性和优先级

 

这篇笔记主要讲了CSS快捷键的使用方法，复合选择器，块元素，行内元素，CSS背景，CSS层叠性、继承性和优先级

Emmet语法(快捷键)

快速生成HTML结构语法

  • 生成多个相同标签，标签名*3 (注，中间不要有空格)

  • 父子级标签 例：ul和li 可以写 ul>li

    • 兄弟关系用+

  • 可以直接 .nav ，生成<div class="nav"></div>

    • .可以换# 生成id标签
    • 可以更换其他标签，例：p.one 生成<p class="one"></p>

  • 生成类名有顺序 .demo$*5

    • 注：$从1开始排序

  • 生成标签内容带默认文字 例：div{默认文字}

示例：5个div标签，里面从1到5，属性class从demo1到demo5

.demo${$}*5
  • 1

快速生成CSS样式语法

  • tac可以快速生成test-align: center;
  • 基本上都是首字母+参数

快速格式化代码

  • 快捷键Shift+Alt+f

  • 为了方便操作，在保存时自动格式化代码 (VScode)

    1. 文件->首选项->设置
    2. 搜索emmet.include
    3. 在setting.json的用户下添加下列语句
    "editor.formatOnType":true,
"editor.formatOnSave":true
    • 1
    • 2

CSS复合选择器

  • 复合选择器就是基础选择器结合而成的
  • 包括：后代选择器，子选择器，并集选择器，伪类选择器

后代选择器 ※

  • 又称包含选择器，可以选择父元素里的子元素
  • 例，选择所有ol标签里的li都更改属性
ol li {
    color: red;
    /* 选择ol里的所有li元素 */
}
  • 1
  • 2
  • 3
  • 4

  • 中间用空格隔开

  • 更改的是后代的 (只要是后代都可以被选中，无论几代) 样式

  • 对同名标签的区分

    • 对一个标签添加class属性
    • .class属性+后代名
    • 注：中间的过程标签可以省略
      <style>
    .nav li {
        color: pink;
    }
  </style>
  <ul class="nav">
      <li>pink</li>
  </ul>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

子选择器

  • 选择离得最近的子元素
  • 元素1>元素2 {样式声明}
    <style>
      ul>li {
          color: pink;
      }
    </style>
    <ul>
        <li><a href="#">会变粉</a></li>
        <li><a href="#">不会变粉</a></li>
    </ul>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 元素1是父元素，元素2是子元素
  • 只能选择离得最近的子元素(不包括几代之后的元素)

并集选择器 ※

  • 可以选择多组标签，样式相同，来集体声明
<style>
  div,
  p {
      color: pink;
  }
</style>
<div>会变粉</div>
<p>会变粉</p>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

  • 用逗号隔开，逗号可以理解为和的意思

  • 任何样式选择器都可以作为并集选择器的一部分

  • 语法规范：并集选择器的标签要竖着写

伪类选择器

  • 给选择器添加特殊效果
  • 语法 : + 元素

链接伪类选择器

属性解释
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上链接
a:active 选择活动链接 (鼠标按下未抬起的链接)

小知识：未选择链接经常使用的颜色#333

链接伪类的注意事项

  • 为了确保生效，要按照 link->visited->hover->active 的顺序声明

  • 链接和标题标签一样，都要单独指定样式

  • 开发中经常的写法：

    • 先给a写一个样式
    • 然后在给hover(经过的时候)写一个样式(蓝色+下划线)

:focus伪类选择器

  • 选取获得焦点 (光标) 的表单元素
<style>
  input:focus {
      background-color: pink;
      /* 谁获得了光标，就改变谁的背景色 */
  }
</style>
<input type="text">
<input type="text">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

CSS元素显示模式

元素的显示模式

  • 元素 (标签) 以什么方式显示，例如<div>独自占一行
  • 分类：块元素，行内元素

块元素

  • 包括：<h1>,<p>,<div>,<ul>,<ol>,<li>,其中<div>是最典型的块元素

  • 特点：

    1. 自己独占一行
    2. 可以设置高度宽度及内外边距
    3. 宽度默认和容器(父级宽度)一样宽
    4. 是一个容器及盒子，里面可以放其他元素

  • 注意：文字类的块元素不允许放其他元素,例如<p>和<h1>

行内元素(内联元素)

  • 包括：<a>,<strong>,<body>,<em>,<span>...

  • 特点：

    1. 一行可以显示多个行内元素
    2. 直接设置宽度高度设置无效
    3. 默认宽度为内容的宽度
    4. 行内元素，只能容纳文本或行内元素

  • 注意：

    1. 链接里面不能再放链接元素
    2. 特殊链接<a>里面可以放块级元素，但是要给<a>转化一下块级模式 (下面元素模式转换有写)

行内块元素

  • 特殊元素：<img />,<input />,<td>同时具有块元素和行内元素的特点，称为行内块元素

  • 特点：

    1. 一行可以有多个行内块元素，但中间有空白缝隙
    2. 默认宽度是内容的宽度
    3. 高度，行高，外边距以及内边距都可以控制

元素总结

元素名特点
块元素 可以指定大小，独占一行
行内元素 不能指定大小，一行可以放多个
行内块元素 可以指定大小，一行可以放多个，大小由内容来决定

元素显示模式的转换

  • 一种元素需要另外一种元素的特性

  • 例如增加a的触发范围 (使一个行内元素有块元素的性质)

  • 在CSS里面添加display: bolck转化块元素：

<style>
  a {
      width: 150px;
      height: 50px;
      display: block;
      /* 这句话把a标签转化为块元素 */
  }
</style>
<a herf="#">我是块元素</a>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 在CSS里面添加display: inline转化为行内元素
<style>
  div {
      display: inline;
  }
</style>
<div>我是行内元素</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 在CSS里添加display: inline-block转化为行内块元素
<style>
  span {
      width: 100px;
      height: 30px;
      display: inline-block;
  }
</style>
<span>我既可以指定大小，又可以一行放多个</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

snipaste工具的使用

  • 一个截图工具，兼具取色的功能
  • F1截图，F3置顶，Alt取色

课堂案例

  • 侧边栏的效果：
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HczfYLVF-1581249072737)(image/xiaomi_drawer.png)]

  • 代码实现在demo5.html中

小知识：在li中垂直居中
只要行高和盒子高相等，然后就垂直居中了
代码 line-height: 40px
行高小于盒子高度，文字会偏上
行高大于盒子高度，文字则偏下

CSS的背景

  • 背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定

背景颜色

  • 定义背景颜色：
background-color: transparent | color;
  • 1
  • transparent：背景色透明 (默认值)
  • color：颜色

背景图片

  • 定义背景图片场景：logo，装饰性小图片，超大图片
  • 优点：便于控制位置
background-image: none | url();

background-image: url();
/* 不要忘记url() */
  • 1
  • 2
  • 3
  • 4
  • none：无背景图 (默认值)
  • url()：使用绝对地址或相对地址指定图片

背景平铺

  • 定义背景平铺：
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
  • 1
  • repeat-x：沿x轴平铺(横向)
  • 背景图片在背景颜色之上

背景图片位置 重要

  • 背景图片位置属性：
background-position: x y;
/* 一共两个参数 x 和 y */
  • 1
  • 2

参数表：

参数值说明
length(精确位置) 百分数 | 由浮点数值和单位标识符(px)组成的长度值
position(方位名词) top | center | bottom | left |center | right

  • 方位名词：

    1. 第一个参数是x轴方向，第二个参数是y轴方向
    2. 参数没有顺序
    3. 只声明一个参数，默认另一个为center

  • 背景图片适合超大图片，背景图片适合水平居中

背景图片精确位置

  • 第一个参数为x坐标，第二个为y坐标
background-position: 20px 20px;
  • 1
  • 只指定一个值，另一个值默认垂直居中
  • 精确单位(数值)和文字单位可以混合使用，但一定要注意参数顺序

背景图像固定

  • 把图片固定在网页上，用来做视差滚动
background-attachment: scroll | fixed;
  • 1
  • scroll：背景图像滚动 (默认值)
  • fixed：背景图像固定

背景图片复合写法

  • 和字体一样有复合写法，但是背景图片参数没有顺序
  • 下面是推荐书写的顺序：
  • 注意:背景图片地址为：url( )
background: 背景颜色 | 背景图片地址 | 背景平铺 | 背景图片滚动 | 背景图片位置 ;
  • 1

背景色半透明

  • 代码示例
background-color: rgba(0,0,0,0.3);
  • 1
  • a为透明度，取值范围[0,1]
  • 可以省略透明度前面的0，例0.3 -> .3

CSS三大特性

层叠性

  • 对同一个选择器选择相同样式不同的参数：
  • 遵循就近原则，谁离标签近就执行哪个样式 (后来者居上)，但是不冲突的部分不会被覆盖

继承性

  • 子标签会继承父标签的某些样式(可以继承的样式text- ,font- ,line- ,color- )
  • 在F12中可以看到inherited from xxx

行高的继承

body {
  font: 12px/1.5 "Microsoft YaHei";
  /* 字体大小/行高 字体 */
}
  • 1
  • 2
  • 3
  • 4
  • 行高可以没有单位
  • 没有单位的意思是当前元素文字大小的1.5倍

优先级

  • 给同一个元素指定了多个选择器，就会有优先级产生
  • 选择器相同，根据层叠性排序
  • 权重排序：继承或* -> 元素选择器 -> 类选择器，伪类选择器 -> ID选择器 -> 行内样式style="" -> !important重要的
参数值权重
继承或* 0,0,0,0
元素选择器 0,0,0,1
类选择器，伪类选择器，子选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式style="" 1,0,0,0
!important重要的 无穷大
  • !important使用方法 (优先级无穷大)：
  div {
    color: blue!important;
  }
  • 1
  • 2
  • 3
  • a链接浏览器默认指定了一个样式，所以优先级和元素选择器一样(0,0,0,1)

权重叠加

  • 复合选择器会出现权重叠加的问题
  • 例：
<style>
  /* ul和li的权重  0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
  ul li {
    color: green;
  }
  /* li的权重  0,0,0,1 */
  li {
    color: blue;
  }
  /* .nav和li的权重  0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
  .nav li {
    color: pink;
  }
</style>
<body>
  <ul class="nav">
    <li>我是绿色</li>
  </ul>
</body>

 

 

  • 注：权重不会出现进位
posted @ 2020-10-14 21:06  xxf2  阅读(363)  评论(0)    收藏  举报