1.内联式

内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red">这里文字是红色。</p>

css代码写在元素的开始标签里。

css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。

2.嵌入式

嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：

<style type="text/css">

span{

color:red;

}

</style>

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

3.外部式

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

<link href="base.css" rel="stylesheet" type="text/css" />

注意：

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

4.三种方式的优先级

就近原则（离被设置元素越近优先级别越高）。

优先级：内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）

但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下

引入CSS的三种方式的更多相关文章

2CSS层叠规则(即引入CSS的三种不同方式的优先级)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
引入css的两种方式
摘自:https://www.cnblogs.com/gyjWEB/p/4831646.html 在HTML中引入css的其中的两个方法: 1.如果使用链接式,需要使用如下的语句引入外部css文件: ...
HTML中放置CSS的三种方式和CSS选择器
(一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用. 第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style ...
html里嵌入CSS的三种方式
在HTML中定义CSS的方式有:Embedding(嵌入式).Linking(引用式).Inline(内联式),下面通过实例为大家详细介绍下它们的特点在HTML中常用以下3种方式定义CSS:Em ...
引入css的几种方式
使用CSS样式的几种方式 CreateTime--2017年10月11日16:45:26 Author:Marydon a.外部样式 a1.链接式(推荐使用) <link href=&quo ...
vue引入css的两种方式
方案1.在main.js中引入方式 import '@/assets/css/reset.css' 方案2.在.vue文件的<style/>标签里面引入 @import &qu ...
引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <li ...
html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾指令:被<>包 ...
css-1,css的三种引入方式基本选择器
<!-- (1)CSS 层叠样式表作用:修饰网页结构 (2)css的三种引入方式权重: 优先级高权重大谁在页面谁的权重大 - 行内样式注意:行内样式的优先级是最高的 - 内接样式 - ...

随机推荐

skyline开发——读取Shapefile要素属性
double len; IFeatures66 features = featureLayer.FeatureGroups.Polyline.GetCurrentFeatures(); foreach ...
python爬虫-百度百科百名红通人员名单
爬虫代码: import urllib.request import os, re from bs4 import BeautifulSoup import xlwt URL = "http ...
zabbix3.0监控Windows服务器
我们下载后,解压开始有多个文件: conf目录存放是agent配置文件bin文件存放windows下32位和64位安装程序找到conf下的配置文件 zabbix_agentd.win.conf ,修 ...
Java中子类对象初始化的过程
Java中的继承机制看似简单,实际上包含了很多细节.最近在刷题过程中屡屡跳坑,于是自己仔细再学习了一下Java中子类初始化的细节,与大家分享. class Father { Father(){}; } ...
easyui_validatebox常用验证
$.extend($.fn.validatebox.defaults.rules, { idcard: {// 验证身份证 validator: function (value) { return / ...
js 控制光标到指定位置
js控制光标到指定节点位置(适用于富文本编辑器中) function placeCaretAtEnd(el) { //传入光标要去的jq节点对象 el.focus(); if (typeof wind ...
关于PHP读取HTTP头的部分
本文转载自https://my.oschina.net/luoczi/blog/86608 1.关于PHP读取HTTP头的方法 $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 ...
LCD调试1.0
所谓调lcd timing就是去调lcd时序,一般是6个部分:HFPD(在一行扫描以前需要多少个像素时钟),HBPD(一行扫描结束到下一行扫描开始需要多少个像素时钟),VFPD(一帧开始之前需要多少个 ...
可遇不可求的Question之INSERT … ON DUPLICATE KEY UPDATE 语法篇
MySQL 自4.1版以后开始支持INSERT … ON DUPLICATE KEY UPDATE语法,使得原本需要执行3条SQL语句(SELECT,INSERT,UPDATE),缩减为1条语句即可完 ...
OPC转发阿里云alink工具
这个最近还在做 2019-04-24 今天抽空吧基本mqtt上传,OPC遍历,导出物模型功能先做了上报操作日志,上报错误信息,导入参数,导出参数还没做有需要可以联系微信NBDX123