CSS
CSS表示层叠样式表
(Cascading Style Sheet,简称:CSS,又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表) 是为网页添加 样式的代码
。
CSS是一种语言吗?
- MDN解释:CSS 也不是真正的编程语言,甚至不是标记语言。它是一门样式表语言;
- 维基百科解释:是一种计算机语言,但是不算是一种编程语言;
历史
早期的网页都是通过HTML来编写的,但是我们希望HTML页面可以更加丰富
- 这个时候就增加了很多
具备特殊样式的元素
:比如i、strong、del等等; - 后来也有不同的浏览器
实现各自的样式语言
,但是没有统一的规划; - 1994年,哈肯·维姆·莱和伯特·波斯
合作设计CSS
,在1996年的时候发布了CSS1
; - 直到1997年初,W3C组织才专门
成立了CSS的工作组
,1998年5月发布了CSS2
; - 在2006~2009非常流行
“DIV+CSS” 布局
的方式来替代所有的html标签; - 从CSS3开始,所有的CSS分成了
不同的模块(modules)
,每一个“modules”都有于CSS2中额外增加的功能,以及向后兼容; - 直到2011年6月7日,
CSS 3 Color Module
终于发布为W3C Recommendation;
总结:CSS的出现是为了美化HTML的,并且让结构(HTML)与样式(CSS)分离;
- 美化方式一:为HTML
添加各种各样的样式
,比如颜色、字体、大小、下划线等等; - 美化方式二:对HTML
进行布局
,按照某种结构显示(CSS进行布局 – 浮动、flex、grid);
编写
声明(Declaration)一个单独的CSS规则,如 color: red; 用来指定添加的CSS样式。
属性名(Property name)
:要添加的css规则的名称;属性值(Property value)
:要添加的css规则的值;
应用
CSS提供了3种方法,可以将CSS样式应用到元素上
- 内联样式(inline style)
- 内部样式表(internal style sheet)、文档样式表(document style sheet)、内嵌样式表(embed style sheet)
- 外部样式表(external style sheet)
内联样式(inline style)
内联样式(inline style)
,也有人翻译成行内样式。
- 内联样式表存在于 HTML元素的style属性 之中。
- CSS样式之间用分号
;
隔开,建议每条CSS样式后面都加上分号;
内部样式表(internal style sheet)
内部样式表(internal style sheet)
- 将CSS放在HTML文件
<head>元素里的<style>元素
之中。
外部样式表(external style sheet)
外部样式表(external style sheet) 是将css编写一个独立的文件中,并且 通过<link>元素
引入进来。
- 第一步:将css样式在一个独立的css文件中编写(后缀名为.css);
- 第二步:通过
<link>元素
引入进来;
可以在style元素或者CSS文件中使用@import
导入其他的CSS文件
注释
CSS代码也可以添加注释来方便阅读
- CSS的注释和HTML的注释是不一样的;
/* 注释内容 */
官方文档
CSS官方文档地址
https://www.w3.org
CSS推荐文档地址
https://developer.mozilla.org
由于浏览器版本、CSS版本等问题,查询某些CSS是否可用
- 可以到https://caniuse.com查询CSS属性的可用性;