html里嵌入CSS的三种方式
在HTML中定义CSS的方式有:Embedding(嵌入式)、Linking(引用式)、Inline(内联式),下面通过实例为大家详细介绍下它们的特点
一、嵌入式
使用HTML的style元素,在文档中定义CSS样式。
代码如下:
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
<head>
二、内联式
每一个HTML元素都包含一个style属性,可以直接定义样式。该样式仅能用于该元素的内容,对于另一个同名的元素则不起作用。
代码如下:
三、外部引用式
外部引用指HTML文档本身不含有CSS样式,而是动态引用外部的CSS文件定义文档的表现形式。
1、使用样式表的处理指令语句
在HTML文档的开头部分写一个关于样式表的指令处理语句
代码如下:
<html>
指令语句
</html>
不过只有使用xml语法格式编写的html文档才支持使用该指令,大多数浏览器仅当被保存为xhtml或xml格式才有效,且JS不能处理这种CSS,所以不建议使用。
2、使用@import命令
在style元素之间使用@import命令导入外部的css文件
代码如下:
<style type="text/css">
<!--下面两行代码效果一样
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>
任何@import规则必须出现在所有规则之前。参数是一个css文件的URL地址。在一个css文件中也可以用@import指令将另一个css文件导入。
3、使用link元素
代码如下:
<link rel="stylesheet" href="css的url" type="text/css" >
</head>
这也是最常用的方式。
4、使用HTTP消息报头链接到样式表
可以使用HTTP消息报头的link字段链接一个外部样式表。
代码如下:
//等同于<link rel="stylesheet" href="css的url" type="text/css" >
HTTP报头中可以使用多个link,从而链接多个样式表,且HTTP报头中的link比HTML文档中的link(head元素中)具有优先级。
html里嵌入CSS的三种方式的更多相关文章
- 在单文件组件中,引入安装模块里的css的2种方式:script中引入、style中引入
在单文件组件中,引入安装模块里的css的2种方式:script中引入.style中引入 1.script中引入 <script> import 'bulma/css/bulma.css' ...
- 引入CSS的三种方式
虽然入职已经大半年,并自诩前端工程师,但是我真的不会……(有一种我有罪我该死的感觉 从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 1.内联式 内联式css样式表就 ...
- HTML中放置CSS的三种方式和CSS选择器
(一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用. 第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style ...
- java Web jsp嵌入代码的三种方式
1,表达式标签 <%= 2+3%> 唯一有显示功能的标签 作用: 计算表达式的返回值 将表达式的返回值显示到网页中. 注意: 表达式中不能有分号 2,普通脚本标签 <% %> ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- Html CSS的三种链接方式
感谢原文:https://blog.csdn.net/abc5382334/article/details/24260817 感谢原文:https://blog.csdn.net/jiaqingge/ ...
- CSS控制样式的三种方式优先级对比验证
入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...
- css文件引人的三种方式
前言 1995年,W3C发布了CSS草案 1996年,W3C正式推出CSS1 1998年,推出CSS2 2001年从CSS3开始,CSS这门语言分割成多个独立的模块,每个模块独立分级,且只包含一小部分 ...
- python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
随机推荐
- GML3示例
GML3示例:https://svn.osgeo.org/geotools/trunk/modules/extension/xsd/xsd-gml3/src/test/resources/org/ge ...
- 在DirectX11下用Stencil Buffer绘制可视化Depth Complexity
这是一道在<Introduction to 3D Game Programming with DirectX 11>上的练习题. 要求把某个像素点上的Depth Complexity(深度 ...
- 路径方案数_mod_SPFA_记忆化搜索_C++
本文含有原创题,涉及版权利益问题,严禁转载,违者追究法律责任 本来是写个 DP 分分钟就 A 了,结果老师要我们写记忆化搜索(无奈脸) 算啦,随手一改又是一个标准的记忆化搜索(目测好像是记忆化搜索容易 ...
- C# 后台首次加载时才执行
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { } } 写在 if (!IsPostBack) { ...
- float和double类型的存储方式
Float double 类型在计算机的存储方式 计算机中只认识10的二进制数,那么该如何存储小数呢? 那么我们先看Floa类型: Float在计算机(32位)中是4个字节的,具体地:第一位为符号位0 ...
- mysql内连接、左连接、右连接举例说明
如下: CREATE TABLE tb ( id INT PRIMARY KEY, NAME VARCHAR (20) ) ; CREATE TABLE ta ( id INT PRIMARY KEY ...
- Idea设置全白色 背景
IDEA设置全白色背景 标签(空格分隔): 工具使用 编辑框白色设置 菜单栏白色设置
- runtimeService.startProcessInstanceById("process:6:55036", 2222, variables) SQL语句
JAVA: variables:{ user_flow_start_dept : "3333"} runtimeService.startProcessInstanceById(& ...
- eclipse断点调试基础
进入debug模式: 1.设置断点 2.启动servers端的debug模式 3.运行程序,在后台遇到断点时,进入debug调试状态 ============================= 作用域 ...
- owasp zap 安全审计工具 功能详解
一.persist session 该功能主要保存扫描分析的结果,方便下次继续分析 二.扫描策略 1.修改策略 A.入口 B.具体设置页面 C.设置完成后,发起主动扫描,在弹出的窗口可以选择策略 D. ...