大家好，又见面了，我是你们的朋友全栈君。
以前我们通过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>
显示效果为：
对比两张效果图可以看出，居中显示对于行内元素并不起作用。
盒子模型
在网页设计中，我们经常用到的属性名有：内容（content），填充（padding），边框（border），边界（margin）。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。
浮动
在块级元素中我们提到，每个块级元素默认占一行高度，一个行内添加一个块级元素后无法添加其他元素。但有时候我们在设计页面时，想要实现块级元素在一行显示的效果，就需要用到浮动了。
关于浮动的具体介绍：CSS浮动
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/105756.html原文链接：https://javaforall.net
