黑豹程序员-架构师学习路线图-百科:CSS-网页三剑客

news2025/1/15 7:38:46

文章目录

  • 1、为什么需要CSS
  • 2、发展历史
  • 3、什么是CSS
  • 4、什么是SASS、SCSS

1、为什么需要CSS

在这里插入图片描述

作为网页三剑客的第二,CSS为何需要它,非常简单HTML只能完成页面的展现,但其做出来的页面奇丑无比。
随着网络的普及,人们的要求更高,不仅要看信息,还希望页面更加优美。
这个任务HTML完成不了,于是就产生了CSS样式表来美化我们的页面。

2、发展历史

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

从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

1994年,HTML作者的挪威同事 哈坤·利(Hakon Wium Lie) 首先提出CSS。

而当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器,于是他们决定一起设计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规范第二版。

3、什么是CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS 1 :始于1966年。

CSS 2 :诞生于1998年,添加定位,Z-index,media 属性。

CSS 2.1:诞生于2004~2011年,目前使用最广泛的版本(IE支持)

CSS 3:1999年开始起草,把CSS模块化,独立升级各功能。

4、什么是SASS、SCSS

在这里插入图片描述
官网:https://sass-lang.com/

Sass(英文全称:Syntactically Awesome Stylesheets)是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是 CSS 预处理语言。最初它是为了配合 HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格。

较新的语法叫做SCSS,是 SassyCSS 的简写,使用和 CSS 一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。采用.scss文件扩展名区。

SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

SCSS即是SASS的3.0是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS。

总结一句,说白了让静态的CSS变成动态可编程的CSS。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1057896.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Ubantu 20.04 卸载与安装 MySQL 5.7 详细教程

文章目录 卸载 MySQL安装 MySQL 5.71.获取安装包2.解压并安装依赖包3.安装 MySQL4.启动 MySQL 扩展开启 gtid 与 binlog 卸载 MySQL 执行以下命令即可一键卸载,包括配置文件目录等。 # 安装sudo软件 apt-get install sudo -y # 卸载所有以"mysql-"开头的…

小病变检测:Gravity Network for end-to-end small lesion detection

论文作者:Ciro Russo,Alessandro Bria,Claudio Marrocco 作者单位:University of Cassino and L.M. 论文链接:http://arxiv.org/abs/2309.12876v1 内容简介: 1)方向:医学影像中小病变检测 2&#xff0…

PyQt5+Qt设计师初探

在上一篇文章中我们搭建好了PyQt5的开发环境,打铁到趁热我们基于搭建好的环境来简单实战一把 一:PyQt5包模块简介 PyQt5包括的主要模块如下。 QtCore模块——涵盖了包的核心的非GUI功能,此模块被用于处理程序中涉及的时间、文件、目录、数…

代谢组学最常用到的数据分析方法(五)

代谢组学是一门对某一生物或细胞所有低分子质量代谢产物&#xff08;以相对分子质量<1000的有机和无机的代谢物为研究核心区&#xff09;进行分析的新兴学科。因此从复杂的代谢组学数据中确定与所研究的现象有关的代谢物&#xff0c;筛选出候选生物标记物成为代谢物组学研究…

秋招,网申测评,认知能力测试

随着秋季的到来&#xff0c;越来越多的企业开始进行职业招聘&#xff0c;在这些招聘中&#xff0c;我们总会看到“认知能力测试”的影子。说到这个测试&#xff0c;很多人可能还不太理解&#xff0c;不知道这种测试是什么。 1、什么是认知能力测试 认知能力是指大脑加工、…

【Diffusion】DDPM - (1)预备基础知识

预备基础知识 1、概率 - 条件独立 A 和 B 是两个独立事件    ⇒    P ( A ∣ B ) = P ( A ) \; \Rightarrow \; P(A|B) = P(A) ⇒P(A∣B)=P(A), P ( B ∣ A ) = P ( B ) \quad P(B|A) = P(B) P(B∣A)=P(B) ⇒ P ( A , B ∣ C ) = P ( A ∣ C ) P ( B ∣ C ) \quad\quad…

Java编码

Java编码问题 Unicode与码点 所谓Unicode就是全世界的字符字典&#xff0c;也就是把字符给一个编号&#xff0c;这个编码就是码点。比如 2. 编码 由于这种分配的编码无论从占用空间角度&#xff0c;还是读取速度&#xff0c;以及逻辑划分角度&#xff0c;都不是完善。所以出…

Ai4science学习、教育和更多

11 学习、教育和更多 人工智能的进步为加速科学发现、推动创新和解决各个领域的复杂问题提供了巨大的希望。然而&#xff0c;要充分利用人工智能为科学研究带来的潜力&#xff0c;我们需要面对教育、人才培养和公众参与方面的新挑战。在本节中&#xff0c;我们首先收集了关于每…

Java并发-满老师

Java并发 一级目录栈与栈帧线程上下文切换三级目录 一级目录 栈与栈帧 满老师视频链接 我们都知道 JVM 中由堆、栈、方法区所组成&#xff0c;其中栈内存是给谁用的呢&#xff1f;其实就是线程&#xff0c;每个线程启动后&#xff0c;虚拟机就会为其分配一块栈内存 每个栈由…

CSS基础语法之盒子模型

目录 一、 选择器 1.1 结构伪类选择器 1.1.1基本使用 1.1.2 :nth-child(公式) 1.2 伪元素选择器 二、 PxCook 三、盒子模型 3.1 盒子模型-组成 3.2 边框线 3.2.1四个方向 3.2.2 单方向边框线 3.3 内边距 3.4 尺寸计算 3.5 外边距+版心居中 3.6 清除默认样式 3.7…

简单丝的tab切换栏(html/CSS)

#html <!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>CSS实现左右滑动选项卡效果</title><link rel"stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/meyer-res…

查看虚拟机ip地址

前几天安装了docker&#xff0c;运行了一下以后发现自己的主机无论如何也访问不了虚拟机上运行的容器&#xff0c;老实说我大受打击&#xff0c;因为各种各样的方法我都试了个遍&#xff0c;重装&#xff0c;配私服&#xff0c;各种各样的方法&#xff0c;结果显示却是正常的&a…

紫光同创FPGA图像视频采集系统,提供2套PDS工程源码和技术支持

目录 1、前言免责声明 2、紫光同创FPGA相关方案推荐3、设计思路框架视频源选择OV7725摄像头配置及采集OV5640摄像头配置及采集动态彩条HDMA图像缓存输入输出视频HDMA缓冲FIFOHDMA控制模块 HDMI输出 4、PDS工程1详解&#xff1a;OV7725输入5、PDS工程2详解&#xff1a;OV5640输入…

想要精通算法和SQL的成长之路 - 恢复二叉搜索树和有序链表转换二叉搜索树

想要精通算法和SQL的成长之路 - 恢复二叉搜索树和有序链表转换二叉搜索树 前言一. 恢复二叉搜索树二. 有序链表转换二叉搜索树 前言 想要精通算法和SQL的成长之路 - 系列导航 一. 恢复二叉搜索树 原题链接 首先&#xff0c;一个正常地二叉搜索树在中序遍历下&#xff0c;遍历…

win10 快捷键

WinD 回到桌面 WinE 文件资源管理器 WinI windows设置 WinL 锁屏 Wintab 显示所有已打开窗口的缩略图 Alttab 在所有已打开窗口的缩略图中快速切换 Win空格 输入法切换 WinshiftS 截图 windows10下有哪些必须掌握的快捷键&#xff1f; - …

【Java-LangChain:使用 ChatGPT API 搭建系统-2】语言模型,提问范式与 Token

第二章 语言模型&#xff0c;提问范式与 Token 在本章中&#xff0c;我们将和您分享大型语言模型&#xff08;LLM&#xff09;的工作原理、训练方式以及分词器&#xff08;tokenizer&#xff09;等细节对 LLM 输出的影响。我们还将介绍 LLM 的提问范式&#xff08;chat format…

Python开源项目月排行 2023年9月

#2023年9月2023年9月9日1fishdraw这个项目是用来随机生成一条鱼的&#xff0c;这条鱼特别的稀奇古怪&#xff0c;这个项目不依赖任何库&#xff0c;支持 svg, json, csv 等格式。2vizro一个用于创建模块化数据可视化应用程序的工具包。在几分钟内快速自助组装定制仪表板 - 无需…

谈谈Redis分布式锁

目录 一、回顾分布式锁 &#xff08;一&#xff09;理解分布式锁的定义 &#xff08;二&#xff09;分布式锁的约束条件 &#xff08;三&#xff09;分布式锁常见实现方式 基于数据库的分布式锁 基于缓存的分布式锁 基于分布式一致性算法的分布式锁 基于文件系统的分布…

JavaSE | 初始Java(十) | 继承和多态

继承 (inheritance) 机制 &#xff1a;是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加新功能 &#xff0c;这样产生新的类&#xff0c;称 派生类 。继承呈现了面向对象程序设计的层次结构&#xff…

在线教育平台开发:数字化教育的奇妙时代

在今天的数字化时代&#xff0c;教育正在经历着前所未有的变革。在线教育平台的兴起已经改变了传统教育的局面&#xff0c;为学习者和教育者提供了无限的机会。本文将深入探讨在线教育平台开发的关键方面&#xff0c;并穿插一些实际代码示例&#xff0c;以帮助您了解如何创建一…