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

  • 第13课:浮动元素(float)

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

    2020年2月25日
    3.0K0
  • JS实现开关效果,可单选和组选

    JS实现的checkbox开关效果,可单个打开开关,也可一次关闭所有或打开所有开关。 <html> <head lang="en"> <meta charset="UTF-8"> <title>JS实现开关效果,可单选和组选|www.125jz.com</title…

    2018年7月29日
    11.2K0
  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    13.7K0
  • CSS常用类/ID命名规范

    书写规范请查看《CSS语法及命名规范(入门)》,本文介绍常用类/ID命名规范,CSS文件命名规范,如页面主体:main 内容:content 标签页:tab  章列表:list 信息:msg   标题:title   热点:hot 新闻:news注册:regsiter 合作伙伴:partner 友情链接:friendlink 页脚:footer 版权:cop…

    2019年3月14日
    9.6K0
  • 太赞了!推荐2个多彩渐变配色网站

    1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的,但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来,其中有的渐变色甚至拥有极为复杂的情绪,而你需要做的,就是输入你想传递的情绪,然后就能搜到相关的情绪和色彩,包括渐变的 CSS …

    2023年1月18日
    7.7K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    5.6K0

发表回复

登录后才能评论