HTML引入CSS样式的方式详解
1.1内联属性（Inline style attribute）
直接修改HTML元素的style属性，将CSS代码直接写在style属性里。
例：
<h1 style="font-size: 12px;">我的字号被修改了</h1>
1.2直接写在style标签里
通过选择器选择HTML元素，将CSS样式放在<style>标签中，<style>标签一般要求写放在<head>标签里。如果不写在<head>标签里有些浏览器会报错。
例：
<style>
h1{
font-size:12px;
}
</style>
1.3外部链接调用
1.3.1链接方式——<link>标签
定义：
<link>标签定义文档与外部资源的关系。
语法：
<link rel="stylesheet" href="styles.css" />
注意：<link>标签一般写在<head>标签里。
常用属性：
rel属性，规定当前文档与被链接文档之间的关系。如："stylesheet"表示文档的外部样式表。
href属性，设置引用CSS文件的路径。
tyle属性，规定链接文档文件类型。
media属性，规定应用的设备。如："screen"是默认值，说明应用在计算机屏幕上。
1.3.2导入方式——CSS@规则（@import）
定义：
@import是CSS@规则，用于加载外部层叠样式表。
语法：
<style [type="text/css"]>
@import url(../CSS/style.css);
</style>
注意：<style>标签一般写在<head>标签里。
1.3.3链接方式和导入方式的比较
相同点：
两者的目的相同，都是将一个独立的CSS文件引入到HTML文件中。
不同点：
语法不同，链接式使用HTML的标记引入外部CSS文件，而导入式则是使用CSS的规则引入。
CSS文件加载顺序不同，当HTML文件被加载时，链接式引用的文件会同时被加载，而导入式引用的文件则会等页面全部下载完毕再被加载。
兼容性不同，由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而<link>标签无兼容性问题。
功能多样性不同，<link>除了调用CSS外还可以有其他作用，譬如声明页面链接属性，声明目录等，而@import就只能调用CSS。
<link>标签支持使用JS控制DOM去改变样式；而@import不支持。
引入多个CSS文件的方式不同。链接式引入多个CSS文件，使用多个<link>标签，而导入式除了使用多个@import，还可以在css文件中嵌套CSS文件。
1.4总结
没有特殊要求下，应尽量使用<link>标签导入外部CSS文件，避免或者少用使用其他方式。
1.5实例详解——引入多个CSS文件
例1-1：
<!DOCTYPE html>
<html>
<head>
<title> 链接式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../CSS/PublicStyles.css"/>
<link rel="stylesheet" href="../CSS/styles.css"/>
</head>
<body></body>
</html>
PublicStyles.css文件代码
div {
background:black;
}
style.css文件代码
#box {
color:red;
}
例1-2：
<!DOCTYPE html>
<html>
<head>
<title> 导入式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
@import url(../CSS/ PublicStyles.css);
@import url(../CSS/style.css);
</style>
</head>
<body></body>
</html>
PublicStyles.css文件代码
div {
background:black;
}
style.css文件代码
#box {
color:red;
}
例1-3：
<!DOCTYPE html>
<html>
<head>
<title> 导入式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
@import url(../CSS/style.css);
</style>
</head>
<body></body>
</html>
PublicStyles.css文件代码
div {
background:black;
}
style.css文件代码
@import url(../CSS/ PublicStyles.css);
#box {
color:red;
}
注意：此方法有一个缺点，会对网站服务器产生过多的HTTP请求。以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。
1.6三种方式的CSS样式执行优先级
内联式>内嵌式>外部引用式。
分享到：
发表评论
-
html框架之iframe和frame及frameset
2019-01-22 14:55 4272html框架之iframe和frame及f ... -
Select下拉选择框的美化
2017-11-02 17:19 3407Select下拉选择框的美化 1.1 CSS修改select下 ... -
Input元素去除获取焦点时的边框
2017-11-02 10:27 7081Input元素去除获取焦点 ... -
Input[type="radio"]和Input[type="checkbox"]的选中
2017-11-01 17:03 1722Input[type="radio"]和I ... -
Input只读属性详解
2017-11-01 16:27 1762Input只读属性详解 1.1概述 Reado ... -
input[type="file"]标签的美化
2017-11-01 15:34 1222input[type="file"]标签的 ... -
html布局之table表格布局
2017-09-25 08:52 3532html布局之table表格布局 1.1 table布局 1、 ... -
HTML实现页面自动跳的方法
2017-09-14 11:42 976HTML实现页面自动跳的方法 1.1方法一 直 ... -
html marquee标签讲解
2017-09-01 09:02 1727html marquee标签讲解 1.1概述 ... -
html路径小结
2017-08-25 09:38 652html路径小结 1.1概述 ... -
html meta标签用法详解(一)
2017-08-24 10:18 1238html meta标签用法详解(一) 1.1概述 ... -
Hack技术总结
2017-08-23 11:22 1026Hack技术总结 1.1概述 ... -
HTML行内元素和块级元素的转换
2016-10-07 16:24 6317HTML行内元素和块级元素的转换 1.1 CSS displa ... -
div元素按比例缩放的实现方法
2016-09-08 17:54 16189div元素按比例缩放的实现方法 某些场景下，窗 ... -
HTML img布局问题详解
2016-09-08 16:52 1191HTML img布局问题详解 1.1 ... -
HTML中空格的实现方法详解
2016-09-08 15:15 2444HTML中空格的实现方法详解 浏览器总是会截短 ... -
RGB颜色与HEX十六进制颜色的换算
2016-09-07 20:57 1113RGB颜色与HEX十六进制颜色的换算 1.1换算表格 ... -
Web语义化详解
2016-07-21 14:51 669Web语义化详解 1.1概述 Web语义化主 ... -
DIV+CSS布局和TABLE布局详解
2016-07-21 10:53 824DIV+CSS布局和TABLE布局详 ... -
设置input输入框为只读方法详解
2016-07-18 11:02 4960设置input输入框为只读方法详解 1.1禁用状态与启用状态 ...
相关推荐
问题描述： 停车场内只有一个可停放n辆汽车的狭长通道，且只有一个大门可供汽车进出。汽车在停车场内按车辆到达时间的先后顺序，依次由北向南排列（大门在最南端，最先到达的第一辆车停放在停车场的最北端），若车场内已停满n辆汽车，则后来的汽车只能在门外的便道上等候，一旦有车开走，则排在便道上的第一辆车即可开入； 当停车场内某辆车要离开时，在它之后开入的车辆必须先退出车场为它让路，待该辆车开出大门外，其它车辆再按原次序进入车场，每辆停放在车场的车在它离开停车场时必须按它停留的时间长短交纳费用。试为停车场编制按上述要求进行管理的模拟程序。 1.基本要求 （1）以栈模拟停车场，以队列模拟车场外的便道，按照从终端读入的输入数据序列进行模拟管理。 （2）每一组输入数据包括三个数据项：汽车“到达”或“离去”信息、汽车牌照号码及到达或离去的时刻，对每一组输入数据进行操作后的输出数据为：若是车辆到达，则输出汽车在停车场内或便道上的停车位置；若是车离去；则输出汽车在停车场内停留的时间和应交纳的费用（在便道上停留的时间不收费）。 （3）栈以顺序结构实现，队列以链表实现。 2.重点难点 重点：针对停车场问题的特点，利
精选毕设项目-人民好公仆小程序（生活+便民+政务）
精选毕设项目-相册；处理用户信息
精选毕设项目-喵喵小说
精选毕设项目-图片预览带后端
精选项目-爱靓女带后台
在科技与司法的交响曲中，智慧法院应运而生，成为新时代司法服务的新篇章。它不仅仅是一个概念，更是对法院传统工作模式的一次深刻变革。智慧法院通过移动信息化技术，为法院系统注入了强大的生命力，有效缓解了案多人少的矛盾，让司法服务更加高效、便捷。 立案、调解、审判，每一个阶段都融入了科技的智慧。在立案阶段，智慧法院利用区块链技术实现可信存证，确保了电子合同的合法性和安全性，让交易双方的身份真实性、交易安全性得到了有力见证。这不仅极大地缩短了立案时间，还为后续审判工作奠定了坚实的基础。在调解阶段，多元调解服务平台借助人工智能、自然语言处理等前沿技术，实现了矛盾纠纷的快速化解。无论是矛盾类型的多元化，还是化解主体的多元化，智慧法院都能提供一站式、全方位的服务，让纠纷解决更加高效、和谐。而在审判阶段，智能立案、智能送达、智能庭审、智能判决等一系列智能化手段的应用，更是让审判活动变得更加智能化、集约化。这不仅提高了审判效率，还确保了审判质量的稳步提升。 更为引人注目的是，智慧法院还构建了一套完善的执行体系。移动执行指挥云平台的建设，让执行工作变得更加精准、高效。执行指挥中心和信息管理中心的一体化应用，实现了信息的实时传输和交换，为执行工作提供了强有力的支撑。而执行指挥车的配备，更是让执行现场通讯信号得到了有力保障，应急通讯能力得到了显著提升。这一系列创新举措的实施，不仅让执行难问题得到了有效解决，还为构建诚信社会、保障金融法治化营商环境提供了有力支撑。智慧法院的出现，让司法服务更加贴近民心，让公平正义的阳光更加温暖人心。
西门子1200与3台台达DTK温控器通讯程序 功能：实现西门子1200 PLC对3台台达DTK温控器进行485通讯控制，在触摸屏上设定温度，读取温度 器件：西门子1200 1214DC DC DC.昆仑通态TPC7062Ti ，西门子KTP700 Basic PN，台达DTK 4848V12温控器。 说明：的是程序，带详细注释程序，西门子触摸屏程序，PLC设置和温控器设置，接线说明书。 #SIEMENS 西门子
机械设计电阻绕线焊线一体机sw18全套技术资料100%好用.zip
VB6编写的上位机源码，可实时显示曲线图，带有数据库，可以进行历史数据的保存 及 查看历史采集数据。
精选毕设项目-新浪读书
jQuery+Slick插件实现游戏人物轮播展示切换特效源码是一款通过背景图片的切换来显示不同的人物效果，轮播效果通过slick幻灯片插件来制作。效果非常棒，有需要的朋友可以直接下载使用，适应各大网站
精选毕设项目-地图查找附件
（蛐蛐voc数据）农作物病虫害识别目标检测数据集，VOC格式，蛐蛐数据集，纯手动标注，用来进行目标检测代码训练的数据。
MATLAB Simulink仿真模型 双馈风机并网频率控制仿真模型，利用下垂控制与惯性控制结合的综合惯性控制，实现电力系统的频率稳定，两台同步发电机组，具体参数可自行调节，频率波形比较可利用matlab工作区画出。
一、结题报告的类型及主要结构 结题报告是一种专门用于科研课题结题验收的实用性报告类文体，也叫研究报告。它是研究者在课题研究结束后对科研课题研究过程和研究成果进行客观、全面、实事求是的描述，是课题研究所有材料中最主要的材料，也是科研课题结题验收的主要依据。 一篇规范、合格的结题报告，需要回答好3个问题：一是“为什么要选择这项课题进行研究？”二是“这项课题是怎样进行研究的？”三是“课题研究取得哪些研究成果？” 基本结构大致包括以下部分： 第一个问题 “为什么要选择这项课题进行研究？” 1．课题提出的背景；2．课题研究的意义（包括理论意义和现实意义，这个部分也可以合并归入“课题提出的背景”部分）；第二个问题“这项课题是怎样进行研究的？”3.文献综述；4．课题研究的理论依据；5．课题研究的目标；6．课题研究的主要内容；7．课题研究的对象；8．课题研究的方法；9. 课题研究的主要过程（研究的步骤）； 除了第9部分外，从第1到第8部分在填报课题立项申报表、在制定课题研究方案、在开题报告中，都有要求，内容基本相同。到了撰写结题报告时，只须稍作适当修改就可以了。而第9部分，则需要通过对
内容概要：本文档重点讲述了网络安全应急响应的各项准备工作，涵盖了‘1+X’网络安全应急响应的职业技能等级证书概述、应急响应的基础知识、应急响应组织的建立、风险评估与改进、应急响应预案的制定以及详细的应急响应计划处置样例。文中详细介绍了各级职业技能的要求和任务，尤其关注如何未雨绸缪，制定完善的应急预案以应对潜在的网络安全风险；同时也探讨了如何在网络安全事件发生时，采取及时有效的应急处置措施。 适合人群：从事或有兴趣进入网络安全领域的从业人员，尤其是准备考取‘1+X’网络安全应急响应职业技能等级证书的相关人员。 使用场景及目标：帮助读者了解网络安全应急响应的基本概念及其在整个国家安全框架中的重要地位；指导读者学会如何建立健全高效的应急响应组织结构，如何进行全面的风险评估以及如何编制切实可行的应急预案；通过实例剖析，增强读者应对突发网络安全事件的能力。文档的目标在于提升读者在不同层面的专业技能，包括但不限于系统备份、日志分析、安全漏洞修复等方面的能力。 阅读建议：此文档结构清晰，内容详尽，非常适合有一定基础的技术从业者参考学习。建议读者逐章节深入了解，特别是关注自身岗位对应的技能细分类别。此外，结合实例深入理解和练习如何进行应急处置是非常有价值的，有助于提升自身的实战能力。
电动汽车动力系统匹配计算模型：输入整车参数及性能要求，一键生成驱动系统的扭矩功率峰值转速等参数。 2、整车动力经济性计算模型：包含NEDC WLTC CLTC工况，输入整车参数可生成工况电耗、百公里电耗、匀速工况续航、百公里电耗等信息。 实际项目中使用的计算仿真模型. 两个模型打包
chromedriver-linux64_122.0.6254.0
SRS构型七自由度冗余机械臂运动学建模全套matlab代码 代码主要功能: [1]. 基于臂角参数化方法求解机械臂在给定末端位姿和臂角下的关节角度； [2]. 求解机械臂在给定末端位姿下的有效臂角范围，有效即在该区间内机械臂关节角度不会超出关节限位； [3]. 以避关节限位为目标在有效臂角区间内进行最优臂角的选取，进而获取机械臂在给定末端位姿下的最优关节角度。 购前须知: 1. 代码均为个人手写，主要包含运动学建模全套代码； 2. 代码已经包含必要的注释； 包含原理推导文档，不包含绘图脚本以及urdf；