今天开始学习使用CSS对HTML页面进行美化。
首先让我们了解的<div>标签和<span>标签两个HTML块标签，<div>标签默认占一行，自动换行；而<span>标签内容在同一行。
对于网页设计，HTML决定网页的骨架，而CSS则是对HTML页面进行美化。CSS简单语法，是在一个<style>标签中，去编写CSS内容，最好是将<style>标签写在HTML的<head>标签中，其格式如下。
<style>
选择器{
属性名称：属性的值
}
</style><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
选择器{
属性名称：属性的值
}
-->
<style>
div0{
font-size: 10px;
color: blue;
}
div1{
font-size: 20px;
color: red;
}
div2{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<div0>张三</div0>
<div1>李四</div1>
<div2>王五</div2>
</body>
</html>
以上是分别将张三李四王五用不同 块标签包裹，然后总体对div标签进行修饰，从而达到修改显示效果的作用。
CSS选择器可以帮助我们找到要修饰的标签或元素。常用的选择器有元素选择器、ID选择器和类选择器三种。
元素选择器与普通选择器使用方式一样。
<!--
元素选择器
-->
<style>
元素的名称{
属性名称：属性的值；
}
</style>ID选择器需要在块标签里面添加ID属性，且ID属性最好具有唯一性便于区分和操作，以#开头。
<!--
ID选择器
以#开头
-->
<style>
#ID的名称{
属性名称：属性的值；
}
</style>
#div1{
}
<div id="div1">
内容
</div>类选择器则是在div标签后面添加类属性，具有相同的类属性可以同时修改，以.开头。
<!--
类选择器
以.开头
-->
<style>
#类的名称{
属性名称：属性的值；
}
</style>
.1{
}
<div class="1">
内容
</div>
扫一扫
94
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
