一文清晰了解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!!!


相关推荐
懒大王爱吃狼38 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js