HTML 决定页面的骨架
CSS 层叠样式表 美化页面提高代码的复用性
CSS的简单语法:在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中
<style>
选择器{
属性名称:属性的值;
属性名称2:属性的值;
...
}
</style>
CSS选择器:帮助我们找到我们要修饰的标签或元素
元素选择:
元素的名称{
属性名称:属性的值;
属性名称2:属性的值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<span>你好啊 </span>
</body>
</html>
ID选择器:
以#开头
#ID的名称{
属性名称:属性的值;
属性名称2:属性的值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#div1{
color:blue;
}
#div2{
color:red;
}
</style>
</head>
<body>
<div id="div1">苹果</div>
<div id="div2">草莓</div>
<div>桃子</div>
<div>白菜</div>
<div>茄子</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/c4e022fac2c592b1bd9e665acef94685.png)
类选择器:
以.开头
.类的名称{
属性名称:属性的值;
属性名称2:属性的值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.shuiguo{
color:blue;
}
.shucai{
color:red;
}
</style>
</head>
<body>
<div class="shuiguo">苹果</div>
<div >草莓</div>
<div>桃子</div>
<div class="shucai">白菜</div>
<div>茄子</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/f0e41594615a07ae711112d88daf7c1f.png)
CSS的引入方式:
外部样式:通过link标签引入一个外部的CSS文件
内部样式:直接在style标签内编写CSS代码
行内样式:直接在标签中添加一个style属性,编写CSS样式
外部样式演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="04Demo.css" />
</head>
<body>
<div class="shuiguo">苹果</div>
<div class="shuiguo">草莓</div>
<div class="shuiguo">桃子</div>
<div class="shucai">白菜</div>
<div class="shucai">茄子</div>
</body>
</html>
同级目录的04Demo.css文件
@charset "UTF-8";
.shuiguo{
color:blue;
}
.shucai{
color:red;
}
![](https://i-blog.csdnimg.cn/blog_migrate/2c3716bc701afcff03e464310f5cc087.png)
浮动:float属性 left、right
清除浮动:clear left、both、right