CSS是什么意思?详解层叠样式表CSS的特点、语法及编辑软件

CSS是什么意思?详解层叠样式表CSS的特点、语法及编辑软件

发布:路由先生2024-10-15 02:20分类:seo优化

CSS是什么意思?详解层叠样式表CSS的特点、语法及编辑软件

一、CSS是什么意思

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

二、CSS工作原理

当浏览器显示文档时,它必须将文档的内容与其样式信息结合。它分两个阶段处理文档:

(1)、浏览器将 HTML 和 CSS 转化成 DOM (文档对象模型)。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。

(2)、浏览器显示 DOM 的内容。

CSS工作原理

CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名.css的外部样式单文档中。

样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。

名称CSS中的"层叠(cascading)"表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果。

三、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样式表的复用更大程度的缩减了页面的体积,减少下载的时间。

四、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)

百分数量就是数字加上百分号。显然,百分数量总是相对的,所以和相对长度量一样,百分数量不被子级元素继承。

五、CSS的引用

1、外部样式表

在HTML的<head>标签中,使用<link>元素中引用

2、内部样式表

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

3、内联样式

内联样式是仅影响一个元素的CSS声明,被 style 属性包括着。

六、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。

七、CSS的作用

CSS灵活多变,能够指定的样式类型除了通用的颜色、字体、背景等等,还可以控制字符间距、填充距、大小等等,显示出了强大的定义能力,其具体作用如下:

1、CSS节省大量时间

CSS为设置元素的样式属性提供了很大的灵活性。您可以编写一次CSS;然后可以将相同的代码应用于HTML元素组,也可以在多个HTML页面中重用。

2、 易维护

CSS提供了一种简单的方法来更新文档的格式,并保持多个文档之间的一致性。因为可以使用一个或多个样式表轻松控制整个网页集的内容。

3、页面加载速度更快

CSS使多页能够共享格式信息,从而减少了文档结构内容的复杂性和重复性。它显着地减少了文件传输的大小,从而导致了更快的页面加载。

4、HTML的高级样式

CSS比HTML具有更广泛的表示能力,并且对网页的布局提供了更好的控制。因此,与HTML表示元素和属性相比,您可以更好地查看您的网页。

5、多设备兼容性

CSS还允许为多种设备或媒体优化网页。使用CSS,可以为不同的呈现设备(如桌面、手机等)以不同的查看样式表示相同的HTML文档。

八、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.baidu.com/item/CSS/5457

css的工作原理及使用规则 - 知乎

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

值得新手关注的十大优秀CSS编辑器

https://baijiahao.baidu.com/s?id=1664181620372830431

css有什么作用-前端问答-PHP中文网

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

修改于2023-09-07

温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

欢迎使用手机扫描访问本站,还可以关注微信哦~