- Django 3 Web应用开发实战
- 黄永祥
- 1393字
- 2023-08-10 17:28:53
1.10.2 CSS
HTML代码是保存在后缀名为.html的文件，而CSS样式是保存在后缀名为.css的文件，然后在HTML代码中调用CSS样式文件。由于HTML代码中会存在多个不同的元素，并且每个元素的网页布局各不相同，因此需要使用CSS选择器定位每个HTML元素，然后再编写相应的CSS样式。
CSS选择器划分了多种类型，同一个HTML元素可以使用不同的CSS选择器进行定位，实际开发中最常用的CSS选择器分别为：类别选择器、标签选择器、ID选择器、通用选择器和群组选择器，我们将简单讲述如何使用这些CSS选择器实现HTML元素的网页布局。
为了更好地理解CSS样式的编写规则，我们将重新定义HTML代码，首先在D盘中创建文件夹qd，然后在qd文件夹中分别创建index.html和index.css文件，如图1-23所示。
图1-23 目录结构
然后打开index.html文件，在该文件中定义网页元素，详细代码如下：
<html> <head> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <h3>这是标题</h3> <div class="content"> <p>这是正文</P> <input id="message" placeholder="输入你的留言"> <br> <button id="submit" >提交</button> </div> </body> </html>
上述代码中使用link标签引入同一路径的index.css文件，link标签是在HTML代码中引入CSS文件，使CSS文件的样式代码能在HTML代码中生效。然后设置了5个不同类型的HTML标签，分别为<h3>、<div>、<p>、<input>和<button>，其中<div>设置了class属性，<input>和<button>设置了id属性。在设置样式之前，我们使用浏览器查看没有样式效果的index.html文件，如图1-24所示。
图1-24 网页效果
下一步将使用类别选择器、标签选择器、ID选择器、通用选择器和群组选择器分别对这些HTML标签进行样式设置。打开qd文件夹的index.css文件，然后在此文件中分别编写<h3>、<div>、<p>、<input>和<button>的样式代码，代码如下：
/*通用选择器*/
* {
font-size:30px
}
/*标签选择器*/
h3 {
color:blue;
}
/*类别选择器*/
.content {
text-align:center;
}
/*ID选择器*/
#message {
width:500px;
}
/*群组选择器*/
#submit, p {
color:red;
}
上述代码中，我们依次使用通用选择器、标签选择器、类别选择器、ID选择器和群组选择器设置index.html的网页布局，从代码中可以归纳总结CSS选择器的语法格式，如下所示。
XXX {
attribute:value;
attribute:value;
}
CSS选择器的语法说明如下：
（1）XXX代表CSS选择器的类型。
（2）在CSS选择器后面使用空格并添加中括号{}，在中括号{}里面编写具体的样式设置。
（3）样式设置以attribute:value表示，attribute代表样式名称，value代表该样式设置的数值。多个样式之间使用分号“;”隔开。
（4）如果要对样式添加注释，可以使用“/**/”添加说明。
我们回看index.css文件，该文件的样式代码说明如下：
（1）通用选择器：它以符号“*”表示，这是设置整个网页所有元素的样式，用于网页的整体布局。上述代码是将整个网页的字体大小设为30px。
（2）标签选择器：它以标签名表示，如果网页中有多个相同的标签，那么标签选择器的样式设置都会作用在这些标签上。上述代码是将所有h3标签的字体颜色设为蓝色。
（3）类别选择器：它以.xxx表示，其中xxx代表标签属性class的属性值，这是开发中常用的样式设置之一。使用类别选择器，必须在HTML的标签中设置class属性，在class属性的属性值前面加上实心点“.”即可作为类别选择器。上述代码是将class="content"的标签放置网页居中位置。
（4）ID选择器：它以#xxx表示，其中xxx代表标签属性id的属性值，这也是开发中常用的样式设置之一。使用ID选择器，必须在HTML的标签中设置id属性，在id属性的属性值前面加上井号“#”即可作为ID选择器。上述代码是将id=" message"的标签设置宽度为500px。
（5）群组选择器：它是将多个CSS选择器组合成一个群组，并由这个群组对这些标签进行统一的样式设置，每个CSS选择器之间使用逗号隔开。上述代码是分别将id=" submit"的标签和p标签的字体颜色设为红色。
最后保存index.css文件的样式代码，在浏览器再次查看index.html文件的网页效果，如图1-25所示。
图1-25 网页效果
CSS样式也可以直接在HTML文件里编写，但在企业开发中，一般都采用HTML和CSS代码分离，这样便于维护和管理，而且利于开发者阅读。