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

時間 2020-02-15

原文原文鏈接

css基本概念

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

標籤的屬性決定了靜態頁面的展現效果，在早期，標籤屬性過多，對於瀏覽器的識別過於麻煩，由於一修改標籤，頁面的版本什麼都須要變更，可謂牽一髮而動全身！除此以外，對於開發人員來講，代碼過於臃腫冗長，爲此W3CS，也就是萬維網聯盟制定了一個標準，把css與HTML相分離，選擇器經過樣式屬性與標籤相關聯，這樣就提升了html代碼與css樣式的可用性。html

css核心語法

1.css的三種引入方式屬於css的核心語法，分爲內部樣式、外部樣式、內聯樣式（也叫行內樣式）,最終展現頁面效果都是同樣的java

2.css組成爲:選擇器{屬性：屬性值}，同時{屬性：屬性值}也稱之爲選擇器聲明部分，css的註釋與html的註釋不一樣，它的註釋表示爲/*註釋部分*/瀏覽器

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

3.1顏色表示color（255,0,0）紅色，若是用百分比表示爲（100%,0,0）設計

3.2顏色也能夠用具體的英文單詞表示，比方說：紅色就是red，綠色就是green，藍色就是blue等code

3.3從設計師而言，顏色也能夠按照16進制，0-9是10，剩餘的從a-f開始，這才15位，至於16則用10表示；顏色表示形式爲#開頭，比方紅色是#ff0000=>rgb(255,0,0)針對這種重複的就能夠2個寫成一個，展現爲#f00htm

 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>