【海贼王航海日志：前端技术探索】CSS你了解多少？(一)

news2024/9/26 1:28:24

目录

1 -> CSS是什么

2 -> 基本语法规范

3 -> 引入方式

3.1 -> 内部样式表

3.2 -> 行内样式表

3.3 -> 外部样式

4 -> 代码风格

4.1 -> 样式格式

5 -> 选择器

5.1 -> 选择器的功能

5.2 -> 选择器的种类

5.3 -> 基础选择器

5.3.1 -> 标签选择器

5.3.2 -> 类选择器

5.3.3 -> id选择器

5.3.4 -> 通配符选择器

5.3.5 -> 基础选择器小结

5.4 -> 复合选择器

5.4.1 -> 后代选择器

5.4.2 -> 子选择器

5.4.3 -> 并集选择器

5.4.4 -> 伪类选择器

5.4.5 -> 复合选择器小结

1 -> CSS是什么

层叠样式表(Cascading Style Sheets)。

CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。

2 -> 基本语法规范

选择器 + {一条/N条声明}

  • 选择器决定针对谁修改。
  • 声明决定修改什么。
  • 声明的属性是键值对。使用：区分键值对，使用：区分键和值。
<!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;
        /* 设置字体大小 */
        font-size: 30px;
    }
    </style>

</head>

<body>
    
    <p>One Piece</p>

</body>
</html>

展示结果：

注意：

  • CSS要写到style标签中。
  • style标签可以放到页面任意位置。一般放到head标签内。
  • CSS使用 /* */ 作为注释。(使用ctrl + /快速切换)。

3 -> 引入方式

3.1 -> 内部样式表

写在 style 标签中。嵌入到 html 内部。理论上来说style放到html的哪里都行。但是一般都是放到 head 标签中。

优点：这样做能够让样式和页面结构分离。

缺点：分离的还不够彻底，尤其是CSS内容多的时候。

前面写的代码主要都是使用了这种方式。实际开发中不常用。

3.2 -> 行内样式表

通过style属性，来指定某个标签的样式。

只适合于写简单样式。只针对某个标签生效。

缺点：不能写太复杂的样式。

这种写法优先级较高，会覆盖其他的样式。

<!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 {
        color: red;
    }
    </style>

</head>

<body>

    <div style="color:skyblue">One Piece是真实存在的！！！</div>
    
</body>
</html>

展示结果：

可以看到，red颜色被覆盖了。

3.3 -> 外部样式

实际开发中最常用的方式。

  1. 创建一个css文件。
  2. 使用link标签引入css。
<link rel="stylesheet" href="[CSS文件路径]">

创建test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    
    <div>One Piece是真实存在的！！！</div>

</body>
</html>

创建style.css

div {
    color: skyblue;
}

展示结果：

注意：不要忘记link标签调用CSS，否则不生效。

优点：样式和结构彻底分离了。

缺点：受到浏览器缓存影响，修改之后不一定立刻生效。

关于缓存：

这是计算机中一种常见的提升性能的技术手段。

网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的。如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取。就可以使用缓存先存起来(就是存在本地磁盘上了)。从而提高访问效率。

可以通过 ctrl + F5 强制刷新页面，强制浏览器重新获取css文件。

4 -> 代码风格

4.1 -> 样式格式

1. 紧凑风格

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

2. 展开风格

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

样式大小写

虽然CSS不区分大小写，我们开发时统一使用小写字母。

空格规范

  • 冒号后面带空格。
  • 选择器和 { 之间也有一个空格。 

5 -> 选择器

5.1 -> 选择器的功能

选中页面中指定的标签元素。

要先选中元素，才能设置元素的属性。就好比SC2，War3这样的游戏，需要先选中单位，再指挥该单位行动。

5.2 -> 选择器的种类

以下内容只是CSS2标准中支持的选择器，在CSS3中还做出了一些补充。

1. 基础选择器：单个选择器构成的。

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

2. 复合选择器：把多种基础选择器综合运用起来。

  • 后代选择器
  • 子选择器
  • 并集选择器
  • 伪类选择器

CSS选择器参考手册

5.3 -> 基础选择器

5.3.1 -> 标签选择器

特点：

  • 能快速为同一类型的标签都选择出来。
  • 但是不能差异化选择。
<!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;
        }
        div {
            color: green;
        }
    </style>

</head>

<body>
    
    <p>王路飞</p>
    <p>王路飞</p>
    <p>王路飞</p>

    <div>刘索隆</div>
    <div>刘索隆</div>
    <div>刘索隆</div>

</body>
</html>

展示结果：

5.3.2 -> 类选择器

特点：

  • 差异化表示不同的标签。
  • 可以让多个标签的都使用同一个标签。
<!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>
    .blue {
        color: skyblue;
    }
    </style>

</head>
<body>
    
       <div class="blue">王路飞</div>
       <div>王路飞</div>

</body>
</html>

展示结果：

语法细节：

  • 类名用 . 开头的。
  • 下方的标签使用class属性来调用。
  • 一个类可以被多个标签使用，一个标签也能使用多个类(多个类名要使用空格分割，这种做法可以让代码更好复用)。
  • 如果是长的类名，可以使用 - 分割。
  • 不要使用纯数字，或者中文，以及标签名来命名类名。

代码示例：使用多个类名。

注意：

一个标签可以同时使用多个类名。这样做可以把相同的属性提取出来，达到简化代码的效果。

<!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: 200px;
        height: 150px;
    }
    .red {
        background-color: red;
    }
    .green {
        background-color: green;
    }
    </style>

</head>
<body>
    
       <div class="box red"></div>
       <div class="box green"></div>
       <div class="box red"></div>

</body>
</html>

展示结果：

5.3.3 -> id选择器

和类选择器类似。

  • CSS中使用#开头表示id选择器。
  • id选择器的值和html中某个元素的id值相同。
  • html的元素id不必带#。
  • id是唯一的，不能被多个标签使用(和类选择器最大的区别)。
<!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>
    #shh {
        color: pink;
    }
    </style>

</head>

<body>

       <div id="shh">沈哈哈</div>
    
</body>
</html>

展示结果：

类比：

姓名是类选择器，可以重复。

身份证号码是id选择器，是唯一的。

5.3.4 -> 通配符选择器

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

* {
    color: red;
}

页面的所有内容都会被改成红色。不需要被页面结构调用。

5.3.5 -> 基础选择器小结

选择器作用特点
标签选择器能选出所有相同标签不能差异化选择
类选择器能选出一个或多个标签根据需求选择，最灵活，最常用
id选择器能选出一个标签同一个id在一个HTML中只能出现一次
通配符选择器选择所有标签特殊情况下使用

5.4 -> 复合选择器

5.4.1 -> 后代选择器

又叫包含选择器。选择某个父元素中的某个子元素。

元素1 元素2 {样式声明}
  • 元素1和元素2要使用空格分割。
  • 元素1是父级，元素2是子级，只选元素2，不影响元素1。

代码示例：把ol中的li修改颜色，不影响ul。

test.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>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    
    <ul>
        <li>王路飞</li>
        <li>王路飞</li>
        <li>王路飞</li>
    </ul>

    <ol>
        <li>刘索隆</li>
        <li>刘索隆</li>
        <li>刘索隆</li>
    </ol>

</body>
</html>

style.css

ol li {
    color: red;
}

展示结果：

代码示例：元素2不一定非是儿子，也可以是孙子。

test.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>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    
    <ul>
        <li>王路飞</li>
        <li>刘索隆</li>
        <li>
            <a href="#">山治君</a>
        </li>
    </ul>

</body>
</html>

style.css

ul li a {
    color: yellow;
}
/* 或者 */
ul a {
    color: yellow;
}

展示结果：

代码示例：可以是任意基础选择器的组合。(包括类选择器，id选择器)

test.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>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    
    <ol class="one">
        <li>王路飞</li>
        <li>山治君</li>
        <li>
            <a href="#">刘索隆</a>
        </li>
        <li>
            <a href="#">刘索隆</a>
        </li>
        <li>
            <a href="#">刘索隆</a>
        </li>
    </ol>

</body>
</html>

style.css

.one li a {
    color: green;
}

展示结果：

5.4.2 -> 子选择器

和后代选择器类似，但是只能选择子标签。

元素1>元素2 { 样式声明 }
  • 使用大于号分割。
  • 只选亲儿子，不选孙子元素。

test.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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="two">
        <a href="#">王路飞</a>
        <p><a href="#">刘索隆</a></p>
    </div>

</body>
</html>

后代选择器的写法，会把“王路飞”和“刘索隆”都选中。  

style.css

.two a {
    color: red;
}

展示结果：

子选择器的写法，只选“王路飞”。

style.css

.two>a {
    color: red;
}

展示结果：

5.4.3 -> 并集选择器

用于选择多组标签(集体声明)。

元素1, 元素2 { 样式声明 }
  • 通过逗号分割多个元素。
  • 表示同时选中元素1和元素2。
  • 任何基础选择器都可以使用并集选择器。
  • 并集选择器建议竖着写。每个选择器占一行(最后一个选择器不能加逗号)。

代码示例：

test.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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>王路飞</div>
    <h3>刘索隆</h3>
    <ul>
        <li>山治君</li>
        <li>山治君</li>
    </ul>

</body>
</html>

 1. 把“王路飞”和“刘索隆”颜色改成红色。

style.css

div, h3 {
    color: red;
}

展示结果：

2. 把“山治君”一起改成红色。

style.css

div,
h3,
ul>li {
    color: red;
}

展示结果：

5.4.4 -> 伪类选择器

1. 链接伪类选择器

  • a:link 选择未被访问过的链接。
  • a:visited 选择已经被访问过的链接。
  • a:hover 选择鼠标指针悬停上的链接。
  • a:active 选择活动链接(鼠标按下但是未弹起)。

示例：

test.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>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    
    <a href="#">王路飞</a>

</body>
</html>

style.css

a:link {
    color: black;
    /* 去掉 a 标签的下划线 */
    text-decoration: none;
}
a:visited {
    color: green;
}
   a:hover {
    color: red;
}
   a:active {
    color: skyblue;
}

如何让一个已经被访问过的链接恢复成未访问的状态？

清空浏览器历史记录即可。ctrl + shift + delete 

注意：

  • 按照LVHA的顺序书写，例如把active拿到前面去，就会导致active失效。(记忆规则“绿化”)
  • 浏览器的a标签都有默认样式，一般实际开发都需要单独制定样式。
  • 实际开发主要给链接做一个样式，然后给hover做一个样式即可。link、visited和active用的并不多。
a {
    color: black;
}
a:hover {
    color: red;
}

2. :focuse伪类选择器

选取获取焦点的input表单元素。 

test.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>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    
    <div class="three">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>

</body>
</html>

style.css

.three>input:focus {
    color: red;
}

展示结果：

 此时被选中的表单字体就会变成红色。

5.4.5 -> 复合选择器小结

选择器作用注意事项
后代选择器选择后代元素可以是孙子元素
子选择器选择子元素只能选亲儿子，不能选孙子
并集选择器选择相同样式的元素更好的做到代码重用
链接伪类选择器选择不同状态的链接

重点掌握a:hover的写法

:focuse伪类选择器选择被选中的元素重点掌握input:focus的写法

感谢各位大佬支持！！！

互三啦！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1981271.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SQL进阶技巧：数据预处理如何对数据进行分桶【分箱】？

SQL进阶技巧：数据预处理如何对数据进行分桶【分箱】？

目录 0 引言 1 数据准备 2 数据分桶SQL实现 2 1.基于规则的分桶 2.2 等距分桶 2.3等频分桶 3 小结 0 引言 数据分桶&#xff08;Bucket&#xff09;作为数据预处理的一部分&#xff0c;是进行数据模型建设的前提&#xff0c;是构建特征工程的重要手段。也被称为离散分箱或…
阅读更多...
【算法】KMP算法

【算法】KMP算法

应用场景 有一个字符串 str1 "BBA ABCA ABCDAB ABCDABD"&#xff0c;和一个子串 str2 "ABCDABD"现在要判断 str1 是否含有 str2&#xff0c;如果含有&#xff0c;就返回第一次出现的位置&#xff0c;如果不含有&#xff0c;则返回 -1 我们很容易想到暴力…
阅读更多...
The Llama 3 Herd of Models 第8部分语音实验部分全文

The Llama 3 Herd of Models 第8部分语音实验部分全文

第1,2,3部分，介绍、概览、预训练 第4部分，后训练 第5部分，结果 第6部分，推理 第7部分，视觉实验 8 Speech Experiments 我们进行了实验来研究将语音功能集成到Llama 3中的组合方法，类似于我们用于视觉识别的方法。在输入端，一个编码器，连同一个适配器，被并入处理语…
阅读更多...
低代码开发是什么意思？低代码是开发的未来吗？

低代码开发是什么意思？低代码是开发的未来吗？

在数字化转型的浪潮中&#xff0c;低代码平台是一股不可忽视的力量&#xff0c;它正在以前所未有的速度改变着软件开发的格局。低代码不仅极大地简化了开发流程&#xff0c;降低了技术门槛&#xff0c;还通过高效、灵活的特性&#xff0c;为企业和开发者带来了前所未有的创新机…
阅读更多...
页面弹窗中英文切换

页面弹窗中英文切换

一、遇到的问题 页面右上角弹窗如下 二、解决 去掉 lang"en"即可。
阅读更多...
SVPWM5段式7段式差异分析和关键代码基于TI F28035

SVPWM5段式7段式差异分析和关键代码基于TI F28035

SVPWM5段式7段式差异分析和关键代码基于TI F28035 5段式有一相占空比始终为0或者1 扇区判断的扇区号和实际扇区不是一一对应，直接使用，而是映射关系 扇区判断变量 7段式和5段式在基本矢量作用顺序上的差异 SVPWM算法详解(已标注重点) 来自这篇文章，但经过实际测试，发现是…
阅读更多...
计算机和医学领域成重灾区！5本TOP刊也位列其中，请大家谨慎投稿！

计算机和医学领域成重灾区！5本TOP刊也位列其中，请大家谨慎投稿！

【SciencePub学术】自从Hindawi一年撤稿多达一万多篇的事件以来&#xff0c;官方对期刊质量的管控就越来越严格了。更有很多学校和单位都频频更新自己的风险期刊名单&#xff0c;其中&#xff0c;Hindawi、Frontiers、MDPI甚至都被直接打包拉黑&#xff01; 更有On Hold 期刊现…
阅读更多...
ios上音频需要点击两次才播放

ios上音频需要点击两次才播放

问题 用H5标签audio渲染音频&#xff0c;测试PC和安卓都没有问题&#xff0c;点击一次就播放&#xff0c;并且可以在播放之前正常显示音频时长 但是在iOS系统上没有播放之前&#xff0c;不仅时长显示为0&#xff0c;并且播放还需要点击2次才正常播放 原因 debug之后发现是因为…
阅读更多...
计算机毕业设计选题推荐-遥感影像共享系统-Java/Python项目实战

计算机毕业设计选题推荐-遥感影像共享系统-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…
阅读更多...
GaussDB关键技术原理|高可用：两地三中心跨Region容灾

GaussDB关键技术原理|高可用：两地三中心跨Region容灾

接上篇GaussDB关键技术原理|高可用&#xff1a;逻辑复制从逻辑复制方面对GaussDB的高可用能力进行了介绍&#xff0c;本篇将从两地三中心跨Region容灾方面继续解读GaussDB高可用技术。 目录 4 两地三中心跨Region容灾 4.1 概述 4.2 异地容灾部署示例 集中式 分布式&#x…
阅读更多...
sheng的学习笔记-AI-层次聚类

sheng的学习笔记-AI-层次聚类

AI目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 需要学习的前置知识&#xff1a;聚类&#xff0c;可参考&#xff1a;sheng的学习笔记-AI-聚类(Clustering)-CSDN博客 什么是层次聚类 层次聚类(hierarchical clustering)试图在不同层次对数据集进行划分&#xff0c;从而形…
阅读更多...
2024年第五届华数杯全国大学生数学建模竞赛【C题】完整版代码+结果 分享

2024年第五届华数杯全国大学生数学建模竞赛【C题】完整版代码+结果 分享

问题1的设问虽然不涉及到数学模型&#xff0c;只需要统计题目所给附件数据&#xff0c;但在做题之前可以先整理思路&#xff1a; ①统计景点评分最高分&#xff1b;②统计最高分在所有文件中出现的总次数&#xff1b;③统计出现高分次数最多的csv文件&#xff1b;④统计出现最…
阅读更多...
js前端展示ppt【插件：PPTXJS】

js前端展示ppt【插件：PPTXJS】

前端展示PPT 使用插件&#xff1a; 官方网址: https://pptx.js.org/index.html github网址: https://github.com/meshesha/PPTXjs/releases 实例网址: https://pptx.js.org/pages/demos.html通过下载官方demo可以获得完整的实例
阅读更多...
MySQL简介 数据库管理与表管理

MySQL简介 数据库管理与表管理

文章目录 1 MySQL的优势2 MySQL数据类型1 数字类型2 日期和时间类型3 字符串类型 3 数据库管理4 数据表管理参考 1 MySQL的优势 性能优化&#xff1a;通过优化存储引擎&#xff08;InnoDB&#xff0c;MyISAM&#xff09;和查询优化。解决大规模数据处理和查询优化开源&#xf…
阅读更多...
孩子被确诊为自闭症怎么办？

孩子被确诊为自闭症怎么办？

当家庭收到孩子被确诊为自闭症的消息时&#xff0c;这无疑是一次巨大的心理冲击和挑战。面对这一突如其来的诊断&#xff0c;许多家长会感到无助、焦虑甚至绝望。然而&#xff0c;重要的是要认识到&#xff0c;自闭症并非不可逾越的障碍&#xff0c;通过科学、专业的干预和治疗…
阅读更多...
调度中心控制台：智慧运营的心脏，引领高效管理的未来

调度中心控制台：智慧运营的心脏，引领高效管理的未来

在当今这个信息化、智能化发展的时代&#xff0c;各行各业的运营管理都面临着前所未有的挑战与机遇。作为协调资源、指挥调度的核心枢纽&#xff0c;调度中心控制台不仅是信息汇聚的窗口&#xff0c;更是智慧决策与高效执行的起点。接下来就由嘉德立给大家深入探讨一下调度中心…
阅读更多...
【C#语音文字互转】.NET的TTS文本转语音合成

【C#语音文字互转】.NET的TTS文本转语音合成

本文章环境介绍&#xff1a; Visual Studio 2022&#xff1b;C#SDK为.NET6.0 一. 启动 Visual Studio 并创建控制台应用程序 1.1 首先在项目打开NuGet包管理工具下载System.Speech。 1.2测试 下面为一个典型的输出示例 using System.Speech.Synthesis; namespace KeepTalkin…
阅读更多...
视觉SLAM第三讲

视觉SLAM第三讲

本讲将介绍视觉 SLAM 的基本问题之一&#xff1a;三维空间的刚体运动描述方式&#xff1a;旋转矩阵、变换矩阵、四元数和欧拉角。 点、向量和坐标系 点&#xff1a;空间当中的基本元素&#xff0c;没有长度&#xff0c;没有体积。 向量&#xff1a;可以将向量看作从一个点指向…
阅读更多...
如何快速创建一个微信报名链接

如何快速创建一个微信报名链接

在这个快节奏的时代&#xff0c;如何让活动报名更加便捷、高效&#xff0c;成为了众多主办方关注的焦点。今天&#xff0c;就让我们一起探索如何快速创建一个微信报名链接&#xff0c;让您的活动报名变得前所未有的简单与智能。 一、洞悉需求&#xff0c;解锁报名新方式 在数字…
阅读更多...
【Pyspark-驯化】一文搞定spark的代码执行原理和使用技巧

【Pyspark-驯化】一文搞定spark的代码执行原理和使用技巧

【Pyspark-驯化】一文搞定spark的代码执行原理和使用技巧 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 相关内容文档获取 微信公众号 &…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023