CSS
第一种方式：
创建名为css的html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求1：分别定义两个div、span标签,分别修改每个div标签的样式为:边框一个像素,实践,红色-->
<div style="border: 1px solid red;width:100px;height:100px;background-color: aqua;text-align: center">div标签1</div>
<div style="border: 1px solid blue;">div标签2</div>
<span style="border: 1px solid red;">span标签1</span>
<span style="border: 1px solid red;">span标签2</span>
</body>
</html>
PS：这种方式缺点：
1》如果标签多了，样式多了，代码量就很大
2》可读性差
3》CSS代码无复用性可言
第二种方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style标签专门用来定义css样式代码-->
<style type="text/css">
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<!--需求1：分别定义两个div、span标签,分别修改每个div标签的样式为:边框一个像素,实践,红色-->
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签1</span>
</body>
</html>
PS：缺点：
1.只能在同一页面内复用代码，不能在多个页面复用css代码
2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中改，工作量大了
第三种：
把css样式写成单独的一个css文件，再通过link标签引入即可服用
创建css文件
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
在创建heml文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link标签专门用来引用css样式代码-->
<link rel="stylesheet" type="text/css" href="css3.css"/>
</head>
<body>
<!--需求1：分别定义两个div、span标签,分别修改每个div标签的样式为:边框一个像素,实践,红色-->
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签1</span>
</body>
</html>
二、标签名选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 5px dashed yellow;
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<!--需求2：所有div标签上修改字体颜色为蓝色，字体大小为30个像素，边框为1个黄色实线
span标签字体颜色为黄色，字体大小为30个像素，边框为5像素蓝色虚线-->
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签1</span>
</body>
</html>
三、id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#id1001 {
color: blue;
}
#id1002{
color: pink;
}
</style>
</head>
<body>
<!--分别定义两个div标签-->
<!--需求：第一个div标签id定义为id1001，然后根据id修改字体颜色为蓝色-->
<!--需求：第二个div标签id定义为id1002，然后根据id修改字体颜色为粉色-->
<div id="id1001">id标签1</div>
<div id="id1002">id标签2</div>
</body>
</html>
四、class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border:1px solid yellow;
}
.class02{
color: green;
font-size: 26px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="class01">div标签1</div>
<div class="class02">div标签2</div>
<span class="class01">span标签1</span>
</body>
</html>