1 、CSS是详解甚么意思

CSS是Cascading Style Sheets英文首字母的缩写，中文翻译为层叠格式表,层叠 是一种用来默示Html（标准通用标识表记标帜言语的一个独霸）或XML（标准通用标识表记标帜言语的一个子集）等文件格式的筹算机言语。CSS不单可以静态地润饰网页，格式还可以合营各类脚本言语静态地对网页各元素举办格式化。表C编辑CSS 可以对网页中元素职位的特点语排版举办像素级切确独霸，支撑几近全数的法及字体字号格式，具有对网页对象和模型格式编辑的软件身手。

假定把一个网页比作一小我：

• HTML是意思这小我的 骨骼和身材筹划（比如头、手
  、详解脚
  、层叠段落 、格式问题 、表C编辑图片） 。特点语
• CSS就是法及这小我的 衣服
  、发型、妆容（比如色彩
  、字体 、大年夜小、筹划）。
• Javascript则是这小我的 肌肉和行动神经（让它可以动、可以交互） 。

所以 ，CSS 就是担当独霸网页外不美不雅不雅不雅不雅不雅不雅和筹划的言语 。

2、CSS工作事理

当不雅不雅不雅不雅鉴赏器展示文档时，它必须将文档的内容与其格式信息连络 。它分两个阶段措置文档
：

(1)、不雅不雅不雅不雅鉴赏器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在筹算机内存中展示文档。它把文档内容和其格式连络在一同。

(2)、不雅不雅不雅不雅鉴赏器展示 DOM 的内容。

CSS工作事理

CSS是一种定义格式筹划如字体、色彩、职位等的言语，被用于描摹网页上的信息钱式化和展示的编制。CSS格式可以直接存储于HTML网页或孤单的格式单文件 。非论哪一种编制
，格式单包含将格式独霸到指定圭表类型的元素的轨则。内部独霸时，格式单轨则被放置在一个带有文件扩大年夜大年夜大年夜大年夜名.css的内部格式单文档中。

格式轨则是可独霸于网页中元素
，如文本段落或链接的格式化指令。格式轨则由一个或多个格式属性及其值构成。内部格式单直接放在网页中，内部格式单保管在自力的文档中，网页经由过程一个出格标签链接内部格式单。

称号CSS中的"层叠（cascading）"展示格式单轨则独霸于HTML文档元素的编制 。具体地说，CSS格式单中的格式构成一个层次筹划，更具体的格式袒护通用格式 。格式轨则的优先级由CSS屈就这个层次筹划决意 ，从而完成级联络果 。

3 、CSS的特点

CSS为HTML标识表记标帜言语供给了一种格式描摹，定义了个中元素的展示编制 。CSS在Web筹划局限是一个打破。独霸它可以完成改削一个小的格式更新与之相干的全数页面元素。集团来讲，CSS具有以下特点：

1 、丰富的格式定义

CSS供给了丰富的文档格式外不美不雅不雅不雅不雅不雅不雅 ，和设置文本和布景属性的身手；准予为任何元素成立边框，和元素边框与其他元素间的距离，和元素边框与元素内容间的距离；准予尽情改削文本的大年夜小写编制、润饰编制和其他页面终局。

2 、易于独霸和改削

CSS可以将格式定义在HTML元素的style属性中
，也可以将其定义在HTML文档的header部分 ，也可以将格式声明在一个专门的CSS文件中
，以供HTML页面援引 。总之，CSS格式表可以将全数的格式声明不合存放，举办不合治理
。

此外，可以将不特别很是式的元素举办回类，独霸不合个格式举办定义，也可以将某个格式独霸到全数同名的HTML标签中 ，也可以将一个CSS格式指定到某个页面元素中 。假定要改削格式，我们只需求在格式列表中找到照顾的格式声明举办改削
。

3 、多页面独霸

CSS格式表可以孤单存放在一个CSS文件中，多么我们便可以在多个页面中独霸不合个CSS格式表。CSS格式表幻想上不属于任何页面文件，在任何页面文件中都可以将其援引
。多么便可以完成多个页面气焰的不合 。

4、层叠

复杂的说，层叠就是对一个元素多次设置不合个格式，这将独霸末尾一次设置的属性值 。比如对一个站点中的多个页面独霸了不合套CSS格式表 ，而某些页面中的某些元素想独霸其他格式，便可以针对这些格式孤单定义一个格式表独霸到页面中  。这些后来定义的格式将对后面的格式设置举办重写，在不雅不雅不雅不雅鉴赏器中看到的将是最初背设置的格式终局。

5、页面膨胀

在独霸HTML定义页面终局的网站中
，经常需求除夜量或几回的表格和font元素构成各类规格的文字格式
，多么做的下场就是会产生发火除夜量的HTML标签 ，从而使页面文件的大年夜小添加 。而将格式的声明孤单放到CSS格式表中，可以除夜除夜的减小页面的体积，多么在加载页面时独霸的时分也会除夜除夜的促进。此外，CSS格式表的复用更除夜程度的缩减了页面的体积 ，促进下载的时分
。

4 、CSS语法引见

css语法轨则集由选择器和声明块构成。选择器指的就是您要设置格式的html元素。如标签名（body ，h1,p,div...）就是一个选择器。

css语法

1、选择器

(1)、圭表类型选择器

CSS中的一种选择器是元素圭表类型的称号 。独霸这类选择器(称为圭表类型选择器) ，可以向这类元素圭表类型的每个实例上独霸声明。比如 ，以下复杂轨则的选择器是H1
 ，是以轨则感染于文档中全数的H1元素：

H1 { color:red}

(2)、复杂属性选择器

①CLASS属性

CLASS属性准予向一组在CLASS属性上具有不异值的元素独霸声明。BODY内的全数元素都有CLASS属性
。从本质上讲，可独霸CLASS属性来分类元素 ，在格式表中成立轨则来援引CLASS属性的值，然后不雅不雅不雅不雅鉴赏器主动将这些属性独霸到该组元素。

类选择器以标识表记标帜符（句点）开首，用于指使后背是哪一种圭表类型的选择器。对类选择器 ，之所以选择句点是因为在良多编程言语中它与术语"类"相联络关系。翻译成英语 ，标识表记标帜符展示"带有类名的元素" 。

②ID属性

ID属性的独霸近似于CLASS属性，但有一点次要的不合的中心 ：ID属性的值在整篇文档中必须是独一的。这使得ID属性可用于设置单个元素的格式轨则。包含ID属性的选择器称为ID选择器。

需求寄看的是，ID选择器的标识表记标帜符是散列标识表记标帜（#）
。标识表记标帜符用来提示不雅不雅不雅不雅鉴赏器接上往展示的是ID值 。

③STYLE属性

当然在选择器中可独霸CLASS和ID属性值 ，STYLE属性理论上可以更调全数选择器机制 。不是只具有一个可以在选择器中援引的值(这恰是ID和CLASS具有的值) ，STYLE属性的值理论上是一个或多个CSS声明。

但凡气候下，独霸CSS，筹划者将把全数的格式轨则置于一个格式表中
，该格式表位于文档顶部的STYLE元素内（或在内部举办链接）。可是，独霸STYLE属功可以绕过格式表将声明直接放置到文档的最早标识表记标帜中。

④组合选择器圭表类型

可以将圭表类型选择器、ID选择器和类选择器组分化不合的选择器圭表类型来构成更宏壮的选择器
。经由过程组合选择器，可以愈加切确地措置希看授予某种展示的元素 。比如 ，要组合圭表类型选择器和类选择器，一个元素必须知足两个请求：它必须是切确的圭表类型和切确的类以便使格式轨则可以感染于它  。

⑤内部信息：伪类和伪元素

在CSS1中，格式但凡是基于在HTML源代码中展示的标识表记标帜和属性。对良多筹划气候而言这类做法无缺可行，可是它没法完成筹划者希看掉落踪掉落踪的一些罕有的筹划终局。

筹划伪类和伪元素可以完成个中的一些终局。这两种机制扩大年夜大年夜了CSS的默示身手 。在CSS1中 ，独霸伪类可以屈就一些气候改削文档中链接的格式，如屈就链接可否被访谒 ，甚么时辰被访谒和用户和文档的交互编制来独霸改削。借助于伪元素
，可以变换元素的第一个字母和第一行的格式 ，或添加源文档中没有展示过的元素 。

伪类和伪元素都不存在于HTML；也就是说，它们在HTML代码中是不成见的
。这两种机制都掉落踪掉落踪了尽心筹划以便可以在CSS往后的版本中做进一步地扩大年夜大年夜；也就是说完成更多的终局。

2
、属性和属性值

(1) 、属性

属性的名字是一个合法的标识符，它们是CSS语法中的关头字。一种属性端方了格式润饰的一个方面。比如：color是文本的色彩属性
，而text-indent则端方了段落的缩进 。

要掌控一个属性的用法 ，有六个方面需求体味。具体论说以下
：

①该属性的合法属性值（legal value）。较着段落缩进属性text-indent只能赋给逐浅展示长度的值 ，而展示布景图案的background．image属性则理应取逐浅展示图片职位链接的值或是关头字none展示不必布景图案 。

②该属性的默许值（initial value）  。当在格式表单中没有端方该属性 ，并且该属性不克不及从它的父级元素那儿延续的时辰，则不雅不雅不雅不雅鉴赏器将认为该属性取它的默许值。

③该属性所合用的元素（Applies to） 。有的属性只合用于某些浅近的元素，比如white-space属性就只合用于块级元素。white-space属性可以取normal、pre和nowrap三个值。当取normal的时辰，不雅不雅不雅不雅鉴赏器将忽视损掉落踪落延续的空白字符 ，而只展示一个空白字符。当取pre的时辰
，则保管延续的空白字符 。而取nowrap的时辰 ，延续的空白字符被忽视 ，并且不主动换行 。

④该属性的值可否被下一级延续（inherited）
。

⑤假定该属功用取百分值（percentage） ，那么该百分值将若何诠释 。也就是百分值所绝对的标准是甚么 。如margin属性可以取百分值
，它是绝对margin所存元素的容器的宽度。

⑥该属性所属的序言圭表类型组（media groups） 。

(2)、属性值

①整数和实数

这和深克意义上的整数和实数没有多除夜分辨。在CSS中只能独霸浮点小数，而不克不及像其他编程言语那样独霸科学记数法表理论数
，即1.2E3在CSS中将是不合法的。上面是几个切确的例子，整数：128 、-313
，实数
：12.20
 、1415、-12.03
。

②长怀抱

一个长怀抱由整数或实数加上照顾的长度单位构成。长怀抱经常独霸来对元素定位
。而定位分为尽对定位和绝对定位，是以长度单位也分为绝对长度单位和尽对长度单位 。

绝对长度单位有
：em——往后字体的高度，也就是font.size属性的值；ex——往后字体中小写字母x的高度；Dx——一个像素的长度，其理论的长度由展示器的设置决意。

另一一点值得寄看的是，子级元素不延续父级元素的绝对长度值 ，只延续它们的理论筹算值。

③百分数量（percentages）

百分数量就是数字加上百分号 。较着，百分数量老是绝对的，所以和绝对长怀抱一样 ，百分数量不被子级元素延续。

5、CSS的援引

1、内部格式表

在HTML的<head>标签中
，独霸<link>元素中援引

2、内部格式表

将 CSS 放置在<style>元素中 ，该元素包含在 HTML head 内 。

3、内联格式

内联格式是仅影响一个元素的CSS声明，被 style 属性包含着  。

6、CSS编辑斥地软件（编辑器）

1、Visual Studio Code

和我们将要不才面引见的其他代码编辑器比照，Visual Studio Code是一个绝对较新的代码编辑器。不过  ，如今它已灵敏成了最受迎接的代码编辑器之一，不凡是在Web斥地人员圈内。

Visual Studio Code具有针对多种言语的除夜量语法凹陷展示下场，个中包含诸如：SCSS和LESS等CSS和CSS预措置器(Pre-processors)
。与此同时 ，CSS IntelliSense、CSS Peek和CSS Modules等扩大年夜大年夜大年夜大年夜模块也会仰仗着独霸CSS，而变得愈加壮除夜。

兼容性：Windows 、macOS和Linux。出格下场：可以利便斥地人员疾速地上手。它不单可与Gulp和Grunt等良多言语和对象一同独霸，并且具有除夜量的扩大年夜大年夜大年夜大年夜模块。

2、Notepad++

作为一个免费的源代码编辑器，Notepad++被认为是Windows"记事本"的更调品
。它不单复杂 、运转疾速，并且支撑CSS等多种言语 。在编写CSS时，它可以给斥地者供给Word补全 、函数补全、和函数参数提示之类的处事，以进步集团的工作屈就。

兼容性 ： Windows。出格下场 ：语法凹陷展示与折叠、宏记实和回放、和文档筹划图。

3 、WebStorm

WebStorm是Jetbrains公司旗下一款JavaScript斥地对象。JetBrain的IDE可以对包含CSS在内的全数内容，完成切确的主动化完胜应用，以利便您随时得知有关CSS问题标提示 。经由过程与Stylelint之类对象举办"开箱即用"式地集成 ，WebStorm也可以辅佐您格式化、并贯穿连接CSS代码的齐截性。

兼容性 ：Windows 、macOS和Linux。出格下场
 ：可以与诸如Stylelint
、Grunt 、Gulp、和NPM等Web斥地对象无缝集成
。可被内置于各类对象中，完成调试
、跟踪 、和智能化的主动完成等下场。

4 、Coda

Coda是一种具有内置CSS编辑器的初级代码编辑器。经由过程为您供给两种CSS编辑编制，它可感应斥地者供给愈加矫捷的筹划体验，并可以在代码被变换此后当即展示下场 。值得一提的是，您还可以在编辑器的及时预览(Live Preview)对象中袒护某个网站的CSS。

兼容性：macOS。出格下场：经由过程与TouchBar集成 ，供给及时的预览
、和内置的SFTP/FTP。

5 、Atom

Atom是由Github构建的免费开源的编辑器。它不单仅具有代码编辑下场，还带有一个嵌进式的Git Control，可与GitHub举办无缝集成。您可以拆卸多个CSS附加组件
，以加强用户对CSS编辑的体验。

兼容性 ：Windows 、macOS和Linux 。出格下场：既可以经由过程各类API轻松地完成扩大年夜大年夜大年夜大年夜和破解
，又可以与CSS  、和时优势行的CSS预措置器合营独霸。

6
、Sublime Text

Sublime Text是此外一种风行的Web斥地代码编辑器
。在供给跨平台工作的前提下，它可以原生地支撑包含CSS在内的多种言语和标识表记标帜言语 。同时，它也供给了良多扩大年夜大年夜大年夜大年夜模块 ，以改进用户在独霸编辑器时的CSS编辑体验。此外 ，Sublime Text还引进了其他项下场 ，个中包含
：多行选择(Multiline selection)、"跳转就职何中心(Go to Anywhere)" 、和可以进步斥地人员工作屈就的Command Pallete。

兼容性：Windows 、macOS和Linux。出格下场 ：运转疾速，且供给初级的代码编辑下场。包含："跳转就职何中心"和多行选择，和subl CLI。

7、CSS的感染

CSS矫捷多变
，可以指定的格式圭表类型除通用的色彩、字体、布景等等，还可以独霸字符间距、加添距、大年夜小等等，展示出了壮除夜的定义身手，其具体感染以下
：

1、CSS俭仆除夜量时分

CSS为设置元素的格式属性供给了很除夜的矫捷性。您可以编写一次CSS；然后可以将不异的代码独霸于HTML元素组，也可以在多个HTML页面中重用 。

2 、 易呵护

CSS供给了一种复杂的编制来更新文档的格式，并贯穿连接多个文档之间的齐截性 。因为可独霸一个或多个格式表轻松独霸全数网页集的内容
。

3、页面加载速度更快

CSS使多页可以共享格式信息，从而促进了文档筹划内容的宏壮性和几回性。它光鲜较着地促进了文件传输的大年夜小，从而招致了更快的页面加载。

4 、HTML的初级格式

CSS比HTML具有更普及的展示身手，并且对网页的筹划供给了更好的独霸。是以，与HTML展示元素和属性比照 ，您可以更好地搜检您的网页。

5、多设备兼容性

CSS还准予为多种设备或媒体优化网页
。独霸CSS，可感应不合的展示设备(如桌面 、手机等)以不合的搜检格式展示不异的HTML文档 。

8、CSS罕有问题

1  、CSS感染

CSS具有对网页的筹划、色彩、布景 、宽度 、高度 、字体举办独霸，让网页按您的美工筹划筹划的愈加美不美不雅不雅不雅不雅不雅不雅斑斓。

2、CSS文件轨则

CSS文件也有编码，一样往常GBK、UTF-8等编码编制，文件后缀用.css 。

3、CSS代码诠释

以 /* 最早 ，以 */ 停止 ，用于对代码的诠释或诠释代码 。

4、甚么时辰用 id，甚么时辰用 class

id 的用处是在页面中独一地标识元素 ，所以每个页面中每个 id 属性值都是并世无双的。而 class 的方针是为了标识一组具有不异特点的元素，也就是说一个页面中可以展示多个不异的类。

对甚么时辰用 id，每个***区域都理应添加一个 id，从而掉落踪掉落踪特别很是了了的凹凸文相干，以便编写 CSS 时只选择嵌套在照顾区域内的标签 。

对甚么时辰独霸 class，因为 class 的方针是为了标识一组具有不异特点的元素
，所以假定当页面中有一组元素具有某种不异的特点 ，就理应尽不游移的时辰 class了。

总结

优化猩SEO
：层叠格式表（Cascading Style Sheet，CSS）简化了网页的格式代码
，内部的格式表还会被不雅不雅不雅不雅鉴赏器保管在缓存里 ，加快了下载展示的速度
，同时 ，只需改削网站的CSS格式表文件便可以改削全数站点的气焰，阻拦了一一网页的改削，除夜除夜促进了工作量
。

参考链接：

CSS（层叠格式表）_百度百科

https://baike.百度.com/item/CSS/5457

css的工作事理及独霸轨则 - 知乎

https://zhuanlan.zhihu.com/p/36282637

值得熟手在行存眷的十除夜精细CSS编辑器

https://baijiahao.百度.com/s?id=1664181620372830431

css有甚么感染-前端问答-PHP中文网

https://www.php.cn/website-design-ask-476077.html

改削于2025-08-29