CSS 颜色表示方法：
1 颜色名称表示 red gold
2 rgb 表示 rgb(255,0,0) 表示红色
3 16进制数值表示，比如 ##ff0000 表示红色，可以简写为 #f00
常用CSS选择器种类：
1 标签选择器 影响范围大，尽可能使用在层级选择器中 div{color:red} 会影响到下面的所有使用到该标签的内容
2 ID选择器 通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对于页面上一个元素，不能复用。id名一般给程序使用，所以不推荐使用id作为选择器 <div id="box">......</div>
3 类选择器 通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用场景最多的一种选择器 .red{color:red} 以点开头来定义，然后使用class属性来调用
4 层级选择器 主要应用在父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级、防止命名冲突。.box span(color:red) .box .red{color:red} .red{color:red}
5 组选择器 多个选择器，如果有同样的样式设置，可以使用组选择器
6 伪类及伪元素选择器 常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，他们可以通过样式在元素中插入内容
定义所有标签里面的字体 不加限制 默认的字体大小
# 标签选择器 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_style</title>
<style type="text/css">
*{
font-size:100px;
}
div{
<!--font-size:50px;-->
<!--color:rgb(255,0,255);-->
color:#ffff00;
font-family:'Microsoft Yahei';
}
</style>
</head>
<body>
<div>
The secret of success is constancy of purpose.
</div>
</body>
</html>
# id 选择器使用.html id的名称不能重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_style</title>
<style type="text/css">
div{
<!--font-size:50px;-->
<!--color:rgb(255,0,255);-->
color:#ffff00;
font-family:'Microsoft Yahei';
}
#div1{
color:blue;
}
</style>
</head>
<body>
<div ID="div1">The secret of success is constancy of purpose.</div>
<div ID="div1">The secret of success is constancy of purpose.</div>
<div>The secret of success is constancy of purpose.</div>
</body>
</html>
# 类选择器案例 调用的时候 使用 class 即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_style</title>
<style type="text/css">
.green{
color:green
}
.blue{
color:blue
}
</style>
</head>
<body>
<div id="div1" class="green">The secret of success is constancy of purpose.</div>
<div id="div1" class="blue">The secret of success is constancy of purpose.</div>
<div>The secret of success is constancy of purpose.</div>
</body>
</html>
# 层级选择器案例 class="blue big" 同时调用多个类选择器 类选择器用法灵活
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_style</title>
<style type="text/css">
.green{
color:green
}
.blue{
color:blue
}
.big{
font-size:60px;
}
</style>
</head>
<body>
<div id="div1" class="green">The secret of success is constancy of purpose.</div>
<div id="div1" class="blue">The secret of success is constancy of purpose.</div>
<div class="blue big">The secret of success is constancy of purpose.</div>
</body>
</html>
如果同时使用id选择器和类选择器，id选择器的权重大于类选择器
# 案例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_style</title>
<style type="text/css">
#div1{
color:red;
}
.green{
color:green
}
.blue{
color:blue
}
.big{
font-size:60px;
}
</style>
</head>
<body>
<div class="green" id="div1" >The secret of success is constancy of purpose.</div>
<div id="div1" class="blue">The secret of success is constancy of purpose.</div>
<div class="blue big">The secret of success is constancy of purpose.</div>
</body>
</html>
层级选择器 在类选择器下面带上其他的属性就能精确定位到想要的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_style</title>
<style type="text/css">
.box span{
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<div class="box">The secret of success is <span>constancy</span> of purpose.</div>
</body>
</html>
多个类选择器之间可以嵌套 但是最多不建议超过四层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_style</title>
<style type="text/css">
.box span{
color:red;
font-weight:bold;
}
.box em{
font-style:normal;
text-decoration:underline;
font-weight:bold;
color:pink;
}
.box .span02{
color:blue;
}
</style>
</head>
<body>
<div class="box">The <span class="span02">secret</span> of success is <span>constancy</span> of <em>purpose</em>.</div>
</body>
</html>
组选择器案例 组选择器就是类选择器的组合 相同的部分可以合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_style</title>
<style type="text/css">
.box01,.box02,.box03{
font-size:20px;
text-indent:40ps;
}
.box01{
color:red;
}
.box01{
color:pink;
}
.box01{
color:gold;
}
</style>
</head>
<body>
<div class="box01">Self-conquest is the greatest of all victories</div>
<div class="box02">Self-conquest is the greatest of all victories</div>
<div class="box03">Self-conquest is the greatest of all victories</div>
</body>
</html>
伪类选择器案例 伪类选择器一般为链接服务 红色部分 放上去就会实现变色倾斜的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_style</title>
<style type="text/css">
.link{
font-size:30ps;
text-decoration:none;
color:green;
}
.link:hover{
color:gold;
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<a href="www.baidu.com" class="link">baidu</a>
</body>
</html>
# 伪类选择器的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_style</title>
<style type="text/css">
.link{
font-size:30ps;
text-decoration:none;
color:green;
}
<!--伪类的属性-->
.link:hover{
color:gold;
font-weight:bold;
font-style:italic;
}
.box01,.box02{
font-size:20px;
}
<!-- 内容前面加*-->
.box01:before{
content:"* ";
color:red;
}
<!--内容后面加句号-->
.box02:after{
content:". ";
color:red;
}
</style>
</head>
<body>
<a href="www.baidu.com" class="link">baidu</a>
<div class="box01">Self-conquest is the greatest of all victories</div>
<div class="box02">Self-conquest is the greatest of all victories</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
