当前位置： 首页 > news >正文

CSS（一）-- 三种样式表

news 文章来源：https://blog.csdn.net/PUYALEI/article/details/130443835 2024/11/20 11:37:40

目录

1.  行内样式表

2.  内部样式表

3.  外部样式表（即引入 .css文件）（重点掌握）

1.  行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。

<div style="color: red; font-size: 12px;">还君明珠双泪垂，恨不相逢未嫁时。</div>
  • style 其实就是标签的属性，可以控制当前的标签设置样式。
  • 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。
  • 使用行内样式表设定 CSS，通常也被称为行内式引入。

2.  内部样式表

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。

<style>
div {
color: red;
font-size: 12px;
}
</style>
  • <style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中。
  • 通过此种方式，可以方便控制当前整个页面中的元素样式设置 代码结构清晰，但是并没有实现结构与样式完全分离 使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式。

3.  外部样式表（即引入 .css文件）（重点掌握）

实际开发都是外部样式表. 适合于样式比较多的情况.

核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.

引入外部样式表分为两步：

  1. 新建一个后缀名为 .css 的样式文件，把所有 css 代码都放入此文件中。
  2. 在 HTML 页面中，使用<link> 标签引入这个文件。
<link rel="stylesheet" href="css文件路径">

<link>的常用属性：

属性说明
rel指定链接的类型，比如样式表（stylesheet）、图标（icon）、指示浏览器预解析 DNS，加速域名解析（dns-prefetch）、指示浏览器预连接到相关资源，减少请求延迟（preconnect）、指示浏览器预请求资源，提高用户体验（prefetch）、指示某个链接为下一篇/上一篇文章，用于增强网站的导航性能（next/prev）等。
href指定链接资源的路径和文件名（可以是相对路径，也可以是绝对路径）。
type指定链接资源的 MIME 类型，比如 text/css、image/png 等，对于 CSS 文件可以省略该属性。
integrity指定链接资源的完整性校验码，用于验证资源是否被篡改。
crossorigin指定链接资源的跨域属性，可选值为 anonymous、use-credentials。
media指定样式表的媒体类型，比如 screen、print、all 等。

实例演示：

下面是一个使用 link 标签链接样式表的例子：

<!DOCTYPE html>
<html>
<head><title>My Website</title><link rel="stylesheet" type="text/css" href="MyStyle.css">
</head>
<body><h1>《蜀相》</h1><p>唐⋅ 杜甫</p><p>三顾频烦天下计，两朝开济老臣心。</p>
</body>
</html>

在这个例子中，我们使用 link 标签链接了一个名为 MyStyle.css 的样式表文件。rel 属性指定了链接的类型，type 属性指定了链接资源的 MIME 类型，href 属性指定了链接资源的路径和文件名。在这个例子中，type 属性可以省略，因为浏览器可以自动识别 CSS 文件。

link 标签还可以用于链接网站图标（通常是一个 .ico 文件）,如下：

<!DOCTYPE html>
<html>
<head><title>My Website</title><link rel="icon" type="image/png" href="Myicon.png">
</head>
<body><h1>怎样都好，只要能让他们发笑就好。</h1><p>-人间失格</p>
</body>
</html>

在这个例子中，我们使用 link 标签链接了一个名为 Myicon.png 的图标文件。rel 属性指定了链接类型为 icon，type 属性指定了图标文件的 MIME 类型，href 属性指定了链接资源的路径和文件名。在这个例子中，我们使用了 type 属性，因为不同浏览器对于网站图标的 MIME 类型的支持有所不同。

除了样式表和图标，link 标签还可以用于链接其他资源，比如字体、脚本等。需要注意的是，使用 link 标签链接外部资源需要保证链接路径的正确性和服务器端的资源访问权限。

继续学习之路：

CSS（一）-- 三种样式表

CSS（二）-- 选择器的运用（针对基本选择器和复合选择器的详细解析）

CSS（三）-- 伪类选择器与伪元素选择器

CSS（四）-- 针对字体、文本的常用基本属性

如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！

相关文章：

CSS（一）-- 三种样式表

目录 1. 行内样式表 2. 内部样式表 3. 外部样式表&#xff08;即引入 .css文件&#xff09;&#xff08;重点掌握&#xff09; 1. 行内样式表 行内样式表&#xff08;内联样式表&#xff09;是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。 <di…...

编程日记 2023/5/30 23:33:58

嵌入式之Samba服务器搭建

在嵌入式系统开发应用平台中&#xff0c;tftp、nfs和samba服务器是最常用的文件传输工具 tftp和nfs是在嵌入式Linux开发环境中经常使用的传输工具 samba则是Linux和Windows之间的文件传输工具。 下面演示在linux上搭建Samba服务器 sudo apt-get install samba chmod -R 77…...

编程日记 2023/5/3 21:39:02

vue3+go——看到了就去学习吧

vue3go——看到了就去学习吧 Vue3.2 Vite Element-Plus 实现最基础的 CRUD1.效果展示【02:36】2.创建项目【03:16】3.添加github管理【04:10】4.引入element-plus【04:21】5.内容布局【08:59】6.布局优化【05:31】7.添加弹窗【09:34】8.ref改$ref【02:47】9.新增数据【09:22】…...

编程日记 2023/5/3 21:34:00

Perf工具统计CPU性能

Perf 性能检测工具 Perf 是一个内置于Linux内核中的工具&#xff0c;用于性能分析和调优。它可以对系统的CPU使用情况、内存使用情况、磁盘I/O、网络I/O等进行监控和分析&#xff0c;并提供了丰富的分析和可视化工具&#xff0c;以帮助用户定位和解决性能问题。perf可以进行函…...

编程日记 2023/5/3 21:28:59

考验大家指针功底的时候到了：请问如何理解 (int*)1 + 1 ？

来&#xff0c;猜猜看&#xff0c;这里的执行结果是什么&#xff1f; 这是今天课上的一道理解题&#xff0c;给大家一点点思考时间。 &#xff08;心里有答案了再往下滑哦&#xff09; 5 4 3 2 1 . 答案是&#xff0c;报warning&#xff01;因为%d不是用来输出指针的哈…...

编程日记 2023/5/3 21:23:58

英语基础-介词

介词 方位介词 in:在…里面 Its in the box. 在盒子里 in my backpack 在背包里 in the tree 长在树上on:在…上面&#xff08;指与物体表面接触&#xff09; Its on the box. 在盒子上(和盒子接触) on the floor.在地板上 on the tree.在树上under:在…下面 Its unde…...

编程日记 2023/5/3 21:18:57

Linux进程通信：进程组 会话

1. 进程组 &#xff08;1&#xff09;概念&#xff1a;一个或多个进程的集合&#xff0c;也称为“作业”。 &#xff08;2&#xff09;父进程创建子进程时&#xff0c;默认属于同一个进程组。进程组ID为组长进程ID。 &#xff08;3&#xff09;进程组中只要有一个进程存在&a…...

编程日记 2023/5/3 21:13:55

【前端面经】JS-深浅拷贝

理解深浅拷贝 深浅拷贝问题的出现是由于JavaScript对不同类型的存储方式而引发的。 对于原始数据类型&#xff0c;它们的值是直接存储在栈内存中&#xff1b; 而复杂数据类型&#xff0c;则在栈内存中记录它的指针&#xff0c;而指针指向堆内存中真正的值。 所以对于原始数据类…...

编程日记 2023/5/3 21:08:53

【自然语言处理】实验2布置：Word2Vec TransE案例

NLP_class 学堂在线《自然语言处理》实验课代码报告&#xff0c;授课老师为刘知远老师。课程链接&#xff1a;https://www.xuetangx.com/training/NLP080910033761/1017121?channeli.area.manual_search。 持续更新中。 所有代码为作者所写&#xff0c;并非最后的“标准答案…...

编程日记 2023/5/3 21:03:52

Redis集合底层实现原理

目录 本章重点简单动态字符串SDS集合底层实现原理zipListlistPackskipListquickListKey 与Value中元素的数量 本章重点 掌握Redis简单动态字符串了解Redis集合底层实现原理 简单动态字符串SDS SDS简介 我们Redis中无论是key还是value其数据类型都是字符串.我们Redis中的字符…...

编程日记 2023/5/31 8:59:25

OVS常用命令与使用总结

OVS常用命令与使用总结 说明 在平时使用ovs中&#xff0c;经常用到的ovs命令&#xff0c;参数&#xff0c;与举例总结&#xff0c;持续更新中… 进程启动 1.先准备ovs的工作目录&#xff0c;数据库存储路径等 mkdir -p /etc/openvswitch mkdir -p /var/run/openvswitch …...

编程日记 2023/5/3 20:53:50

一以贯之：从城市网络到“城市一张网”

《论语里仁》中子曰&#xff1a;“参乎&#xff0c;吾道一以贯之”。 孔子所说的“一以贯之”&#xff0c;逐渐成为了中国文化与哲学的重要组成部分&#xff0c;指明事物发展往往需要以标准化、集约化、融合化作为目标。这种智慧在数字化发展中格外重要。从云计算、大数据技术模…...

编程日记 2023/5/3 20:48:48

【Java校招面试】基础知识（四）——JVM

目录 前言一、基础概念二、反射三、类加载器ClassLoader四、JVM内存模型后记 前言 本篇主要介绍Java虚拟机——JVM的相关内容。 “基础知识”是本专栏的第一个部分&#xff0c;本篇博文是第四篇博文&#xff0c;如有需要&#xff0c;可&#xff1a; 点击这里&#xff0c;返回…...

编程日记 2023/5/3 20:43:47

项目管理-计算专题（三点估算、PERT估算）

基本概念 通过考虑估算中的不确定性和风险&#xff0c;可以提高活动持续时间估算的准确性。这个概念源自计划评审技术(PERT)。PERT使用三种估算值来界定活动持续时间的近似区间: 最可能时间(tM)&#xff1a;基于最可能获得的资源、最可能取得的资源生产率、对资源可用时间的现…...

编程日记 2023/5/31 4:04:42

【华为OD机试 2023最新 】模拟商场优惠打折（C语言题解 100%）

文章目录 题目描述输入描述输出描述用例题目解析代码思路C语言题目描述 模拟商场优惠打折，有三种优惠券可以用，满减券、打折券和无门槛券。 满减券：满100减10，满200减20，满300减30，满400减40，以此类推不限制使用； 打折券：固定折扣92折，且打折之后向下取整，每次购…...

编程日记 2023/5/30 17:58:11

使用TrieTree（字典树）来实现敏感词过滤

使用TrieTree&#xff08;字典树&#xff09;来实现敏感词过滤 1. 字典树定义 字典树&#xff08;TrieTree&#xff09;&#xff0c;是一种树形结构&#xff0c;典型应用是用于统计&#xff0c;排序和保存大量的字符串&#xff08;但不仅限于字符串,如01字典树&#xff09;。…...

编程日记 2023/5/31 19:13:03

USB转串口芯片CH9101U

CH9101是一个USB总线的转接芯片&#xff0c;实现USB转异步串口。提供了常用的MODEM联络信号&#xff0c;用于为计算机扩展异步串口&#xff0c;或者将普通的串口设备或者MCU直接升级到USB总线。 特点 全速USB设备接口&#xff0c;兼容USB V2.0。内置固件&#xff0c;仿真标准串…...

编程日记 2023/5/30 23:01:57

Java语言介绍

Java是一种广泛使用的计算机编程语言&#xff0c;由Sun Microsystems公司于1995年推出。它是一个健壮的、面向对象的、跨平台的语言&#xff0c;被用于开发各种应用程序和系统&#xff0c;包括Web应用程序、移动应用程序、桌面应用程序、游戏以及企业级系统等。 Java具有许多优…...

编程日记 2023/5/3 20:18:40

终于把 vue-router 运行原理讲明白了（二）！！！

一、vue-router路由变化侦测 1.1 上一遍文章中&#xff0c;介绍了vue-router 的install 函数的内部实现&#xff0c;知道了能在this中访问$router 和视图更新的机制&#xff0c;文章链接终于把 vue-router 运行原理讲明白了&#xff08;一&#xff09;&#xff01;&#xff01…...

编程日记 2023/5/3 20:13:39

ChatGPT实现服务器体验沙箱

服务器体验沙箱 IT 人员在学习一门新技术时&#xff0c;第一个入门门槛通常都是"如何在本地安装并成功运行"。因此&#xff0c;很多技术的官网都会通过沙箱技术&#xff0c;提供在线试用的 playground 或者按步模拟的 tour。让爱好者先在线尝试效果是否满足预期&…...

编程日记 2023/5/30 17:59:23

【算法】刷题中的位运算

作者&#xff1a;指针不指南吗 专栏&#xff1a;算法篇 &#x1f43e;人类做题的过程&#xff0c;其实是暴搜的过程&#x1f43e; 文章目录 1.位运算概述2.位运算符3.位运算应用3.1整数的奇偶性判断3.2有关 2 的幂的应用3.3lowbit(x)返回x的最后一位13.4二进制数中1的个数3.5求…...

编程日记 2023/5/29 22:47:51

9.Java中异常处理机制是什么

Java的异常处理通过五个关键字来实现&#xff0c;分别是捕获异常&#xff1a;try&#xff0c;catchsfinally&#xff1b;声明异常&#xff1a;throws&#xff1b;抛出异常&#xff1a;throw 一&#xff1a;try&#xff0c;catch捕获异常二&#xff1a;finally回收资源三&#x…...

编程日记 2023/5/3 19:58:36

GeoTools实战指南: 叠加GeoTIFF与Shapefile图层生成截图

GeoTools实战指南: 叠加GeoTIFF与Shapefile图层生成截图 介绍 本教程将介绍如何使用GeoTools库在Java中将栅格数据（GeoTIFF）与矢量数据（Shapefile）叠加显示，并将结果保存为PNG格式的图片文件。我们将解析和分析 RasterDataRenderer 类，并了解其中的每个方法和对象。 准…...

编程日记 2023/6/1 3:00:24

nginx配置sh脚本远程执行一键安装

背景 本地多机重复操作某些shell指令&#xff0c;分步执行&#xff0c;很耗费时间&#xff0c; 需要远程一键部署&#xff0c;傻瓜化运维&#xff0c;更为通用安装。 即参考docker通用安装 sudo curl https://get.docker.com | sh - # sudo python3 -m pip install docker-co…...

编程日记 2023/5/3 19:48:32

Excel表格成绩排名全攻略，让你事半功倍！

在学校或公司中&#xff0c;我们经常需要对成绩进行排名。如果手动计算排名&#xff0c;不仅费时费力&#xff0c;而且容易出错。幸运的是&#xff0c;Microsoft Excel提供了一个简单而快速的方法来计算和显示排名。 在学校或公司中&#xff0c;成绩排名是一项重要的任务。使用…...

编程日记 2023/5/3 19:43:29

Docker 持久化存储 Bind mounts

Docker 持久化存储 Bind mounts Bind mounts 的 -v 与 --mount 区别启动容器基于bind mount挂载到容器中的非空目录只读 bind mountcompose 中使用 bind mount 官方文档&#xff1a;https://docs.docker.com/storage/bind-mounts/ Bind mounts 的 -v 与 --mount 区别 如果使用…...

编程日记 2023/5/30 12:00:40

LVS +Keepalived 高可用群集部署

一、LVSKeepalived 高可用群集 在这个高度信息化的 IT 时代&#xff0c;企业的生产系统、业务运营、销售和支持&#xff0c;以及日常管理等环节越来越依赖于计算机信息和服务&#xff0c;对高可用&#xff08;HA&#xff09;技术的应用需求不断提高&#xff0c;以便提供持续的…...

编程日记 2023/5/3 19:33:26

Kafka调优

生产者 参数名称描述bootstrap.serverskafka集群的地址key.deserializerkey的反序列化类&#xff0c;写全类名value.deserializervalue的反序列化类&#xff0c;写全类名buffer.memoryRecordAccumulator缓冲区总大小&#xff0c;默认32mbatch.size缓冲区一批数据最大值&#x…...

编程日记 2023/5/30 1:54:27

Debezium系列之：详细介绍Debezium2.X版本导出Sqlserver数据库Debezium JMX指标的方法

Debezium系列之：详细介绍Debezium2.X版本导出Sqlserver数据库Debezium JMX指标的方法 一、需求背景二、相关技术文章三、安装jmx_prometheus_javaagent四、Debezium2.X版本Sqlserver数据库jmx指标格式五、导出Debezium2.X版本Sqlserver数据库jmx指标方法六、Debezium2.X版本各…...

编程日记 2023/5/3 19:23:23

基于PWM技术的三相光伏逆变器研究（Simulink）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/5/3 19:18:22

南阳+网站建设/八百客crm登录入口

忽略标点空格大小写&#xff0c;判断字母是否回文&#xff1a; 如&#xff1a; A man, a plan, a can al: Panama&#xff0c;return true; python: class Solution:def isPalindrome(self, s):if not s:return Truel, r 0, len(s) - 1 #找到最左、右位置while l < …...

编程日记 2024/11/20 11:02:57

做网站和游戏是如何赚钱/百度排名服务

实现了一个简单的char二维数组函数&#xff0c;传入二维数组&#xff0c;打印二维数组的内容。 #include <cstdio>#define VEINKAPI __callback #define IN typedef int YNHANDLE;VEINKAPI void PrepareList(IN int fingercount, IN char **fingerlist, IN char** nameli…...

编程日记 2024/11/20 9:09:48

wordpress 面包屑导航修改/搜索引擎营销sem包括

mysql-cluster的问题棘手发布时间:2009-12-01 15:56:29来源:红联作者:skyuun我搭建了一个3台服务器所做的mysql-cluster集群集群版本是7.09G 操作系统是RH-5.2-32使用的是RPM包安装方式服务器为 MySQL-Cluster-gpl-server和MySQL-Cluster-gpl-client和MySQL-Cluster-gpl-storag…...

编程日记 2024/11/20 8:13:59

深圳建设网站哪家好/推广赚钱的微信小程序

一、了解never类型 ts的文档 在TypeScript中never就是Bottom Type&#xff0c;意味着一个不表示任何类型的类型,never不会是任何值&#xff0c;可能会被推断出来&#xff0c;或者自己定义避免出现逻辑上的异常 比如一个函数中是一个死循环或异常&#xff0c;这个函数则不会返回…...

编程日记 2024/11/20 8:07:48

重庆企业网站建设哪家专业/重庆seo怎么样

Wolfram Alpha创始人沃尔夫勒姆的自述 在Y Combinator创业学校的演讲 Stephen Wolfram 编者按&#xff1a; 斯蒂芬•沃尔夫勒姆&#xff08;Stephen Wolfram&#xff09;15岁就发表论文&#xff0c;但因为觉得学校学的东西无聊于17岁肄业于伊顿公学&#xff1b;17岁至18岁在牛津…...

编程日记 2024/11/20 6:02:32

四川广安网站建设/网络软文范文

前面唠叨 最近公司app中有些列表在滑动的时候会有卡顿现象&#xff0c;我就开始着手解决这些问题&#xff0c;解决问题之前首先要分析列表滑动的性能瓶颈在什么地方。因为之前不会正确使用TraceView这个工具&#xff0c;主要是看不懂TraceView界面下方数据指标的值代表什么意思…...

编程日记 2024/11/20 6:00:31