本文详细介绍了CSS的基础知识，包括web标准、CSS选择器的分类（如标签选择器、ID选择器、类选择器）、CSS特性和权重规则。重点讨论了CSS的继承性和覆盖性，通过实例展示了不同选择器的优先级，并解释了如何使用调试工具调整样式。此外，还探讨了CSS在实际应用中可能遇到的问题，如ID命名冲突和类名的复用策略。
目录
ex②： 问题：但是在覆盖性有个前提为权重相同，假设将css的样式进行对调，字体会显示出红色？添加类选择器
一、web标准
web标准是用来衡量当前网页书写是否标准的一种规则，由W3C组织制定标准的网页写法要达到结构、样式、行为三者相分离
- 1.结构:指的就是网页架构，即我们使用HTML语言搭建的网页结构
- 2.样式:指的是网页具体外在展示，我们通过CSS来定义
- 3.行为:指用户与网页之间可以进行的交互行为，通过javascript来实现
总结:如果把网页比做一套房子，结构就相当于毛坯，用HTML来搭建，样式相当于装修美化毛坯，使用CSS来完成，行为相当于让房子与住户产生智能交互，通过javascript来完成
二、CSS基本介绍
CSS是Cascading Style Sheets的首字母缩写，我们称之为级联样式、层叠样式.样式表，
主要的作用：就是用来修饰美化网页内容的展示效果，可以将其看做是一门语言，所以要想使用它修饰网页，就必须先学习语言中的内容， 即给网页中的内容设置样式
三、CSS书写基本步骤
1.CSS是一门语言，HTML也是一门语言，二者本身互相独立，如果想用CSS修饰HTML那么就需要先找到书写CSS的位置。我们可以将CSS写在 HTML文件中，二者可以共存。一般可以先将CSS代码要写在HTML网页的head标签里,title标签下，
步骤：
- css的代码要写在style标签中
- style标签放在head标签中间的最后位置（title标签下面）
- 例子：
<head>
<meta charset="utf-8" />
<title> CSS 书写位置</title>
<style type = "text/css">
/*head 里的title下*/ 可以将CSS代码写在HTML文件中的这个位置
</style>
</head>div
{
width: 100px; /*宽度*/
height:100px ; /*高度*/
background:red;/*背景色*/
}
px：代表像素单位2.因为CSS本身也是一种语言，当我们将其写在HTML文件中时，为了不让浏览器在解析网页内容时出现语法错误，所以html中定义了一个style标签来负责存放CSS代码，它是一个双标签
<style type="text/css">
/* type属性值中的 text/css就是申明当前文档类型是css*/
</style>
3.当我们确定书写位置，和书写环境之后就可以按着CSS的语法在style标签对之间定义相应的元素CSS样式
四、常见的CSS样式
<style type-"text/css">
div{
width :10opx;
height : 100px;
background-color:seagreen;
}
</style>
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type = "text/css">
/* 想设置什么属性将其的属性写入css ,配置的css样式键值对语法必须放在{}大括号里面 ,css属性类型必须用键值对语法，width: ; css的键值对与html键值对不同,
css键值对—— 属性名：属性值；分号代表结束，
在网页网站中长度高度需要写单位：单位是像素点px
width: 100px; 在冒号前写空格有问题，在冒号后写空格没有问题，在分号前后写空格都无问题，分号后写空格可以代表前面是一组键值对，更好区分属性*/
div{width: 100px; height: 100px ; background:red;}
</style>
</head>
<body>
<!-- 让div有样式 ,能找到-->
<div></div>
</body>
</html>五、CSS选择器
将CSS选择器分为简单选择器与复合选择器二大类，每类里面又会包含不同的具体选择器，这里首先从简单选择器说起
选择器定义：如何在页面中找出元素、标签、标记的方法
5.1简单选择器
5.1.1 标签选择器
1.标签名选择器（标签选择器）:通过标签名称来选中元素，（即只需要写要找的名字即可）
例子：通过标签的名字，来进行页面当中内容的选择，叫做标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type = "text/css">
div{
background:red;
}
h1{
background:green;
}
p{
background:yellow;
}
</style>
</head>
<body>
<!-- 让div有样式 ,能找到-->
<div>我是div</div>
<h1>我是h1</h1>
<p>我是p</p>
</body>
</html>
标签选择器的局限性：
如果存在多个div标签？想要第一个div红色，第二个黄色...标签选择器就 无法细分，需要配合其他的选择器
5.1.2 id选择器
id名选择器:通过标签的id名选中元素，即给标签设置id属性，然后在css代码中使用#在加上id名字的方式来寻找页面中的元素、标签、标记。id名不允许重复
小步骤：
- 首先，给想要选择的div或其他的标签也好，存在多个，要给其添加身份证，
- 并且用id进行选择时，在css中想要用#来标识id的名字，就能将其选择
例子：
#div1{xxxxxxx}
<div id = "div1">11111</div>给id命名规则：
- 不允许数字开头！
- 不允许使用中文！
- 不允许使用除了下划线‘_’和中划线之外的特殊符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
#div1{background: red;}
#div2{background: yellow;}
#div3{background: blue;}
</style>
</head>
<body>
<div id = "div1">11111</div>
<div id = "div2">22222</div>
<div id = "div3">33333</div>
</body>
</html>
注意：
如果不加#，编译器会去找div1的标签，目前只是找id，所有要加#
id选择器存在缺陷：
id名不能重复！
名字div1,div2,虽然在单个程序里面可以用，但实际工作中，程序员制作代码，一个人一个页面，把页面都做好后汇总，张三做了一个页面他在他的页面保证只有一个div1,没有问题，若和其配合的李四他在他的页面保证只有一个div1,但放在一起发现命名冲突，就会出现bug，所以会十分少使用id，会造成冲突，这样子就需要解决id 选择器的bug
虽然在css里面命名一样并没有什么报错，但是在js中会出现命名冲突报错！
例如下面的例子：虽然命名2个div的id名均为div1,在css上仅仅只是背景色变成相同，没有报错，但是js是行为，会报错。后期介绍js时会详细说明，
总之要注意一点：id名就是一个身份标识符，唯一的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type = "text/css"> #div1{background: red;} #div2{background: yellow;} #div3{background: blue;} </style> </head> <body> <div id = "div1">11111</div> <div id = "div1">22222</div> <div id = "div3">33333</div> </body> </html>
5.1.3 类选择器
3.类名选择器（类选择器）:通过标签的类名选中元素，即给标签设置class属性，在css中设置class名字：
比如说：将人分为婴儿、青少年、中年、老年几个大类，根据类来处理
css使用 . 来标记类
例子： .div1{xxxx} <div class="div1">xxx</div>
- 例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
.zuzhang{background: red;}
</style>
</head>
<body>
<div class="zuzhang ">111</div>
<div>222</div>
</body>
</html> 
- 标签内类可以相同名：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
.zuzhang{background: red;}
</style>
</head>
<body>
<div class="zuzhang ">111</div>
<div class="zuzhang ">222</div>
</body>
</html>
- 多个类
多个类
又如一个班级里面可以分多个小组长，多个组员
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type = "text/css"> .zuzhang{background: red;} .zuyuan{background: yellow;} </style> </head> <body> <div class="zuzhang ">学员</div> <div class="zuzhang ">学员</div> <div class="zuyuan "> 学员</div> <div class="zuyuan "> 学员</div> </body> </html>
- 一个标签多个类：
一个标签多个类：
一个学员又是组员又是学委，多个类，用空格来添加类，让一个人有多个称号，如<div class="zuyuan xuewei"> 学员</div>既有"zuyuan"类，又有“xuewei"类,又可以看见css分别给这两类设置属性，这样子这个div标签就会同时赋有"zuyuan"类，“xuewei"类的css样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type = "text/css"> .zuzhang{background: red;} .zuyuan{background: yellow;} .xuewei{font-size: 50px;} </style> </head> <body> <div class="zuzhang ">学员</div> <div class="zuzhang ">学员</div> <div class="zuyuan xuewei"> 学员</div> <div class="zuyuan "> 学员</div> </body> </html>
总结细节：
- id命名不能冲突
- id命名不能一个标签设置多个
- class命名可以冲突
- class命名还可以给一个标签设置多个
注意：
不管是id还是class命名规则一致。
5.1.4 调试工具的用法
浏览器f12，找到elements选项点击它，会出现 html标签，找到你想要设置的标签,点击选中它，右侧就会出现css_的样式，我们点击右侧的样式即可实现更改;
注意:调试工具更改后，必须要回到代码中更改才会生效，否则一刷新就恢复了;
补充：
学会调试根据对浏览器显示的内容进行微调，如要将div的背景色换成pink，那就要改去代码改颜色，
div{ background:pink; }然后在保存运行，这样子导致步骤的繁琐，这样子可以采取调试工具对其进行微调，
谷歌浏览器按F12
方法一：通过标签点（代码中）
调试：
方式二：通过select符号来点取
剩下的步骤参考方法一 ： ④ - ⑥
5.2选择器语法规则
<style type="text/css">
选择器
{
具体的css属性代码
}
</style>
注:
1 CSS代码写在style标签对之间【后面会讲CSS也可以写在其它地方】
2 CSS代码块的规是就是通过选择器找到要操作的元素【CSS选择器类型很多】
3通过选择器找到具体的元素之后可以在{}中设置具体的CSS样式
六、CSS特性
6.1三大特性
所谓CSS特性指的是CSS在使用过程中存在的一些默认现象或者需要遵循的一些细节，为了方便记忆我们人为的分成三点
- CSS继承性:子元素可以继承父元素的CSS样式【可以继承不代表一定继承或者全部继承】
- 覆盖性:同一个元素的相同CSS属性，如果存在多个属性值，那么后写的会覆盖先写的【权重相同的前提下】
- CSS 优先级:同一个元素若同时被多个不同类型的选择器操作，那么会存在操作能力强弱的现象
6.2 继承性
一个完整的网页会有很多的HTML标签组合嵌套而成，所以在这个过程中肯定会存在多个元素互为父子级的现象。而继承性往往就出现在子元素的身上，即给祖先元素设置的样式可以继承给儿孙元素，如果儿孙元素有自己的样式，那么一定听自己的（继承自己的样式，权重较低！）
<div>
<p>div下的p元素</p>
<span>div下的span元素</span>
</ div>注:
此时div是父元素，它的下面有二个子元素分别是p和span 。
我们给div设置相应的样式，然后故意不给p元素及span元素设置样式，从而查看p和span 的默认展示。从而来验证继承性的存在。同时说明继承性的特点
例子1：关于继承性
首先：div包含了span标签，大盒子包裹小盒子。span在css样式中将其字体颜色变成红色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type = "text/css"> span{color: red;} </style> </head> <body> <div > <span>哈哈哈哈哈</span> </div> </body> </html>
修改：根据继承性，div包含了span标签，大盒子包裹小盒子，div是span的父元素，那么在css的样式中仅设置div字体颜色为红色，span字体也继承红色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type = "text/css"> div{color: red;} </style> </head> <body> <div > <span>哈哈哈哈哈</span> </div> </body> </html>
例子2：大盒子包裹小盒子问题
若小盒子包裹大盒子，是不可行的
修改：div包裹p
例子3：父儿各自设置相应css样式
继承的权重比较低，自己设置比较高，以自己样式为主
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
div{color: red;}
span{color: green;}
</style>
</head>
<body>
<div >
<span>哈哈哈哈哈</span>
</div>
<h1>
<span>标题一</span>
</h1>
</body>
</html>
6.3 覆盖性
程序员单独写页面，最后要将大家代码融合在一起，融合在一起非常容易出现，你写的代码被张三给覆盖了，如张三的span的文字颜色样式是红的，李二的span的文字颜色样式是黄的，这样子就样式只能一种颜色，黄或红，代码运行从上到下，最后写的会覆盖之前的设置，以最后为基准，即先写的代码会被后写的覆盖，代码的运行是由上至下；
注意：在权重相同的情况下。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
span{color: red;}
span{color: yellow;}
</style>
</head>
<body>
<span>哈哈哈哈哈</span>
</body>
</html>
七、优先级（权重对比）
引用：
ex①：根据覆盖性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
div{color: red;}
.ex1{color: blue;}
</style>
</head>
<body>
<div class = "ex1">哈哈哈</div>
</body>
</html>代码从上至下，颜色为蓝色。
ex②： 问题：但是在覆盖性有个前提为权重相同，假设将css的样式进行对调，字体会显示出红色？添加类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
.ex1{color: blue;}
div{color: red;}
</style>
</head>
<body>
<div class = "ex1">哈哈哈</div>
</body>
</html>ANS：从运行结果来看还是红色，说明类选择器比标签选择器权重大。
ex③：添加id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
.ex1{color: blue;}
div{color: red;}
#ex2{color: hotpink;}
</style>
</head>
<body>
<div class = "ex1" id="ex2">哈哈哈</div>
</body>
</html>
根据覆盖性，最后应该显示的是粉色
问：若将css样式顺序调换，还能显示出粉色？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
#ex2{color: hotpink;}
.ex1{color: blue;}
div{color: red;}
</style>
</head>
<body>
<div class = "ex1" id="ex2">哈哈哈</div>
</body>
</html>
ANS：发现颜色还是粉色，说明权重 id选择器 > 类选择器 > 标签选择器
ex④：权重与继承性联系
问：如果div中加入一个子类及子类样式，css样式文字样式怎么显示？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
/* #ex2{color: hotpink;}
.ex1{color: blue;}
div{color: red;} */
div{color: red;}
#ex2{color: hotpink;}
span{color: blue;}
</style>
</head>
<body>
<div class = "ex1" id="ex2">
<span>呵呵呵</span>
</div>
</body>
</html>
ANS：颜色以span子类为主，
子类本身 > id选择器 > 类选择器 > 标签选择器
总结：
- 在给同一个标签设置样式的时候才有所谓的优先级权重对比；
- 权重 id选择器（100斤） > 类选择器 （10斤）> 标签选择器（1斤） （针对同一标签），谁的权重大，谁就优先执行，不管顺序。
扫一扫
628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
