HTML中引入CSS的三种方式——响应式Web系列学习笔记

1. 行内式

行内式是通过标签的style属性来设置元素的样式，其基本语法格式如下。

<标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签名>

任何HTML标签都拥有style 属性，用来设置行内式。

2. 内嵌式

内嵌式是将CSS代码集中写在 HTML文档的头部标签中,并且用

<style>选择器{属性1:属性值1;属性2:属性值2;}
</style>

3. 链入式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标签将外部样式表文件链接到HTML文档中，其基本语法格式如下。

<link href-"CSS文件的路径” type-"text,
relE"stylesheet" />

该语法中，标签需要放在头部标签中，并且指定标签的3个属性，具体如下。

href: 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type: 定义所链接的文档类型，“text/css”表示链接的外部文件为CSS样式表。
rel: 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

css3与浏览器

为了更好地兼容不同内核的浏览器，CSS3中部分属性需要添加浏览器的私有前缀，具体如下。

以-webkit-开头的样式，只有以Webkit为内核的浏览器可以解析，如Chrome、Safari。
以-moz-开头的样式，只有以Gecko为内核的浏览器可以解析，如Firefox。
以-ms-开头的样式，只有以Trident为内核的浏览器可以解析，如IE。
以-o-开头的样式，只有以 Presto为内核的浏览器可以解析，如Opera。

HTML中引入CSS的三种方式——响应式Web系列学习笔记相关推荐

CSS初学之引入css的三种方式（一）
1.引入css的三种方式一.第一种简介第一种:行内样式每一个元素都具备style属性,通过该属性可以设置元素的相关样式缺点: 复用性不高,样式更新麻烦不复合网页标准,h ...
HTML中放置CSS的三种方式和CSS选择器
(一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用. 第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style=& ...
CSS——在HTML中引入CSS的四种方式
1.HTML标签内联样式 2.style标签内写css 3.link标签导入css样式 <link rel="stylesheet" type="text/css& ...
CSS浮动、定位与z-index层叠等级详解——响应式Web系列学习笔记
文章目录 CSS的浮动框1{float:none;} 框1{float:right;} 框1{float:left;} 框1.2.3{float:left;} CSS的定位浮动和定位的使用区别 C ...
html引入css的三种方式
1. 外部样式表 CSS保存在.css文件中. 在HTML里使用<link>引用 2.内部样式表不使用外部CSS文件将CSS放在HTML<style>里 3. 内联样式(不 ...
CSS盒子模型的使用及其注意事项——响应式Web系列学习笔记
CSS中的一个基本概念就是盒子模型,所谓盒子模型就是把HTML页面中的元素看作是一个矩形区域,即元素的盒子. 盒子由margin(外边距).border(边框).padding(内边距).conten ...
CSS常用选择器、伪元素选择器、伪类选择器大全——响应式Web系列学习笔记
1. 常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素.常用的几类CSS选择器如下表所示. 选择器代码示例代码说明通用选择器 * *{} 选择所有元素. 标签选择器 ...
引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...
CSS 引入 HTML 的三种方式
CSS 引入 HTML 的三种方式在 html 文档中引入 CSS 样式表有三种引入方法: 内部样式表(嵌入式) 行内样式表(行内式) 外部样式表(链接式) 一.内部样式表内部样式表(内嵌 ...