CSS三种样式表及其使用(内部样式表,行内样式表,外部样式表)
1.内部样式表
内部样式表是将CSS代码写在HTML文档的head标签中,并且用style标签定义
<head>
<style type="text/css">
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
<head>
(1)style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方.
(2)type="text/CSS"在HTML中可以省略.
2.行内式(内联样式)
通过标签的style属性来设置元素的样式
<标签名 style = "属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名>
(1)语法中style是标签的属性,任何标签都拥有style属性,用来设置行内式.
(2)属性和值书写规范与CSS样式规范相同,行内式只对其所在的标签及嵌套在其中的子标签起作用.
3.外部样式表(外链式)
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
注意:link是单标签
link标签需要放在head头部标签中,并且必须指定link标签的三个属性
(1)href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径
(2)type:定义所链接文档的类型,在这里需要指定为"text/css",表示链接的外部文件为CSS样式表。
(3)rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
样式表总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
CSS样式表规则
使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,具体格式如下:
1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
CSS三种样式表及其使用(内部样式表,行内样式表,外部样式表)相关推荐
- CSS基础(样式声明、引用(行内样式、内部样式、外部样式、导入样式)、样式优先级)
目录 什么是CSS 为什么使用css css样式规则 css引用(行内.内部.外部link链入.导入式@import) css三种使用方法的区别 ***网页三大元素*** ***什么是CSS*** ...
- html5中行内样式写法,react怎么写行内样式?
react怎么写行内样式?下面本篇文章给大家介绍一下react 行内样式几种写法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. react 行内样式几种写法 法一 这是评论列表组件 ...
- 在vue中怎么写行内样式高_vue v-bind绑定行内样式
使用 v-bind 指令去绑定行内样式,即使用 v-bind:style 或者 :style 的方式去动态绑定行内样式. style中直接定义样式 下面实例中我们将直接在 v-bind:style 属 ...
- web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
- CSS三种样式表:行内样式表、内部样式表、外部样式表
目录 一.CSS三种样式表 1.内部样式表 2.行内式(内联样式) 3.外部样式表(外链式) 二.三种样式表的对比 三.CSS样式表规则 一.CSS三种样式表 1.内部样式表 2.行内样式表(内联式) ...
- CSS三种样式表 内部样式表、行内部样式表、外部引用
目录 CSS三种样式表 1.内部样式表 2.行内部样式表 3.外部引用: CSS三种样式表 1.内部样式表 2.行内样式表(内联式) 3.外部样式表(外链式) 1.内部样式表 内嵌式:将CSS代码集中 ...
- CSS三种样式表(内部样式表、行内样式表、 外部样式表)
引入CSS样式表(书写位置) CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表(内嵌式) 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义 ...
- CSS的三种引入方式:外部样式、内部样式和行内样式
CSS的三种引入方式:外部样式.内部样式和行内样式 外部样式 链接式:link标签 导入式:@import 链接式与导入式的区别 内部样式 行内样式 样式优先级 外部样式 即CSS代码保存在外部,HT ...
- CSS的引入方式:行内样式表(行内式)、内部样式表(嵌入式)、外部样式表(链接式)
文章目录 CSS引入方式 内部样式表 行内样式表 外部样式表 CSS引入方式总结 CSS引入方式 内部样式表 内部样式表(内嵌样式表)是写到 html 页面内部.是将所有的CSS代码抽取出来,单独放到 ...
- css引入样式-行内样式、内嵌样式和外链样式
css初识及引入样式 概念:css通常称为css样式表或层叠样式表 作用: - 主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局和外观 ...
最新文章
- 某33岁国企程序员求助:目前税后60+,工作975,拿到蚂蚁p7offer,3.8k,6200期权,有必要去镀金吗?...
- GoldenGate技术架构(二)
- LeetCode Roman to Integer(罗马数字转换)
- jedis使用 api_通过Jedis API使用排序集
- sql 可以多个分组吗_你知道吗?罗非鱼的品种多达100多个,不单是食用鱼也可以是观赏鱼...
- linux lvm界面,Linux使用入门教程之LVM
- Spring Boot 集成 MyBatis (注解版 与 xml 配置版)
- 我认知的javascript之作用域和闭包
- android 遮罩窗口,Andriod PopupWindow 实现遮罩效果
- 一起来自制水果甜品吧
- 个人怎么开发APP?APP开发全流程解析!
- RESTful架构和实现级别
- php deel views,全量修改文件App名称和改动views位置设置
- Xplorasia(畅怀旅游)选择云呐资产管理为企业降本增效
- 一个程序员的自白:我为什么写博客
- 程序员必读经典书籍推荐
- Colly 学习笔记(二)——爬虫框架,抓取下载数据(上证A股数据下载)
- 画图技巧 : Matlab调用Origin作图
- C语言的time函数和localtime函数
- JMeter类比loadrunner断言、参数化、集合点、关联、事务——学习笔记