溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css核心語法實(shí)例分析

發(fā)布時(shí)間：2022-03-14 13:49:28 來源：億速云 閱讀：118 作者：iii 欄目：web開發(fā)

這篇文章主要介紹了css核心語法實(shí)例分析的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇css核心語法實(shí)例分析文章都會(huì)有所收獲，下面我們一起來看看吧。

　　css基本概念

　　css是什么？不需要了解太多文字類介紹，記住css是層疊樣式表，HTML是頁面結(jié)構(gòu)，css負(fù)責(zé)頁面樣式，javascrt負(fù)責(zé)靜態(tài)頁面的交互。CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制，擁有對網(wǎng)頁對象和模型樣式編輯的能力。詳情參考[css百度百科]了解其發(fā)展歷史，語言特點(diǎn)與語言基礎(chǔ)等,也是有好處的。

　　標(biāo)簽的屬性決定了靜態(tài)頁面的展示效果，在早期，標(biāo)簽屬性過多，對于瀏覽器的識(shí)別過于麻煩，因?yàn)橐恍薷臉?biāo)簽，頁面的版本什么都需要變動(dòng)，可謂牽一發(fā)而動(dòng)全身！除此之外，對于開發(fā)人員來說，代碼過于臃腫冗長，為此W3CS，也就是萬維網(wǎng)聯(lián)盟制定了一個(gè)標(biāo)準(zhǔn)，把css與HTML相分離，選擇器通過樣式屬性與標(biāo)簽相關(guān)聯(lián)，這樣就提高了html代碼與css樣式的可用性。

　　css核心語法

　　1.css的三種引入方式屬于css的核心語法，分為內(nèi)部樣式、外部樣式、內(nèi)聯(lián)樣式（也叫行內(nèi)樣式）,最終展示頁面效果都是一樣的

　　2.css組成為:選擇器{屬性：屬性值}，同時(shí){屬性：屬性值}也稱之為選擇器聲明部分，css的注釋與html的注釋不同，它的注釋表示為/注釋部分/

　　3.css中顏色為RGB紅、綠、藍(lán)三種色彩模式，顏色由淺入深，對應(yīng)數(shù)字0-255，這也是系統(tǒng)默認(rèn)顏色

　　3.1顏色表示color（255,0,0）紅色，如果用百分比表示為（100%,0,0）

　　3.2顏色也可以用具體的英文單詞表示，比方說：紅色就是red，綠色就是green，藍(lán)色就是blue等

　　3.3從設(shè)計(jì)師而言，顏色也可以按照16進(jìn)制，0-9是10，剩余的從a-f開始，這才15位，至于16則用10表示；顏色表示形式為#開頭，比方紅色是#ff0000=>rgb(255,0,0)針對這種重復(fù)的就可以2個(gè)寫成一個(gè)，展示為#f00

　　1 <!DOCTYPE html>

　　2 <html lang="en">

　　3 <head>

　　4     <meta charset="UTF-8">

　　5     <meta name="viewport" content="width=device-width, initial-scale=1.0">

　　6     <title>css基本概念與css核心語法介紹</title>

　　7     <!-- css外部樣式 -->

　　8     <!-- 新建一個(gè)css樣式文件，結(jié)尾.css 文件內(nèi)容如下，再通過<link rel="stylesheet" href="">鏈接外部樣式 9 div{ 10 color: blue; 11 } -->

　　12     <!-- <link rel="stylesheet" href="demo.css"> -->

　　13

　　14     <!-- css內(nèi)部樣式 -->

　　15     <!-- <style type="text/css"> 16 div{ 17 color: blue; 18 } 19 </style> -->

　　20

　　21     <!-- 顏色三種展示形式 -->

　　22     <style type="text/css">

　　23         .box1{

　　24             color: blue;/*英文單詞名稱*/

　　25             color: rgb(255,0,0);/*rgb中0-255*/

　　26             color: rgb(100%,0,0);/*百分比展示*/

　　27             /* color: #ff0000; */color: #f00;

　　28             }

　　29     </style>

　　30 </head>

　　31 <body>

　　32     <!--<div style="color: blue;">css三種樣式引入分為內(nèi)部樣式、外部樣式、內(nèi)聯(lián)樣式（行內(nèi)樣式）</div>--><!--內(nèi)聯(lián)樣式（行內(nèi)樣式）-->

　　33     <div class="box1">css三種樣式引入分為內(nèi)部樣式、外部樣式、內(nèi)聯(lián)樣式（行內(nèi)樣式）,執(zhí)行順序是先將外部樣式與內(nèi)部樣式合并再執(zhí)行內(nèi)聯(lián)樣式</div>

　　34 </body>

　　35 </html>

關(guān)于“css核心語法實(shí)例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“css核心語法實(shí)例分析”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手