html中引入CSS样式表的3种方式
1. 引入CSS样式表(书写位置)
1.1 三种样式表总结(位置)
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
1.2 行内式(内联样式)
概念:
称行内样式、行间样式.
是通过标签的style属性来设置元素的样式
其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
实际上任何HTML标签都拥有style属性,用来设置行内式。
- 案例:
<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
- 注意:
- style其实就是标签的属性
- 样式属性和值中间是
:
- 多组属性值之间用
;
隔开。 - 只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余
- 缺点:
- 没有实现样式和结构相分离
1.3 内部样式表(内嵌样式表)
概念:
称内嵌式
是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
其基本语法格式如下:
<head>
<style type="text/CSS">选择器(选择的标签) { 属性1: 属性值1;属性2: 属性值2; 属性3: 属性值3;}
</style>
</head>
<style>div {color: red;font-size: 12px;}
</style>
注意:
- style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。
- type=“text/css” 在html5中可以省略。
- 只能控制当前的页面
缺点:
没有彻底分离
1.4 外部样式表(外链式)
概念:
称链入式
是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中,
通过link标签将外部样式表文件链接到HTML文档中
其基本语法格式如下:
<head><link rel="stylesheet" type="text/css" href="css文件路径">
</head>
- 注意:
- link 是个单标签
- link标签需要放在head头部标签中,并且指定link标签的三个属性
属性 | 作用 |
---|---|
rel | 定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。 |
type | 定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。我们都可以省略 |
href | 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。 |
html中引入CSS样式表的3种方式相关推荐
- html中引入css样式表的三种方式,css引用的几种方式是什么?
HTML怎么引用CSS样式?css引用的几种方式是什么?下面本篇文章就来给大家介绍一下在HTML中引用CSS样式的几种方法,希望对大家有所帮助. 1.行内式 在HTML标签中,使用style属性设置C ...
- css样式引入形式php,引入css样式表的四种方式介绍
一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. 这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签: 将样式规则写在标签之 ...
- 如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
- 引入CSS样式表的三种方式
引入CSS样式表的三种方式 行内样式 通过标签的style属性来设置元素的样式,其基本语法格式如下: <h1 style="color:red;">style属性的应用 ...
- 引入css样式表的三种方式(全)
文章目录 1.行内式 2.内嵌式 3.链入式 1.行内式 行内式又称为内联样式,是通过标记的style属性来设置元素的样式,是通过标记的style属性来设置元素的样式,其基本语法格式如下: <标 ...
- 引入CSS样式表的三种方法
1.行内式 <标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名> 该语法中style是标记的属性,实际上任何H ...
- 网页中使用CSS样式表的五种方法
一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: < ...
- css样式表的三种方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例: <h1 style="color:red;">s ...
- CSS入门-创建CSS样式表的三种方式
一.三种方式 创建 CSS 样式表有三种方式: 1. 元素内嵌样式: 2. 文档内嵌样式3. 外部引入样式. 元素内嵌样式: 即在当前元素使用 style 属性的声明方式,"这是一段文本&q ...
最新文章
- android 结束if循环_Android 消息机制(Handler + MessageQueue + Looper)
- 132. 小组队列【队列 模拟】
- python从官网安装库函数的方法;
- Spring @Conditional
- linux-查看文件相关命令-cat-more-less-head-tail
- Cloudera CDH 5.1版本的Hive与LDAP-2.4.44集成
- java,andoid安卓去掉替换字符串中的空字符空格换行等
- 中的实践 中兴_中兴数字化转型:做“极致的云公司” 用5G制造5G
- 动态链接库的设计(DLL)
- HTML:表单学习笔记
- ps自带磨皮滤镜插件Portraiture3PS版
- 【概率论与数理统计】猴博士 笔记 p24-25 条件概率密度函数、求两个随机变量形成的函数的分布
- linux的su参数,linux su命令参数及用法详解
- Mybatis自动生成代码插件generator
- 三角形接法永磁同步电机的FOC+SVPWM控制
- 基于matlab的漏电保护器仿真,基于MATLAB仿真的高压断路器振动信号故障诊断
- 插值查找(两种方法)
- 【树莓派】树莓派使用python、E16 GPRS模块向MQTT服务器传输数据
- 引用android-support-v7-appcompat库文件出错的问题
- 推荐一款图片放大不失真的软件-PhotoZoom
热门文章
- android之NFC基础技术分享
- vue3 引入天地图
- additional、extra与supplementary 区别
- 用VMware Converter实现Esxi5.0到Esxi6.0主机上的虚拟机迁移(V2V)
- Rockchip RK3588 kernel dts解析之PCIe
- 数据库设计(ER模型和UML模型及转换为关系模型的公式)
- Linux运维遇见Device /dev/sdb excluded by a filter如何解决
- abb机器人负载配置设定_ABB机器人的设置
- 计算机上的enc代表什么,对讲机上的ENC/SQL,PWR,MONI,PTT按扭都是什么意思?
- 手把手教你使用Python实现推箱子小游戏(附完整源码)