CSS进阶知识

最新推荐文章于 2024-03-03 13:32:51 发布

原创最新推荐文章于 2024-03-03 13:32:51 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

HTML+CSS 专栏收录该内容

10 篇文章

订阅专栏

选择器进阶

复合选择器

分为后代选择器（空格）和子代选择器（>）
后代包括：儿子，孙子和重孙子等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     /* 在.father的后代中，找p标签  小姐姐和小帅哥两个都变红*/
    .father p {
      color: red;
    }
    /* 在.father的子代中，找p标签  小姐姐变红*/
    .father > p {
      color: red;
    }
  </style>
</head>
<body>

  <div class="father">
    <p>小姐姐</p>
    <div>
      <p>小帅哥</p>
    </div>
  </div>
  <p>小可爱</p>
</body>
</html>

并集选择器

同时选择多组标签，设置同样的样式
通常一行写一个，提高代码的可读性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div,
    p,
    .red,
    h2 {
      color: red;
    }
  </style>
</head>
<body>
  <!-- 需求：把div和p标签设置为红色（节省代码的方式） -->
  <div>我是div</div>
  <p>我是p标签</p>
  <h1 class="red">我是一个h1标签</h1>
  <h2>我是一个h2标签</h2>
</body>
</html>

交集选择器

选择页面中同时满足多个选择器的标签，满足既又原则

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p.red {
      color: red;
    }
  </style>
</head>
<body>
  <!-- 需求：只让小可爱变红（不能改变html结构） -->
  <!-- 解决：找到页面中，既是p标签，又有red这个类名的标签，设置样式 -->
  <div class="red">小姐姐</div>
  <p>小帅哥</p>
  <p class="red">小可爱</p>
</body>
</html>

Emmet语法

通过简写语法，快速生成代码

在这里插入图片描述

hover伪类选择器

选中鼠标悬停在元素上的状态，设置样式，一般可以配合transform属性来设置动画样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }

    .box:hover {
      width: 400px;
      height: 400px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

背景相关属性

背景颜色

background-color 默认值是透明transparent
为了能看清楚盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

背景图片

background-image:url(路径)
URL中可以省略引号，默认是在水平方向和垂直方向平铺的。
仅仅是起到装饰作用，是不能够撑开盒子的

背景平铺

background-repeat
一般设置为no-repeat表示不平铺

在这里插入图片描述

背景位置

background-position :水平位置垂直位置

在这里插入图片描述

背景相关属性连写

background:color image repeat position

元素显示模式

块级元素

display:block
独占一行，一行只能显示一个
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高
比如div p h
p标签不要嵌套div p h 等块级元素

行内元素

display:inline
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
a span b u i s strong ins em del
a标签不能嵌套a标签

行内块元素

display:inline-block
一行可以显示多个，可以设置宽高
input textarea button select
特殊情况：imgb标签也有行内块元素的特点，但是调试工具中显示结果为inline

元素模式转换

改变元素默认的显示特点，让元素符合布局要求

在这里插入图片描述

CSS三大特性

继承性

子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性有
color font-style font-weight font-size font-family
text-indent text-align
line-height

在这里插入图片描述

应用场景：
可以直接给ul设置list-style:none 从而去除列表默认的小圆点样式
直接给Body设置统一的font-size和font-family

继承失效的一些特殊情况.如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
1 a标签的color会继承失效，因为被浏览器默认样式给覆盖掉了
2 h标签的font-size会继承失效，因为被浏览器默认样式给覆盖掉了
3 div的高度不能继承，但是宽度有类似于继承的效果。

层叠性

给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上
给同一个标签设置相同搞得样式，此时样式会层叠覆盖，最终写在最后的样式会生效
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    p {
      color: red;
    }

    p {
      /* font-size: 30px; */
      color: blue;
    }
  </style>
</head>
<body>
  <p class="orange" style="color:green">我是一个文字</p> green>blue>red
</body>
</html>

优先级

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 <行内样式<!important
!important写在属性值的后面，分号的前面
!important不能提升继承的优先级，只要是继承优先级就是最低！
尽量少用!important