第1课:CSS是什么?

CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

也许你曾听说过CSS,但并不真正清楚CSS到底是什么。在这一课,你将学到更多CSS的知识,并了解CSS可以做些什么。

CSS是Cascading Style Sheets(级联样式表)的缩写,是一门指定文档该如何呈现给用户的语言。

CSS是为了解决内容与表现分离的问题而设计的。

在HTML中,使用标记语言来描述文档的内容。

使用CSS来指定它的样式。

CSS样式定义如何显示 HTML 元素,帮助您将文档信息的内容 和如何展现它的细节相分离。

可以用CSS做什么?

CSS涉及网页的字体、颜色、边距、高度、宽度、背景图像、定位等多个方面。

HTML可以用于为网站添加布局效果。而CSS则提供了更多选择,而且更为精确、完善。现在所有浏览器都支持CSS。

经过下面若干课的学习之后,你将能够制作自己的CSS样式表,为自己的网站添加漂亮的效果。

CSS跟HTML的区别在哪里?

HTML用于结构化内容;CSS用于格式化结构化的内容。

嗯,这听上去有点技术性并令人疑惑。不过没关系,我们继续学习。过会儿你就明白了。

在Tim Berners-Lee发明万维网(World Wide Web)的那个年代,HTML语言是唯一用于给文本添加结构的语言。作者可以通过声明“这是一个标题”(利用h1标签)或“这是一个段落”(利用p标签)的方式来标记文本。

随着Web逐渐流行起来,网页设计者们开始寻求为网页增添布局的可能性。为此,当时的浏览器厂商们(网景公司和微软公司)发明了一些新的HTML标签(比如<font>等),以引入了新的布局——而非新的结构。

这也导致了原本用于进行文本的结构化的标签(比如<table>等)越来越多地被误用于进行页面的布局。许多新的布局标签(比如<blink>)只有一种浏览器支持。“您需要使用某某浏览器来浏览本页面”成为当时常见于许多网站的声明。

CSS的发明正是为了改善这一状况,它为Web设计师们提供了完善的、所有浏览器都支持的布局能力。而且,文档的表现样式与内容的分离,也令网站维护容易了许多。

采用CSS有哪些好处?

CSS是Web设计界的一次革命。

CSS的具体优点包括:

  • 通过单个样式表控制多个文档的布局;

可以避免重复 ,更容易维护。

例如:您的网站可能有成千上万的页面外观相似。使用CSS,您可以将样式信息存储在公共的文件中以供所有的页面共用。
当用户显示页面时,用户的浏览器将样式信息和页面内容一同加载。

  • 更精确的布局控制;
  • 为不同的媒体类型(屏幕、打印等)采取不同的布局;
  • 无数高级、先进的技巧。

在下一课,我们将深入考察CSS的工作原理,以及如何上手。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4951.html

赞 (6)
江山如画的头像江山如画管理团队
0基础学CSS
上一篇 2020年2月22日 下午3:38
第2课:CSS的工作原理
下一篇 2020年2月22日 下午4:08

99%的人还看了以下文章

  • 第12课:高度和宽度

    到目前为止,我们还没有在元素尺寸方面给予关注。在这一课,我们将看到为元素定义高度和宽度是十分简单的。 设定宽度[width] 设定高度[height] 设定宽度[width] 你可以通过width属性来设定一个元素的宽度,即在水平方向上的尺寸。 下面是一个简单的例子,它为我们提供了一个可以容纳文本的盒子: div.box {width: 200px;bord…

    2020年2月25日
    10.0K0
  • 第2课:HTML是什么?

    HTML是什么? HTML是一门语言,它令我们可以在因特网上展示信息。你所看到的网页,是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码,只需在浏览器菜单栏上点击“查看”,然后选择“源文件”即可。 对于生手来说,HTML代码看似很复杂,不过本教程将帮助你弄清楚它们的含义。 HTML能用来做什么? 如果你要制作网站的话,学习HTML是不可避免的。即…

    2018年1月20日
    17.2K0
  • CSS 实现水平、垂直居中布局代码大全

    CSS实现水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置width:fit-content并且配合margin .parent { width: -webkit-fit-content; width: -moz-fit…

    2019年11月26日
    25.1K0
  • H5不支持frameset的三种解决方案:div+iframe、include、jQuery的onload方法加载页面

    frameset标签定义框架集,它用于组织多个窗口(框架)。每个框架存在一个独立的文档。 <frameset id=”frame” frameborder=”0″ framespacing=”0″ rows=”100,*” border=”false” scrolling=”yes”> <frame name=”topframe” scro…

    2020年1月1日
    17.8K0
  • 一句代码给图片加倒影-CSS3

    本文使用纯CSS代码给图片加倒影,CSS代码 : img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示: 完整代码: &lt…

    2019年8月18日
    10.5K0
  • css布局基础-盒子模型

    网页设计的第一步就是设计版面布局,本文介绍了css布局基础-盒子模型,CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin(边界)、border(边框)、padding(填充)和content(内容)4部分组成。

    2022年7月14日
    15.5K0

发表回复

登录后才能评论