引入CSS样式表的三种方式
引入CSS样式表的三种方式
行内样式
- 通过标签的style属性来设置元素的样式，其基本语法格式如下：
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
内部样式表
- 将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head><style type="text/css">input{border:blue solid 1px;background-color: brown}a{border:blue solid 1px;background-color: brown}</style>
</head>
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
外部样式表
1、链接式
语法：
<head><link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>
注意： link 是个单标签
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
- href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
- type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
- rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
2、导入式
语法：
<style type="text/css">@import url("css文件路径");
</style>
三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内嵌样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
引入CSS样式表的三种方式相关推荐
- 引入css样式表的三种方式（全）
文章目录 1.行内式 2.内嵌式 3.链入式 1.行内式 行内式又称为内联样式,是通过标记的style属性来设置元素的样式,是通过标记的style属性来设置元素的样式,其基本语法格式如下: <标 ...
- html中引入css样式表的三种方式,css引用的几种方式是什么？
HTML怎么引用CSS样式?css引用的几种方式是什么?下面本篇文章就来给大家介绍一下在HTML中引用CSS样式的几种方法,希望对大家有所帮助. 1.行内式 在HTML标签中,使用style属性设置C ...
- css样式引入形式php,引入css样式表的四种方式介绍
一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. 这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签: 将样式规则写在标签之 ...
- html中引入CSS样式表的3种方式
1. 引入CSS样式表(书写位置) 1.1 三种样式表总结(位置) 样式表 优点 缺点 使用情况 控制范围 行内样式表 书写方便,权重高 没有实现样式和结构相分离 较少 控制一个标签(少) 内部样式表 ...
- 引入CSS样式表的三种方法
1.行内式 <标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名> 该语法中style是标记的属性,实际上任何H ...
- css样式表的三种方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例: <h1 style="color:red;">s ...
- CSS入门-创建CSS样式表的三种方式
一.三种方式 创建 CSS 样式表有三种方式: 1. 元素内嵌样式: 2. 文档内嵌样式3. 外部引入样式. 元素内嵌样式: 即在当前元素使用 style 属性的声明方式,"这是一段文本&q ...
- css 样式表的三种方式
如何插入样式表,插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 内部样式 ...
- 如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
最新文章
- 自由的胜利：多元化智能平台BCH
- [BZOJ3600]没有人的算术
- final、finally与finalize的区别
- 虚拟网关与正规网关的区别
- vCenter HA (至少VCSA6.5及以上）
- maven学习笔记第一节一-maven install 模块之间相互引用
- Wise UNpacker 0.91A [with Delphi Source]
- iOS开发证书申请教程
- 测试结果可视化翻译_流行测验：此民意调查结果可视化有什么问题？
- mysql错误1197_mysql主从不同步问题 Error_code: 1197
- 全球与中国压电比例阀市场深度研究分析报告
- mysql vsize_Oracle 中的Userenv（）
- Excel图形转入CorelDRAW技巧
- 使用 eclipse 编写 xtend
- 【Java 数据结构】树和二叉树
- 无穷小量究竟是否为零
- 主机上连接到 vmware虚拟机的三种方式
- 从《青云志》看完美世界如何玩转影游联动，打造S级手游
- Glide加载圆角图片不显示问题
- 前端js经典面试题目