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; 她把所有的…

C语言之常用标准库介绍

文章目录 1 标准库1.1 诊断assert.h1.2 字符类别测试ctype.h1.3 错误处理errno.h1.4 整型常量limits.h1.5 地域环境locale.h1.6 数学函数math.h1.7 非局部跳转setjmp.h1.8 可变参数表stdarg.h1.9 公共定义stddef.h1.10 输入输出stdio.h1.11 实用函数stdlib.h1.12 日期与时间函数…

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

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

c++新技术

C的新技术主要体现在其不断演进的新标准中&#xff0c;这些新标准为开发者提供了更多的工具和特性&#xff0c;使得C成为一门现代化的高效编程语言。以下是关于C新技术的一些关键点和概述&#xff1a; C新标准&#xff1a; C11&#xff1a;引入了众多现代C的特性&#xff0c;如…

Lambda函数(箭头表达式)

箭头函数 也被称为Lambda函数或者箭头表达式&#xff0c;是ECMAScript 2015&#xff08;又称ES6&#xff09;中新增的一种函数定义方式。它使用箭头&#xff08;>&#xff09;来定义函数&#xff0c;通常用于定义匿名函数或回调函数。 优点 箭头函数有以下几个显著特点&a…

力扣每日一题 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;…

Java中的Servlet编程:从基础到高级应用

Java中的Servlet编程&#xff1a;从基础到高级应用 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在本文中&#xff0c;我们将探讨Java中的Servlet编程&#x…

[JS]语句

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

python-今年第几天

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

【C++PCL】点云处理Kd-tree原理

作者:迅卓科技 简介:本人从事过多项点云项目,并且负责的项目均已得到好评! 公众号:迅卓科技,一个可以让您可以学习点云的好地方 重点:每个模块都有参数如何调试的讲解,即调试某个参数对结果的影响是什么,大家有问题可以评论哈,如果文章有错误的地方,欢迎来指出错误的…

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

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

C#的膨胀之路:创新还是灭亡

开篇概述 C#&#xff0c;这门由微软推出的编程语言&#xff0c;自2000年诞生以来&#xff0c;以其简洁的语法、强大的功能和广泛的应用场景&#xff0c;赢得了我等程序员的热爱。它在.NET框架的加持下&#xff0c;展现出无与伦比的开发效率和性能。然而&#xff0c;随着时间的流…

PathDecider 详细解读

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

6 DSL_03地理信息查询相关性算分

1. 根据经纬度查询 (1) geo_bounding_box: 查询geo_point值落在某个矩形范围内的文档get /hotel/_search {"query":{"geo_bounding_box": {"location":{"top_left":{"lat":33.01,"lon":35.36},"bottom_righ…