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

Victory_orsh

已于 2024-07-10 09:43:12 修改

阅读量484

点赞数 5

分类专栏： javaWeb 文章标签： css 前端

于 2024-07-10 09:42:02 首次发布

本文链接：https://blog.csdn.net/weixin_73074505/article/details/140309906

版权

javaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先一个小技巧：

一定要学会的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"> <a
        href="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"> <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日发布声明称，&nbsp;&nbsp;&nbsp;&nbsp;将“无限期推迟”原定于7月25日至8月6日在格鲁吉亚举行的代号为“高贵伙伴”的年度联合军演，并称“现在不是在格鲁吉亚举行大规模军事演习的合适时机”。
    </p>
    <p>
      <b>五角大楼</b>的声明还提到，格鲁吉亚执政党“格鲁吉亚梦想—民主格鲁吉亚”党领导人指责美国及其西方盟友在向格鲁吉亚施压，要求该国在俄乌冲突期间“开辟对抗俄罗斯的第二条战线”，该党领导人还指责美国参与了在该国发生的两次“未遂政变”。
    </p>
    <p id="b">okok</p>
  </div>
</body>

</html>