• CSS概述 | CSS的引入方式 | 选择器

    文章目录

    1.CSS概述

    CSS，全称Cascading Style Sheets（层叠样式表），是一种用来设置HTML（或XML等）文档样式的语言。CSS的主要作用是描述网页的布局和外观，包括颜色、字体、间距、背景图像等，CSS可以和HTML内容经行分离，这样，一个CSS样式可以用在多个HTML页面，修改时候可以只修改一个CSS文件即可。

    CSS的基本语法

    选择器 + 一条或N条声明，选择器决定针对谁做修改，比如想要对p标签中的字体大小和颜色进行修改，那么p就是一个选择器，这样类型的选择器称为元素选择器

    声明，是在一对花括号{}中进行声明 ，每个声明都由两部分组成：属性和值；注：CSS 不区分大小写, 开发时通常使用使用小写字母

    p {
  color: red;
  font-size: 16px;
}

    • 1
    • 2
    • 3
    • 4
    2.CSS的引入方式
    2.1.内部样式表

    通过style 标签将CSS样式嵌入到 html 内部，当CSS内容特别多的时候，html页面就显得很大。这不是一种很好的方法，但是有些网页还是会用，我感觉是历史遗留的问题，哈哈哈。

    理论上来说 style 放到 html 的哪里都行，但是一般都是放到 head 标签中。

    <html lang="en">
<head>
    <style>
        p {
            color: blue;
        }
    style>
head>
<body>
    <div>
        <p>天空为什么是蓝色的p>
    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    2.2.行内样式表

    通过 style 属性, 来指定某个标签的样式，只适合于写简单样式. 只针对某个标签生效，这种写法优先级较高, 会覆盖其他的样式。

    <head>
    <style>
        p { color: red; }
    style>
head>
<body>
    <p style="color:blue">天空是什么颜色p> 
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    2.3.外部样式表

    实际开发中最常用的方式，创建后缀为css的文件， 使用 link 标签引入 css。

    在同级目录下的css文件夹中创建style.css文件

    p{
    color: blue;
    font-size: 18px;
}

    • 1
    • 2
    • 3
    • 4

    在一个HTML的文件中引用外部的css文件

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="./css/style.css">
head>
<body>
    <p>大海为什么是蓝色的p>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    这样的好处是css样式和html结构彻底分离了，但是受到浏览器缓存影响, 修改之后 不一定 立刻生效。

    关于浏览器的缓存

    缓存（Cache）：提升性能的技术手段，网页依赖的资源（图片/CSS/JS等）通常是从服务器上获取，如果频繁访问该网站, 那么这些外部资源就没必要反复从服务器获取，浏览器就可以使用缓存先存起来（就是存在本地磁盘上）， 减少网络传输的时间和带宽消耗，从而提高访问效率。可以使用 ctrl + F5 强制刷新页面；

    3.选择器

    前面我们就一直在使用选择器（元素选择器），选择器选中标签元素从而设置元素的属性。选择器可以分为基础选择器和复合选择器，我主要分享常见的基础选择器，关于复合选择器可以去参考文档：链接

    注：下面的css代码，都是放在和html同级的css文件夹下

    标签选择器

    能快速为同一类型的标签都选择出来，但是不能差异化选择

    p{
    color: blue;
    font-size: 18px;
}

    • 1
    • 2
    • 3
    • 4
    

    大海为什么是蓝色的
    

    红苹果
    

    • 1
    • 2
    • 3

    展示结果：使用p标签标识的标签就都是蓝色的了

    在这里插入图片描述

    类选择器

    类名用.开头的，下方的标签使用 class 属性来调用，如果类名过长, 可以使用 - 分割

    .box-height-width{
    height: 50px;
    width: 300px;
}

.blue{
    color: blue;
}

.red{
    color: red;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    html页面可以使用class引入多个样式，中间用空格隔开

    <p class="blue box-height-width">大海为什么是蓝色的p>
<p class="red ">苹果是红色的p>

    • 1
    • 2

    展示结果：

    在这里插入图片描述

    id选择器

    CSS 中使用 # 开头表示 id 选择器，id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

    #box{
    height: 500px;
}

#blue{
    color: blue;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    <p id="blue box">苹果p>
<p id="blue">大海为什么是蓝色的p>

    • 1
    • 2

    展示结果：

    在这里插入图片描述

    通配符选择器

    使用 * 的定义, 选取所有的标签

    * {
    color: blue;
}

    • 1
    • 2
    • 3

    页面的所有内容都会被改成 红色，可以用于修改浏览器的默认属性

    复合选择器（了解）

    使用基础选择器组合，常见的符合选择器有：后代选择器、子选择器、并集选择器、伪类选择器

  • 相关阅读:
    【C语言】自定义类型：结构体【结构体内存具详细】，枚举，联合
    防火墙安全策略
    numpy教程：Universal Functions 通用函数 伪随机数
    Matlab：大小写和空格敏感性
    【Linux 文件的权限管控信息，读写执行三种权限含义】
    1-4metasploitable2介绍
    河北吉力宝智能科技鞋：引领健康产业全面升级和互联网转型
    一级造价工程师（安装）- 计量笔记 - 第六章第二节自动控制系统
    基于kubernetes平台微服务的部署
    C#基础入门教程-方法
  • 原文地址：https://blog.csdn.net/qq_63159859/article/details/136143886