一文清晰了解CSS—

一文清晰了解CSS——简单实例

首先一个小技巧：

一定要学会的vsCode格式化整理代码的快捷键，再也不用手动调格式了-腾讯云开发者社区-腾讯云 (tencent.com)

CSS选择器用于选择要应用样式的HTML元素。常见的选择器包括：

类选择器：以.开头，用于选择具有指定class属性的元素。例如，.classname会选择所有class属性为classname的元素。
ID选择器：以#开头，用于选择具有指定ID的元素。由于ID具有唯一性，所以ID选择器通常只选择一个元素。例如，#idname会选择ID为idname的元素。
标签选择器：直接使用HTML标签名作为选择器，用于选择所有该类型的元素。例如，p会选择所有的<p>元素。
后代选择器：通过空格分隔两个或多个选择器，用于选择作为后一个选择器元素祖先的元素。例如，div p会选择所有<div>元素内的<p>元素。
子选择器：通过>分隔两个选择器，用于选择作为后一个选择器元素直接子元素的元素。例如，div > p会选择所有直接位于<div>元素内部的<p>元素。

优先级中，id>类>标签，div通常与类、id同时使用

实例

超链接：

<span class="a" id="a"> <ahref="https://blog.csdn.net/weixin_73074505/article/details/140287986?spm=1001.2014.3001.5501"target="_blank">参考消息</span></a>

段落格式：

页面布局：

完整代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置浏览器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>印国产武器研制缘何“持续失败”：官僚机构擅长为利益牺牲军队需求</title><!-- 方式一：当前行样式<h1 style="color: rgb(255,0,0);">印国产武器研制缘何“持续失败”：官僚机构擅长为利益牺牲军队需求</h1>  --><!-- 方式二：内嵌样式 --><style>h1 {color: #f00;}span {color: #D6C4B0;}.a {color: black;}#a {color: #f00;}a {color: black;text-decoration: none;}p {line-height: 20px;text-indent: 35px;font-size: large;}#b {text-align: right;}#center{width: 60%;margin: 0 auto;     /*上右下左*/}</style><!-- 方式三：link --><!-- <link rel="stylesheet" href="1.css">  -->
</head><body><div id="center"><img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" width="200px"> 新浪军事 > 综合>正文<h1>印国产武器研制缘何“持续失败”：官僚机构擅长为利益牺牲军队需求</h1><hr><span>2024年07月08日 16:58</span> <span class="a" id="a"> <ahref="https://blog.csdn.net/weixin_73074505/article/details/140287986?spm=1001.2014.3001.5501"target="_blank">参考消息</span></a><hr><video src="v.f100830.mp4" controls></video><!-- <video src=""></video> --><br><p><strong>美国五角大楼</strong>5日发布声明称，&nbsp;&nbsp;&nbsp;&nbsp;将“无限期推迟”原定于7月25日至8月6日在格鲁吉亚举行的代号为“高贵伙伴”的年度联合军演，并称“现在不是在格鲁吉亚举行大规模军事演习的合适时机”。</p><p><b>五角大楼</b>的声明还提到，格鲁吉亚执政党“格鲁吉亚梦想—民主格鲁吉亚”党领导人指责美国及其西方盟友在向格鲁吉亚施压，要求该国在俄乌冲突期间“开辟对抗俄罗斯的第二条战线”，该党领导人还指责美国参与了在该国发生的两次“未遂政变”。</p><p id="b">okok</p></div>
</body></html>