一文清晰了解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://xiahunao.cn/news/3225481.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

燃烧你的厨艺,“灶”亮你的厨房——华火电燃灶

在厨房的舞台上&#xff0c;一台出色的灶具就如同一位默契的伙伴&#xff0c;能助您烹制出美味佳肴&#xff0c;展现烹饪的魅力。今天&#xff0c;我们要为您隆重介绍一款能颠覆您厨房体验的创新产品——华火电燃灶&#xff0c;它将以其独特的优势&#xff0c;为您的厨房带来全…

【深度学习】手动完成线性回归!

&#x1f34a;嗨&#xff0c;大家好&#xff0c;我是小森( &#xfe61;ˆoˆ&#xfe61; )&#xff01; 易编橙终身成长社群创始团队嘉宾&#xff0c;橙似锦计划领衔成员、阿里云专家博主、腾讯云内容共创官、CSDN人工智能领域优质创作者 。 易编橙&#xff1a;一个帮助编程小…

Nacos 配置管理模型 -- 命名空间(Namespace)、配置分组(Group)和配置集ID(Data ID)

前言&#xff1a; 我们都知道 Nacos 既可以做注册中心&#xff0c;也可以做配置中心&#xff0c;本篇我们简单分享一下 Nacos 配置中心的几个重要概念&#xff0c;以及他们之间的关系&#xff0c;来帮助我们更深入的理解运用 Nacos 配置中心。 Nacos 系列文章传送门&#xff…

案例分享:Qt modbusTcp调试工具(读写Byte、Int、DInt、Real、DReal)(当前v1.0.0)

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://blog.csdn.net/qq21497936/article/details/140313789 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片…

AI绘画Midjourney从入门到实战应用

大家好&#xff0c;我是爱编程的喵喵。双985硕士毕业&#xff0c;现担任全栈工程师一职&#xff0c;热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。…

项目实战--Spring Boot + GraphQL实现实时数据推送

背景 用户体验不断提升而3对实时数据的需求日益增长&#xff0c;传统的数据获取方式无法满足实时数据的即时性和个性化需求。 GraphQL作为新兴的API查询语言&#xff0c;提供更加灵活、高效的数据获取方案。结合Spring Boot作为后端框架&#xff0c;利用GraphQL实现实时数据推…

中职大数据实训室

一、中职大数据实训室建设背景 《中华人民共和国国民经济和社会发展第十四个五年规划和2035年远景目标纲要》中强调了数字化转型的重要性&#xff0c;明确提出了建设数字中国的战略目标。大数据技术作为数字化转型的核心&#xff0c;对于培养具备大数据分析、处理和应用能力的…

简单仿写SpringIOC

gitee地址&#xff08;需要自取&#xff09;ioc_Imitation: 简单仿写IOC (gitee.com) 项目目录结构 Autowired Target(ElementType.FIELD) Retention(RetentionPolicy.RUNTIME) public interface Autowired { }Component Target(ElementType.TYPE) Retention(RetentionPoli…

如何更改WordPress网站的字体(适用于所有主题)

如何更改WordPress的字体的具体方法&#xff0c;需要取决于您使用的是新的区块主题还是比较旧的经典主题&#xff0c;这一点可能会让人感到困惑&#xff0c;本文中我们将详细介绍二者的区别以及如何分别在这两种主题中修改字体的的方法。 区别&#xff1a; 现代区块主题具有内…

299k stars利用Public APIs提升开发效率:探索APILayer提供的开源资源

299k stars利用Public APIs提升开发效率&#xff1a;探索APILayer提供的开源资源 在现代软件开发中&#xff0c;API&#xff08;应用程序接口&#xff09;是实现应用间通信和功能扩展的关键工具。公共API&#xff08;Public APIs&#xff09;则为开发者提供了宝贵的资源&#…

Windows Server 2012 R2查看IIS版本

文章目录 一、方法一1.win R 键打开运行窗口 → 输入 "regedit" → 点击【确定】2.HKEY_LOCAL_MACHINE → SOFTWARE → Microsoft → InetStp 二、方法二1.win R 键打开运行窗口 → 输入 "inetmgr" → 点击【确定】2.点击 【帮助】 → 选择【关于 Intern…

springboot社区物资交易互助平台+lw+源码+调试+讲解

第3章 系统分析 用户的需求以及与本系统相似的在市场上存在的其它系统可以作为系统分析中参考的资料&#xff0c;分析人员可以根据这些信息确定出本系统具备的功能&#xff0c;分析出本系统具备的性能等内容。 3.1可行性分析 尽管系统是根据用户的要求进行制作&#xff0c;但…

computed传参

目录 一、问题 二、解决方法 三、总结 tiips:如嫌繁琐&#xff0c;直接移步总结即可&#xff01; 一、问题 computed可以依据其他变量动态计算出值&#xff0c;但是v-for渲染html时&#xff0c;需要根据html中 传入的不同变量&#xff0c;来分别做处理或者利用 html中的值该…

在繁华与奇迹交织的深圳

在繁华与奇迹交织的深圳&#xff0c;有一本奇书悄然走红&#xff0c;它便是《华强北经济学》&#xff0c;由那位深谙市场脉搏、笔触带风的宋仕强先生所著。这本书&#xff0c;仿佛是华强北这片创业热土的缩影&#xff0c;用一个个生动鲜活的故事&#xff0c;诠释了什么是“从螺…

逻辑运算及其基本概念,定理,算法,规律,卡诺图

逻辑运算及其基本概念&#xff0c;定理&#xff0c;算法&#xff0c;规律&#xff0c;卡诺图 文章目录 逻辑运算及其基本概念&#xff0c;定理&#xff0c;算法&#xff0c;规律&#xff0c;卡诺图开胃小菜运算1、与运算2、或运算3、非运算4、与非&#xff08;都1时为0&#xf…

数据融合工具(5)面中心线提取

这是一个重磅工具&#xff0c;建议先看视频。 提取中心线 一、需求背景 说真的&#xff0c;当小编第一次使用ArcGIS中的Polygon To Centerline工具提取面要素中心线时&#xff0c;激动得无以言表&#xff0c;毕竟&#xff0c;以前要提取面中心线&#xff0c;是一件非常麻烦的事…

详细分析Spring中的@Configuration注解基本知识(附Demo)

目录 前言1. 基本知识2. 详细分析3. Demo3.1 简单Bean配置3.2 属性配置3.3 多条件配置 4. 实战拓展 前言 Java的基本知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;Spring框架从入门到学精&#xff08;全&am…

Candy Party (Hard Version)

这个就看官方题解就好了&#xff0c;写的很清楚 考试的时候把easy version给做出来了&#xff0c;但是对于hard version确实没有想到可以转换成位运算 所以以后看到\(2^x\)&#xff0c;不妨想一下是不是位运算&#xff0c;这里将最后的式子一列就知道是位运算了

如何在 C 语言中实现链表?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; &#x1f4d9;C 语言百万年薪修炼课程 通俗易懂&#xff0c;深入浅出&#xff0c;匠心打磨&#xff0c;死磕细节&#xff0c;6年迭代&#xff0c;看过的人都说好。 文章目…