CSS样式基础样式选择器(案例+代码实现+效果图)
目录
1.css样式的规则
2.引入css样式的方式
1)行内式
2)内嵌式
3)外链式
1-link导入
2-@import导入
4)总
3.css基础选择器
1)标签选择器
案例：使用标签选择器编写一个圆
1.代码
2.效果
2)类选择器
案例：使用类选择器为div添加背景色
1.代码
2.效果
3)id选择器
案例使用id选择器做一个三角形
1.代码
2.效果
1.css样式的规则
css的作用是对页面的样式进行修改,这就需要我们能够找到对应的标签，引入选择器概念，选择器作用就是标记标签，标记之后可以用css进行对标签进行修饰
注: div是盒子模型,color属性是控制字体的颜色，font-size是控制字体的大小
2.引入css样式的方式
1)行内式
通过style属性设置标签样式.
2)内嵌式
将css写在head标签中，并且使用style标签
效果图:
3)外链式
1-link导入
通过link标签引入外部的css样式对标签进行修改
效果图
2-@import导入
在style标签通过 @import 导入外部文件
<style type="text/css">
@import "css路径"
</style>
<style type="text/css">
@import url(css路径)
</style>
4)总
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css引入的方式</title>
<style>
p{
color: blue;
}
</style>
<!-- 使用link标签 -->
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<!-- 内联样式 -->
<h2>内联式</h2>
<div style="
width: 200px;
height: 200px;
background-color: cadetblue;
">
</div>
<hr color="red" size="5" />
<!-- 内嵌式 -->
<p >这是内嵌式的p标签</p>
<hr color="green" size="5" />
<!-- 外链式 -->
<h1>这是外联式的标签h1</h1>
</body>
</html>
h1{
color: aqua;
}
效果图
3.css基础选择器
1)标签选择器
通过标签名字进行标记，并且进行修饰
案例：使用标签选择器编写一个圆
1.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
div{
background-color: aqua;
border: 50%;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div >
</div>
</body>
</html>
注： border-radius: 50%; 这个是边框的弯曲程度
background-color这个属性是标签的背景颜色
2.效果
2)类选择器
通过标签的class属性进行标注
案例：使用类选择器为div添加背景色
1.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
.myBox{
width: 200px;
height: 200px;
background-color: cadetblue;
}
</style>
</head>
<body>
<!-- 这是一个正方形 -->
<div class="myBox">
</div>
</body>
</html>
2.效果
3)id选择器
通过标签的id属性进行选择标注
注：id选择器使用#进行标识，后面是名字
案例使用id选择器做一个三角形
1.代码
注: border-left 是左边的边框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id选择器</title><style>#myDiv {width: 0px;height: 0px;border-left: 100px solid transparent;border-right: 100px solid transparent;border-top: 200px solid rgb(25, 128, 231);}#myDiv2 {width: 0px;height: 0px;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 200px solid rgb(25, 128, 231);}#myDiv3{width: 0px;height: 0px;border-top: 100px solid transparent;border-bottom: 100px solid transparent; border-left: 200px solid rgb(248, 129, 32);}#myDiv4{width: 0px;height: 0px;border-top: 100px solid transparent;border-bottom: 100px solid transparent; border-right: 200px solid rgb(248, 129, 32);}</style> </head> <body><!-- 倒三角 --><div id="myDiv"></div><!-- 正三角 --><div id="myDiv2"></div><!-- 左三角 --><div id="myDiv3"></div><!-- 右三角 --><div id="myDiv4"></div> </body> </html>
2.效果
