首先一个小技巧:
一定要学会的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同时使用
实例
超链接:
html
<span class="a" id="a"> <a
href="https://blog.csdn.net/weixin_73074505/article/details/140287986?spm=1001.2014.3001.5501"
target="_blank">参考消息</span></a>
段落格式:
页面布局:
完整代码如下:
html
<!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"> <a
href="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日发布声明称, 将"无限期推迟"原定于7月25日至8月6日在格鲁吉亚举行的代号为"高贵伙伴"的年度联合军演,并称"现在不是在格鲁吉亚举行大规模军事演习的合适时机"。
</p>
<p>
<b>五角大楼</b>的声明还提到,格鲁吉亚执政党"格鲁吉亚梦想---民主格鲁吉亚"党领导人指责美国及其西方盟友在向格鲁吉亚施压,要求该国在俄乌冲突期间"开辟对抗俄罗斯的第二条战线",该党领导人还指责美国参与了在该国发生的两次"未遂政变"。
</p>
<p id="b">okok</p>
</div>
</body>
</html>
to be continue!!!