Web雲筆記–CSS

CSS CSS CSS

Web自學第二階段之CSS

參考資料：《Head First HTML&CSS》（中文第二版）(美國)弗里昂ISBN：9787508356464
中國電力出版社

全部階段：HTML基礎àCSSà高階HTMLàJavaScriptàPHP指令碼àWeb滲透

 

 

前情提要：早在上世紀九十年代初，為了迎合網際網路的發展，（因為當時網際網路是有了但是人們上網沒東西可看。。）人們迫切的期望一種統一的版面在網路上共享資訊，一種叫做超文字（hyper text）的文字誕生了，超文字之所以叫超文字是因為它不僅能展現出文字，還能“花樣”地展現文字（好吧當時根本沒有多媒體的概念）比如字型有大有小，有不同的顏色，甚至畫一張表格（可以看成word的前身），這種超文字能夠傳達出比純文字檔案更豐富的內容，所以將之放在網頁上再好不過了，為了實現它，超文字標記語言html誕生了。

 

 

7.CSS簡介

 

 

！！！！！！！！！！！！！！CSS的前身：沒有前身，只能說是雛形。早期超文字標記語言html為了在排版，字型和色彩等方面增添一些樣式，特別引入了元素的style屬性，通過style屬性程式設計師可以控制元素的文字、背景、邊框、內外邊距等的樣式，雖然這個屬性目前任然通用而且也被小編我認為是最方便最直觀的新增樣式的方式，但是由於市場的原因，比如說要對網頁樣式進行批量的修改亦或是針對不同時間地點甚至不同使用者而要採用不同的樣式風格，因此我們引入了新的語言——-CSS。

 

CSS（cascade style
sheet層疊樣式表）檔案更像是一個濾鏡，網頁就像一張照片，通過CSS而煥然一新！！！！！

 

改變網頁的樣式有三種方法，分別是通過html屬性，css檔案以及JavaScript程式，但是三種方式更本上都是通過css語言來完成的！！！！

 

！！！！！！！！！！！！CSS的語法和HTML截然不同，沒有了尖括號，除號，空格，引號和等號，取而代之的是大括號，減號，分號，逗號和冒號。

 

的color樣式貌似不會繼承。

 

！！！！！！下邊框與下劃線的區別：如果文字（innerHTML）有轉行（認為轉或者自動轉）那麼下劃線將有多行的，但下邊框（border-bottom）只有一條。

 

Css的基本組成單元（就是一個個大括號）叫做選擇器。

 

！！！Css只能對body以下的元素（包括body）增加樣式。

 

Css檔案既可以內嵌在html的中也可以通過外部連結，固定格式：

 

通常一個網站的所有網頁的風格一致，所以通常會共享同一個css檔案。

 

絕大多數樣式屬性都是繼承的。

繼承與覆蓋。

 

 

 

！！！！！Css的批量增添樣式方法：既可以通過元素型別來選擇，也可以自定義類和ID

 

元素和類是多對多的關係。

元素和ID是一對一的關係。

 

Css和html的屬性值之間都是空格隔開，但屬性之間前者是分號後者是空格。

 

Css中有錯誤，錯誤以下的其他規則都會被忽略？？？？？？！！！！！！！！！！！

 

Css查錯工具：http://jigsaw.w3.org/css-validator/

 

行業建議：這個社會不需要精而需要廣，不會的點只要會查就ok！

 

 

8、CSS語文課——擴大詞彙量

 

字型五大家族：

 

Sans-serif系列：

Verdana

Arial Black

Trebuchet MS

Arial

Geneva

特點是：無襯線，很“工整”，粗細均勻

 

Serif系列：

Times

Times New Roman

Georgia

特點：有稜角，粗細不均

 

Monospace系列：

Courier

Courier New

Andale Mono

特點：不同字元不同的寬度

 

Cursive系列：

Comic sans

Apple Chancery

特點：草書

 

Fantasy系列：

LAST NINJA

Impact

特點：花樣字型

 

Css指定字型font-family：字型名稱之間他媽的用逗號隔開。。。記住就好記住就好

而且大小寫必須一致（首字母大寫）

從左至右，客戶機不支援此字型就向右找，所以最後一個通常寫五大系列名

 

！！！因為空格的特殊性，字型名中有空格的話，要用雙引號把整個字型名括起來

 

Web雲字型@font-face：

字型檔案與字型檔案格式：

字型檔案：定義了字型樣式的形狀（就是圖片）

字型檔案格式：用那種編碼來表示上面的字型檔案（聯想圖片格式）

 

！！！！！字元的不同字型在字元編碼中都是同一個

 

常用格式：ttf otf eot svg woff

 

每日推薦：PDF檔案跨裝置跨系統跨字型值得一用（缺點是體積大）

 

每個字型擁有一個@font-face

 

通常螢幕畫素1cm=25px；1px=0.4mm

 

指定字型大小的三種方式：

1.    

指定px值（字型高度）

2.    

指定百分比%：相對於父元素

3.    
em。同上

 

一些預設值：

H1:2em

H2:1.5em

H3:1.17em==big

H4==p==ul==ol==1em

H5==0.83em==small

H6:0.75em

Body:14px

習慣：調整body字型大小控制所有字型等比例縮放

 

快捷方式：xx-small x-small small medium large x-large
xx-large

 

Jim獨創L(不要臉)：

Small- small small+ medium- medium medium+ large-
large large+

或者：

Smallest smaller small small-medium medium
medium-large large larger largest

 

溫馨提示：瞭解就好，看一遍就好，不用記憶。。。

 

改變字型粗細：

Font-weight：normal/bold/lighter。。。

 

Text-decoration：none去掉下劃線

 

斜體：

Font-style：italic/oblique

 

HTML、css都不是程式語言，所以瀏覽器都有差錯改錯功能，不區分大小寫

 

三種指定顏色方法：

1.rgb（xx%,xx%,xx%）或rgb（xx,xx,xx）  
rgba?

2.#xxxxxx縮寫：#xxx

3.顏色名：150+種

 

Css語法錯誤，瀏覽器忽略整個選擇器，不影響其他選擇器