一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表(位于 <head> 标签内部)
4.内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权。
这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
1.值的不同写法和单位:
当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。
p { color: rgb(100%,0%,0%); }
比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。
2.记得写引号:
如果值为若干单词,则要给值加引号:
p {font-family: "sans serif";}
3.多重声明:
如果要定义不止一个声明,则需要用分号将每个声明分开。应该在每行只描述一个属性,这样可以增强样式定义的可读性。
p {
text-align: center;
color: black;
font-family: arial;
}
4.空格和大小写
多重声明和空格的使用使得样式表更容易被编辑:
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。
如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。
5.选择器分组
用逗号将需要分组的选择器分开
h1,h2,h3,h4,h5,h6 {
color: green;
}
6.继承及其问题
根据 CSS,子元素从父元素继承属性。但是它并不总是按此方式工作。
body {
font-family: Verdana, sans-serif;
}
7.派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
列表中的 strong 元素变为斜体字,而不是通常的粗体字
(1)
li strong {
font-style: italic; 字体
font-weight: normal; 设置粗细
}
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
(2)
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
<p>不受影响<strong>不受影响red</strong>.</p>
<h2>不受影响red.</h2>
<h2>这里不受影响<strong>影响到的文字blue</strong>.</h2>
8.id 选择器
(1)
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
id 属性只能在每个 HTML 文档中出现一次。
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
在现代布局中,id 选择器常常用于建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
9.类选择器
在 CSS 中,类选择器以一个点号显示
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用
和 id 一样,class 也可被用作派生选择器:
.fancy td {
color: #f60;
background: #666;
}
元素也可以基于它们的类而被选择:
td.fancy {
color: #f60;
background: #666;
}
<td class="fancy">
10.属性选择器
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
注释:Internet Explorer 7 (以及更高版本)在规定了 !DOCTYPE 的情况下支持属性选择器。
IE6 及更低的版本不支持属性选择器。
(1)带有指定属性 [title] { color:red; }
(2)指定属性值,属性值全匹配 [title=W3School] { color:red; }
(3)包含属性值,属性值用空格分隔 [title~=hello] { color:red; } <h2 title="hello world">Hello world</h2>
(4)包含属性值,属性值用连字符分隔[title|=hello] { color:red; }<p lang="en-us">Hi!</p>
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
11.创建CSS
(1)外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css" />
(2)内部样式表
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
(3)内联样式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
多重样式时,如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
分享到:
相关推荐
SOH-SVM算法:斑点鬣狗优化技术对支持向量机的改进与解析,优化算法助力机器学习:SOH-SVM改进及源码解析与参考,SOH-SVM:斑点鬣狗优化算法改进支持向量机:SOH-SVM。 代码有注释,附源码和参考文献,便于新手理解,~ ,SOH-SVM; 斑点鬣狗优化算法; 代码注释; 源码; 参考文献,SOH-SVM算法优化:附详解代码与参考
美赛教程&建模&数据分析&案例分析
GESPC++3级大纲
电动汽车充电负荷预测:基于出行链分析与OD矩阵的蒙特卡洛模拟研究,电动汽车充电负荷预测:基于出行链分析与OD矩阵的蒙特卡洛模拟方法,电动汽车充电负荷预测,出行链,OD矩阵,蒙特卡洛模拟 ,电动汽车充电负荷预测; 出行链; OD矩阵; 蒙特卡洛模拟,基于出行链的电动汽车充电负荷预测研究:蒙特卡洛模拟与OD矩阵分析
柯尼卡美能达Konica Minolta bizhub 205i 驱动
内容概要:本文全面介绍使用示波器进行一系列电学实验和项目的内容。从基础实验,如示波器的操作入门和常见波形的测量,再到进阶部分,比如电路故障排除与复杂项目设计,旨在帮助学生掌握示波器的各项技能。文中不仅提供了详尽的操作流程指导,还包括针对每个阶段的学习目标设定、预期成果评估和所需注意事项。最终通过对示波器的深入理解和熟练运用,在实际应用场景(如构造简单设备或是进行音频处理)达到创新解决问题的目的。 适用人群:面向有志于深入理解电工仪器及其应用的学生或者技术人员,尤其是刚开始接触或正在强化自己这方面能力的学习者。 使用场景及目标:①作为培训材料支持初学者快速上手专业级电工测试设备—示波器;②用于教学环节辅助讲解电学概念以及实际操作技巧;③鼓励用户参与更高层次的DIY工程任务从而培养解决问题的能力.
标题中的“ntc热敏电阻 MF52AT 10K 3950精度1%STM32采集带数字滤波”表明我们要讨论的是一个使用STM32微控制器进行数据采集的系统,该系统中包含NTC热敏电阻MF52AT作为温度传感器。NTC热敏电阻是一种负温度系数的电阻器,其阻值随温度升高而降低。MF52AT型号的热敏电阻具有10K欧姆的标称电阻和3950的B值,表示在特定温度下(通常为25℃)的阻值和温度特性曲线。精度1%意味着该电阻的阻值有1%的允许误差,这对于温度测量应用来说是相当高的精度。 描述中提到的“MF52AT热敏电阻STM32数据采集2路”,暗示我们有两个这样的热敏电阻连接到STM32微控制器的模拟输入端口,用于采集温度数据。STM32是一款基于ARM Cortex-M内核的微控制器,广泛应用于各种嵌入式系统中,包括温度监测等应用。由于STM32内部集成了多个ADC(模拟数字转换器),因此它可以同时处理多路模拟输入信号。 "带滤波,项目中实际运用,温差范围在±0.5度",这表明在实际应用中,数据采集系统采用了某种数字滤波技术来提高信号质量,可能是低通滤波、滑动平均滤波或更复杂的数字信号处理算法。
SSM框架整合是Java开发中常见的技术栈,包括Spring、SpringMVC和Mybatis三个核心组件。这个压缩包提供了一个已经验证过的整合示例,帮助开发者理解和实践这三大框架的协同工作。 Spring框架是Java企业级应用的基石,它提供了一种依赖注入(Dependency Injection,DI)的方式,使得对象之间的依赖关系得以解耦,便于管理和服务。Spring还提供了AOP(面向切面编程)功能,用于实现如日志记录、事务管理等跨切面关注点的处理。 SpringMVC是Spring框架的一部分,专门用于构建Web应用程序。它采用了模型-视图-控制器(Model-View-Controller,MVC)设计模式,将业务逻辑、数据展示和用户交互分离,提高了代码的可维护性和可扩展性。在SpringMVC中,请求被DispatcherServlet接收,然后分发到相应的处理器,处理器执行业务逻辑后返回结果,最后由视图解析并展示给用户。 Mybatis是一个优秀的持久层框架,它简化了JDBC的繁琐操作,支持SQL语句的动态编写,使得开发者可以直接使用SQL来操作数据库,同时还能保持数
分割资源UE5.3.z25
Matlab 2021及以上版本:电气工程与自动化仿真实践——电力电子变换器微网建模与仿真研究,涵盖Boost、Buck整流逆变器闭环控制及光伏蓄电池电路等多重电气仿真,基于Matlab 2021及以上的电气工程与自动化仿真研究:电力电子变换器微网建模与Boost、Buck整流逆变器闭环控制及光伏蓄电池电路等多电气仿真分析,电气工程及其自动化仿真 Matlab simulink 电力电子变器微网建模仿真 仅限matlab版本2021及以上 Boost,Buck,整流逆变器闭环控制 光伏蓄电池电路等多种电气仿真 ,电气工程; Matlab simulink; 电力电子变换器; 微网建模仿真; Boost; Buck; 整流逆变器; 闭环控制; 光伏蓄电池电路; 电气仿真,Matlab 2021版电气工程自动化仿真研究:微网建模与控制策略
移动机器人路径规划,python入门程序
《DeepSeek从入门到精通》是清华大学推出的一套深度学习学习资源,内容涵盖基础知识、实用技巧和前沿应用,适合不同水平的学习者。通过系统化的学习路径,帮助你在深度学习领域快速成长。无论你是初学者还是
考虑新能源消纳的火电机组深度调峰策略:建立成本模型与经济调度,实现风电全额消纳的优化方案,考虑新能源消纳的火电机组深度调峰策略与经济调度模型研究,考虑新能源消纳的火电机组深度调峰策略 摘要:本代码主要做的是考虑新能源消纳的火电机组深度调峰策略,以常规调峰、不投油深度调峰、投油深度调峰三个阶段,建立了火电机组深度调峰成本模型,并以风电全额消纳为前提,建立了经济调度模型。 约束条件主要考虑煤燃烧约束、系统旋转备用功率约束、启停、爬坡、储热约束等等。 复现结果非常良好,结果图展示如下: 1、代码非常精品,有注释方便理解; ,核心关键词:新能源消纳;火电机组深度调峰策略;常规调峰;不投油深度调峰;投油深度调峰;成本模型;经济调度模型;煤燃烧约束;系统旋转备用功率约束;启停约束;爬坡约束;储热约束。,新能源优化调度策略:火电机组深度调峰及经济调度研究
"数字设计原理与实践" 数字设计是计算机科学和电子工程两个领域的交叉点,涉及到数字电路的设计和实现。本书籍《数字设计-原理与实践》旨在为读者提供一个系统的数字设计指南,从基本原理到实际应用,涵盖了数字设计的方方面面。 1. 数字设计的定义和目标 数字设计是指使用数字电路和系统来实现特定的功能目标的设计过程。在这个过程中,设计师需要考虑到各种因素,如电路的可靠性、功耗、面积等,以确保设计的数字电路能够满足实际应用的需求。 2. 数字设计的基本原理 数字设计的基本原理包括数字电路的基本元件,如逻辑门、 Flip-Flop、计数器、加法器等,以及数字电路的设计方法,如Combinational Logic、Sequential Logic和 Finite State Machine等。 3. 数字设计的设计流程 数字设计的设计流程通常包括以下几个步骤: * 需求分析:确定设计的目标和约束条件。 *电路设计:根据需求设计数字电路。 * 仿真验证:使用软件工具对设计的数字电路进行仿真和验证。 * 实现和测试:将设计的数字电路实现并进行测试。 4. 数字设计在实际应用中的应用 数字设计在实际应用中
基于Simulink仿真的直流电机双闭环控制系统设计与分析:转速电流双闭环PWM控制策略及7天报告研究,基于Simulink仿真的直流电机双闭环控制系统分析与设计报告:转速电流双闭环PWM控制策略的7天实践,直流电机双闭环控制系统仿真 simulink仿真 7d 转速电流双闭环 PWM 含有报告哈 ,直流电机; 双闭环控制系统; Simulink仿真; 7d; 转速电流双闭环; PWM; 报告,7天完成双闭环控制系统仿真报告:直流电机转速电流PWM管理与Simulink仿真研究
三目标微电网能量调度优化:经济、环境友好与高效能分配的协同策略研究,微粒群算法在三目标微电网能量调度中的应用:经济、环境友好与优化调度的综合研究,微电网 能量调度 三目标微网调度, 经济调度 环境友好调度 优化调度 微电网能量调度问题的求解 问题描述: - 微电网:包含多个能量源,包括DG(分布式发电设备,如太阳能光伏板、微型燃气轮机等)、MT(燃油发电机)和FC(燃料电池)。 - 目标:通过合理分配各种能源的发电功率,满足负荷需求,同时使得微电网的发电成本最小化。 解决方法: 微粒群算法(Particle Swarm Optimization, PSO): - 步骤: - 初始化微粒群:根据给定的微电网问题约束,随机生成一定数量的微粒(粒子),每个粒子代表一种发电方案,包含DG、MT和FC的发电功率分配情况。 - 适应度函数:对每个粒子,计算其对应的发电成本,作为其适应度值。 - 更新速度和位置:根据当前适应度值和历史最优适应度值,通过PSO算法的公式,更新每个粒子的速度和位置,以寻找更优的发电功率分配。 - 约束处理:根据问题约束条件,
《无感滑膜技术:Microchip1078代码移植至ST芯片的实践指南》——新手必备的反正切算法与电子资料整合方案,《无感滑膜技术:Microchip1078代码移植至ST芯片的实践指南》——新手必备的反正切算法与电子资料全解析,无感滑膜,反正切,microchip1078代码移植到st芯片上,新手学习必备。 可以提供提供相应文档和keil工程,电子资料, ,无感滑膜; 反正切; microchip1078代码移植; ST芯片; 新手学习; 文档; Keil工程; 电子资料,无感滑膜算法移植至ST芯片的Microchip1078代码迁移指南
风光柴储混合微电网系统中的储能电池与互补能量管理技术研究及MATLAB模拟实现,风光柴储混合微电网系统中的储能电池与互补能量管理技术:基于MATLAB的智能调控体系,风光柴储+混合微电网+储能电池系统+互补能量管理+MATLA ,核心关键词:风光柴储; 混合微电网; 储能电池系统; 互补能量管理; MATLA;,风光柴储混合微网能量管理系统及储能电池应用
永磁同步电机PMSM无感FOC驱动与位置估算源码分享:跨平台兼容、高速动态响应、无需初始角度辨识,永磁同步电机PMSM无感FOC驱动与位置估算源码分享:跨平台兼容、高速动态响应、无需初始角度辨识,永磁同步电机pmsm无感foc驱动代码 位置估算源码 无刷直流电机无感foc源码,无感foc算法源码 若需要,可提供硬件 速度位置估算部分代码所使用变量全部使用国际标准单位,使用不到60行代码实现完整的位置速度观测器。 提供完整的观测器文档,供需要的朋友参考 程序使用自研观测器,代码全部是源码,不含任何库文件 送simulink仿真 代码可读性极好,关键变量注明单位 模块间完全解耦 高级工程师磁链法位置估算代码 跨平台兼容,提供ti平台或at32平台工程 电流环pi参数自动计算 效果如图 实现0速闭环启动 2hz以内转速角度收敛 动态响应性能好 无需初始角度辨识 电阻电感允许一定误差 ,核心关键词: 1. 永磁同步电机 (PMSM) 无感 FOC 驱动代码 2. 位置估算源码 3. 无刷直流电机无感 FOC 源码 4. 无感 FOC 算法源码 5. 硬件支持(可选) 6. 速度位置估算部分
模型可以通过管理器下载,一个sdxlbase一个sdxl refiner。 refiner的作用是先刷小图,满意了再提高分辨率,兼顾速度和质量。 导入ComfyUI可立即使用。