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 > 标签 > 统配，作用范围越精确，优先级越高
原文地址：https://www.cnblogs.com/863652104kai/p/11266135.html
时间： 2024-10-23 12:43:57