当前位置: 首页 > news >正文

一文清晰了解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同时使用

 实例

        超链接:

<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>

to be continue!!!


http://www.lryc.cn/news/397245.html

相关文章:

  • 工程师 - 什么是XML文件
  • [AI 大模型] 阿里巴巴 通义千问
  • 关于无法定位程序输入点 SetDefaultDllDirectories于动态链接库KERNEL32.dll 上 解决方法
  • 轻松创建对象——简单工厂模式(Java实现)
  • Docker Dockerfile:构建与优化
  • 开源项目有哪些机遇与挑战?
  • 利用【Python】【线性规划】优化工厂生产:实现智能资源配置与利润最大化的现代解决方案
  • 【spark】Exception in thread “main“ ExitCodeException exitCode=-1073741701
  • 数学建模美赛经验小结
  • 206. 反转链表 (Swift 版本)
  • 海狐外卖O2O商城系统:技术架构与运营模式的深度解析
  • 14-31 剑和诗人5 - 使用 AirLLM 和分层推理在单个 4GB GPU 上运行 LLama 3 70B
  • 风景园林工程设计乙级资质业绩要求案例分析
  • 无人机之飞行规划与管理篇
  • realsense D435l+mid360标定
  • 深度学习中的正则化技术 - 数据集增强篇
  • 【Docker系列】Docker 镜像源:优化你的容器化开发流程
  • 【Linux】Windows环境下配置虚拟机静态IP
  • 完美解决AttributeError: ‘list‘ object has no attribute ‘shape‘的正确解决方法,亲测有效!!!
  • 链接服务器“XX”的OLEDB访问接口“MSOLEDBSQL”返回了消息“登录超时已过期” 解决方法
  • 【AI伦理与社会责任】讨论人工智能在隐私保护、偏见消除、自动化对就业的影响等伦理和社会问题。
  • Qt编程技巧小知识点(1)TCP缓存区数据读取
  • vue 搭建 pinia
  • 什么是CLR
  • Spring MVC -01
  • 山海鲸可视化——天地图画面和热力图
  • Python 利用pandas处理CSV文件(DataFrame的基础用法)
  • c++ 的(引用)和*(指针)
  • 人工智能算法工程师(中级)课程6-sklearn机器学习之聚类问题与代码详解
  • Objective-C 中的 isa 不再是简单的结构体指针