简析CSS | 青训营笔记

151 阅读2分钟

CSS发展史

  • 20 世纪 90 年代蒂姆·伯纳斯·李(Tim Berners-Lee)发明万维网,创造 HTML 超文本标记语言。此后网页样式便以各种形式存在,不同的浏览器有自己的样式语言来控制页面的效果,因为最原始的 Web 版本中根本没有提供一种网页装饰的方法。
  • 1994 年,Håkon Wium Lie 最初提出了 CSS 的想法,联合当时正在设计 Argo 的浏览器的Bert Bos,他们决定一起合作设计 CSS,于是创造了 CSS 的最初版本。
  • 1996 年 12 月,W3C 推出了 CSS 规范的第一版本。
  • 1997 年,W3C 颁布 CSS1.0 版本 ,CSS1.0 较全面地规定了文档的显示样式,可分为选择器、样式属性、伪类 / 对象几个部分。
  • 1998 年,W3C 发布了 CSS 的第二个版本,目前的主流浏览器都采用这标准。
  • 2005 年 12 月,W3C 开始 CSS3 标准的制定,到目前为止该标准还没有最终定稿。

基础知识

css语法

CSS 规则由两个主要的部分构成:选择器,以及声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来。

css列表

css中列表有有序列表(ol)和无序列表(ul)两种。 列表属性有以下几种:

  • [list-style]:设置列表的风格。
  • [list-style-image]:将图像设置为列表项标志。
  • [ist-style-position]:设置列表中列表项标志的位置。
  • [list-style-type]:设置列表项标志的类型。

CSS Float(浮动)

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。Float(浮动),往往是用于图像,但它在布局时一样非常有用。清除浮动使用:

{ clear:both; }

浮动属性:

属性值描述
none表示不浮动,所有之前讲解的HTML标签默认不浮动
left左浮动
right右浮动
inherit继承父元素的浮动属性

浮动的缺点:浮动能网页实现排版布局,但是同样也会给网页带来一定的问题(父盒子高度塌陷),只要我们解决了浮动给网页带来的问题,就能对网页进行高效的排版布局。