9—css的引入方式(行内样式表、内部样式表、外部样式表)
按照css样式书写的位置(或者引入的方式),css样式表可以分为三大类:
- 行内样式表(行内式)
- 内部样式表(嵌入式)
- 外部样式表(链接式)
行内样式表
行内样式表(内联式)是在元素标签内部的style属性中设置css样式。适合修改简单样式
<div style="color: red; font-size: 12px;">zmy会成功的</div>
- style其实就是标签的属性
- 在双引号中间,书写要符合css规范
- 不推荐使用
- 使用行内样式表设定css,通常也被称为行内式引入
内部样式表
内部样式表(内嵌样式表)是写到html页面内部,是将所有的CSS代码抽取出来,单独放到一个<style>标签中。
<head>
<style>
div {
color: red;
font-size: 12px;
}
</style>
</head>
- <style>标签理论上可以放到html文档的任何地方,但一般会放在文档的<head>标签中
- 通过此种方式,可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰,但是并没有实现结构与样式完全分离
- 练习时经常使用
外部样式表
实际开发中都是外部样式表,适合样式比较多的情况,核心是:样式单独写到css文件中,之后把css文件引入到html页面中使用
引入外部样式表分为两步:
- 新建一个后缀名为.css的样式文件,把所有css代码都放入此文件中
- 在HTML页面中,使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
例如:<link rel="stylesheet" href="zmy.css">
属性 | 作用 |
rel | 定义当前文件与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件 |
href | 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径 |
- 使用外部样式设定CSS,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式
CSS引入方式总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
行内样式表 | 书写方便、权重高 | 结构样式混写 | 较少 | 控制一个标签 |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,吐血推荐 | 控制多个页面 |
9—css的引入方式(行内样式表、内部样式表、外部样式表)相关推荐
- H5 CSS引入方式 行内样式表
引入方式一:行内样式表,通过标签的style属性设置 <html> <head> <meta charset="utf-8"> <titl ...
- CSS引入方式-内部样式表、行内样式表、外部样式表
CSS引入方式 内部样式表(嵌入式) 内部样式表就是将CSS在写html页面内部.是将所有的CSS代码抽取出来,单独放到一个<style>标签中.例如: <style>div{ ...
- CSS三种样式表(内部样式表、行内样式表、 外部样式表)
引入CSS样式表(书写位置) CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表(内嵌式) 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义 ...
- CSS三种样式表及其使用(内部样式表,行内样式表,外部样式表)
1.内部样式表 内部样式表是将CSS代码写在HTML文档的head标签中,并且用style标签定义 <head> <style type="text/css" ...
- 004---css样式表(内部样式表、行内样式表、外部样式表)
一.内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部中,并且用style标签定义,基本语法如下: 语法中,style标签一般位于head标签中title标签之后,也可以放在HTML文 ...
- css的引入方式:行内样式表、内部样式表、外部样式表
内部样式表:(内嵌样式表)是写到html页面内部,是将所有的css代码抽取出来,单独放到一个<style>标签中. <!DOCTYPE html><html lang=& ...
- CSS基础 外部样式表 内嵌样式表 行内样式表
CSS简述:css是Cascading Style Sheet的缩写,直译过来为层叠样式表或级联样式表,简称样式表.利用css样式表定义页面样式,将会大大减少设计工作量.一些好的css样式表的建立,可 ...
- 引入方式之行内样式表(CSS、HTML)
引入方式之行内样式表(CSS.HTML) <!DOCTYPE html> <html lang="en"><head><meta char ...
- CSS的引入方式:行内样式表(行内式)、内部样式表(嵌入式)、外部样式表(链接式)
文章目录 CSS引入方式 内部样式表 行内样式表 外部样式表 CSS引入方式总结 CSS引入方式 内部样式表 内部样式表(内嵌样式表)是写到 html 页面内部.是将所有的CSS代码抽取出来,单独放到 ...
最新文章
- FPGA之道(35)Verilog中的并行与串行语句
- poj 1637(混合图求欧拉回路)
- pytorch torch.Tensor.new_ones()(返回一个与size大小相同的用1填充的张量。 默认返回的Tensor具有与此张量相同的torch.dtype和torch.device)
- 第三次学JAVA再学不好就吃翔(part83)--泛型类
- 「第一弹」电子设计大赛应该准备什么?
- 基于 IdentityServer3 实现 OAuth 2.0 授权服务【密码模式(Resource Owner Password Credentials)】...
- chrome github上不去 mac_码农大叔打赌,github上快速搜索优质开源项目,这些技能你不懂?...
- Windows下rocketmq mqnamesrv.exe 启动成功,但是mqbroker.exe启动失败
- 计算概论(A)/基础编程练习1(8题)/3:晶晶赴约会
- Oracle数据库SqlLoad常用技巧总结word版
- NP、OSPF 故障排除
- 【渝粤教育】广东开放大学 建筑设备 形成性考核 (33)
- 钽电容器为什么被要求降额到额定值的1/3使用
- 计算机用户授权原则,涉密信息系统严格设定用户权限,按照什么密级防护和什么授权管理的原则...
- 电脑键盘指法的正确练习步骤
- java graphics2d renderinghints_java - Graphics2D错误 - 堆栈内存溢出
- Excel中的格式刷如何使用?
- Python版股市情感分析源代码,提取投资者情绪,为决策提供参考
- Docker容器挂载
- 跟着团子学SAP PS—项目的成本流 F-02/CJ20N/CJ88/KKA2