• CSS简介与CSS选择器

    目录

    CSS简介

    CSS语法规范

    HTML引入CSS的方式

    行内样式表

    内部样式表

    外部样式表

    CSS选择器

    CSS基础选择器

    标签选择器

    类选择器

    单类名选择器

    多类名选择器

    id选择器

    id选择器的使用

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

    通配符选择器

    基础选择器总结

    CSS简介

    1. CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。
    2. CSS 是也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
    3. CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
    4. CSS 最大价值就是由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离

    CSS语法规范

    1. CSS同HTML一样也需要一定的规范性。
    2. CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
    1. 选择器 {
    2.     /*键值对*/
    3. }
    1. 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
    2. 属性和属性值以“键值对”的形式出现（键值对：属性与属性对应值）
    3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
    4. 属性和属性值之间用:分开
    5. 多个“键值对”之间用;进行区分

    示例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>style标签title>
    7.     <style>
    8.         /* 将p标签的字体颜色设置为红色 */
    9.         p{
    10.             color: red;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     
    16.     <p>
    17.         style标签
    18.     p>
    19. body>
    20. html>

    效果如下：

    HTML引入CSS的方式

    在HTML中引入CSS内容有三种方法，这三种方法也称为样式表：

    1. 行内样式表（行内式）
    2. 内部样式表（嵌入式）
    3. 外部样式表（链接式）

    行内样式表

    行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式

    基础语法：

    <div style="color: red; font-size: 12px;">文本内容div>
    1. style 其实就是标签的属性
    2. 在双引号中间，写法要符合 CSS 规范
    3. 可以控制当前的标签设置样式
    4. 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用

    内部样式表

    内部样式表（内嵌样式表）是写到HTML页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 标签中

    基本语法：

    1. <style>
    2.     选择器 {
    3.         /* 键值对 */
    4.     }
    5. style>
    1. 标签理论上可以放在 HTML 文档的任何地方，但一般会放在标签中
    2. 通过此种方式，可以方便控制当前整个页面中的元素样式设置
    3. 代码结构清晰，但是并没有实现结构与样式完全分离

    外部样式表

    实际开发都是外部样式表. 适合于样式比较多的情况，其使用方法是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.

    引入外部样式表分为两步：

    1. 新建一个后缀名为.css 的样式文件，把所有 CSS 代码都放入此文件中。

    2. 在 HTML 页面中，使用 标签引入这个文件。

    基本语法：

    <link rel="stylesheet"  href="css文件路径">

    示例代码：

    与HTML文件同路径下的CSS文件

    1. /* 只需要写入样式即可 */
    2. /* 类选择器 */
    3. .red {
    4.     color: red;
    5. }
    6.  
    7. .blue {
    8.     color: blue;
    9. }
    10.  
    11. .green {
    12.     color: green;
    13. }
    14.  
    15. .fontStyle {
    16.     font-size: 20px;
    17.     font-weight: bold;
    18. }

    HTML文件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>外部引入方式title>
    7.     
    8.     <link rel="stylesheet" href="style.css">
    9. head>
    10. <body>
    11.     
    12.     <p class="red">段落标签p>
    13.     
    14.     <div class="green fontStyle">div标签div>
    15.     
    16.     <span class="blue">span标签span>
    17. body>
    18. html>

    效果如下：

    CSS选择器

    选择器(选择符)就是根据不同需求把不同的标签选出来

    例如在上面的实例代码中，p就是选择器，选择当前代码里面所有的p标签

    在CSS中分为基础选择器和复合选择器

    CSS基础选择器

    对于基础选择器，基础选择器中一共有四种选择器

    1. 标签选择器
    2. 类选择器
    3. id选择器
    4. 通配符选择器

    标签选择器

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

    基本语法如下：

    1. 标签选择器 {
    2.     /* 键值对 */
    3. }

    示例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>style标签title>
    7.     <style>
    8.         /* 将p标签的字体颜色设置为红色 */
    9.         p{
    10.             color: red;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     
    16.     <p>
    17.         style标签
    18.     p>
    19. body>
    20. html>
    • 标签选择器的优点：
      • 能够快速设置页面中同类型标签的统一样式
    • 标签选择器的缺点：
      • 不能差异化设置，即不可以为同类型标签中的某一个标签进行单独设置

    当一个选择器中有多个相同属性的键值对时，将以最后一个同属性的键值对为主

    示例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>多个同类型属性title>
    7.     <style>
    8.         p{
    9.             /* 颜色先设置为红色，再设置为蓝色，最后设置为绿色，将以最后一种颜色为主 */
    10.             color: red;
    11.             color: blue;
    12.             color: green;
    13.             /* 但是不影响字体大小的效果 */
    14.             font-size: 20px;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <p>当前字体颜色为绿色，字体大小为20pxp>
    20. body>
    21. html>

    效果如下：

    类选择器

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

    1. 单类名选择器
    2. 多类名选择器

    单类名选择器

    所谓单类名选择器，即标签中的class属性值中一次只包含一个类

    基本语法如下：

    1. /* 设计类 */
    2. .类名 {
    3.     /* 键值对 */
    4. }
    5.  
    6. /* 类调用 */
    7. <标签 class="类名" >
    1. 类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点.号显示
    2. 类选择器使用.进行标识，后面紧跟类名（自定义，我们自己命名的），但是不能使用已经有的标签作为类名
    3. 长名称或词组可以使用-连接两个或以上的单词来为选择器命名
    4. 不要使用纯数字、中文等命名，尽量使用英文字母来表示
    5. 命名要有意义，尽量使别人一眼就知道这个类名的目的

    示例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>类选择器title>
    7.     <style>
    8.         .red{
    9.             color: red;
    10.         }
    11.         .blue{
    12.             color: blue;
    13.         }
    14.         .green{
    15.             color: green;
    16.         }
    17.     style>
    18. head>
    19. <body>
    20.     <div class="red">
    21.         第一个盒子中的文字为红色
    22.     div>
    23.     <div class="blue">
    24.         第二个盒子中的文字为蓝色
    25.     div>
    26.     <div class="green">
    27.         第三个盒子中的文字为绿色
    28.     div>
    29. body>
    30. html>

    效果如下：

    • 类选择器中出现多个同类型属性时与标签选择器一样的处理方式

    多类名选择器

    对比单类名选择器，多类名选择器即为标签class属性包括两个或两个以上类

    在标签class 属性中写多个类名时中间必须用空格分开，此时这个标签就可以分别具有这些类名的样式

    📌

    当样式冲突时，后面的样式会覆盖前面的样式

    基本语法如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>多类名选择器title>
    7.     <style>
    8.         .red{
    9.             color: red;
    10.         }
    11.         .blue{
    12.             color: blue;
    13.         }
    14.         .green{
    15.             color: green;
    16.         }
    17.         .fontStyle
    18.         {
    19.             font-size: 30px;
    20.         }
    21.  
    22.     style>
    23. head>
    24. <body>
    25.     <div class="red fontStyle">
    26.         第一个盒子中的文字为红色，字体为30px
    27.     div>
    28.     <div class="blue green">
    29.         第二个盒子中的文字为绿色，字体大小不变
    30.     div>
    31.     <div class="green fontStyle">
    32.         第三个盒子中的文字为绿色，字体大小为30px
    33.     div>
    34. body>
    35. html>

    效果如下：

    id选择器

    id选择器的使用

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

    HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以#来定义

    💡

    每一个id 属性名只能在每个 HTML 文档中出现一次，并且不可以被多个标签调用

    基本语法如下：

    1. /* 设计id选择器 */
    2. #选择器名 {
    3.     /* 键值对 */
    4. }
    5.  
    6. /* id调用 */
    7. <标签 id="选择器名">

    示例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>id选择器title> 
    7.     <style>
    8.         #box{
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: red;
    12.         }
    13.         .fontStyle
    14.         {
    15.             color: blue;
    16.         }
    17.     style>
    18.     style>
    19. head>
    20. <body>
    21.     
    22.     <div id="box">
    23.         
    24.         <p class="fontStyle">我是一个段落p>
    25.     div>
    26. body>
    27. html>

    效果如下：

    示例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>id选择器title> 
    7.     <style>
    8.         #box{
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: red;
    12.         }
    13.         #box1{
    14.             width: 200px;
    15.             height: 200px;
    16.             background-color: green;
    17.         }
    18.         .fontStyle
    19.         {
    20.             color: blue;
    21.         }
    22.     style>
    23.     style>
    24. head>
    25. <body>
    26.     
    27.     <div id="box">
    28.         
    29.         <p class="fontStyle">我是一个段落p>
    30.     div>
    31.     
    32.     <div id="box1">
    33.         
    34.         <p class="fontStyle">我是一个段落p>
    35.     div>
    36. body>
    37. html>

    效果如下：

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

    1. 类选择器类似于人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
    2. id 选择器类似于人的身份证号码是唯一的，不得重复
    3. id 选择器和类选择器最大的不同在于使用次数上，一个类可以被多个标签调用，但是一个id只能给一个标签调用
    4. 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

    通配符选择器

    在 CSS 中，通配符选择器使用*定义，它表示选取页面中所有元素（标签）

    基本语法：

    1. * {
    2.     /* 键值对 */
    3. }

    📌

    通配符选择器不需要调用， 自动就给所有的元素使用样式。

    示例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>通配符选择器title>
    7.     <style>
    8.         /* 将页面所有内容都设置为下面的属性值 */
    9.         * {
    10.             color: red;
    11.             font-size: 20px;
    12.         }
    13.     style>
    14. head> 
    15. <body>
    16.     
    17.     <p>段落标签p>
    18.     
    19.     <h1>标题标签h1>
    20.     
    21.     <div>div标签div>
    22. body>
    23. html>

    效果如下：

    基础选择器总结

    基础选择器

    作用

    特点

    标签选择器

    改变所有匹配指定标签的内容的样式

    一次性改变同类型的所有标签包含的内容的样式

    类选择器

    改变调用类的标签内容的样式

    只改变调用类的标签的内容样式，并且一个类可以被多个标签调用，一个标签可以调用多个类

    id选择器

    改变调用id的标签内容的样式

    只改变调用id的标签内容的样式，一个类只能调用一个id选择器，一个id选择器只能被一个类调用，不能被多次调用

    通配符选择器

    改变整个页面内容的样式

    一次性修改整个页面内容的样式

  • 相关阅读:
    人工智能轨道交通行业周刊-第64期（2023.10.16-10.29）
    数据库访问-records库
    从一到无穷大 #13 How does Lindorm TSDB solve the high cardinality problem?
    重新定义容器化 Serverless 应用的数据访问
    idea整合Tomcat进行Javaweb工程
    【云原生之Docker实战】使用Docker部署Ubooquity个人漫画服务器
    小程序开发的报价为什么有差别？需要多少钱？
    BOM的常用操作和有关获取页面/窗口高度、宽度及滚动的兼容性写法
    RabbitMQ安装
    软设上午题错题知识点8
  • 原文地址：https://blog.csdn.net/m0_73281594/article/details/137865074