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

目录

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.rhkb.cn/news/392019.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

三十种未授权访问漏洞复现 合集（ 三）

三十种未授权访问漏洞复现 合集（ 三）

未授权访问漏洞介绍 未授权访问可以理解为需要安全配置或权限认证的地址、授权页面存在缺陷&#xff0c;导致其他用户可以直接访问&#xff0c;从而引发重要权限可被操作、数据库、网站目录等敏感信息泄露。---->目录遍历 目前主要存在未授权访问漏洞的有:NFS服务&a…
阅读更多...
python入门基础篇（一）

python入门基础篇（一）

基础篇 Python基础安装与配置Python环境理解Python解释器第一个Python程序&#xff1a;"Hello, World!" 基础语法注释与文档字符串变量与数据类型数字类型&#xff1a;整数、浮点数、复数字符串布尔值None值 运算符算术运算符比较运算符逻辑运算符赋值运算符位运算符…
阅读更多...
Python 爬虫项目实战（一）：爬取某云热歌榜歌曲

Python 爬虫项目实战（一）：爬取某云热歌榜歌曲

前言 网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;也称为网页蜘蛛&#xff08;Web Spider&#xff09;或网页机器人&#xff08;Web Bot&#xff09;&#xff0c;是一种按照既定规则自动浏览网络并提取信息的程序。爬虫的主要用途包括数据采集、网络索引、内容抓…
阅读更多...
《机器人SLAM导航核心技术与实战》第1季：第8章_激光SLAM系统

《机器人SLAM导航核心技术与实战》第1季：第8章_激光SLAM系统

视频讲解 【第1季】8.第8章_激光SLAM系统-视频讲解【第1季】8.1.第8章_激光SLAM系统_Gmapping算法-视频讲解【第1季】8.2.第8章_激光SLAM系统_Cartographer算法-视频讲解【第1季】8.3.第8章_激光SLAM系统_LOAM算法-视频讲解 第1季&#xff1a;第8章_激光SLAM系统 先 导 课第…
阅读更多...
如何使用 PHP Simple HTML DOM Parser 轻松获取网页中的特定数据

如何使用 PHP Simple HTML DOM Parser 轻松获取网页中的特定数据

背景介绍 网页数据的抓取已经成为数据分析、市场调研等领域的重要工具。无论是获取产品价格、用户评论还是其他公开数据&#xff0c;网页抓取技术都能提供极大的帮助。今天&#xff0c;我们将探讨如何使用 PHP Simple HTML DOM Parser 轻松获取网页中的特定数据。PHP Simple H…
阅读更多...
佳能R8和索尼6700，个人犹豫买什么。绝大多建议R8！

佳能R8和索尼6700，个人犹豫买什么。绝大多建议R8！

针对佳能R8和索尼a6700的选择&#xff0c;结合你的需求&#xff0c;我会更倾向于推荐佳能R8。 首先&#xff0c;R8作为一款全画幅相机&#xff0c;在画质上相对APS-C画幅的a6700有一定的优势&#xff0c;特别是在拍摄孩子的日常和特写时&#xff0c;更能够捕捉到细腻的画面和丰…
阅读更多...
Unity 预制动态绑定光照贴图遇到变白问题

Unity 预制动态绑定光照贴图遇到变白问题

预制绑定光照贴图&#xff0c;网上解决方案很多&#xff0c;已下是要点&#xff1a; //烘培完场景之后&#xff0c;保存光照贴图信息 void StoreLightmapData() {lightMap.Clear();LightmapData[] lds LightmapSettings.lightmaps;foreach (LightmapData data in lds){Custom…
阅读更多...
第1天：Python基础语法（五）

第1天：Python基础语法（五）

正文&#xff1a; 在之前的文章中&#xff0c;我们已经学习了Python的基本语法集合和集合的一些常用操作。 在本篇文章中&#xff0c;我们将继续学习其他类型 字符串格式化 使用操作符%s来实现 ➢ 几个%s就几个变量 ➢ 超过一个变量时&#xff0c;需要用元组%&#xff08;…
阅读更多...
计算机网络（TCP报文段首部格式中序号和确认号）

计算机网络（TCP报文段首部格式中序号和确认号）

TCP首部格式中的序号和确认号并不总是同时出现。 TCP首部的序号和确认号是根据TCP通信的不同阶段和目的来决定的。在建立连接的过程中&#xff0c;序号用于标识发送数据的起始位置&#xff0c;而确认号用于表示接收方期望接收的下一个数据的起始位置。这两个字段在TCP通信的不同…
阅读更多...
Nat Cell Biol文献分享|scRNA-seq+ChIP-seq揭示表观因子KMT2C/D突变三阴性乳腺癌脑转移的新机制

Nat Cell Biol文献分享|scRNA-seq+ChIP-seq揭示表观因子KMT2C/D突变三阴性乳腺癌脑转移的新机制

乳腺癌是全球最常见的癌症&#xff0c;也是全球女性癌症相关死亡的主要原因。根据雌激素和孕激素受体以及人类表皮生长因子受体 2 (HER2) 的表达&#xff0c;乳腺癌可分为激素受体阳性、HER2 阳性或三阴性乳腺癌 (TNBC)。在主要亚型中&#xff0c;TNBC 的远处转移风险最高&…
阅读更多...
被遗忘的哑终端 —— 键盘键位演变的启发者

被遗忘的哑终端 —— 键盘键位演变的启发者

注&#xff1a;机翻&#xff0c;未校对。 The Forgotten World of Dumb Terminals 被遗忘的哑终端世界 A quick journey through the lost age of “glass teletypes.” 快速穿越失落的“玻璃电传打字机”时代。 From the earliest days of digital computers, researchers o…
阅读更多...
【从零开始一步步学习VSOA开发】URL 资源标识

【从零开始一步步学习VSOA开发】URL 资源标识

URL 资源标识 概念 在 VSOA 的世界里&#xff0c;所有的差异化均得到统一&#xff0c;所有的硬件、软件服务均提供统一的资源标签 URL。类似 http://&#xff0c;VSOA 的 URL 以 vsoa:// 开始。下面通过 2 个例子介绍 VSOA 统一资源标识的好处&#xff1a; 匹配规则 URL 标…
阅读更多...
Easy DP Problem

Easy DP Problem

https://codeforces.com/gym/102770/problem/E 给一个dp转移式子&#xff0c;求dp[m][k] mr-l1 dp不是玄学吗? 话说给我了一个式子&#xff0c;我直接转不就好了&#xff0c;发现n<1e5&#xff0c;那算了 分析一个小例子发现 前面式子用循环求或者公式&#xff0c;后面…
阅读更多...
Unity 资源之 Break Items - Toon VFX破碎物品与卡通硬币动画分享

Unity 资源之 Break Items - Toon VFX破碎物品与卡通硬币动画分享

Unity 特效资源分享 - 破碎物品与卡通硬币动画 一、前言二&#xff0c;资源包内容三、免费获取资源包 一、前言 今天为大家带来一份超级实用的视觉特效资源分享&#xff01;我们精心整理了 6 个令人惊叹的破碎物品效果和 1 个萌趣十足的卡通硬币动画视觉特效&#xff0c;让您的…
阅读更多...
传统ERP vs 零代码ERP：企业究竟应当选哪条路？

传统ERP vs 零代码ERP：企业究竟应当选哪条路？

在大环境变幻莫测的今天&#xff0c;每个企业都像是航行在数字化浪潮中的一艘船&#xff0c;而ERP系统&#xff0c;就像是这艘船的导航系统&#xff0c;帮助企业精准定位、高效航行。 但面对传统ERP与新兴零代码ERP&#xff0c;不少企业家可能会感到迷茫&#xff1a;是该坚守传…
阅读更多...
火猫奥运会：西班牙国奥VS摩洛哥国奥预测，进决赛已无悬念

火猫奥运会：西班牙国奥VS摩洛哥国奥预测，进决赛已无悬念

北京时间8月6日,巴黎奥运会男足半决赛西班牙国奥VS摩洛哥国奥的巅峰对决将正式打响。西班牙国奥被外界视为本届奥运会夺金大热门,球队在八强战中横扫日本国奥,已经露出冠军相。要知道日本国奥整体实力并不差,小组赛发挥抢眼。没想到,日本国奥八强战遇到夺金大热门西班牙国奥,竟…
阅读更多...
PointNet和PointNet++论文解读

PointNet和PointNet++论文解读

目录 一、导言 二、PointNet介绍 三、PointNet网络结构 1、损失函数 2、正则化 四、PointNet 1、分层次的点集抽象层 五、PointNet网络结构 1、点特征传播 2、分组方法 一、导言 PointNet来自CVPR2017&#xff0c;是最早直接处理点云数据用于计算机视觉的模型&#…
阅读更多...
优思学院｜质量经理如何开展工作？

优思学院｜质量经理如何开展工作？

如果你本来是一个质量工程师&#xff0c;经过了多年的努力&#xff0c;终于成为质量经理&#xff0c;你或者会很困惑&#xff0c;我到底应该如何开展质量管理的工作呢&#xff1f;质量管理对于任何企业来说都是至关重要的&#xff0c;它不仅决定了产品的合格率和市场竞争力&…
阅读更多...
STL中的vector以及简单实现

STL中的vector以及简单实现

vector的简单介绍&#xff1a; 头文件&#xff1a; #include<vector> vector是属于STL的一员&#xff0c;虽然vector的英文意思是向量&#xff0c;但是vector就是一个顺序表&#xff1b; 对于vector来说&#xff0c;面对string的设计的复杂和冗余&#xff0c;vector就…
阅读更多...
【从零开始一步步学习VSOA开发】创建VSOA的server端

【从零开始一步步学习VSOA开发】创建VSOA的server端

创建VSOA的server端 创建工程 参考 hellovsoa 工程&#xff0c;创建 server 工程&#xff0c;工程源码修改如下&#xff1a; #include <stdio.h> #include <stdlib.h> #include <string.h> #include <netinet/in.h> #include <arpa/inet.h> #…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023