以前我们通过VB敲机房的时候,可以直接通过拖动窗体上的控件、修改代码的属性或是通过代码来设置窗体的布局,而在B/S的学习中,可以通过CSS语言来使网页的内容和样式分离,也就是在aspx或是html中设计网页的内容,在CSS表中设置网页的显示、文字的设计等。
概述
CSS(Cascading StyleSheets):层叠样式表。将网页表现与内容分离的一种样式设计语言。
当我们想要在HTML中设置CSS样式时,就需要通过class选择器或id选择器来进行标记连接。
ID选择器:
为标有特定ID的HTML元素制定特定的样式。
HTML中的元素:
<body>
<span id="title">新闻标题</span>
</body>
CSS中的样式表示:
#title {
text-align :center ; /*居中显示*/
font-weight :bold ; /*粗体*/
color :red ; /*红色*/
}
Class选择器:
可以描述一种元素的样式。
HTML中的元素:
<body>
<span class ="menu">栏目一</span>
<span class ="menu">栏目二</span>
<span class ="menu">栏目三</span>
</body>
CSS中的样式表示:
.menu {
text-align :center ; /*居中显示*/
color :red ; /*红色*/
}
在页面上的显示效果:
对比:
| ID选择器 | CSS选择器 |
元素范围 | 特定元素 | 一组元素 |
HTML表示 | <span ID=”title”></span> | <span class=”title”></span> |
CSS表示 | #title | .title |
标准流
标准流可以理解为标签的排列方式。
设计标签的排列方式就产生了块级元素和行内元素。
块级元素
每个块级元素默认占一行高度。
表示方法:<div></div>
行内元素
和块级元素相比较,行内元素可以理解为一行可以容纳多个元素。
表示方法:<span></span>
将新闻标题设为块级元素
<body>
<div id="title">新闻标题</div>
<span class ="menu">栏目一</span>
<span class ="menu">栏目二</span>
<span class ="menu">栏目三</span>
</body>
显示效果为:
对比两张效果图可以看出,居中显示对于行内元素并不起作用。
盒子模型
浮动
在块级元素中我们提到,每个块级元素默认占一行高度,一个行内添加一个块级元素后无法添加其他元素。但有时候我们在设计页面时,想要实现块级元素在一行显示的效果,就需要用到浮动了。
关于浮动的具体介绍:CSS浮动