使用CSS样式的三种方法
一、内联样式
内联样式通过style属性来设置，属性值可以任意的CSS样式。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>内联样式</title>
6 </head>
7 <body>
8 <p style="background: red"> I love China!</p>
9 </body>
10 </html>
显示效果：
二、内部样式
内部样式定义在文档的head部分，通过style标签来设置。需要使用元素选择器（p）来关联样式和要设置样式的标签（p标签）。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>内联样式</title>
6 <style type="text/css">
7 p{
8 background: green;
9 }
10 </style>
11 </head>
12 <body>
13 <p> I love China!</p>
14 </body>
15 </html>
效果：
三、外部样式
在文档外的*.css定义css样式，然后在文档的head部分通过link元素引入。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>内联样式</title>
6 <link rel="stylesheet" href="style.css">
7 </head>
8 <body>
9 <p> I love China!</p>
10 </body>
11 </html>
style.css文件内容：
1 p{
2 background: yellow;
3 }
显示效果：
a.在一个外部样式表中导入其他样式表的样式
combine.css文件中导入上面的style.css
1 @import "style.css";
2 body{
3 background: red;
4 }
HTML文件中引入combine.css文件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>document</title>
6 <link rel="stylesheet" href="combine.css">
7 </head>
8 <body>
9 <p> I <span>love</span> China!</p>
10 </body>
11 </html>
效果：
b、声明样式表的字符编码
1 @charset "utf-8"
2 p{
3 background: yellow !important;
4 }
四、元素样式的层叠和继承
1、样式层叠
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置（浏览器的默认样式）
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
- 同一样式表中，CSS选择器越准确的，优先级越高。
不同优先级的样式表定义元素的不同css属性都会作用在元素上，相同的css属性只有优先级最高的会对元素起作用。相同优先级样式表中css选择器准确的样式起作用，同一样式表中css选择器一样的后边会覆盖前边的样式。
用重要样式（！important）可以调整层叠次序
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>内联样式</title>
6 <link rel="stylesheet" href="style.css">
7 </head>
8 <body>
9 <p style="background: red"> I love China!</p>
10 </body>
11 </html>
style.css文件
1 p{
2 background: yellow !important;
3 }
important标记的样式会有最高的优先级。
在谷歌浏览器的开发者工具中我们可以查看元素的优先级，同一个元素的最上面的样式的优先级最高。
2、样式继承
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>document</title>
6 <style type="text/css">
7 p{
8 color: white;
9 background: grey;
10 border: 2px solid black;
11 }
12 </style>
13 </head>
14 <body>
15 <p> I <span>love</span> China!</p>
16 </body>
17 </html>
span元素并没设置字体颜色，但是却是用前景色white,这个值有父元素p继承来。可以从一个元素的祖先元素继承样式，继承来的样式的优先级是最低的 （比浏览器的默认样式的优先级都低）。
并非所有的css属性均可继承，只有与元素外观相关的元素会继承。元素在页面布局相关的样式不会继承，css中可以使用inherit强行实行继承。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>document</title>
6 <style type="text/css">
7 p{
8 color: white;
9 background: grey;
10 border: 2px solid black;
11 }
12 span{
13 border: inherit;
14 }
15 </style>
16 </head>
17 <body>
18 <p> I <span>love</span> China!</p>
19 </body>
20 </html>
3.继承属性和通用元素选择器
我们有时候给所有元素的设置某个样式，如字体等，我们一般会使用通用选择器来设置。但是对所有元素都起作用，效率较低，这个时候我们可以考虑给body元素设置字体，body的子元素会默认继承字体。
使用CSS样式的三种方法的更多相关文章
- js改变css样式的三种方法
共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...
- HTML页面中插入CSS样式的三种方法
1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. &l ...
- python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- js和jquery设置css样式的几种方法
一.js设置样式的方法 1. 直接设置style的属性 某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...
- 清楚css浮动的三种方法
第一种:添加新元素,应用clear:both; <div class="clear"></div> css样式:clear:both; 第二种:在浮动元素 ...
- 你不知道的css高级应用三种方法——实现多行省略
前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...
- HTML引入CSS样式的四种方法
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐 ...
- 【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
- 原生javascript 获得css样式有几种方法？
css 样式分为行内样式和 外部样式: 1.javascript 获得行内样式 : 可以使用 ele.style."属性名称"(如果遇到属性名称带有"-", ...
随机推荐
- Macbook 安装kali linux 双系统 2020.3 超详细
博主折腾了一星期这东西,到现在都还有些坑没解决(最后面会讲).不过最起码系统装上了,可以用了,看到这桌面惊艳了,再点下左上角表示人间值得. 其实我是装了windos 10.macos 和kali三系统 ...
- java面试-JVM调优和参数配置，如何查看JVM系统参数默认值
一.JVM的参数类型: 1.标配参数: java -version java -help 2.X参数: -Xmixed 混合模式(先编译后执行) -Xint 解释执行 -Xcomp 第一次使用就编译 ...
- Sentinel全局Feign默认熔断设计实现
写在前面 用XMind画了一张导图记录Spring Cloud Alibaba的学习笔记(源文件对部分节点有详细备注和参考资料,由于太大就没展示全部,欢迎关注我的公众号:阿风的架构笔记 后台发送[导图 ...
- Java基础 - List的两个子类的特点
List两个子类的特点 List的两个子类的特点 因为两个类都实现了List接口,所以里面的方法都差不多,那这两个类都有什么特点呢? ArrayList: 底层数据结构是数组,查询快,增删慢. Lin ...
- Buuctf刷题：部分
get_started_3dsctf_2016 关键词:ROP链.栈溢出.mprotect()函数 可参考文章(优质): https://www.cnblogs.com/lyxf/p/12113401 ...
- pwnable.tw 3x17
3x17 文章主要是参考了https://xuanxuanblingbling.github.io/ctf/pwn/2019/09/06/317/ 首先我们检查一下开启的保护 运行一下,先让输入add ...
- Dapr | 云原生的抽象与实现
引言 Dapr 是微软主导的云原生开源项目,2019年10月首次发布,到今年2月正式发布 V1.0 版本.在不到一年半的时间内,github star 数达到了 1.2 万,超过同期的 kuberne ...
- Go-41-回调
回调函数,函数有一个参数是函数类型,这个函数就是回调函数 回调函数,可以实现多态,即调用同一个接口,不同的表现,可以实现不同表现 package main import "fmt" ...
- Day13_74_守护线程
守护线程 线程分为 用户线程 和 守护线程. setDeamon(boolean) 方法 :将该线程标记为守护线程或者用户线程. 线程对象.setDaemon(true); //false 表示用户线 ...
- Android使用ContentProvider初始化SDK库方案总结
做Android SDK开发的时候,一般我们会将初始化的方法封装为,然后让调用SDK的开发者在Application的onCreate方法中进行初始化.但是目前一些主流的SDK框架,并没有提供相关的方 ...