一、CSS是什么意思

CSS是Cascading Style Sheets英文首字母的縮寫，中文翻譯為層疊樣式表, 是一種用來表現(xiàn)Html（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。CSS 能夠對網(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。

二、CSS工作原理

當瀏覽器顯示文檔時，它必須將文檔的內(nèi)容與其樣式信息結合。它分兩個階段處理文檔：

(1)、瀏覽器將 HTML 和 CSS 轉化成 DOM （文檔對象模型）。DOM在計算機內(nèi)存中表示文檔。它把文檔內(nèi)容和其樣式結合在一起。

(2)、瀏覽器顯示 DOM 的內(nèi)容。

CSS工作原理

CSS是一種定義樣式結構如字體、顏色、位置等的語言，被用于描述網(wǎng)頁上的信息格式化和顯示的方式。CSS樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件。無論哪一種方式，樣式單包含將樣式應用到指定類型的元素的規(guī)則。外部使用時，樣式單規(guī)則被放置在一個帶有文件擴展名.css的外部樣式單文檔中。

樣式規(guī)則是可應用于網(wǎng)頁中元素，如文本段落或鏈接的格式化指令。樣式規(guī)則由一個或多個樣式屬性及其值組成。內(nèi)部樣式單直接放在網(wǎng)頁中，外部樣式單保存在獨立的文檔中，網(wǎng)頁通過一個特殊標簽鏈接外部樣式單。

名稱CSS中的"層疊（cascading）"表示樣式單規(guī)則應用于HTML文檔元素的方式。具體地說，CSS樣式單中的樣式形成一個層次結構，更具體的樣式覆蓋通用樣式。樣式規(guī)則的優(yōu)先級由CSS根據(jù)這個層次結構決定，從而實現(xiàn)級聯(lián)效果。

三、CSS的特點

CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現(xiàn)修改一個小的樣式更新與之相關的所有頁面元素?？傮w來說，CSS具有以下特點：

1、豐富的樣式定義

CSS提供了豐富的文檔樣式外觀，以及設置文本和背景屬性的能力；允許為任何元素創(chuàng)建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內(nèi)容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。

2、易于使用和修改

CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用?？傊珻SS樣式表可以將所有的樣式聲明統(tǒng)一存放，進行統(tǒng)一管理。

另外，可以將相同樣式的元素進行歸類，使用同一個樣式進行定義，也可以將某個樣式應用到所有同名的HTML標簽中，也可以將一個CSS樣式指定到某個頁面元素中。如果要修改樣式，我們只需要在樣式列表中找到相應的樣式聲明進行修改。

3、多頁面應用

CSS樣式表可以單獨存放在一個CSS文件中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實現(xiàn)多個頁面風格的統(tǒng)一。

4、層疊

簡單的說，層疊就是對一個元素多次設置同一個樣式，這將使用最后一次設置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些后來定義的樣式將對前面的樣式設置進行重寫，在瀏覽器中看到的將是最后面設置的樣式效果。

5、頁面壓縮

在使用HTML定義頁面效果的網(wǎng)站中，往往需要大量或重復的表格和font元素形成各種規(guī)格的文字樣式，這樣做的后果就是會產(chǎn)生大量的HTML標簽，從而使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少。另外，CSS樣式表的復用更大程度的縮減了頁面的體積，減少下載的時間。

四、CSS語法介紹

css語法規(guī)則集由選擇器和聲明塊組成。選擇器指的就是您要設置樣式的html元素。如標簽名（body ，h1,p,div...）就是一個選擇器。

css語法

1、選擇器

(1)、類型選擇器

CSS中的一種選擇器是元素類型的名稱。使用這種選擇器(稱為類型選擇器)，可以向這種元素類型的每個實例上應用聲明。例如，以下簡單規(guī)則的選擇器是H1，因此規(guī)則作用于文檔中所有的H1元素：

H1 {color:red}

(2)、簡單屬性選擇器

①CLASS屬性

CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應用聲明。BODY內(nèi)的所有元素都有CLASS屬性。從本質(zhì)上講，可以使用CLASS屬性來分類元素，在樣式表中創(chuàng)建規(guī)則來引用CLASS屬性的值，然后瀏覽器自動將這些屬性應用到該組元素。

類選擇器以標志符（句點）開頭，用于指示后面是哪種類型的選擇器。對于類選擇器，之所以選擇句點是因為在很多編程語言中它與術語"類"相關聯(lián)。翻譯成英語，標志符表示"帶有類名的元素"。

②ID屬性

ID屬性的操作類似于CLASS屬性，但有一點重要的不同之處：ID屬性的值在整篇文檔中必須是唯一的。這使得ID屬性可用于設置單個元素的樣式規(guī)則。包含ID屬性的選擇器稱為ID選擇器。

需要注意的是，ID選擇器的標志符是散列符號（#）。標志符用來提醒瀏覽器接下來出現(xiàn)的是ID值。

③STYLE屬性

盡管在選擇器中可以使用CLASS和ID屬性值，STYLE屬性實際上可以替代整個選擇器機制。不是只具有一個能夠在選擇器中引用的值(這正是ID和CLASS具有的值)，STYLE屬性的值實際上是一個或多個CSS聲明。

通常情況下，使用CSS，設計者將把所有的樣式規(guī)則置于一個樣式表中，該樣式表位于文檔頂部的STYLE元素內(nèi)（或在外部進行鏈接）。但是，使用STYLE屬性能夠繞過樣式表將聲明直接放置到文檔的開始標記中。

④組合選擇器類型

可以將類型選擇器、ID選擇器和類選擇器組合成不同的選擇器類型來構成更復雜的選擇器。通過組合選擇器，可以更加精確地處理希望賦予某種表示的元素。例如，要組合類型選擇器和類選擇器，一個元素必須滿足兩個要求：它必須是正確的類型和正確的類以便使樣式規(guī)則可以作用于它。

⑤外部信息：偽類和偽元素

在CSS1中，樣式通常是基于在HTML源代碼中出現(xiàn)的標記和屬性。對于很多設計情景而言這種做法完全可行，但是它無法實現(xiàn)設計者希望獲得的一些常見的設計效果。

設計偽類和偽元素可以實現(xiàn)其中的一些效果。這兩種機制擴充了CSS的表現(xiàn)能力。在CSS1中，使用偽類可以根據(jù)一些情況改變文檔中鏈接的樣式，如根據(jù)鏈接是否被訪問，何時被訪問以及用戶和文檔的交互方式來應用改變。借助于偽元素，可以更改元素的第一個字母和第一行的樣式，或者添加源文檔中沒有出現(xiàn)過的元素。

偽類和偽元素都不存在于HTML；也就是說，它們在HTML代碼中是不可見的。這兩種機制都得到了精心設計以便能夠在CSS以后的版本中做進一步地擴充；也就是說實現(xiàn)更多的效果。

2、屬性和屬性值

(1)、屬性

屬性的名字是一個合法的標識符，它們是CSS語法中的關鍵字。一種屬性規(guī)定了格式修飾的一個方面。例如：color是文本的顏色屬性，而text-indent則規(guī)定了段落的縮進。

要掌握一個屬性的用法，有六個方面需要了解。具體敘述如下：

①該屬性的合法屬性值（legal value）。顯然段落縮進屬性text-indent只能賦給一個表示長度的值，而表示背景圖案的background．image屬性則應該取一個表示圖片位置鏈接的值或者是關鍵字none表示不用背景圖案。

②該屬性的默認值（initial value）。當在樣式表單中沒有規(guī)定該屬性，而且該屬性不能從它的父級元素那兒繼承的時候，則瀏覽器將認為該屬性取它的默認值。

③該屬性所適用的元素（Applies to）。有的屬性只適用于某些個別的元素，比如white-space屬性就只適用于塊級元素。white-space屬性可以取normal、pre和nowrap三個值。當取normal的時候，瀏覽器將忽略掉連續(xù)的空白字符，而只顯示一個空白字符。當取pre的時候，則保留連續(xù)的空白字符。而取nowrap的時候，連續(xù)的空白字符被忽略，而且不自動換行。

④該屬性的值是否被下一級繼承（inherited）。

⑤如果該屬性能取百分值（percentage），那么該百分值將如何解釋。也就是百分值所相對的標準是什么。如margin屬性可以取百分值，它是相對于margin所存元素的容器的寬度。

⑥該屬性所屬的媒介類型組（media groups）。

(2)、屬性值

①整數(shù)和實數(shù)

這和普通意義上的整數(shù)和實數(shù)沒有多大區(qū)別。在CSS中只能使用浮點小數(shù)，而不能像其他編程語言那樣使用科學記數(shù)法表示實數(shù)，即1.2E3在CSS中將是不合法的。下面是幾個正確的例子，整數(shù)：128、-313，實數(shù)：12.20、1415、-12.03。

②長度量

一個長度量由整數(shù)或實數(shù)加上相應的長度單位組成。長度量常用來對元素定位。而定位分為絕對定位和相對定位，因而長度單位也分為相對長度單位和絕對長度單位。

相對長度單位有：em——當前字體的高度，也就是font.size屬性的值；ex——當前字體中小寫字母x的高度；Dx——一個像素的長度，其實際的長度由顯示器的設置決定。

另一一點值得注意的是，子級元素不繼承父級元素的相對長度值，只繼承它們的實際計算值。

③百分數(shù)量（percentages）

百分數(shù)量就是數(shù)字加上百分號。顯然，百分數(shù)量總是相對的，所以和相對長度量一樣，百分數(shù)量不被子級元素繼承。

五、CSS的引用

1、外部樣式表

在HTML的<head>標簽中，使用<link>元素中引用

2、內(nèi)部樣式表

將 CSS 放置在<style>元素中，該元素包含在 HTML head 內(nèi)。

3、內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式是僅影響一個元素的CSS聲明，被 style 屬性包括著。

六、CSS編輯開發(fā)軟件（編輯器）

1、Visual Studio Code

和我們將要在下面介紹的其他代碼編輯器相比，Visual Studio Code是一個相對較新的代碼編輯器。不過，目前它已迅速成為了最受歡迎的代碼編輯器之一，尤其是在Web開發(fā)人員圈內(nèi)。

Visual Studio Code具有針對多種語言的大量語法突出顯示功能，其中包括諸如：SCSS和LESS等CSS和CSS預處理器(Pre-processors)。與此同時，CSS IntelliSense、CSS Peek和CSS Modules等擴展模塊也會憑借著使用CSS，而變得更加強大。

兼容性：Windows、macOS和Linux。特殊功能：能夠方便開發(fā)人員快速地上手。它不但可與Gulp和Grunt等許多語言和工具一起使用，并且具有大量的擴展模塊。

2、Notepad++

作為一個免費的源代碼編輯器，Notepad++被認為是Windows"記事本"的替代品。它不但簡單、運行快速，并且支持CSS等多種語言。在編寫CSS時，它可以給開發(fā)者提供Word補全、函數(shù)補全、以及函數(shù)參數(shù)提示之類的服務，以提高整體的工作效率。

兼容性： Windows。特殊功能：語法突出顯示與折疊、宏記錄和回放、以及文檔結構圖。

3、WebStorm

WebStorm是Jetbrains公司旗下一款Javascript開發(fā)工具。JetBrain的IDE可以對包括CSS在內(nèi)的所有內(nèi)容，實現(xiàn)正確的自動化完成功能，以方便您隨時獲悉有關CSS問題的提示。通過與Stylelint之類工具進行"開箱即用"式地集成，WebStorm也可以幫助您格式化、并保持CSS代碼的一致性。

兼容性：Windows、macOS和Linux。特殊功能：能夠與諸如Stylelint、Grunt、Gulp、以及NPM等Web開發(fā)工具無縫集成。可被內(nèi)置于各種工具中，實現(xiàn)調(diào)試、跟蹤、以及智能化的自動完成等功能。

4、Coda

Coda是一種具有內(nèi)置CSS編輯器的高級代碼編輯器。通過為您提供兩種CSS編輯模式，它可以為開發(fā)者提供更加靈活的設計體驗，并能夠在代碼被更改之后立即展示結果。值得一提的是，您還可以在編輯器的實時預覽(Live Preview)工具中覆蓋某個網(wǎng)站的CSS。

兼容性：macOS。特殊功能：通過與TouchBar集成，提供實時的預覽、以及內(nèi)置的SFTP/FTP。

5、Atom

Atom是由Github構建的免費開源的編輯器。它不僅僅具有代碼編輯功能，還帶有一個嵌入式的Git Control，可與GitHub進行無縫集成。您可以安裝多個CSS附加組件，以增強用戶對CSS編輯的體驗。

兼容性：Windows、macOS和Linux。特殊功能：既可以通過各種API輕松地實現(xiàn)擴展和破解，又能夠與CSS、以及時下流行的CSS預處理器配合使用。

6、Sublime Text

Sublime Text是另一種流行的Web開發(fā)代碼編輯器。在提供跨平臺工作的前提下，它可以原生地支持包括CSS在內(nèi)的多種語言和標記語言。同時，它也提供了許多擴展模塊，以改善用戶在使用編輯器時的CSS編輯體驗。另外，Sublime Text還引入了其他項功能，其中包括：多行選擇(Multiline selection)、"跳轉到任何地方(Go to Anywhere)"、以及能夠提高開發(fā)人員工作效率的Command Pallete。

兼容性：Windows、macOS和Linux。特殊功能：運行快速，且提供高級的代碼編輯功能。包括："跳轉到任何地方"和多行選擇，以及subl CLI。

七、CSS的作用

CSS靈活多變，能夠指定的樣式類型除了通用的顏色、字體、背景等等，還可以控制字符間距、填充距、大小等等，顯示出了強大的定義能力，其具體作用如下：

1、CSS節(jié)省大量時間

CSS為設置元素的樣式屬性提供了很大的靈活性。您可以編寫一次CSS；然后可以將相同的代碼應用于HTML元素組，也可以在多個HTML頁面中重用。

2、 易維護

CSS提供了一種簡單的方法來更新文檔的格式，并保持多個文檔之間的一致性。因為可以使用一個或多個樣式表輕松控制整個網(wǎng)頁集的內(nèi)容。

3、頁面加載速度更快

CSS使多頁能夠共享格式信息，從而減少了文檔結構內(nèi)容的復雜性和重復性。它顯著地減少了文件傳輸?shù)拇笮?，從而導致了更快的頁面加載。

4、HTML的高級樣式

CSS比HTML具有更廣泛的表示能力，并且對網(wǎng)頁的布局提供了更好的控制。因此，與HTML表示元素和屬性相比，您可以更好地查看您的網(wǎng)頁。

5、多設備兼容性

CSS還允許為多種設備或媒體優(yōu)化網(wǎng)頁。使用CSS，可以為不同的呈現(xiàn)設備(如桌面、手機等)以不同的查看樣式表示相同的HTML文檔。

八、CSS常見問題

1、CSS作用

CSS具有對網(wǎng)頁的布局、顏色、背景、寬度、高度、字體進行控制，讓網(wǎng)頁按您的美工設計布局的更加美觀漂亮。

2、CSS文件規(guī)則

CSS文件也有編碼，一般GBK、UTF-8等編碼模式，文件后綴用.css。

3、CSS代碼注釋

以 /* 開始，以 */ 結束，用于對代碼的注釋或者解釋代碼。

4、什么時候用 id，什么時候用 class

id 的用途是在頁面中唯一地標識元素，所以每個頁面中每一個 id 屬性值都是獨一無二的。而 class 的目的是為了標識一組具有相同特征的元素，也就是說一個頁面中可以出現(xiàn)多個相同的類。

對于什么時候用 id，每一個頂級區(qū)域都應該添加一個 id，從而得到非常明確的上下文關系，以便編寫 CSS 時只選擇嵌套在相應區(qū)域內(nèi)的標簽。

對于什么時候使用 class，由于 class 的目的是為了標識一組具有相同特征的元素，所以如果當頁面中有一組元素具有某種相同的特征，就應該毫不猶豫的時候 class了。

總結

優(yōu)化猩SEO：層疊樣式表（Cascading Style Sheet，CSS）簡化了網(wǎng)頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，同時，只要修改網(wǎng)站的CSS樣式表文件就可以改變整個站點的風格，避免了逐個網(wǎng)頁的修改，大大減少了工作量。

參考鏈接：

CSS（層疊樣式表）_百度百科

https://baike.baidu.com/item/CSS/5457

css的工作原理及使用規(guī)則 - 知乎

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

值得新手關注的十大優(yōu)秀CSS編輯器

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

css有什么作用-前端問答-PHP中文網(wǎng)

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

修改于2023-09-07