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語法錯誤，瀏覽器忽略整個選擇器，不影響其他選擇器

轉載于:https://www.cnblogs.com/jinhengyu/p/7516764.html

總結

以上是生活随笔為你收集整理的Web云笔记--CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。