在html中增加css样式有三种：
1.在标签中增加style属性：
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> ???<meta charset="UTF-8"> ???<title>天蓝蓝</title> ???<!--tag标签的图标--> ???<link rel="shortcut icon" href="timg.jpg"></head><body><div style="background-color: blue ;width: 80px;height: 80px "></div></body></html>
2.
第二种可以在head中增加style标签 style中通过选择器定位标签增加style样式
css选择器：
id选择器：
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> ???<meta charset="UTF-8"> ???<title>天蓝蓝</title> ???<style> ???????/*id选择器*/ ???????/*#代表id，#i1代表定位到class为i1的元素*/ ??????#i1{ ??????????background-color: #000000; ??????????width: 80px; ??????????height: 80px; ??????} ???</style></head><body><!--id在html只允许出现一个同名id--><div id="i1"></div></body></html>class选择器：最常用
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> ???<meta charset="UTF-8"> ???<title>天蓝蓝</title> ???<style> ???????/*class选择器*/ ???????/*.代表class，.c1代表定位到class为c1的元素*/ ??????.c1{ ??????????background-color: #000000; ??????????width: 80px; ??????????height: 80px; ??????} ???</style></head><body><div class="c1"></div></body></html>标签选择器：
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> ???<meta charset="UTF-8"> ???<title>天蓝蓝</title> ???<style> ????????/*标签选择器*/ ???????/*所有的div的标签都带有下面属性*/ ??????div{ ??????????background-color: pink; ??????????width: 80px; ??????????height: 80px; ??????} ???</style></head><body><div class="c1"></div><div></div></body></html><!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> ???<meta charset="UTF-8"> ???<title>天蓝蓝</title> ???<style> ??????div{ ??????????background-color: pink; ??????????width: 80px; ??????????height: 80px; ??????} ???????.c1{ ???????????background-color: blue; ???????????width: 80px; ???????????height: 80px; ???????} ???</style></head><body><div class="c1"></div><div></div></body></html>层级选择器：
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> ???<meta charset="UTF-8"> ???<title>天蓝蓝</title> ???<style> ??????/*层级选择器*/ ???????div span{ ???????????background-color: red; ???????????width: 80px; ???????????height: 80px; ???????} ????????#i1 span{ ????????????background-color: blue; ????????????width: 80px; ????????????height: 80px; ????????} ???????.c1 span{ ???????????background-color: pink; ???????????width: 80px; ???????????height: 80px; ???????} ???</style></head><body><div class="c1"> ???<span>这是span标签</span></div><div id="i1"> ???<span>这是span标签</span></div><div> ???<span>层级选择器</span></div></body></html>多个标签引用同一个标签：
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> ???<meta charset="UTF-8"> ???<title>天蓝蓝</title> ???<style> ???????/*多个标签引用同一个标签*/ ????????#i1,#i2,#i3{ ????????????background-color: blue; ????????????width: 80px; ????????????height: 80px; ????????} ???????.c1{ ???????????background-color: pink; ???????????width: 80px; ???????????height: 80px; ???????} ???</style></head><body><div id="i1"></div><br><div id="i2"></div><br><div id="i3"></div><div class="c1"></div><div class="c1"></div><div class="c1"></div></body></html>3. 在head里面使用link引入css样式表：
css表：c1.css
.c1{ ???background-color:red; ???width: 80px; ???height: 80px;}<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> ???<meta charset="UTF-8"> ???<title>天蓝蓝</title> ???<link rel="stylesheet" href="c1.css"></head><body><div class="c1"></div><div class="c1"></div></body></html>
样式表的引用顺序联系：
css表：c2.css
.c1{ ???background-color: pink; ???width: 100px; ???height: 100px;}<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<!--<link rel="stylesheet" href="c2.css">--> ???<style> ???????/*样式表的引用关系，以标签为起的位置，由下而上的开始应用*/ ????.c1{ ???????background-color: red; ???????width: 100px; ???????height: 100px; ???????} ???</style> ???<link rel="stylesheet" href="c2.css"></head><body><div class=‘c1‘ style="background-color: #0000CC;width: 100px;height: 100px"></div></body></html>CSS基础知识总结之css样式引用的三种方式
原文地址：https://www.cnblogs.com/wxcx/p/8684809.html