• CSS基础选择器


    一、介绍

    包括:标签选择器、类选择器、id 选择器和通配符选择器

    CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.

    有时我们也会称之为 CSS 样式表或级联样式表。

    CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

    CSS 让我们的网页更加丰富多彩,布局更加灵活自如。

    CSS 最大价值: 由 HTML 专注去做结构呈现,样式交给 CSS,即 结构 ( HTML ) 与样式( CSS ) 相分离

    二、标签选择器

    标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。

    语法:

    标签选择器{

            属性:属性值

            ...

    }

    作用:

    标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。

    三、类选择器

    如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器.

    语法:

    .类名 {

            属性1: 属性值1;

            ...

    }

    在 .box后面需要加一个空格再写大括号 

    如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。

    类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点“.”号显示。

    命名要有意义,尽量使别人一眼就知道这个类名的目的

    四、多类名选择器

    我们可以给一个标签指定多个类名,从而达到更多的选择目的。 这些类名都可以选出这个标签. 简单理解就是一个标签有多个名字.

    这样的话 ,可以更好的分类,类似于组合 ,类名的组合 ,在组合中赋予标签相应的属性

    具体使用:

    1.在标签class 属性中写 多个类名

    2.多个类名中间必须用空格分开

    3.这个标签就可以分别具有这些类名的样式

    五、id选择器

    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

    HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以“#" 来定义。

    语法:

    #id名 {

            属性1: 属性值1;

            ...

    }

    注意:

    属性只能在每个 HTML 文档中出现一次(id选择器一般与JavaScript搭配使用)

    id选择器和类选择器的区别

    id选择器类似每个人的身份证号,只能有一个

    类选择器类似每个人的名字,可以有很多个

    六、通配符选择器 

    语法:

    {

            属性1: 属性值1;

            ...

    }

    通配符选择器不需要调用, 自动就给所有的元素使用样式 特殊情况才使用,后面讲解使用场景

    1. * {
    2. margin: 0;
    3. padding: 0;
    4. }

    七、总结

  • 相关阅读:
    1785_GNU了解之一_主页上的简介
    (附源码)SSM 汽车停车位共享APP 毕业设计 041534
    Flask Run运行机制剖析
    GaussDB SQL基础语法示例-常见的条件表达式
    牛客SQL必会知识
    POI.5.2.4常用操作-数据导入导出常规操作
    PySide6+VSCode Python可视化环境搭建
    MySQL高级2-SQL性能分析
    Redis的基础与django使用redis
    【C++风云录】走进量子世界:探索C++工具库助力量子计算与量子编程
  • 原文地址:https://blog.csdn.net/wujianrenn/article/details/127631911