CSS的三种样式表和优先级
1、外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS外部样式表</title>
</head>
<!--引入CSS样式表 -->
<link rel="stylesheet" type="text/css" href="../css/css1.1.css"/>
</style>
<body> <h1>我是大标题哦!</h1> </body>
</html>
css1.1样式表
h1{
font-family: "agency fb";
font-size: 18px;
color: #0000FF;
}
2、内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS内部样式表</title>
</head>
<style type="text/css">
div{
widows: auto;
height: 2em;
background: red;
} </style>
<body>
<div>
<p>我是一个div</p>
</div> </body>
</html>
3、内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
<p style="font-size:1cm;color:red;border:1ps solid blue">这是一个段落 </p>
样式的优先级
(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style
CSS的三种样式表和优先级的更多相关文章
- CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级
从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- 大家好,又是新的一天。今天给大家带来一些新的知识:选择器的种类和css的三种样式
今天我们为大家 选择了 六种 选择器: 1. 标签选择器 2.id选择器 3.class选择器 4.后代选择器 5.子代选择器 6.交集选择器 我们就举三个典型的例子:后代选择器,子代选择器和交集选择 ...
- CSS三种样式表
1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...
- html中css的三种样式
在html中定义CSS样式的方法有三种,新建CSS文件 使用link 关联 这种是最常用的外部引用样式,第二种讲样式写在 head 头部里面 这种是页面样式 ,第三中样式直接写在行内 style里面 ...
- CSS 的三种样式 内联 内部 外部
CSS:层叠样式表的缩写 就是 Cascading Style Sheets Cascading Style Sheets : 层叠样式表 优先级问题 :遵守就近原则 内联> 内部>外部 ...
- CSS的三种样式,有一种你肯定不知道
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者LFuser 正文 新手注意:如果你学习遇到问题找不到人解答,可以点我进裙 ...
- 2CSS层叠规则(即引入CSS的三种不同方式的优先级)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- css的三种样式
1.行间样式 顾名思义就是直接写在div对里面的样式 2.内部样式 把样式写在一对<style></style>标签对中 这个标签对是放在html页面里面的 3.外联样 ...
随机推荐
- wap启用宏
vba for wps office是使用wps的时候开启宏需要的VBA安装包,安装好这个插件就可以开启wps的宏功能了,重新打开WPS Excel,可以看到上面的工具栏中宏选项变成可选的就成功了 1 ...
- ffmpeg 推送、保存rtmp 流命令
1.将文件当做直播送至live ffmpeg -re -i localFile.mp4 -c copy -f flv rtmp://server/live/streamName 2.将直播媒体保存至本 ...
- asp.net mvc(一) ----------简单封装成通用的List<T>集合
asp.net mvc(一) 这些天开始学习asp.net mvc,用传统的asp.net已经快四的年了,刚开始接触asp.net mvc确认感觉有点不适应,主要体现在asp.net mvc的实现上. ...
- Windows安装使用git
下载安装Windows安装文档Git-2.16.2-64-bit双击安装(安装过程不详述) 打开git客户端 新建代码命令 mkdir /c/code 进入该目录(对应windows的c盘下面的目录) ...
- FZU 2105 Digits Count
Problem 2105 Digits Count Accept: 444 Submit: 2139 Time Limit: 10000 mSec Memory Limit : 2621 ...
- JSONUtil(JAVA对象/List与json互转,xml与json互转)
package com.chauvet.utils.json; import java.io.BufferedReader; import java.io.File; import java.io.F ...
- APM最佳实践: 诊断平安城市视频网性能问题
前言: 平安城市已经是一个关系你我他的民生工程,但由于本身系统的复杂性,给运维工作带来了极大的挑战.如何保障摄像头在线率?如何在系统中找到视频系统故障的问题所在?在我们某一次项目经历中,APM在发现问 ...
- django自带权限机制
1. Django权限机制概述 权限机制能够约束用户行为,控制页面的显示内容,也能使API更加安全和灵活:用好权限机制,能让系统更加强大和健壮.因此,基于Django的开发,理清Django权限机制是 ...
- 002-Spring Framework-Core-01-IoC容器
一.概述 文章地址:https://docs.spring.io/spring/docs/5.0.6.RELEASE/spring-framework-reference/ 核心主要包括:IoC co ...
- in 和 or 的效率问题
select * from table where col in (2,3,4,5,6) select * from table where col=2 or col=3 or col=4 or co ...