5. CSS引入方式
5.1 CSS的三种样式
按照 CSS 样式书写的位置(或者引入的方式),CSS样式表可以分为三大类:
1.行内样式表(行内式)
2.内部样式表(嵌入式)
3. 外部样式表(链接式)
5.2 内部样式表
内部样式表(内嵌样式表)是写到HTML页面的内部、是将所有的CSS代码抽取出来,单独放到一个<style>标签中。
<style>
div {
color:red;
font-size:12px;
}
</style>
- <style>标签理论上可以放在HTML文档的任何地方,但一般会放在文档的<head>标签中。
- 通过此种方式,可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰,但是并没有实现结构与样式完全分离
- 使用内部样式表设定CSS,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内部样式表</title><style>div {color: pink;}</style>
</head>
<body><div>所谓样式表,就是在html页面内部写样式,但是是单独写到style标签内部。</div>
</body>
</html>
预览页面:
5.3 行内样式表
行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式,适合于修改简单样式。
<div style=" color:red; font-size:12px; ">青春不常在,抓紧谈恋爱</div>
- style 其中就是标签的属性
- 在双引号中间,写法要符合CSS规范
- 可以控制当前的标签设置样式
- 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用。
- 使用行内样式表设定CSS,通常也被成为行内式引入
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内部样式表</title></head>
<body><div style="color: pink; font-size: 20px; text-align: center;">所谓样式表,就是在html页面内部写样式,但是是单独写到style标签内部。</div>
</body>
</html>
5.4 外部样式表
实际开发都是外部样式表,适合于样式比较多的情况,核心是样式单独写到CSS文件中 之后把CSS文件引入到HTML页面中使用。
1.新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中。
2. 在HTML页面中,使用<link>标签引入这个文件。
<link rel="stylesheet" href="CSS文件路径">
属性 | 作用 |
rel | 定义当前文档与被链接文档之间的关系,在这里需要指定为stylesheet,表示被链接的文档是一个样式表文件。 |
href | 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。 |
- 使用外部样式表设定CSS,通常也被称为外链式或链接引入,这种方式是开发中常用的方式。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>来呀~快活呀,反正有大把的时光...</div>
</body>
</html>
css:
div {
color: pink;
}
预览:
5.5 CSS引入方式总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
行内样式表 | 书写方便,权重高 | 结构样式混写 | 较少 | 控制一个标签 |
内部样式表 | 部分结构与样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,吐血推荐 | 控制多个页面 |
6. 综合案例
要做出这样的效果,我们的代码是这样的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {font: 16px/28px 'Microsoft yahei';}h1 {/* 文字不加粗 */font-weight: 400;/*让h1里面的文字水平居中对齐 */text-align: center;}.gray {color: #888888;text-align: center;}a {text-decoration: none;}.search {color: #666;width: 170px;}.btn {font-weight: 700;}p {text-indent: 2em;}.pic {/* 想要图片居中对齐,则是让它的父亲 p标签添加水平居中的代码 */text-align: center;}.footer {color: #888888;font-size: 12px;}</style>
</head>
<body><h1>北方高温明日达鼎盛京津冀多地地表温度将超60℃</h1><div class="gray">2019-07-03 16:31:47 来源: <a href="#">中国天气网</a> <input type="text" value="请输入查询条件" class="search"><button class="btn">搜索</button></div><hr><p>中国天气网讯今天(3日),华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35预报显示,今后三天(3-5日),这一带的高温关气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、关津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。
</p><h4>气温41.4℃!地温66.5!北京强势迎七月首个高温日</h4><p class="pic"><img src="image/高温日.jpg" alt="" ></p><p>今天,华北、黄淮一带的高温持续发酵,截至今天下午2点,陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中,北京、天津、郑州均迎来高温日。
</p><p>在阳光暴晒下,地表温度也逐渐走高。今天下午2点:华北黄淮大部地区的地表温度都在50℃以上,部分地区地表温度甚至超过60℃。其中,河北衡水地表温度高达68.3℃,关津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p><h4>明日热度再升级!京津冀携手冲击38℃+</h4><p>中国关气网气象分析师全伟跃介绍,明天(4日),华北、黄淮地区35℃以上的高温天气还将继续升级⑥.中)鼎盛阶段,高温强度和范围都将发展到最强。明天,北京南部、天津大部、河北中部和南部、山东中部和西部山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p><p>不过,专家提醒,济南被雨水天气完美绕开,因此未来一周,当地的高温还会天天上岗。在此提醒当地居民注意防暑降温,防范持续高温带来的各种不利影响。(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)</p><p class="footer">本文来源:中国天气网 责任编辑:刘京_NO5631</p>
</body>
</html>
相关文章:
5. CSS引入方式
5.1 CSS的三种样式 按照 CSS 样式书写的位置(或者引入的方式),CSS样式表可以分为三大类: 1.行内样式表(行内式) 2.内部样式表(嵌入式) 3. 外部样式表(链接式) 5.2 内部样式表 …...
在Linux中,SElinux的作用是什么?如何临时和永久的更改SElinux上下文?
SELinux在Linux系统中扮演者至关重要的安全角色,它通过实施强制访问控制(Mandatory Access Control,MAC)策略来增强系统的安全性。不同于传统的用户和组权限管理机制(即自主访问控制DAC),selinux提供了一种…...
windows下,golang+vscode+delve 远程调试
1 现在远程服务器安装golang和delve golang的安装,通过官网直接下载安装包安装接口 go install github.com/go-delve/delve/cmd/dlvlatest 如果dlv和golang版本不匹配,这里把latest换成匹配的版本,比如1.20.0 2 编译带调试信息的程序 go bu…...
社交牛杂症?锂电系统有了DeviceNet转Profinet网关后,沟通无障碍
在锂电行业蓬勃发展的当下,自动化与智能化浪潮正席卷而来,这无疑对设备间的通信精准度与流畅性提出了严苛要求,而稳联技术Devicenet转Profinet网(WL-PN-DVNM)关恰是破局的关键利器。 此网关设备犹如一座桥梁࿰…...
C语言的正则表达式
C语言中的正则表达式 引言 正则表达式是一种用于描述字符串模式的工具,它可以用来进行字符串匹配、查找、替换等操作。在编程中,正则表达式被广泛应用于数据验证、信息提取等场景。C语言虽然没有内置的正则表达式支持,但通过一些库我们同样…...
Launcher3主页面加载显示流程分析
布局结构 抓取布局后,可以看到每个图标是一个DoubleShadowBubbleTextView,父布局是CellLayout、workspace。 我们可以在CellLayout添加子view打印出调用堆栈信息,可以整体上看页面加载显示流程。 主要类 Launcher.java:主界面&…...
机器学习算法---贝叶斯学习
1.了解相关概念 先验概率:有数据集d,以及假设h,此时h是不确定的。在还没有训练数据之前h的初始概率记为P(h),类似地我们把P(d)表示训练数据d在任何假设都未知或不确定时的概率。P(d|h)表示已知假设h成立时d的概率。 后验概率:就是在数据d上经过学习之后…...
PyCharm+RobotFramework框架实现UDS自动化测试——(二)RobotFramework环境配置
从0开始学习CANoe使用 从0开始学习车载测试 相信时间的力量 星光不负赶路者,时光不负有心人。 文章目录 1.环境准配2.Pycharm中相关配置2.1. 安装Hyper RobotFramework Support 3.脚本执行环境3.1 执行单条的配置3.2 执行全部用例配置 4.工程运行4.1 单条用例运行4.…...
colnames看似简单,却能优化数据处理流程
引言 在数据处理和分析中,变量名称是至关重要的,它们决定了数据的可读性和操作的简便性。在R语言中,colnames 函数以其简单的语法设计,提供了高效管理数据框列名的能力,尤其是在复杂的爬虫任务中显得尤为重要。本篇文…...
Spring Boot整合Minio实现文件上传
Spring Boot整合Minio后,前端的文件上传有两种方式: 文件上传到后端,由后端保存到Minio 这种方式好处是完全由后端集中管理,可以很好的做到、身份验证、权限控制、文件与处理等,并且可以做一些额外的业务逻辑…...
GitHub - riscv-software-src/riscv-isa-sim: Spike, a RISC-V ISA Simulator
GitHub - riscv-software-src/riscv-isa-sim: Spike, a RISC-V ISA Simulator 操作手册 $ apt-get install device-tree-compiler libboost-regex-dev libboost-system-dev $ mkdir build $ cd build $ ../configure --prefix$RISCV $ make $ [sudo] make install 具体安装 …...
ceph文件系统
ceph文件系统: 使用设备:4台机器 高度可扩展,分布式的存储文件系统,旨在提供高性能,高可靠性和高可用的对象存储,块存储,文件系统的存储 使用分布式的算法保证数据的高可用和一致性 ceph的架…...
模型创新、论文复现、科研辅导、论文代码定制
建模先锋团队长期致力于为用户提供优质的代码定制服务。团队提供全网最低价格的服务,同时保证高性价比和高质量的代码交付,为您提供个性化定制的服务。 以下是定制服务范围: 通过深度学习和信号处理技术,我们能够针对不同行业和场…...
【flink-cdc】flink-cdc 3版本debug启动pipeline任务,mysql-doris
官方文档 github仓库地址 Flink cdc debug调试动态变更表结构 经过测试使用,在启动任务配置Modify classpath添加jar的方式,容易出错classNotFoundException等等。 一、build project flink-cdc版本:3.2.1 mvn clean package "-Dma…...
mybatisX插件的使用,以及打包成配置
装mybatisX插件; idea连接数据库; 点击mybatisx-generator,设置自己装mybatisX插件; idea连接数据库; 点击mybatisx-generator,设置自己要的包和类; 如果要把自己的配置设置成一个自定义模板&a…...
pip下载包出现SSLError
报错: ERROR: Could not install packages due to an OSError: HTTPSConnectionPool(host‘files.pythonhosted.org’, port443): Max retries exceeded with url: /packages/8a/c2/ae7227e4b089c6a8210920db9d5ac59186b0a84eb1e6d96b9218916cdaf1/taming_transform…...
Linux下查看文件和文件夹占用空间大小
使用Linux命令,查看文件磁盘所占的空间大小,下面可以通过以下命令进行操作 df 可以查看一级文件夹大小、使用比例、档案系统及其挂入点,但对文件束手无策du 查看文件和文件夹的磁盘使用空间 在使用中,一般是df命令和du命令一起联…...
【论文+源码】基于Spring和Spring MVC的汉服文化宣传网站
为了实现一个基于Spring和Spring MVC的汉服文化宣传网站,我们需要创建一个简单的Web应用程序来展示汉服文化和相关信息。这个系统将包括以下几个部分: 数据库表设计:定义文章、用户和评论的相关表。实体类:表示数据库中的数据。DAO层接口及MyBatis映射文件:用于与数据库交…...
C++语言的学习路线
C语言的学习路线 C是一门复杂而强大的编程语言,由于其高性能和灵活性,受到了许多开发者和企业的青睐。无论是系统软件、嵌入式系统还是游戏开发,C都有非常广泛的应用。要掌握C这门语言,需要合理制定学习路线,并结合实…...
【OpenCV】使用Python和OpenCV实现火焰检测
1、 项目源码和结构(转) https://github.com/mushfiq1998/fire-detection-python-opencv 2、 运行环境 # 安装playsound:用于播放报警声音 pip install playsound # 安装opencv-python:cv2用于图像和视频处理,特别是…...
【ArcGISPro/GeoScenePro】解决常见的空间参考和投影问题
修复空间参考缺失的图像 数据 https://arcgis.com/sharing/rest/content/items/535efce0e3a04c8790ed7cc7ea96d02d/data 查看属性坐标 查看属性范围 范围值并不是零或接近于零。 这意味着栅格具有范围,因此其已正确进行...
Ruby语言的语法
Ruby语言的语法之美 Ruby是一种动态、开放源代码的编程语言,由日本的松本行弘(Yukihiro Matsumoto)于1995年首次发布。Ruby语言以其简洁、优雅和易于阅读的语法而闻名。它不仅适合初学者,还被广泛应用于Web开发、数据分析和其他领…...
概述(讲讲python基本语法和第三方库)
我是北子,这是我自己写的python教程,主要是记录自己的学习成果方便自己日后复习, 我先学了C/C,所以这套教程中可能会将很多概念和C/C去对比,所以该教程大概不适合零基础的人。 it seems that python nowadays 只在人工…...
程序包org.springframework.boot不存在
springBoot项目启动报错 程序包org.springframework.boot不存在 1、检查依赖 首先检查pom文件判断依赖是否存在 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId><version>2.4.5…...
.NET Core FluentAPI
目录 约定配置 主要规则 两种配置方式 Data Annotation Fluent API Fluent API配置 Fluent API众多方法 选择 约定配置 主要规则 表名采用DbContext中的对应的DbSet的属性名。数据表列的名字采用实体类属性的名字,列的数据类型采用和实体类属性类型最兼容…...
浙江省自然资源厅:基于“浙里办”的自然资源移动政务服务创新实践——“浙里自然资源”
摘 要:本文基于浙江省自然资源移动政务服务的创新实践,设计和实现“浙里自然资源”应用,依托浙江省省域空间治理数字化平台特有的架构基础,在提升功能性和可用性、加强运营力度、丰富服务内容等方面采取了管理举措和技术创新。通…...
【Astro】如何在Astro上借助Cloudflare D1和Drizzle ORM打造全栈应用?一文带你搞定!
如何在Astro上借助Cloudflare D1和Drizzle ORM打造全栈应用?一文带你搞定! 文章目录 如何在Astro上借助Cloudflare D1和Drizzle ORM打造全栈应用?一文带你搞定!前言一、Astro简介与优势二、Cloudflare D1简介三、Drizzle ORM简介四…...
【Axios使用手册】如何使用axios向后端发送请求并进行数据交互
axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js。它支持请求和响应拦截、取消请求、自动转换 JSON 数据等功能,非常适合在现代 JavaScript 应用中进行网络请求。以下是对 axios 的详细讲解,包括安装、基本用法、高级功能等。…...
边缘计算应用十大领域
边缘计算解决了互联网的网速问题,作为实现边缘计算的基础,那边缘计算是5G与产业互联网、物联网时代的重要技术支撑,也正迎来广阔的增长空间。那么现在我们生活中有哪些领域正在使用边缘计算呢?今天我们来盘点一下我们身边正在使用…...
CSS 学习之 padding 与图形绘制
padding 属性和 background-clip 属性配合,可以在有限的标签下实现一些 CSS 图形绘制效果,我这里举两个小例子,重在展示可行性。 例 1:不使用伪元素,仅一层标签实现大队长的“三道杠”分类图标效果。此效果在移动端比较常见&…...
熔断器模式如何进入半开状态的
熔断器模式在进入打开状态并经过一段冷却时间后,会自动进入半开状态。这个过程是熔断器模式自我恢复机制的一部分,旨在测试下游服务是否已经恢复正常,从而决定是否重新允许请求通过。 1. 进入打开状态: • 当服务调用失败次数达到…...
数据结构:双向循环链表
双向循环链表(Doubly Circular Linked List) 双向循环链表是双向链表的一种变体,其特点是链表的头节点和尾节点相连,形成一个闭环。这种结构允许在链表中进行无缝的双向遍历,并且由于循环特性,可以从任何节…...
宝安湾区之光附近的钓鱼点
工作日的午休我经常在公司附近骑行,有时候也会骑行到宝安的湾区之光。但是我最感兴趣的除了湾区之光摩天轮,还有雷打不动的快乐钓鱼佬。 上图红框区域的河岸每天都会出现零零散散的快乐钓鱼佬,他们好像都有自己的钓鱼窝点。我发现来这里钓鱼也…...
【计算机网络】什么是AC和AP?
在现代的无线网络中,AC(Access Controller,接入控制器)和AP(Access Point,无线接入点)是两个至关重要的设备,它们在网络的管理、连接和优化中扮演着重要角色。理解它们的功能和区别&…...
python 词法分析
词法分析(Lexical Analysis)是编译器的第一步,它的任务是将源代码文本分割成一系列有意义的单元(称为“词法单元”或“Token”)。这些词法单元通常包括关键字、标识符、常量、运算符、分隔符等。 import re# 定义词法单…...
JUC--CAS原理(以Atomic报下类的实现来了解CAS的原理)
以Atomic来了解CAS的原理 六、无锁6.1CAS(Compare-And-Swap)原理6.2CAS与synchronized6.3Atomic(原子类)原理分析 6.4ABA问题6.4unsafe 六、无锁 6.1CAS(Compare-And-Swap)原理 CAS原理:CAS是…...
对比显式启用-u_printf_float和-u_scanf_float前后的代码内存体量实验
本文的嵌入式编译器基于GCC for ARM,构建文件基于Makefile。 main.c不编写任何代码,保证实验的其他变量统一。源文件main.c: 优化等级固定为 -Og : syscalls.c 系统调用库函数文件参考:基于GCC for ARM交叉编译工具链…...
嵌入式 Linux LED 驱动开发实验
一、Linux 下 LED 灯驱动原理 a)地址映射 在编写驱动之前,我们需要先简单了解一下 MMU 这个神器, MMU 全称叫做 Memory Manage Unit,也就是内存管理单元。在老版本的 Linux 中要求处理器必须有 MMU,但是现在 Linux 内核已经支持无 MMU 的处理器了。 MMU 主要完成的功能如…...
qml PathView详解
1、概述 PathView 是 Qt Quick 中一个非常强大的视图组件,它基于一个 Path 来展示视图项(如 Item、Rectangle 等)。PathView 可以让你按照定义的路径动态地显示多个元素,并且支持动画、滑动等功能。这个视图控件的最大特点是能够…...
Spring源码分析之事件机制——观察者模式(一)
目录 事件基类定义 事件监听器接口 事件发布者接口及实现 事件广播器实现 小小总结 Spring源码分析之事件机制——观察者模式(一)-CSDN博客 Spring源码分析之事件机制——观察者模式(二)-CSDN博客 Spring源码分析之事件机制…...
安卓14无法安装应用解决历程
客户手机基本情况: 安卓14,对应的 targetSdkVersion 34 前天遇到了安卓14适配问题,客户发来的截图是这样的 描述:无法安装我们公司的B应用。 型号:三星google美版 解决步骤: 1、寻找其他安卓14手机测试…...
BGP(Border Gateway Protocol)路由收集器
全球 BGP(边界网关协议)路由收集器的分布情况以及相关数据。以下是主要的信息解读: 地图标记: 每个绿色点代表一个路由收集器的位置。路由收集器分布在全球不同的地区,覆盖了五大区域: ARIN(美…...
Vue.js与其他框架有哪些兼容性?
Vue.js的兼容性主要体现在几个方面,包括浏览器支持、运行环境适应性、与其他库和框架的集成能力等。以下是更详细的解释: 浏览器兼容性 现代浏览器:Vue.js广泛支持所有主流的现代浏览器,如Google Chrome, Firefox, Safari, Edge…...
深度解析与实践:HTTP 协议
一、引言 HTTP(HyperText Transfer Protocol,超文本传输协议)是 Web 应用程序、API、微服务以及几乎所有互联网通信的核心协议。虽然它是我们日常使用的基础技术,但要深刻理解其高效使用、优化以及如何避免性能瓶颈,我…...
MyBatis 配置文件全解析
一、MyBatis 配置文件为何至关重要? 在 Java 后端开发领域,MyBatis 作为一款广受欢迎的持久层框架,极大地简化了数据库操作。而 MyBatis 配置文件,恰似整个框架的 “神经中枢”,掌控着其运行的方方面面,对…...
redis Redis内存缓存过期机制
起因:随着项目的进一步推广,数据量的增大,直接访问mysql数据库获取数据所使用的时间越来越长,为解决当前主要矛盾,决定引入redis非关系型数据库作为缓存层,使得数据并不能直接命中数据库,减少访…...
游戏关卡设计的常用模式
游戏关卡分为很多种,但常用的有固定套路,分为若干种类型。 关卡是主角与怪物、敌方战斗的场所,包括装饰物、通道。 单人游戏的关卡较小,偏线性; 联机/MMO的关卡较大,通道多,自由度高…...
计算机网络常见面试题及解答
以下是计算机网络中常见的面试题及解答,按主题分类: --- ## **一、基础概念** ### **1. OSI 七层模型和 TCP/IP 模型的区别是什么?** **答:** - **OSI 七层模型:** - 应用层、表示层、会话层、传输层、网络层、数…...
SUB输入5V升压充电16.8V芯片HU5912
HU5912芯片,作为航誉微电子有限公司推出的一款高性能升压充电管理IC,自其面世以来,便以其出色的性能和广泛的应用领域,受到了业界的高度关注和赞誉。本文将详细介绍HU5912芯片的技术特点、应用优势、市场定位以及其在各类电子设备…...
基于Informer网络实现电力负荷时序预测——cross validation交叉验证与Hyperopt超参数调优
前言 系列专栏:【深度学习:算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域,讨论了各种复杂的深度神经网络思想,如卷积神经网络、循环神经网络、生成对…...