CSS基础学习记录(5)

目录

1、CSS语法

2、实例

3、CSS注释

4、id 选择器

5、class 类选择器

6、标签选择器

7、内联选择器


1、CSS语法

        CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

选择器(Selector)通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

2、实例

        CSS 声明总是以分号 ( ; ) 结束,声明组以大括号 ({ }) 括起来:

p {color:red;text-align:center;}

        或者这样,为了让 CSS 可读性更强,你可以每行只描述一个属性:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS基础学习记录(5)</title><style>p {color: red;text-align: center;}</style>
</head><body><p>Hello World!</p><p>This paragraph is styled with CSS.</p>
</body></html>

运行效果如下:

3、CSS注释

        注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:

/*这是个注释*/p {text-align: center;/*这是另一个注释*/color: black;font-family: arial;}

4、id 选择器

        id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 来定义。

        以下的样式规则应用于元素属性 id = "para1":

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS基础学习记录(5)</title><style>#para1 {text-align: center;color: red;}</style>
</head><body><p id="para1">你好,世界!!!</p><p>此段落不受样式的影响。</p>
</body></html>

运行效果如下:

ID 属性不要以数字开头,数字开头的 ID 在 Mozilla/Firefox 浏览器中不起作用。

ID 属性只能在每个 HTML 文档中出现一次。具体的解释,请参阅 XHTML:网站重构。

5、class 类选择器

        class 选择器用于描述一组元素的样式,class 选择器有别于 id 选择器,class 可以在多个元素中使用。

        class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点"."号显示:

        在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS基础学习记录(5)</title><style>.center {text-align: center;}</style>
</head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p>
</body></html>

运行效果如下:

        你也可以指定特定的 HTML 元素使用 class。

        在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS基础学习记录(5)</title><style>p.center {text-align: center;}</style>
</head><body><h1 class="center">此标题不受影响</h1><p class="center">此段落将居中对齐。</p>
</body></html>

6、标签选择器

        除了提到的 id 和 class 选择器外,第三种选择器为标签选择器,即以 HTML 标签作为 CSS 修饰所用的选择器。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS基础学习记录(5)</title><style>h3 {color: red;}</style>
</head><body><h3>W3cschool教程</h3>
</body></html>

         运行效果如下:

7、内联选择器

        第四种内联选择器即直接在标签内部写 CSS 代码。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS基础学习记录(5)</title>
</head><body><h3 style="color:red;">CSS教程</h3>
</body></html>

运行效果如下:

        这四种 CS 选择器有修饰上的优先级,即:内联选择器 > id选择器 > 类选择器 > 标签选择器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/32659.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Altera不同系列的型号命名规则

Altera芯片型号&#xff1a;10AX07H4F34I3SG 20nm工艺 资源&#xff1a; 大数据 云计算 人工智能 图像处理 MSEL

高级人工智能复习 中科大

参考&#xff1a; 中科大2023春季【高级人工智能】试题回顾 中国科学技术大学《高级人工智能》课程 重要知识点提纲 高级人工智能复习提纲 1.搜索 1.1 搜索问题的概念 搜索问题的五个要素&#xff1a;状态空间、后继函数、初始状态、目标测试和路径耗散。 用状态图描述搜索…

Codeforces Round 953 (Div. 2) A~F

A.Alice and Books&#xff08;思维&#xff09; 题意&#xff1a; 爱丽丝有 n n n本书。第 1 1 1本书包含 a 1 a_1 a1​页&#xff0c;第 2 2 2本书包含 a 2 a_2 a2​页&#xff0c; … \ldots …第 n n n本书包含 a n a_n an​页。爱丽丝的操作如下&#xff1a; 她把所有的…

L57---112.路径总和(广搜)---Java版

1.题目描述 给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径&#xff0c;这条路径上所有节点值相加等于目标和 targetSum 。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。叶子节点 是指…

力扣每日一题 6/23 字符串/模拟

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;IT竞赛 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 520.检测大写字母【简单】 题目&#xff1a; 我们定义&#xff0c;在以下…

面试必考题 CSS的居中布局

CSS居中对齐的几种方式 使用flex布局利用css3中的flex弹性盒的属性利用子元素auto 使用grid布局使用定位使用定位与margin利用CSS3属性transform 使用文本对齐使用table布局 使用flex布局 利用css3中的flex弹性盒的属性 .parent {display: flex;justify-content: center;alig…

经典面试题【作用域、闭包、变量提升】,带你深入理解掌握!

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;我是前端菜鸟的自我修养&#xff01;今天给大家分享经典面试题【作用域、闭包、变量提升】&#xff0c;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;原创不易&#xff0c;如果能帮助到带大家&#xff0…

欧洲杯赛况@20240622

点击标题下「蓝色微信名」可快速关注 斯洛伐克对阵乌克兰&#xff0c;场面上大开大合&#xff0c;施兰茨连场进球&#xff0c;但这次乌克兰丢球后没泄气&#xff0c;连进两球反超&#xff0c; 从数据统计上&#xff0c;两队不相上下&#xff0c;这个小组的形势更加复杂了&#…

【ajax核心05】宏任务与微任务

ES6之后引入Promise对象(用来管理异步任务)&#xff0c;让JS引擎也可以发起异步任务 一&#xff1a;异步任务分类 异步任务分为&#xff1a;宏任务与微任务 宏任务 由浏览器环境执行的异步代码 具体宏任务分类 微任务 由JS引擎执行的代码 创建Promise对象时&#xff0c;…

[JS]语句

介绍 代码分类 表达式: 可以被求值的代码称为表达式, 可以用于赋值 语句: 一段可执行的代码, 可以有结果, 可以没有结果, 不能用于赋值 语句分类 代码从上往下执行, 称为顺序结构代码按照条件选择执行, 称为分支结构某些代码被重复执行, 成为循环结构 分支结构 if分支 if…

python-今年第几天

[题目描述] 定义一个结构体变量&#xff08;包括年、月、日&#xff09;。 计算该日在本年中是第几天&#xff0c;注意闰年问题。输入格式&#xff1a; 年 月 日。输出格式&#xff1a; 当年第几天。样例输入 2000 12 31样例输出 366 数据范围 对于100%的数据&#xff0c;保…

【前端vue3】TypeScrip-基础类型和任意类型

安装TypeScript npm install typescript -g 运行tsc -v可查看当前版本 为了方便调试可以安装 先安装小满zs大神写的工具&#xff0c;可以切换下载源 npm i xmzs -g 安装成功后 使用mmp ls查看当前的源有哪些 使用 mmp use选择镜像源 切换成功后&#xff0c;安装TypeScrip…

PathDecider 详细解读

目录 PathDecider的主要功能 PathDecider代码分析 Process() MakeObjectDecision() MakeStaticObstacleDecision() MakeStaticObstacleDecision()的流程图​编辑 MakeStaticObstacleDecision()的代码解析 GenerateObjectStopDecision() PathDecider里用到的其他函数 …

ARM功耗管理框架之PPU

安全之安全(security)博客目录导读 思考&#xff1a;功耗管理框架&#xff1f;SCP&#xff1f;PPU&#xff1f;LPI&#xff1f;之间的关系&#xff1f;如何配合&#xff1f; 目录 一、功耗管理框架中的PPU 二、PPU的结构与连接关系 三、PPU操作模式和电源模式及其之间的转…

管理不到位,活该执行力差?狠抓这4点要素,强化执行力

管理不到位&#xff0c;活该执行力差&#xff1f;狠抓这4点要素&#xff0c;强化执行力 一&#xff1a;强化制度管理 1、权责分明&#xff0c;追责管理 要知道&#xff0c;规章制度其实就是一种“契约”。 在制定制度和规则的时候&#xff0c;民主一点&#xff0c;征求团队成员…

HTTP网络协议

1.HTTP &#xff08;1&#xff09;概念&#xff1a; Hyper Text Transfer Protocol&#xff0c;超文本传输协议规定了浏览器和服务器之间数据传输的规则。 &#xff08;2&#xff09;特点 基于TCP协议:面向连接&#xff0c;安全基于请求-响应模型的:一次请求对应一次响应HTTP协…

mysql高级语句2存储过程

CREATE VIEW 视图&#xff0c;可以被当作是虚拟表或存储查询。 视图跟表格的不同是&#xff0c;表格中有实际储存数据记录&#xff0c;而视图是建立在表格之上的一个架构&#xff0c;它本身并不实际储存数据记录。 临时表在用户退出或同数据库的连接断开后就自动消失了&…

利用竞争智慧与大型语言模型:假新闻检测的新突破

Explainable Fake News Detection With Large Language Model via Defense Among Competing Wisdom 论文地址: Explainable Fake News Detection with Large Language Model via Defense Among Competing Wisdom | Proceedings of the ACM on Web Conference 2024https://dl.…

Docker常用命令与实战示例

docker 1. 安装2. 常用命令3. 存储4. 网络5. redis主从复制示例6. wordpress示例7. DockerFile8. 一键安装超多中间件&#xff08;compose&#xff09; 1. 安装 以centOS系统为例 # 移除旧版本docker sudo yum remove docker \docker-client \docker-client-latest \docker-c…

CTO的职责是什么?

看《架构思维》作者是这样讲的&#xff1a; CTO 到底是做什么的&#xff1f; 我当下的答案是&#xff1a;“CTO 就是一个从技术视角出发&#xff0c;为公司或者所在的部门做正确决策的 CEO。”怎么理解这句话呢&#xff1f;作为一个 CTO&#xff0c;其长期目标和决策优先级与…