css基礎知識

css基礎知識

1.1 概述

css(cascading  style sheet)

層疊式樣式表（關鍵字：層疊 樣式表）

前端三層：

結構層：從html角度描述網頁

樣式層：從美化的角度描述網頁css

行爲層：從用戶交互的角度書寫網頁的行爲

1.2 css組成

css分爲兩部分：

1.選擇器

2.樣式屬性

1.3  css做用

css做用：設置元素樣式屬性

書寫css要求：

有什麼樣式書寫什麼屬性。

每一條屬性，逐條書寫，每條屬性結尾書寫分號;

 

 

盒子屬性：

width: 盒子寬度，單位是px（像素）

height: 盒子高度，單位是px（像素）

mso-para-margin-left:0.0000gd;text-indent:21.0000pt;mso-char-indent-count:0.0000;">短橫鏈接的都是單一屬性

background複合屬性

border: 也是複合屬性（邊框）

複合寫法屬性值用空格隔開

border: 1px(邊框線寬度)     solid（線的類型：實線）     #000（線的顏色）;

 

 

文字屬性：

color: 文字顏色

font-size: 單一屬性，文字大小（字號），單位也是px

font-family: 字體

能夠同時設置多個字體（用逗號隔開），會從第一個字體開始匹配,字體名稱用雙引號包裹

先書寫英文字體（Arial）

再書寫中文，Microsoft Yahei(微軟雅黑) 宋體（SimSun）

1 font-family: "Arial","微軟雅黑","宋體";

若是要求網頁加載更快，書寫英文單詞

1 font-family: "Arial","Microsoft Yahei","SimSun";

 

1.3 css書寫位置

1.內嵌式《style>標籤

2.行內式style屬性

3.外鏈式《head》標籤內部：《link rel=」stylesheet」 type=」text/css」 href=」路徑」》

 

 

1.4 css雜項

css鍵值對：    k: v

每一條屬性結束必須添加分號;

每一條屬性獨佔一行。

css對空格，縮進，換行不敏感。

1 div { 2  /*盒子屬性*/ 3  width: 300px; 4  height: 300px; 5  6  border: 10px solid red; 7  /*文字屬性*/ 8  color: white; 9  font-size: 30px; 10  font-family: "Arial","Microsoft Yahei","SimSun"; 11 }