css基本概念與css核心語法介紹


css基本概念

css是什么?不需要了解太多文字類介紹,記住css是層疊樣式表,HTML是頁面結構,css負責頁面樣式,javascrt負責靜態頁面的交互。CSS 能夠對網頁中元素位置的排版進行像素級精確控制,擁有對網頁對象和模型樣式編輯的能力。詳情參考css百度百科了解其發展歷史,語言特點與語言基礎等,也是有好處的。

標簽的屬性決定了靜態頁面的展示效果,在早期,標簽屬性過多,對於瀏覽器的識別過於麻煩,因為一修改標簽,頁面的版本什么都需要變動,可謂牽一發而動全身!除此之外,對於開發人員來說,代碼過於臃腫冗長,為此W3CS,也就是萬維網聯盟制定了一個標准,把css與HTML相分離,選擇器通過樣式屬性與標簽相關聯,這樣就提高了html代碼與css樣式的可用性。

css核心語法

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

2.css組成為:選擇器{屬性:屬性值},同時{屬性:屬性值}也稱之為選擇器聲明部分,css的注釋與html的注釋<!--注釋部分-->不同,它的注釋表示為/*注釋部分*/

3.css中顏色為RGB紅、綠、藍三種色彩模式,顏色由淺入深,對應數字0-255,這也是系統默認顏色

3.1顏色表示color(255,0,0)紅色,如果用百分比表示為(100%,0,0)

3.2顏色也可以用具體的英文單詞表示,比方說:紅色就是red,綠色就是green,藍色就是blue等

3.3從設計師而言,顏色也可以按照16進制,0-9是10,剩余的從a-f開始,這才15位,至於16則用10表示;顏色表示形式為#開頭,比方紅色是#ff0000=>rgb(255,0,0)針對這種重復的就可以2個寫成一個,展示為#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     <!-- 新建一個css樣式文件,結尾.css 文件內容如下,再通過<link rel="stylesheet" href="">鏈接外部樣式
 9     div{
10         color: blue;
11     } -->
12     <!-- <link rel="stylesheet" href="demo.css"> -->
13 
14     <!-- css內部樣式 -->
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三種樣式引入分為內部樣式、外部樣式、內聯樣式(行內樣式)</div>--><!--內聯樣式(行內樣式)-->
33     <div class="box1">css三種樣式引入分為內部樣式、外部樣式、內聯樣式(行內樣式),執行順序是先將外部樣式與內部樣式合並再執行內聯樣式</div>
34 </body>
35 </html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM