Html-CSS级联样式表
Posted 863652104kai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html-CSS级联样式表相关的知识，希望对你有一定的参考价值。
CSS
CSS3就是css语言，数字3是该语言的版本号；css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中），采用的语言是级联样式表 （Cascading Style Sheet），也属于标记语言。用来完成页面样式与布局
css三种引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入</title>
<!--2、内联式-->
<!--书写位置:在head标签中的style标签内-->
<!--css语法：css选择器 样式1; 样式2; -->
<!--优缺点: 可读性强，有复用性，样式被html页面绑定了，不能提供给其它html页面使用-->
<style>
h2
color: red;
font-size: 100px;
text-align: center;
</style>
<!--3、外联式-->
<!--书写位置:在外部css文件中，在html文件中通过link标签引入css文件-->
<!--css语法：css选择器 样式1; 样式2; -->
<!--优缺点: 可读性强，有复用性，适合团队开发(文件级别的复用性)-->
<link rel="stylesheet" href="css/样式引入.css">
</head>
<body>
<!--1、行间式-->
<!--书写位置:在标签的style属性中书写样式-->
<!--优缺点: 可读性差，没有复用性，书写直接-->
<h1 style="color: red; font-size: 100px; text-align: center;">css的引入</h1>
<h1>h1标签</h1>
<h2>h2标签</h2>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h4>h4标签</h4>
</body>
</html>
------------------------------------------------------------------------------
/* css/样式引入.css */
h3
color: green;
h4
font-size: 50px;
text-align: center;
三种css引入直接的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入</title>
<!--优先级：
1、内联与外联之间没有优先级区别，由于html属于解释性语言，书写在下方的会覆盖上方的样式
2、行间式的优先级要高于一切
-->
</head>
<body>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h4 style="font-size: 100px">h4标签</h4>
</body>
<style>
h4
color: #ff7800;
font-size: 20px;
</style>
<link rel="stylesheet" href="css/样式引入.css">
</html>css基础选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css基础选择器</title>
<style>
/*优先级：可以从作用范围来判断 - 作用范围越精确，优先级越高 */
/*1、统配选择器*/
*
color: pink;
font-size: 12px;
/*2、标签选择器*/
h1
font-size: 20px;
/*3、类选择器*/
.h
font-size: 30px!important;
.h2
font-size: 40px;
.h.h2
font-size: 50px;
/*4、id选择器*/
#hhh
font-size: 100px;
</style>
</head>
<body>
<h1 class="h">1标题</h1>
<h2 id="hhh" class="h h2" style="font-size: 12px">2标题</h2>
</body>
</html>优先级：!important > 行间式 > id > class > 标签 > 统配，作用范围越精确，优先级越高
以上是关于Html-CSS级联样式表的主要内容，如果未能解决你的问题，请参考以下文章