实践积累，安静沉淀
默默努力，给自己惊喜
介绍
1.CSS样式介绍
2. CSS的工作原理
3.CSS句型规范
3.1 CSS注释
3.2 标签选择器
3.3 类选择器
3.4 id选择器
3.5 通配符选择器
1.CSS样式介绍
前面我提到，我介绍了Web开发中HTML的规范。 如果说 HTML 是结构（骨架），那么 CSS 就是样式（外衣）。
CSS层叠样式表（英文全称：Cascading Style Sheets）是一种用于表示文件样式的计算机语言，例如HTML（标准通用标记语言的应用）或XML（标准通用标记语言的子集）。 CSS除了静态修改网页之外css最右，还可以与各种脚本语言配合，动态修改网页的各种元素。
CSS可以在像素级别精确控制网页中元素位置的排版，支持几乎所有的字体大小和样式，并且具有编辑网页对象和模型样式的能力。
2.CSS原理
CSS是一种定义字体、颜色、位置等样式结构的语言，用于描述网页信息的格式和显示。
CSS 样式可以直接存储在 HTML 页面或单独的样式表文件中。 无论哪种形式，样式表都包含将样式应用于指定类型的元素的规则。 对于外部使用，样式表规则放置在文件扩展名为 _css 的外部样式表文档中。
样式规则是低级指令，可应用于网页上的元素，例如文本段落或链接。 样式规则由一个或多个样式属性及其值组成。 内部样式表直接放在网页中，外部样式表保存在单独的文档中，网页通过特殊标签链接到外部样式表。
CSS 名称中的“级联”指的是样式表规则应用于 HTML 文档元素的方式。 具体来说，CSS 样式表中的样式创建了一个层次结构，更具体的样式覆盖通用样式。 CSS根据这个层次结构来决定样式规则的优先级，从而达到级联的效果。
3.CSS句型规范
在HTML网页中，CSS通常写在head标签中style标签下的title标签上方。
3.1CSS注释
注释是编码中不可缺少的步骤。 CSS中的注释方法是选中要注释的代码，同时按ctrl+/来注释该代码片段。 如果您想取消评论，请再次选择刚刚评论的代码片段，然后再次按 ctrl+/ 取消评论。 如果您要注释单行代码，只需将光标放在该代码行中的任意位置，然后按 ctrl+/。
单行注释前：
这是一个CSS注释
单行注释后：
/* 这是一个CSS注释*/
多行注释之前：
这是一个CSS注释
CSS代码
多行注释后：
/* 这是一个CSS注释
CSS代码*/
3.2 标签选择器
在HTML网页中，标签选择器主要用于通过标签名称查找页面中所有此类标签并设置样式。
标签选择器语句格式：标签名{ css属性名：属性值； }
防范措施：
(1)标签选择器选择一种标签，而不是单一标签。
(2)标签选择器无论嵌套关系有多深都能找到对应的标签。
语法示例：
/* 标签选择器*/
/* 标签选择器语句格式：标签名{ css属性名：属性值; } */
dt {
颜色：深蓝色；
示例代码：
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签选择器demo</title><style>/* 标签选择器 *//* 标签选择器语法格式：标签名{ css属性名：属性值; } */dt {color:coral}dd {color:cornflowerblue}</style></head><body><dl><dt><b>联系我们</b></dt><dd>联系人：ITBrickMover</dd><dd>职位：测试开发工程师</dd><dd>邮箱：2514xxxxx6@qq.com</dd><dd></dd></dl></body></html>
--可以左右滑动查看完整代码--
前端显示疗效：
3.3 类选择器
在HTML网页中，类选择器主要用于通过类名查找页面中所有具有该类名的标签，并设置样式。
类选择器语句格式： .class name { css 属性名:属性值; }
防范措施：
(1)所有标签都有一个class属性，class属性的属性值称为类名。
(2)类名可以由数字、字母、下划线、下划线组成css最右，但不能以数字、下划线开头。
(3)一个标签可以同时有多个类名，类名之间用空格分隔。
(4)类名可以重复，一个类选择器可以同时选择多个标签。
语法示例：
第 1 步：类定义
第 1 步：类定义
/* 类选择器*/
/* 类选择器语句格式: .class name { css 属性名:属性值; } */
。红色的{
红色;
第 2 步：类的使用
翻译： 山口与歌鸽相伴在河中的小岛上。
示例代码：
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS样式类选择器demo</title><style>/* 类选择器 *//* 类选择器语法格式：.类名{ css属性名：属性值; } */.red{color: red;}.pink{color: pink;}.lightgray{color: lightgray;}.blue{color: blue;}.size{font-size: 25px;}</style></head><body><h2>关雎</h2><p class="lightgray">【作者】无名氏</p><p>【朝代】先秦</p><hr><p>关关雎鸠，在河之洲。<br>窈窕淑女，君子好逑。<br>参差荇菜，左右流之。<br>窈窕淑女，寤寐求之。<br>求之不得，寤寐思服。<br>悠哉悠哉，辗转反侧。<br>参差荇菜，左右采之。<br>窈窕淑女，琴瑟友之。<br>参差荇菜，左右芼之。<br>窈窕淑女，钟鼓乐之。</p><br><br><h3 class="blue size" >译文：</h3><hr><p class="red">译：关关和鸣的雎鸠，相伴在河中的小洲。</p><p class="pink">译：那美丽贤淑的女子，是君子的好配偶。</p><p class="red">译：参差不齐的荇菜，从左到右去捞它。</p><p class="pink">译：那美丽贤淑的女子，醒来睡去都想追求她。</p><p>译：追求却没法得到，白天黑夜便总思念她。</p><p>译：长长的思念哟，叫人翻来覆去难睡下。</p><p>译：参差不齐的荇菜，从左到右去采它。</p><p>译：那美丽贤淑的女子，奏起琴瑟来亲近她。</p><p>译：参差不齐的荇菜，从左到右去拔它。</p><p>译：那美丽贤淑的女子，敲起钟鼓来取悦她。</p></body></html>
--可以左右滑动查看完整代码--
前端显示疗效：
3.4 id选择器
在HTML网页中，id选择器主要用于通过id属性值找到页面中具有该id属性值的标签，并设置样式。
id选择器语句格式：#id属性值{ css属性名:属性值; }
防范措施：
(1) 所有标签上都有一个id属性。
(2)Id属性的值类似于ID号。 它在页面中是唯一的，不能重复。
(3) 一个标签上只能有一个di属性值。
(4) 一个id选择器只能选择一个标签。
语法示例：
/* id选择器 */
/* id选择器语句格式:#id属性值{ css属性名:属性值; } */
＃巧克力{
颜色: 巧克力色;
示例代码：
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* id选择器 *//* id选择器语法格式：#id属性值{ css属性名：属性值; } */#chocolate{color: chocolate;}</style></head><body><div id="chocolate">hello,大家好，我是ITBrickMover。</div></body></html>
--可以左右滑动查看完整代码--
前端显示疗效：
3.5 通配符选择器
在HTML网页中，类选择器主要用于查找页面中的所有标签并设置样式。
通配符选择器语法：*{ css 属性名:属性值; }
防范措施：
(1)实际开发中很少使用，只能在非常特殊的情况下使用。
语法示例：
/* 通配符选择器 */
/* 通配符选择器语法： *{ css 属性名: 属性值; } */
*{
颜色: 粉色;
示例代码：
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配符选择器*的demo</title><style>/* 通配符选择器 *//* 通配符选择器语法格式：*{ css属性名：属性值; } */*{color: pink;}</style></head><body><dl><dt><b>联系我们</b></dt><dd>联系人：ITBrickMover</dd><dd>职位：测试开发工程师</dd><dd>邮箱：2514xxxxx6@qq.com</dd><dd></dd></dl></body></html>
--可以左右滑动查看完整代码--
前端显示疗效：
工具分发形式
您可以通过公众号后台回复【VSCode】来领取。
小好处
很大的恩惠
Tips：后续文章涉及的Python代码均使用PyCharm专业版编写。 如果您想切换到专业版，可以在小编之前发布的切换到专业版的文章中免费发放激活码。 我就是这样成功切换到专业版的。文章标题是
【重要提醒】：所有分享工具仅供方便朋友日常学习和交流，请勿用于其他商业用途。
嗓音
作者的想法：
每一篇文章都是我用心写的。 写起来并不容易。 如果您觉得这篇文章对您有帮助，请点击【关注】和【关注】，这是对我最大的支持和赞扬。
做一个坚持分享、不断学习、每天晚上不断更新、不断学习、不断更新自己的技能，才能保持竞争力的知识博主~
关于作者：
ITBrickMover，全职从事软件测试，9年大厂商工作经验，擅长性能测试、安全测试、接口测试、环境部署（Jenkins、持续集成），了解Oracle等数据库，对编码感兴趣，是一名Python 的忠实爱好 By.
[关注]让我厚积薄发，沉淀下来，蜕变脱壳，逆袭成长，惊艳自己~
![css痘-痤疮是怎么产生的[图片]](https://www.wkzy.net/wp-content/themes/ceomax/timthumb.php?src=https://www.wkzy.net/wp-content/uploads/2024/05/1714562068153_1.webp&h=200&w=300&zc=1&a=c&q=100&s=1)
