跳至主要內容

CSS基础

Skyme2023/7/3大约 8 分钟前端前端CSS

CSS基础

CSS简介

  1. CSS全称 Cascading Style Sheets ，即层叠样式表
  2. CSS的作用：
    • 让网页变得更好看：可以设置字体大小、颜色、元素的边框、背景色、阴影等等。
    • 布局：设置元素大小，内外边距、定位、浮动等等。可以进行像素级的位置调整。
  3. CSS的优势：
    • 内容与表现分离，CSS代码独立于HTML标签。
    • 网页的表现统一，容易修改。

CSS基本语法

CSS语法简单，先写选择器，然后再书写当前选择器应用的样式列表即可：

选择器 {

	属性1: 属性值;

	属性2: 属性值;

	...

}

语法规范:

  • 每一条样式属性后面推荐加上;，虽然最后一条样式属性后面可以不加分号，但是推荐仍然加上。
  • 选择器后的括号{之后推荐立刻换行。
  • 后括号}应该独占一行。
.div1{
    front-size: 30px;
    color: #FF0000;
    background-color: rgb(0, 0, 255);
    border:1px solid #FF0000;
}

使用CSS的三种方式:

  1. 行内样式: 在标签的style属性中书写

    Document

    我是标签
  1. 内部样式:

    Document

        p {
          height: 100px;
          background-color: red;
        }

   我是标签
  1. 外部样式:
    1. link标签将 CSS 链接在页面中生效
    
    Document

   我是标签
p {
    height: 100px;
    background-color: red;
}

    Document

       @import url("../01.css/01.css");

   我是标签
  • 样式优先级别:
    1. 遵循就进原则，即：行内样式 > 内部样式 = 外部样式。
    2. 容易弄错的是大家都认为内部样式 > 外部样式。主要原因是因为通常先使用 标签引入外部样式，在使用<style>标签书写内部样式。
      但是如果先书写内部样式，再引入外部样式，那么外部样式中书写的样式会覆盖掉内部样式。

CSS选择器

  1. CSS的语法是基于选择器，然后给选择器编写一套样式列表。浏览器根据选择器，找到HTML中的标签（元素），然后将样式作用在HTML标签上
  2. 基本选择器:
    • 通配符选择器：*，表示页面中所有的标签都会被选择。
    • 标签（元素）选择器：标签名，表示页面中所有指定的标签都会被选择。
    • 类选择器：.class属性值，表示根据指定的class属性值来选择标签。
    • id选择器：#id属性值，表示根据指定的id属性值来选择标签。

    Document

        p {
            color: red;
        }
        #p2 {
            color: blue;
        }
        .p1 {
            color: green;
        }

   我是标签
   这是id1,使用#p2
    这个是第二个段落

一个标签会被多个选择器选择到，所以会展示出不同的样式。
一个选择器也可能选择到多个标签，一套样式在页面中被多次使用

基本选择器的使用

  1. 通配符选择器:
    • 统一消除浏览器对于标签的默认样式,主要消除内边距和外边距
    • 可以统一设置网站的文字(字号,字体)
      * {
  /* 消除内边距 */
  padding: 0px;
  /* 消除外边距 */
  margin: 0px;
  /* 设置网站字体大小（默认是16px） */
  font-size: 24px;
  /* 设置网站字体（注意侵权） */
  font-family: "宋体";
}
  2. 元素(标签)选择器: 开发中强烈推荐不要单独使用元素选择器（可以在复合选择器中使用），因为会造成整个页面同类标签的样式污染！（代码编写原则，保证代码的低侵入性）。
    唯一常用的是取消列表的圆点和序号，以及取消a标签的下划线
a {
  /* 取消a标签的下划线 */
  text-decoration: none;
}

ul,ol {
  /* 取消无序列表的圆点，取消有序列表的索引 */
  list-style: none;
}
  1. 类选择器: 开发中应该优先使用类选择器，当一个标签需要添加样式时，推荐的步骤如下：
    1. 给标签加上class属性，然后取一个class名称。
    2. 使用类选择器，给标签书写样式属性列表。
  2. id选择器: 不推荐使用，但是不推荐程度没有元素选择器那么高。id优先级很高，不利于样式覆盖

选择器的优先等级

一个选择器可以查到多个标签,那么一个标签也可以被多个选择器选中,此时选择器中的属性所呈现给标签的最终样式,就会由选择器的优先等级决定

下面前四个由选择器决定，后面两个由书写形式和特定规则决定（值越小，优先级越低):

  1. 0级：通配符选择器。
  2. 1级：元素选择器、伪元素选择器。
  3. 2级：类选择器、属性选择器、伪类选择器。
  4. 3级：id选择器。
  5. 4级：标签内联style属性。
  6. 5级：!important。

CSS选择器高级应用

子选择器和后代选择器：

  1. 后代选择器包含了子选择器,子选择器： 只会选择直接子代!
  2. 后代选择器: 会选择直接子代和间接子代！

    Document

    .div1>.s1{
        color: blue;
        font-size: 100px;

    }
    .div2 .s1{
        color: green;
        font-size: 50px;
    }

 这是div1!我是div1的直接子代s1!

      我是span2在p标签里面，class为s1
      我是.div1的间接子代（后代）

      我是span1，class为s1
      我是.div2的直接子代

        我是span2在p标签里面，class为s1
        我是.div2的间接子代（后代）

通用兄弟选择器和相邻兄弟选择器:

  1. 主要用于同一级当中

    子选择器和后代选择器

      /* 子选择器：只会选择.div1的直接子代.s1 */
      .div1>.s1 {
        color: red;
      }

      /* 后代选择器，.div1直接子代和间接子代.s1都会被选择到 */
      .div2 .s1 {
        color: green;
      }

        我是span1，class为s1
        我是.div1的直接子代

          我是span2在p标签里面，class为s1
          我是.div1的间接子代（后代）

        我是span1，class为s1
        我是.div2的直接子代

          我是span2在p标签里面，class为s1
          我是.div2的间接子代（后代）

并集选择器和交集选择器

并集表示多个选择器使用同一套样式，交集选择器表示标签必须同时满足多个选择器的条件


    并集选择器和交集选择器

      /* c1，c2，c3用同样的样式  */
      .c1,.c2,.c3 {
        color: red;
      }

      /* 是div并且类名是c1才使用这个样式 */
      div.c1 {
        background-color: #ababab;
      }

    p类为.c1
    p类为.c2
    p类为.c3

    div类为.c1
    div类为.c2
    div类为.c3

深入探讨css优先等级

  1. 基本选择器的优先等级非常好计算，但是复合选择器就不太好计算了
    业界流传最广的是数值计算法。具体如下：每一端CSS语句的选择器都可以对应一个具体的数值，数值越大优先级越高，CSS 语句优先渲染。其中，每出现一个0级选择器，数值加0，出现一个1级选择器，数值加1，出现一个2级选择器， 数值加10，出现一个3级选择器，数字加100。
    • *{}：0，一个0级选择器。
    • h1{}：1，一个1级选择器。
    • div>p{}：2 , 2个1级选择器。
    • .foo p{}：11, 一个2级选择器，一个1级选择器。
    • #foo{}：100，一个3级选择器。
  2. 相同优先级数字时的 CSS 渲染规则:

首先，计算各自的优先级数值：

  • .box p: 一个2级选择器，一个1级选择器，数值为11。
  • p.p1: 一个1级选择器，一个2级选择器，数值我为11。

当前的两个选择器的优先级数值都是一样的，那么这该怎么渲染呢？
这就引出了另一个重要的规则：“后来居上”或“就近原则”。也就是说，当 CSS 选择器的优先级数值是一样的时候，后渲染的优先级更高（后面将前面渲染的样式直接覆盖）。

增加选择器优先级的技巧:

  1. 在实际开发的过程中，难免会遇到需要增加 CSS 优先级的时候，如需要增加下面选择器的权重
.foo {
    color: red;
}
``` 一般增加方式
```css
/* 自己堆两个 */
.foo.foo {
    color: red;
}

/* 或者利用属性选择器 */
.foo[class] {
    color: red;
}

.foo[id] {
    color: red;
}

伪类选择器

  • 通常以:开头通常不单独的使用，表示元素在某种状态下才会被选择器选中

  • hover：重点掌握，鼠标移动到元素上后的状态。

  • :link：用于a标签，表示未访问的链接。

  • :visited：用于a标签，表示已经访问的链接。

  • :active：用于a标签，表示已经选择的链接。

  • :focus：常用于input标签，表示input标签获得焦点。

  • :enabled：常用于input标签，表示input标签被启用。

  • :disabled：常用于input标签，表示input标签被启用。

  • :empty：表示标签内部没有内容。

练习


        网站标题

            .u1 > li {
                height: auto;
                width: auto;
                color: green;
                list-style: none;
            }

            第一个表
            第二个表
            第三个表
路的尽头依旧是路
Copyright © 2026 Skyme