层叠样式表——CSS

层叠样式表——CSS层叠样式表——CSS

大家好,又见面了,我是你们的朋友全栈君。

    以前我们通过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 ;         /*红色*/
}

在页面上的显示效果:

层叠样式表——CSS

对比:

 

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

对比两张效果图可以看出,居中显示对于行内元素并不起作用。

盒子模型

   
在网页设计中,我们经常用到的属性名有:内容(content),填充(padding),边框(border),边界(margin)。这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。
层叠样式表——CSS
层叠样式表——CSS

浮动

在块级元素中我们提到,每个块级元素默认占一行高度,一个行内添加一个块级元素后无法添加其他元素。但有时候我们在设计页面时,想要实现块级元素在一行显示的效果,就需要用到浮动了。

关于浮动的具体介绍:CSS浮动

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/105756.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号