CSS(层叠样式表(Cascading Style Sheets))历史

最新推荐文章于 2024-01-14 23:47:16 发布

程序员浩浩

最新推荐文章于 2024-01-14 23:47:16 发布

阅读量270

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_52655964/article/details/126346754

版权

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS用来美化我们的HTML。

发展历程

1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。

其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。

同年，W3C组织（World WideWeb Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯·莱尔顿(Thomas Reaxdon)，他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。

1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。

先了解一个网站

www.caniuse.com

可以让我们了解浏览器对于web属性的兼容性。

绿色表示兼容，红色表示不兼容，黄色表示需要不同的写法去兼容。数字表示浏览器版本。

开发者工具

在网页中按f12，或者右键选检查。

不同浏览器的F12工具长得不一样，功能相似。

开发者工具中有以下分类

元素
控制台
源代码
网络
性能等

在元素的界面中，有以下几个部分

我们点击左侧的HTML结构，就可以在对应的位置找到这个HTML标签的样式。

CSS的使用方法

color: red

行内式

利用标签的style属性，把css代码，写在属性值的位置上。

<p style="color: red;">这是一个段落</p>

内联式

内联式需要借助我们的标签style标签，style标签可以写在任何位置，但是需要我们写在head里。用户体验更好。如果放在HTML下面，则用户访问网页，先看到没有CSS的效果，然后一瞬间CSS出现，看到CSS的效果。

<style>
  /* 在这里写CSS代码 */
</style>

外联式

项目中推荐使用的方式，因为CSS和HTML分离

使用link标签引入外部的css文件。

需要在外部新建对应的CSS文件，需要先新建.txt文件，然后重命名为.css文件。

在HTML上，使用link引入

<link rel="stylesheet" href="css路径">

只要目录正确，我们直接写./剩下的提示交给VSCode

CSS语法

CSS的作用找到标签，然后设置样式。

张三 {
  身高: 2米;
  体重: 200斤;
  衣服颜色: 黑色;
  智商: 100;
}

这个语法其实就是CSS的语法，在CSS中有以下概念：选择器、属性、属性值

选择器 {
  属性: 属性值单位;
  第二个属性: 属性值;
  第n个属性: 属性值;
}

先了解选择器，然后学习属性和属性值。

在CSS中，存在大量的上面的语法

选择器 {
  属性: 属性值单位;
  第二个属性: 属性值;
  第n个属性: 属性值;
}
选择器 {
  属性: 属性值单位;
  第二个属性: 属性值;
  第n个属性: 属性值;
}
选择器 {
  属性: 属性值单位;
  第二个属性: 属性值;
  第n个属性: 属性值;
}
选择器 {
  属性: 属性值单位;
  第二个属性: 属性值;
  第n个属性: 属性值;
}
选择器 {
  属性: 属性值单位;
  第二个属性: 属性值;
  第n个属性: 属性值;
}