第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%的人还看了以下文章

  • 手把手教你做响应式网页,响应式布局实例入门(精)

    刚接触响应式布局的童鞋会感觉响应式布局很高大上,很难,但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例,手把手教你如何制作响应式网页。 响应式布局(Responsive Layout) 响应式布局分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…

    2018年7月28日
    7.6K0
  • 哪些浏览器支持HTML5?

    目前支持HTML5的浏览器主要有: 谷歌浏览器(全面支持HTML5)、360浏览器、搜狗浏览器、世界之窗、Firefox、Safari、Opera、QQ浏览器、傲游浏览器、IE10。 如要下载支持HTML5的浏览器,请到官网下载!

    2019年3月13日
    7.8K0
  • 第3课:颜色与背景

    本课,你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。

    2020年2月22日
    5.0K0
  • 第13课:浮动元素(float)

    我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理: 举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示: 如何实现这个效果? 上例的HTML代码如下所示: <div id=”picture”><…

    2020年2月25日
    2.7K0
  • CSS进阶,4个案例入门,学会LESS使用

    Less 简介 什么是LESSCSS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。 Less语言特性 LESS的变量 变量允许我们单独定义一系列通用的样式…

    2019年7月17日
    3.1K0
  • CSS border-radius 深入学习(含可视化生成工具)

    没有学过CSS border-radius 的同学,请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法: .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角,如下图: 只输入一个数值,所有角都会被四舍五入,若要固定值可以使用 …

    2019年10月17日 网页制作
    7.4K0

发表回复

登录后才能评论