层叠样式表——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)


相关推荐

  • Depix初体验

    Depix初体验前情提要这几天有一个同学给我发了一张马赛克图,问我能不能还原?图片如上。我一看,这被马成什么鬼样子了,谁能还原得了?不过我忽然想到,我在公众号上看到一个名字叫做”Depix”的Github项目。然而近期在Github上,又出现了一款号称能抹去马赛克让原图重现的神器,引发海内外热议。这款工具名为Depix,上线没几天就在GitHub上标星已超过一万多,截止目前累计分支也超过了1.3k个。让它火出圈子的,就是下面这张效果图:如图所示,第一行是打了一层巨厚马赛克完全像素化后的文本内容,看不出

  • Windows XP密钥–所有版本通用产品密钥集合

    在用秘钥之前,先看下你说安装的镜像是哪个版本的,再找相应的密钥,版本不对应,秘钥可能不管用,我的xp镜像如下:windows_xp_professional_with_service_pack_3_x86_cd_vl_x14-74070(ED2000.COM).iso找了sp3vol的密钥,激活成功尽管微软已经不再支持WindowsXP更新,但我相信仍然有许多用户因为他们的个人…

  • 编写两分钟的倒计时c语言(c语言倒计时几分几秒)

    集团文件版本号:(M928-T898-M248-WU2669-I2896-DQ586-M1988)集团文件版本号:(M928-T898-M248-WU2669-I2896-DQ586-M1988)C语言分钟倒计时代码C语言-2分钟倒计时代码#include#include#includeintmain(){inta=1,i=59;printf(“2:00”);Sleep(1000);sy…

  • 用new创建数组

    用new创建数组用new创建数组用new创建数组的优势由于new创建的对象是在运行时确立的,所以有着具体情况具体分析的优点,那么什么叫做具体情况具体分析呢?我觉得c++primerplus的一个例子十分贴切——比如你在度假,已经做好每天的参观计划,可突然有一天天气不好或你心情不好,此时你就不想参观了,如果此时是在编译状态,系统是不允许的,你必须按照计划去参观,但运行时状态,系统是允许的,此时你就可以呆在酒店尽情的玩耍了。用new创建数组也有此优点,即数组长度可以根据情况而定。比如说创建10个元素的数组,可以如下代

  • 获取textview行数

    获取textview行数如果我们想获取TextView内容的行数,TextView没有提供现成的api供我们使用,需要我们自己获取。这里提供一个间接的方法,通过StaticLayout来间接获取行数。下面是代码:publicstaticintgetTextViewLines(TextViewtextView,inttextViewWidth){intwidth=textViewWidt…

    2022年10月29日
  • java孙鑫老师视频教程笔记「建议收藏」

    java孙鑫老师视频教程笔记「建议收藏」此笔记是我开始系统学习java孙鑫老师视频教程的笔记。可供初学者学习参考哈 今天先附上第一课Java的一些基本概念第二课Java面向对象编程后面的将陆续为大家奉上 但是如果你是初学者的话,我笔记里边可能有些东西只是点了一下,没有再详尽的描述了那是因为我以前学过一段java,有一定java基础,所以如果你需要这部分更的详细讲解的话还是得麻烦你自己在网上搜一

发表回复

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

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