CSS之引入样式
CSS引入样式
内部样式
内嵌式是将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中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略。
行内式(内联样式)
内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。
外部样式表(外链式)
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
注意: link 是个单标签哦!!!
该语法中,link标签需要放在head头部标签中,并且必须指定link标签的三个属性,具体如下:
href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
三种样式表总结(位置)
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
CSS之引入样式的更多相关文章
- CSS(三):引入样式和优先级
CSS的引入样式总共有三种:行内样式(内联样式表).内部样式表.外部样式表.下面分别来介绍这三种样式. 一.行内样式 行内样式也叫内联样式,使用style属性引入CSS样式.看下面的示例: <! ...
- HTML&CSS基础学习笔记1.12—引入样式表
引入样式表 我么都知道HTML是网页内容的载体,CSS样式是表现,就像网页的外衣.如何让网页披上这层外衣呢? 这个时候就需要用<link>标签了,它起到将CSS样式链入页面的作用. < ...
- CSS学习摘要-引入样式
CSS学习摘要-引入样式 注:主要是摘录自MDN 网络开发者这个网站的. CSS 实际上如何工作? 当浏览器显示文档时,它必须将文档的内容与其样式信息结合.它分两个阶段处理文档: 浏览器将 HTML和 ...
- CSS的引入方式和样式
CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...
- css样式中@import引入样式
css样式中@import引入样式 学习了:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html
- 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...
- CSS 四种引入样式表优缺点分析
CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立 ...
- CSS的引入方式
再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...
- CSS基础-引入方法,选择器,继承
一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:<div style="行内式</div> 2.嵌入 ...
随机推荐
- 2015 浙江省赛 Beauty of Array (思维题)
Beauty of Array Edward has an array A with N integers. He defines the beauty of an array as the summ ...
- cassandra安装配置
准备运行环境1.1 cassandra可以安装在windows和linux下,本例子安装在centos6.7的环境下.1.2 关闭防火墙.或者开放9042(默认的CQL本地服务端口).9160(默认的 ...
- mybatis学习7 实战项目
自己写一个实战项目,最好和hibernate做对比.
- CDM中,实体与实体快捷方式之间的联系不能重复,否则会造成外键重复
例如机场实体和跑道实体,例如: 在机场包中,跑道实体作为快捷方式出现,机场实体与跑道快捷方式实体间有连线关系,然而 在跑道包中,情况相反,但二者间也有连线.(模型原样) 要注意的是,虽然在两个包中都有 ...
- 11-15SQLserver基础--数据库之范式理论
数据库的设计理论与思路 在设计数据库的时候,有一个著名的设计理论---范式理论. 1.内容: 第一范式:每一列的数据类型要单一,必须要统一: 第二范式:在设计主键的时候,主键尽量更能体现表中的数据信息 ...
- Python之条件语句以及循环
Python代码的缩进规则.具有相同缩进的代码被视为代码块 缩进请严格按照Python的习惯写法:4个空格,不要使用Tab,更不要混合Tab和空格,否则很容易造成因为缩进引起的语法错误. 注意: if ...
- Android 图片相关
从asset文件夹中读取Bitmap //从asset文件夹中取文件 private Bitmap getImageFromAssetFile(String fileName){ Bitmap ima ...
- 解决html中的乱码问题
1.最简单粗暴的方法就是加一个meta标签,不过值得我们注意的是我们的meta标签是与我们的head标签是同一级的,所以千万不能将meta标签加到我们的head标签中. <meta http-e ...
- css代码结构
整个文档结构如下: 一般性样式 主体样式 reset样式 链接 标题 其他元素 辅助样式 表单 通知和错误 一致的条目 页面结构 标题.页脚和导航 布局 其他页面结构元素 页面组件 各个页面 覆盖
- android官方手册学习笔记
数据存储 在提交sharedpreference 修改的时候,用apply代替commit 避免UI线程阻塞 设备兼容 系统会自动根据当前屏幕的大小等,在相应的文件夹里去找资源,如large等等 ...