大家好,又见面了,我是你们的朋友全栈君。
以前我们通过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浮动
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/105756.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...