什么是CSS？它是做什么的？

猿友 2020-12-10 16:21:25 瀏覽數(shù) (5354)

反饋

CSS是 Cascading Styke Sheet（層疊樣式表）的縮寫。是用于（增強(qiáng)）控制渲染網(wǎng)頁的樣式、允許將CSS樣式信息與頁面HTML內(nèi)容分離運(yùn)行的一種標(biāo)記性語言。CSS不需要編譯，可以直接由瀏覽器執(zhí)行（屬于瀏覽器解釋型語言）。CSS是一種領(lǐng)域語言（DSL），層疊與繼承賦予了CSS優(yōu)雅多姿的無限創(chuàng)造力。正是由于它如此“簡單”，我們需要更充分的學(xué)習(xí)它、得心應(yīng)手的運(yùn)用它，讓我們的網(wǎng)頁活靈活現(xiàn)得呈現(xiàn)。

歷史

CSS 最早被提議是在1994年；
最早被瀏覽器支持是1996年；
1996年 W3C 正式推出了CSS1；
1998年 W3C 正式推出了CSS2；
CSS2.1 是 W3C 現(xiàn)在正在推薦使用的；
CSS3 現(xiàn)在還處于開發(fā)中；
CSS 3 在包含了所有 CSS 2 所支持的基礎(chǔ)上更有所改進(jìn)，所以不必?fù)?dān)心兼容問題。

CSS也支持多種設(shè)備，例如手機(jī)、電視、幻燈片、打印機(jī)等，但CSS在瀏覽器上得到了更好的推廣。

CSS 語法

selector{property:value;}

微信截圖_20201210105927

引入方式

三種方式將樣式表加入您的網(wǎng)頁：

內(nèi)聯(lián)樣式 Inline Styles

內(nèi)聯(lián)即是在元素的標(biāo)記內(nèi)使用對象的 style 屬性定義適用它的樣式表屬性。

微信截圖_20201210110631

內(nèi)部樣式塊對象 Embedding a Style Block

你可以在你的HTML文檔的<head>標(biāo)記里插入一個<style>塊對象。

微信截圖_20201210111207

外部樣式表 Linking to a Style Sheet

你可以先建立外部樣式表文件 *.css , 然后使用HTML的link對象?；蛘呤褂?@import 來引入。

<link rel="stylesheet" href="code.css">

<style>

@import url("demo.css")

</style>

注意：在實(shí)際開發(fā)中，推薦使用HTML的link對象來引入。

選擇器權(quán)重

微信截圖_20201210141056

權(quán)重主要分為4個等級：

第一等：代表內(nèi)聯(lián)樣式，如:style=""，權(quán)值為1000
第二等：代表ID選擇器，如:#content,權(quán)值為100
第三等：代表類，偽類和屬性選擇器，如:.content，權(quán)值為10
第四等，代表標(biāo)簽選擇器和偽元素選擇器,如: div p ,權(quán)值為1

微信截圖_20201210135505

優(yōu)先級

遵循如下規(guī)則：

選擇器都有一個權(quán)值，權(quán)值越大越優(yōu)先；
當(dāng)權(quán)值相等時，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置；
創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁編寫者設(shè)置的 CSS 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式；
繼承的 CSS 樣式不如后來指定的 CSS 樣式；
在同一組屬性設(shè)置中標(biāo)有!important規(guī)則的優(yōu)先級最大

微信截圖_20201210135222

以上就是CSS的用法，CSS多種多樣的樣式等你去探索，小編整理了網(wǎng)上熱門的課程和實(shí)戰(zhàn)供你加強(qiáng)學(xué)習(xí)

CSS 前端

0 人點(diǎn)贊

什么是CSS？它是做什么的？

歷史