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

首先一个小技巧:

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

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

  1. 类选择器 :以.开头,用于选择具有指定class属性的元素。例如,.classname会选择所有class属性为classname的元素。
  2. ID选择器 :以#开头,用于选择具有指定ID的元素。由于ID具有唯一性,所以ID选择器通常只选择一个元素。例如,#idname会选择ID为idname的元素。
  3. 标签选择器 :直接使用HTML标签名作为选择器,用于选择所有该类型的元素。例如,p会选择所有的<p>元素。
  4. 后代选择器 :通过空格分隔两个或多个选择器,用于选择作为后一个选择器元素祖先的元素。例如,div p会选择所有<div>元素内的<p>元素。
  5. 子选择器 :通过>分隔两个选择器,用于选择作为后一个选择器元素直接子元素的元素。例如,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日发布声明称,&nbsp;&nbsp;&nbsp;&nbsp;将"无限期推迟"原定于7月25日至8月6日在格鲁吉亚举行的代号为"高贵伙伴"的年度联合军演,并称"现在不是在格鲁吉亚举行大规模军事演习的合适时机"。
    </p>
    <p>
      <b>五角大楼</b>的声明还提到,格鲁吉亚执政党"格鲁吉亚梦想---民主格鲁吉亚"党领导人指责美国及其西方盟友在向格鲁吉亚施压,要求该国在俄乌冲突期间"开辟对抗俄罗斯的第二条战线",该党领导人还指责美国参与了在该国发生的两次"未遂政变"。
    </p>
    <p id="b">okok</p>
  </div>
</body>

</html>

to be continue!!!


相关推荐
小行星1253 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00112 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
土豆湿19 分钟前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果28 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9630 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋33 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder34 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code1 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh2 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋3 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端