CSS三种样式表:行内样式表、内部样式表、外部样式表
目录
一、CSS三种样式表
1、内部样式表
2、行内式(内联样式)
3、外部样式表(外链式)
二、三种样式表的对比
三、CSS样式表规则
一、CSS三种样式表
1、内部样式表
2、行内样式表(内联式)
3、外部样式表(外链式)
1、内部样式表
内嵌式:将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:
<head>
<style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。
type=“text/CSS” 在html5中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略。
2、行内式(内联样式)
内联样式:又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。
3、外部样式表(外链式)
链入式:将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:
<head><link href="CSS文件的路径" rel="stylesheet" />
</head>
注意: link 是个单标签哦!!!
该语法中,link标签需要放在head头部标签中,并且必须指定link标签的三个属性,具体如下:
- href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
- type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
- rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
二、三种样式表的对比
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
三、CSS样式表规则
使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,具体格式如下:
1. 选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
2. 属性和属性值以“键值对”的形式出现。
3. 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
4. 属性和属性值之间用英文“:”连接。
5. 多个“键值对”之间用英文“;”进行区分。
CSS三种样式表:行内样式表、内部样式表、外部样式表相关推荐
- 怎么修改html行内样式表,原生JS获取及设置CSS样式-1.行内样式
面试中,应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧,让我给大家总结一下~ HTML中样式的写法不外乎以下四种方式 行内样式 假装有内容 head内部样式 div { widt ...
- CSS的引入方式:行内样式表(行内式)、内部样式表(嵌入式)、外部样式表(链接式)
文章目录 CSS引入方式 内部样式表 行内样式表 外部样式表 CSS引入方式总结 CSS引入方式 内部样式表 内部样式表(内嵌样式表)是写到 html 页面内部.是将所有的CSS代码抽取出来,单独放到 ...
- 9—css的引入方式(行内样式表、内部样式表、外部样式表)
按照css样式书写的位置(或者引入的方式),css样式表可以分为三大类: 行内样式表(行内式) 内部样式表(嵌入式) 外部样式表(链接式) 行内样式表 行内样式表(内联式)是在元素标签内部的style ...
- 将html中的style内联样式转换为行内样式
需求:因为有一段html需要传递到其他的地方,内联样式可能与其他的样式冲突,所以要将写在style标签中的内联样式转换为行内样式 思路: /*** 参数接收html字符串* 将内联样式表里面的样式改为 ...
- CSS基础 外部样式表 内嵌样式表 行内样式表
CSS简述:css是Cascading Style Sheet的缩写,直译过来为层叠样式表或级联样式表,简称样式表.利用css样式表定义页面样式,将会大大减少设计工作量.一些好的css样式表的建立,可 ...
- css的引入方式:行内样式表、内部样式表、外部样式表
内部样式表:(内嵌样式表)是写到html页面内部,是将所有的css代码抽取出来,单独放到一个<style>标签中. <!DOCTYPE html><html lang=& ...
- CSS的基础概念、行内样式(内嵌样式)、内部样式(内联样式)、外部样式(外联样式)、字体相关属性及相关练习的案例
CSS学习笔记 CSS的基本概念 Cascading Style Sheet层叠样式表 标签:<p> <div>-之类的标签 使用方式:直接输入标签名 类(class):cla ...
- 修改element内置样式-包含行内样式
关于修改element内置样式 首先自定义class,列如:<div class="main">element的内容</div> 第1种.main > ...
- CSS简介、行内样式、内部样式、外部样式、注释、引入其他CSS文件
CSS的发展历程: 起初是没有css的,只有少量样式是可以写在html标签中,这样代码格外显得臃肿,此时CSS就出现了. 初识CSS: CSS(Cascading Style Sheets),被称为C ...
- CSS的三种引入方式:外部样式、内部样式和行内样式
CSS的三种引入方式:外部样式.内部样式和行内样式 外部样式 链接式:link标签 导入式:@import 链接式与导入式的区别 内部样式 行内样式 样式优先级 外部样式 即CSS代码保存在外部,HT ...
最新文章
- c++输出方块_C/C++编程笔记:DFS 深度优先搜索的基本思想,含实例讲解
- Redis (一)Redis简介、安装部署
- 50 种不同编程语言的“Hello World”,你知多少?
- bootstrap --- 表单
- linux系统信息查看命令
- BOM中的那点事-window(二)
- debian如何安装wifi驱动_装机人员是如何离线为Win7、Win10、XP安装驱动的?小编告诉你…...
- org.apache.batik.transcoder.TranscoderException: null
- ASP.NET商贸进销存管理系统源码(带数据库文档)源码免费分享
- 如何修改dns服务器ip,如何修改DNS服务器IP地址
- 【Leetcode竞赛杯】LCP 03. 机器人大冒险
- BOSS直聘新财报:用户、技术两手抓
- 鲁宾逊微积分与“知识共享”,携手相伴进入中国
- mysql 事件统计_mysql事件统计之PERFORMANCE_SCHEMA基础详解
- 风火之旅 需要的信息保存
- 2022新赛点:传统车企要向新势力的舒适圈开炮?
- 端口扫描 -- PortScan
- python利用cookie登录百度的代码_使用 cookie 登录百度
- 2021年全球路标漆收入大约3022百万美元,预计2028年达到4112百万美元
- 如何在QQ群里做广告进行推广【转】