CSS的引入方式----行内式、嵌入式、链接式

CSS基础总结 都是自己学习时候总结的,如有错误以及需要改进的地方,请大家尽管指出,共同进步,谢谢。 1. CSS语法 1.1 行内式(内联样式) 概念: 称行内样式、行间样式. 是通过标签的style属性来设置元素的样式 语法格式: <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名> 注意: style标签一般位于head... 阅读详情

CSS的引入方式

按照CSS样式书写的位置(或引入的方式),CSS样式表可以分为三大类
1、行内样式表(行内式)
2、内部样式表(嵌入式)
3、外部样式表(链接式)

一、内部样式表(嵌入式)
(1)是写到html页面内部,是将所有的CSS代码抽取出来,单独放到一个style标签中
(2)style理论上可以放到html的任何一个地方,但通俗的约定放在文档的head标签中
通过此种方式,可以方便控制当前整个页面中的元素样式设置
优缺点:代码结构清晰,但没有实现结构与样式完全分离

还有一种导入式
在内联样式中通过 @import 方法,导入其他样式,提供给当前页面使用。
使用导入样式的缺点
1、导入样式,只能放在 style 标签的第一行,放其他行则会无效。
2、@import 声明的样式表不能充分利用浏览器并发请求资源的行为,其加载行为往往会延后触发或被其他资源加载挂起。
3、由于 @import 样式表的延后加载,可能会导致页面样式闪烁。

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

 <p style="color: pink;font-size: 20px">云鬓花颜金步摇,芙蓉帐暖度春宵。</p>

style其实就是标签的属性,可以控制当前的标签样式。

使用行内样式的缺点:
1、样式不能复用。
2、样式权重太高,样式不好覆盖。
3、表现层与结构层没有分离。
4、不能进行缓存,影响加载效率。

三、外部样式表(链接式)
实际开发中采用,适合于样式比较多的情况

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

引入外部样式表分为两步:
1、新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中
(css文件里面只有样式,没有标签)
2、在HTML页面中,使用标签引入这个文件

<link rel="stylesheet" href="css文件路径">
CSS在页面中使用的三种方式:行内样式、内嵌式样式表、链接式样式表 CSS样式如何在页面中使用,包含三种方式:行内样式、内嵌式样式表、链接式样式表。行内样式是比较直接的一种样式,直接定义在 HTML 标签之内,并通过 style 属性来实现。这种方式比较容易学习,但是灵活性不强。内嵌式样式表就是使用...标签将 CSS 样式包含在页面中的,内嵌式样式表的形式没有行内样式表现得直接,但页面会更加规则。 阅读详情

相关推荐

CSS嵌入方式

1 什么是CSS?CSS的作用是什么? CSS英文全称:Cascading Style Sheet,是层叠样式表,不属于编程语言; CSS的作用:CSS是HTML的化妆品,可以让HTML变的更炫酷,是专门来修饰HTML的 CSS在哪里编写?CSS代码是嵌入在HTML中的,没有HTML代码,CSS代码是无效的 2 CSS主要掌握以下内容: 4.1 CSS注释:在sty...

乘风晓栈的博客 2914

css知识点1小总结

样式表优点缺点使用情况控制范围行内样式表书写方便,权重高没有实现样式和结构相分离较少控制一个标签(少)内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面(中)外部样式表完全实现结构和样式相分离需要引入最多,强烈推荐控制整个站点(多)

weixin_57689217的博客 3030

深信服桌面云实战:从零部署到高效运维的关键配置指南

本文提供了一份深信服桌面云从零部署到高效运维的实战指南。内容涵盖项目启动阶段的资源、网络与存储规划,详细演示了VMP与VDC平台的安装与对接,并深入讲解了制作虚拟机模板、配置用户体系、优化终端策略等核心步骤。最后,分享了包括CPU公平分配、智能调度在内的关键性能调优与高阶运维技巧,旨在帮助管理员构建稳定、高效的云桌面环境。

blockchain9miner的博客 451

JavaScript特点、三种引入方式(行内、内嵌、外部)、输入输出和变量的定义、常量

输入方式: prompt输入输出方式:向body内输出内容向控制台内输出内容alert弹窗输出内容alert和prompt会在页面渲染前执行。所以先执行alert和promt,再执行document.write变量是区分大小写的。如let age和let Age是两个不同的变量var目前很少使用,因为:由于变量提升,可以先使用,再声明var声明过的变量可以重复声明全局变量、没有块级作用域等

Bulut0907 2701

gtsam官方文档: The new IMU Factor学习笔记

gtsam官方文档:The new IMU Factor 本文为gtsam imu预积分文档学习笔记,为gtsam基于切向量实现的imu预积分的理论基础。 导航状态 定义导航状态为 Xbn={Rbn,Pbn,Vbn}X^n_b=\{R^n_b,P^n_b,V^n_b\}Xbn​={Rbn​,Pbn​,Vbn​} 上角标n:导航(navigation)坐标系 下角标b:载体(body)坐标系 下文均省略上下标 矢量场与微分方程 对于导航问题我们用如下微分方程描述 X˙(t)=F(t,X)\dot X(t)

南柯一梦的博客 1607

解析vCard 3.0:提取电子名片中的姓名

N:LastName;FirstName;;;END:VCARD和END:VCARD标记数据块的开始和结束。N字段存储结构化姓名(分号分隔)。FN字段为直接可读的显示名称。其他字段如TELEMAIL等保存联系信息。

qq_45797625的博客 2777

CSS的引入方式:行内样式表(行内式)、内部样式表(嵌入式)、外部样式表(链接式)

CSS引入方式 内部样式表: 内部样式表(内嵌样式表)是写到 html 页面内部。是将所有的CSS代码抽取出来,单独放到一个 <style>标签中。 <head> <style> div { color: red; font-size: 12px; } </style> </head> <body> <div>开心</div> </body> &

qq_44156869的博客 1万+

【顾邦小讲堂】第二十四期 电源环路测试从入门到精髓:一文掌握环路测试原理与电压注入点选择依据

电源环路测试是评估开关电源、线性电源等闭环系统稳定性的核心手段,直接关系到电源的稳定性、输出精度、动态响应、抗干扰能力甚至可靠性

GBupupup的博客 2110

【css教程】web前端入门学习 css(1)(类选择器、id选择器、css引入方式:行内式、嵌入式、链接式)

黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录

Dontla的博客 474

[xboard-ok210] 44 s5pv210开发板介绍和对比

文章目录前言四大S3C6410提供商友坚开发板UT-S5PV210华天正(润尔)real210飞凌开发板ok210九鼎x210友善之臂开发板tiny210mini210smart210天嵌开发板tq210sate210xboardxboardxboard之ok210 前言 四大S3C6410提供商 友坚开发板 UT-S5PV210 华天正(润尔) real210 飞凌开发板 ok210 九鼎 x210 友善之臂开发板 tiny210 mini210 smart210 天嵌开发板 tq210 sate210

鹰之翔 286

lp–mspm0g3507开发板进入低功耗模式怎么退出?烧程序烧着烧着就进来了,跳线帽没动过,且报错:Texas Instruments Debugger Error: DAP Co...如何解决?

🏆本文收录于 《全栈Bug调优(实战版)》 专栏,该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因,并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者,还是拥有多年项目经验的资深工程师,本专栏都将为你提供一条系统化、高质量的问题排查与优化路径,助力你加速成长,攻克技术壁垒,迈向技术价值最大化与职业发展的更高峰🚀!

**My Coding Family** 1568

html 中加css,怎么在html增加css

1.行内式行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。1...此处写CSS样式缺点是对于一个包含很多网页的网站,在每个网页中使用嵌入式,进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。3.导入式将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,123@import"mystyle.css"; //此处要注意.cs...

weixin_30583711的博客 264

Python爬虫实战:用最新技术高效下载摄影网站图片

本文将深入探讨如何利用Python最新技术栈构建一个功能完整的摄影网站图片爬虫。我们将使用异步编程、智能反爬策略和现代化工具,实现高效、可靠的图片下载系统。高性能异步架构:使用asyncio实现高并发下载智能反爬策略:支持多种反爬措施和浏览器模拟多网站适配:可解析多种摄影网站结构数据管理:完整的下载记录和统计功能扩展性强:支持代理、分布式等高级功能用户友好:提供进度显示和详细日志。

2201_76125261的博客 1644

css笔记基础(css引入方式、选择器、伪类、基本属性)

css入门系列,引入方式、选择器、伪类等概念

m0_46479453的博客 886

马达种类全解析:VCM、Stepper、Piezo 在手机相机中的驱动原理与工程差异

在现代手机影像系统中,马达承担着核心成像组件的动态调节任务,如自动对焦(AF)、光学防抖(OIS)以及变焦调节。目前主流采用三类驱动器件:VCM(Voice Coil Motor)、Stepper(步进马达)、Piezo(压电马达)。不同马达方案在结构复杂度、响应速度、功耗、驱动方式与模组厚度适配等方面差异显著,对成像系统的性能表现有直接影响。本文将结合最新旗舰设备的应用现状,系统剖析这三类驱动马达的工作原理、架构特点与工程应用经验,为工程实践中选型与调试提供参考。

努力分享一些人工智能、计算机视觉、影像等相关的知识干货! 3775

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

前端三大件速成 02 CSS(1)CSS是什么、CSS的四种引入方式、CSS的选择器和优先级、继承

前端三大件速成 02 CSS(1)CSS是什么、CSS的四种引入方式、CSS的选择器和优先级、继承

weixin_42830015的博客 1418

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

CSS四种引入方式

CSS概述css是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。一、CSS的四种引入方式1、行内式行内式是在标签的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用&lt;p style="background-color: aqua;font-family: 'Arial Narrow'"&...

Henry_Lv的博客 1320

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

CSS的导入方式

CSS的导入方式 四种CSS样式的引入方式 准备 1.首先准备一个html文件:test.html,不建议使用记事本创建文件,建议使用Notepad++来创建并编辑文件,注意编码格式为:以UTF-8无BOM格式编码,否则会出现中文乱码,内容如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=

qq_47897078的博客 1832

四种CSS样式的引入方式

准备 1.首先准备一个html文件:test.html,不建议使用记事本创建文件,建议使用Notepad++来创建并编辑文件,注意编码格式为:以UTF-8无BOM格式编码,否则会出现中文乱码,内容如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm...

weixin_33979363的博客 883

在HTML中引入CSS的方法几种方法

摘自:http://blog.163.com/dingchunkun_2006@126/blog/static/17149215120113223546835/ 在HTML中引入CC有好几种方法,按优先级排列分别是:1、行内式,2、嵌入式,3、导入式和链接式 在HTML中引入CSS的方法有以下几种: 1)行内式 比如:                            

li_qcxy的专栏 3360

网页中引入引入css四种方式

在html网页中引入引入css主要有以下四种方式: (1)行内式 <p style=”color:red”>网页中css的导入方式</p> (2)嵌入式 <style type=”text/css”> P{ color:red } </style> 嵌入式一般写在head中,对于单个页面来说,这种方式很方便。 (3)导入式 <!-- 导入外...

weixin_44297627的博客 639

css一些常用标签

一、四种引入方式 1、行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。 2、嵌入式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下: <head> ...

老坛酸菜 911

css基础2-四种引入方式

​1.行内式​ 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。 2.嵌入式​ 嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下: 3 链接式​ 将一个.css文件引入到HTML文件中 4.导入式​ 将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,标记也...

242

CSS引入方式

CSS : cascading style sheet 层叠样式表 行内式——在标签style属性中直接使用 <div style="height=30px;"></div> 嵌入式——使用style标签书写css代码 <style> p { font-size: 12px; } </style> style标签一般放在head标签内部 链接式——使用link标签引入css文件 <link rel="stylesheet" typ

weixin_43366084的博客 278

HTML中引入CSS的方式

1.行内式行内式俗称行内样式,即在标签的Style属性中设置CSS样式&lt;h1  style="font-size:18px"&gt;示例&lt;/h1&gt;2.嵌入式嵌入式俗称内部样式,即使用&lt;style&gt;标签,将对页面中各种元素设置,集中写在&lt;head&gt;.....&lt;/head&gt;之间&lt;head&gt;&lt;meta http-equi

捣蛋的博客 407

CSS初识

CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 ''' selector { property: value; property: value; ... property: value ...

anhui5201314456的博客 103
上一篇: CSS Fonts字体属性
下一篇: CSS复合选择器---后代选择器、子选择器、并集选择器、伪类选择器
whileqq
博客等级 码龄7年 1粉丝 14原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值