本文详细阐述了CSS的引入方式，包括行内样式、内部样式、外部样式、导入样式及权重问题。同时，深入讲解了CSS选择器，涵盖基础选择器如标签、ID、类和通配符选择器，以及复杂选择器如后代、子元素、并集、交集和伪类选择器，特别讨论了权重问题及其解决策略。
CSS引入和选择器
前言
本文介绍了CSS的引入和选择器，以及一些相关问题
以下是本篇文章正文内容，下面案例可供参考
一、CSS引入
1、行内样式
也叫内联样式，可用于单个元素应用唯一的样式。
用法：
将style属性添加到相关元素。style属性包含任何css属性
缺点：
HTML与css没有分离
代码样式：
<div id="" style="color: red;">你好，今天</div>
2、内部样式
也叫内嵌样式，使用“style”标记，将样式写在“style”标记内
语法：
selector{
style-name:style-value;
}
优点：
实现了HTML与css分离。
缺点：
css作用仅在本页，无法复用
代码样式：
<style type="text/css">
div{
color:blue;
}
3、外部样式
也叫外联样式。通过外部样式表，您只需要修改一个文件即可改变整个网页的外观
用法：
1、将css写入一个单独文件内，注意该文件扩展名为“.css”；
2、在HTML文档的"head"标签内使用“link”标记引入css文件，
3、其中“link”标记需要指定两个属性：“type”和“rel[relatioonship]”
优点：
实现了HTML与css的分离与css的复用
代码样式：
1、引入
<link rel="stylesheet" type="text/css" href="11.css"/>
2、外部CSS文件代码
div{
color:yellow;
}
4、导入样式
1、@import指令可以将css文件中的css样式导入到不同的地方；
2、导入式的结果和直接书写是同样的结果；导入式可以共享样式代码；
3、可以在内嵌式内导入，也可以在外部样式中使用
用法：
1、@impor url(“xx.css”);
2、@import “xx.css”;
5、权重问题一
内联样式的权重最高，内部样式和外部样式的权重一样，跟顺序有关（遵循就近原则）
代码样式：
1、HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="11.css"/>
<style type="text/css">
div{
color:blue;
}
</style>
</head>
<body>
<div id="d1" style="color: red;">你好，今天</div>
</body>
</html>
2、外部样式中的CSS代码：
div{
color:yellow;
}
注：字体颜色为红色；
二、CSS选择器
一、基础选择器
1、标签选择器
也叫元素选择器，使用HTML标签作为选择器的名称，标签选择器可以把某一类标签全部选择出来
优点：
能快速为页面中同一类型的标签统一设置样式
缺点：
不能设计差异化样式
代码样式：
h1{
font-family:sans-serif;
}
2、ID选择器
使用自定义名称，以 “#”作为前缀，然后通过HTML标签的id属性进行名称匹配，id选择器具有一对一的关系，一般与js搭配
缺点：
在一个HTML文档中，ID选择器只能使用一次
记忆口诀：
样式“#”定义，结构id调用，只能调用一次，别人切勿使用
代码样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
<!--ID选择器-->
#mao{
color: red;
}
</style>
</head>
<body>
<p id="mao">凶猫怂猫，喵~</p>
</body>
</html>
3、类选择器
使用自定义的名称，以 “.” 号作为前缀，然后再通过HTML标签的class属性调用类选择器;该选择器可以单独使用，也可以与其他元素结合使用
优点：
可以差异化选择不同的标签，单独选一个或者某几个标签
记忆口诀：
样式“.”定义，结构类调用。一个或多个，开发最常用
代码样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
<!--类选择器-->
.top{
color:green;
}
</style>
</head>
<body>
<div class="top">顶部是导航</div>
</body>
</html>
反向选择
可以先定义一些类选择器，当HTML中某元素需要时，直接调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
<!--类选择器-->
.top{
color:green;
}
</style>
</head>
<body>
<!--调用类选择器“.top”-->
<div class="top">顶部是导航</div>
<span class="top">2000</span>
</body>
</html>
多类名选择器：
一个元素可以由多个类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.top{
color:green;
}
.left{
font-size:18px;
}
</style>
</head>
<body>
<!--div标签有两个类选择器-->
<div class="top left">顶部是导航</div>
</body>
</html>
4、通配符选择器
“*”选择器，可以选定HTML文档中所有类型的单一对象
代码样式：
*{
margin:0;
padding:0;
}
二、复杂选择器
1、后代选择器
又叫包含选择器，可以全选 作为某元素后代的某个元素
用法：
外层选择器写在前面，内层选择器写在后面，中间用空格分隔
代码样式：
1、CSS代码：
div a{
color: gold;
}
2、HTML布局：
<div>
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">产品</a>
</li>
<li>
<a href="#">我的</a>
</li>
</ul>
<a href="#">更多</a>
</div>
注：“div”标签中的所有a标签字体颜色变为金色；
2、子元素选择器
子元素选择器只能作为某元素的最近一级子元素。俗称“亲儿子选择器”
用法:
父元素在前，子元素在后，中间用大于号隔开
代码样式：
1、CSS代码：
div > a {
color:red;
}
2、HTML布局：
<div>
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">产品</a>
</li>
<li>
<a href="#">我的</a>
</li>
</ul>
<a href="#">更多</a>
</div>
注：只有“div”标签中的子元素a标签字体颜色变为金色；
3、并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，俗称兄弟选择器。通常用于集体声明
用法：
各选择器通过逗号隔开
代码样式：
1、CSS代码：
p,
div,
span {
font-size:24px
}
2、HTML布局：
<p>趁年轻，何不奋斗一把</p>
<div>不为模糊不清的未来担忧，只为清清楚楚的现在努力。.</div>
<span>2021.12</span>
4、交集选择器
两个选择器指向同一元素，可以用来增加权重
用法：
两种选择器写在一起，中间用“.”连接
代码样式：
div.top {
color:blue;
}
5、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。这里只介绍两种，其他的用到后面在介绍
链接伪类选择器
a标签的四中状态：
-
：link 未访问的链接
-
：visited 已访问的链接
-
：hover 鼠标悬浮到链接上
-
： active 选定的链接，被激活
对于a标签来说，这4中状态同时出现时的顺序是固定的，为了确保生效，请按照LVHA的顺序声明：link-visited-hover-active（LV包包hao）。
但是使用时可以指使用其中某个状态
代码样式：
/*未访问*/
a:link{
color:red;
}
/*已访问*/
a:visited{
color:green;
}
/*鼠标悬停*/
a:hover{
color:yellow;
}
/*鼠标点击链接*/
a:active{
color:#666;
}
注：代码运行后，当链接被点击后，就不能看到四种状态，可以换一个浏览器，或者清除浏览器缓存
表单focus选择器
focus 伪类选择器用于选取获得焦点的表单元素。 焦点就是光标，一般情况 单行文本text、多行文本textarea等表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
代码样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*input获取焦点*/
input{
width: 200px;
height: 48px;
}
input:focus{
width: 250px;
background-color: indianred;
}
/*textarea获取焦点*/
textarea{
width: 200px;
height: 100px;
}
textarea:focus{
background-color: indianred;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="用户名" />
<textarea name="" rows="3" cols="20"></textarea>
</body>
</html>
三、权重问题二
在css各个不同的样式添加中，优先级决定了最后真正能呈现在页面的效果；又因为添加样式是通过CSS选择器，而选择器也不是唯一的，所以选择器之间是有权重问题的
css选择器的优先级是：
行间样式 > id选择器 > class选择器 > 标签选择器 > 通配符选择器
补充：
当绝对需要一个元素具有特定的属性CSS时，可以在样式后添加“！important”；
权值：
| 选择器 | 权值 |
|---|---|
| ！important（慎用） | 1,0,0,0,0 |
| 内联样式 | 0,1,0,0,0 |
| id选择器 | 0,0,1,0,0 |
| class选择器 | 0,0,0,1,0 |
| 标签选择器 | 0,0,0,0,1 |
| 通配符选择器 | 0,0,0,0,0 |
-
权值相同时
由于HTML代码的执行特点时从上往下执行的因此在权值相同的情况下，后面的选择器会覆盖前面的选择器相同的属性
代码样式：
1、CSS代码：
.class1{
color:red;
}
.class2{
color: bisque;
}
2、HTML代码：
<div class="class1">
<p class="class2">花间一壶酒，独酌无相亲</p>
</div>
注：字体颜色为粉色；
-
权值不同时
两种选择器覆盖了同一属性，此时权重高的选择器生效
代码样式：
1、CSS代码：
div{
color:blue;
}
#font-color {
color:yellow;
}
2、HTML代码：
<div>
<p id="font-color">花间一壶酒，独酌无相亲</p>
</div>
注：字体颜色为黄色；
-
权值跃迁
权值不能跃迁，也就意味着无论有多少个1级的选择器，生效的仍然是10级选择器，因为选择器的权级无法跃迁
代码样式：
1、CSS代码：
div ul li a{
color: red;
}
.c1{
color: blue;
}
2、HTML代码：
<div >
<ul>
<li>
<a href="#" class="c1">首页</a>
</li>
</ul>
注：字体颜色为蓝色；
总结
以上就是今天要讲的内容，本文仅仅简单介绍了CSS的引入和选择器，以及他们涉及到的权重问题，下次就开始更新CSS的样式了
扫一扫
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
