上篇我们介绍了css的的由来和编写语法，并展示了一个基本的例子，这篇继续向大家展示一些例子来说明如何使用css来美化我们的页面展示，css包含非常多的样式设置，在这里我会把最基础和常用的样式设置展示给大家，上篇我们了解了div这个块元素的使用，因为div内部可以写其它标签，但如果我们像上篇一样设置，整个块里的元素都会生效，那如果我只想设置div中某个标签呢，或者我们想通过div的id或class来设置样式，另外我们常见的就是表单，那如何给表单设置样式，以及如何给一个超链接设置样式，这就是今天我们要讲的内容， 首先还是跟之前一样，我们先给出我们基本的html代码和截图：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css例子1</title> <!-- <link rel="stylesheet" href="part2.css"> --> </head> <body> <h1>这是一个特别的网站</h1> <div class=""> <p>首先感谢您的访问</p> </div> <h2>来这做总得做点什么吧？</h2> <p>能干的事太多，我只说三件，但每件都不同</p> <ol> <li id='itemone'>往下面的框写你的故事</li> <li>登陆到后台系统</li> <li><a href="http://www.mindg.cn">带你到python世界</a></li> </ol> <div class="blogtest"> <textarea name="name" id="textblock" ></textarea> </div> <h2>请输入您账户密码</h2> <form action="thankyou.html" method="get"> <label for="fn">姓名：</label> <input id='fn' type="text" name="" placeholder="your name" required=""> <label for="pass">密码：</label> <input type="password" name="" value=""> <input type="submit" name="" value="登陆"> </form> <p>离开的时候点个赞或者留个言吧</p> <textarea class="exit" name=""></textarea> </body> </html>
以上就是基本的Html代码，大家看到我注释掉了这行 内容<link rel=”stylesheet” href=”part2.css”>，这个文件就是我们一会要写的样式文件，为了展示不带样式的页面，我先把这行注释掉了，那这段代码用chrome打开截图如下：
那接下来我们完成样式文件的编写，首先我们完成的任务如下：
1、设置背景颜色浅蓝色
2、给h1字体加一个边框，设置h2字体颜色
3、设置div中p段落背景颜色
4、设置表单边框，指定宽度和长度
5、设置超链接颜色和一些文字装饰
基本就这些吧，我们直接上代码：
/*背景色*/
body{
background-color: #a8e6ff;
}
/*h1的边框*/
h1{
border: 1px solid black;
}
/*h2颜色*/
h2{
color: purple;
}
/*段落背景色,注意是div下的p标签*/
div p{
background: #fffca5;
}
/*表单边框*/
#textblock{
border: 5px solid gray;
width: 400px;
height: 200px;
}
/*超链接红色*/
a{
color: red;
}
/*表单边框*/
input{
border: 2px solid rgb(144,0,0)
}
/*文字装饰*/
#itemone{
text-decoration: overline;
color: purple;
}
/*表单底部颜色*/
.exit{
background-color: gray;
border: 4px dashed yellow;
}
以上就是整个样式表文件内容，我们看到如果要设置div中p标签的样式，格式可以是 div p（中间一个空格） 的方式来选择设置，另外所有的div都可以设置class或id， 这样我们就可以通过id或class设置样式了，它们的选择方式id以#id名词，例如例子中的#itemone， 如果是classs，就以.开头，例如例子中的.exit， 有了这种方式，我们在设置我们页面样式时会非常的灵活，基本的就讲到这了，保存退出，并取消掉样式文件注释， 刷新浏览器会看到生效后的样式，截图如下：
那么通过这个小例子，我相信大家对css的一些基本使用已经解了，那下篇我们要说css中的盒子模型，这是css学习的一个重点，我们下篇见。
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。