【HTML/CSS】类和类选择器
这个东西就挺有意思的
CSS这个游戏的基本规则属于是（滑稽
类
定义
我把类理解为特殊的标签
程序员可以自定义类，前面加上“.”
. 自定义类名 { 属性:值;属性:值;······}
比如：.red{color:red;}
也可以修改预设的标签，不用加上“.”
点击查看-修改预设标签-代码
h1{<!--意思是让用h1的字居中，有字体背景色，有字体色-->
text-align: center;
color: crimson;
background-color: rgb(123,123,255);
}
调用
之前我说类是修改标签格式的东西，如何修改就是这样体现的。
调用方式：
<标签 class="类名">内容</>
点击查看-类的调用-代码
<div class="red">我们未能穿透他们的装甲！</div>
<p class="red">我们未能穿透他们的装甲！</p>
注意那个 class="red" 那就是调用
类作为修改标签的东西，是可以被重复调用的。
id
id和类很像，只不过区别在调用次数上。
定义
只能用一次的类就是id
程序员可以自定义id，前面加上“#”
#自定义id名 { 属性:值;属性:值;······}
调用
<标签 id="id名">内容</>
理论上来说，一个id只能被调用一次，但是现在很多浏览器出于兼容目的，让id也可以多次调用
id可以和类一起用，比如： <div class="red" id="bold">CCCP</div>
下面是一个示例程序。
点击查看-示例程序-代码
<!DOCTYPE html>
<html>
<head>
<span></span>
<style>
span{font: bold 40px "微软雅黑";}/*这个用来定义字体、大小、粗细*/
.orange{color: orange;}
.blue{color: blue;}
.red{color: red;}
.green{color: green;}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
选择器
选择器的种类有很多，我认为这是实现网页样式的核心。
刚才定义、调用类和id的方式，就是用选择器。
事实上，上面的“类”和“id”就是类选择器和id选择器。
所谓类也许只是那个或预设或自定义的名字（本人理解）
选择器就是用来自定义，实现网页中所有内容的样式定义、修改
在使用标签时，把要用的类写在class=里面
并集选择器
标记选择器,标记选择器,.类别选择器···· { 属性:值;······;}
点击查看-并集选择器-代码
<!DOCTYPE html>
<html>
<head>
<title>
并集选择器
</title>
<style>
/*只要用逗号隔开的，所有选择器都执行这些样式*/
div,p,span,.NB{color:royalblue;}
</style>
</head>
<div>LBW</div>
<SPAN>NB</SPAN>
<P>LBWNB</P>
<h1 class="NB">LLLLLBBBBWWWWW</SPAN>
</html>
交集选择器
标记选择器.类别选择器 { 属性:值;······;}
点击查看-交集选择器-代码
<!DOCTYPE html>
<html>
<head>
<title>
交集选择器
</title>
<style>
/*
标记选择器.类别选择器 { 属性:值;······;}
表示限定于x标记的类别属性
*/
.red{color:red;}
p.red{color:red; font:bold 100px "微软雅黑";}
/*用得比较少*/
</style>
</head>
<body>
<div class="red">我们未能穿透他们的装甲！</div>
<p class="red">我们未能穿透他们的装甲！</p>
</body>
</html>
这也基本展示了选择器的使用方法
后代选择器和子元素选择器
后代选择器-->选择一个标签后面所有的子元素
类别选择器 标记选择器{属性:值;属性:值;·······}
点击查看-后代选择器-代码
<!DOCTYPE html>
<html>
<head>
<title>
后代选择器
</title>
<style>
/*
后代选择器又称为包含选择器，用来选择元素或者元素组的后代
当标签发生嵌套时，内层标签就成为外层标签的后代
类别选择器 标记选择器{属性:值;属性:值;·······}
*/
.laoli span{
font: 900 80px "microsoft yahei";
color: red;
}
</style>
</head>
<body>
<div class="laoli">
<span>二营长！你他娘的意大利炮呢？</span>
<br>
<span>给我拉上来！</span>
<p>开炮！</p>
</div>
</body>
</html>
子元素选择器--&t;选择一个标签后面紧跟的一个子元素
类别选择器 > 标记选择器{属性:值;属性:值;·······}
点击查看-子元素选择器-代码
<!DOCTYPE html>
<html>
<head>
<title>
子元素选择器
</title>
<style>
.sov li{/*后代选择器*/
font:900 50px "heiti";
color: red;
}
.sov > li{/*子元素选择器（只选亲儿子（它的第一个子元素））*/
font: 700 30px "weiruan yahei";
color: darkred;
}
</style>
</head>
<body>
<ul class="sov">
<li>一级菜单
<ol>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ol>
</li>
</ul>
</body>
</html>
浙公网安备 33010602011771号