第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)
江山如画的头像江山如画管理团队
上一篇 2020年2月22日 下午3:38
下一篇 2020年2月22日 下午4:08

99%的人还看了以下文章

  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    9.4K0
  • 实现表格单线边框的两种方法

    实现表格单线边框方法一 border-collapse: collapse; 代码如下: See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二 给table上边和左边设上边框线,给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…

    2019年10月31日
    9.0K0
  • 5种 CSS 实现DIV中内容垂直居中的方法

    使用 CSS 实现DIV中内容垂直居中并不容易,有些方法在一些浏览器中无效。 今天中国网页设计给大家分享使DIV中对象垂直集中的5种不同方法,以及它们各自的优缺点。 CSS 实现DIV中内容垂直居中方法一 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。 <div class=…

    2018年9月23日
    11.1K0
  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    5.9K0
  • 第14课:上传网页

    只要你有服务器空间和一个FTP工具就可以在因特网上发布自己的网站了。

    2018年1月18日
    8.4K1
  • div+css实现面包屑导航-默认竖线分隔、箭头分隔、空白分隔

    div+css实现面包屑导航,主要用到了CSS3伪元素before,大家可以通过本利好好理解before的使用方法,下面125建站网给出实现代码。 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title></title> &…

    2023年1月5日
    1.9K0

发表回复

登录后才能评论