CSS(层叠样式表(Cascading Style Sheets))历史
层叠样式表(英文全称: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个属性: 属性值; }
CSS(层叠样式表(Cascading Style Sheets))历史相关推荐
- CSS层叠样式表Cascading Style Sheets(2021.10.05)
一.CSS简介 1.优缺点 优点:丰富的样式描述: 样式和结构的分离,便于维护和管理: 减少代码量,加快页面加载: 样式代码复用性强: 多个页面可以使用同一个CSS代码: 缺点:浏览器对CSS支持程度 ...
- CSS 指层叠样式表 (Cascading Style Sheets) 和选择器
CSS 指层叠样式表 (Cascading Style Sheets) 内联样式(行内样式) 在开始标记中通过style属性(attribute)来设置元素的样式.注意,这里的 property 指的 ...
- 样式表(CSS:Cascading Style Sheets)简要教程[上]
首先提供两个手册的下载 CSS2&JavaScript.rar 一.样式表基础 1. 样式表中每一个条目由选择符(selector)和对应的规则组成,选择符通常是HTML元素名称,也可以是类( ...
- CSS : Cascading Style Sheets
作者:知乎用户 链接:https://www.zhihu.com/question/20077745/answer/137434995 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业 ...
- CSS(层叠样式表cascading style sheet)——CSS样式、基础选择器
一.CSS作用 对页面的外观进行美化 统一网站页面的风格 实现内容和样式的分离,适合团队开发 二.CSS语法规范 三.CSS引入方式 CSS的3种样式表 书写位置的不同分为:行内样式表(行内式) ...
- CSS(Cascading Style Sheets)层叠样式表
为网页添加样式 术语解释 '''css h1{ color:red; background-color:lightblue; text-align: center; } ''' CSS规则 = 选择器 ...
- CSS (Cascading Style Sheets)
CSS 是什么 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制 , 实现美化页面的效果 . 能够做到页面的样式和结构分离. 基本语 ...
- CSS层叠样式表(Cascading Style Sheets)
CSS简介 CSS全称为:层叠样式表(Cascading Style Sheets),主要用于定义HTML内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等. 使用CSS样式通过定义某个样式,可以 ...
- CSS(Cascading Style Sheet)
文章目录 CSS(Cascading Style Sheet) 使用方式 基本语法 颜色写法 选择器*** 标签选择器 id选择器 类选择器 选择器分组 层次选择器 伪类 pseudo-classes ...
- CSS(Cascading Style Sheets) 层叠样式表
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTM ...
最新文章
- 一个有趣的案例 | 页面扭曲矫正
- 洛谷 P3112 [USACO14DEC]后卫马克Guard Mark
- JAVA Fork Join Demo 1
- Clojure Web 开发 -- Ring 使用指南
- ECShop 前台用户中心调整左侧栏目及中心部分呈现页面
- matlab usb cam,Matlab环境下使用USB2.0摄像头编程image acquisition tools(读书笔记) | 学步园...
- mac连接ubuntu,tomcat乱码
- 聊天机器人中的 A/B 测试
- 在windows下用vagrant建立lnmp开发环境
- Java进阶:SpringMVC文件上传
- Atitit 图像处理—图像形态学(膨胀与腐蚀)
- 如何用VC 2005打开VC 2008的工程
- 测试ai模糊软件,“马赛克”视频能被AI软件彻底还原?测试结果出乎意料!
- PDF如何旋转页面,PDF旋转页面的操作方法
- springboot页面模板thymeleaf的简单用法
- 社会神经网络有哪些,神经网络的神经网络
- win10 如何将应用程序添加到信任列表
- ROS通信机制:话题、服务、参数
- 手机OTG 我的世界_怎么用手机把小说下载到mp3
- android横竖屏切换动画,Android应用怎么实现屏幕横竖屏切换功能
热门文章
- CSAPP:archlab
- 使用python实现自动爬取得物交易记录,商品信息进行数据分析
- 华硕笔记本提示android,华硕主板电脑和华硕笔记本开启VT进BIOS设置方法教程
- JZOJ 3859.【NOIP2014八校联考第3场第2试10.5】孤独一生(sprung)
- [leetcode]: 506. Relative Ranks
- WIN7 安装使用远程服务器管理工具-如DHCP、AD域、HyperV、远程桌面
- C# 中的 delegate, Lambda 表达式 和 event
- QQ空间花匠免费代码
- php链路追踪molten
- C++中的模板(template)