第一章:css介紹(CSS BASICS)Chapter 1 : Introduction to CSS

今天無意中看到http://www.cssbasics.com/上面介紹css的十八章內容,從今天開始將其翻譯成中文,用意有三:1.學習css(本人一直很重視基硅,基硅掌握程度能很大意義上決定你能走多遠,個人看法);2.提高下英文(計算機出自美國、先進技術也基本上來自美國,技術文檔基本上是英文的,英文水平的重要性那是不用說了);3.一直都是從互聯網獲取東西,少有貢獻,也希望能爲大家做點貢獻,本人英文水平一般,大家也湊合看看,也是小弟的一翻心意大笑

第一章:css介紹(CSS BASICS)Chapter 1 : Introduction to CSS

css允許你將網站的內容同樣式分離,雖然還是將內容寫在(x)html文件裏,但是所有的樣式(字體,顏色,背景,邊框,文本格式,鏈接效果等等)可以使用css完成。
你可以在htm文件內部或外部使用css。

內部樣式表(Internal Stylesheet)
我們先探討下在htm文件內部使用css的方法。可以簡單的將css代碼放置在head標籤裏面。如下所示

<head>
<title><title>
<style type=”text/css”>
CSS Content Goes Here
</style>
</head>
<body>


這種css代碼放置在htm文件內部的方式適合當你只需要設計一個頁面或者你要設計的多個頁面需要不同的風格。


外部樣式表(External Stylesheet)

接下來我們將探討下外部樣式表的使用方法。外部css文件可以通過任何類似notepad或者dreamweaver文本或html編輯器來創建。css文件中不能包含htm代碼,只能寫css代碼。將文件簡單的存儲爲擴展.css擴展名即可。可以通過在htm文件head標籤中使用link標籤即可鏈接到css文件,如下所示:

<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />


或者通過@import的方式,如下所示

<style type=”text/css”>@import url(Path To stylesheet.css)</style>


這兩種方法都可以在head標籤中導入css文件,如下所示

<head>
<title><title>
<link rel=”stylesheet” type=”text/css”href=”style.css” />
</head>
<body>

or

<head>
<title><title>
<style type=”text/css”> @import url(Path To stylesheet.css) </style>
</head>
<body>


外部樣式表允許你將所有頁面鏈接到同一個css文件,以同一種風格呈現頁面,這樣,如果你需要修改所有的頁面風格,只需要編輯這個css文件即可。

這是幾個使用外部樣式表更好的理由:

更容易維護
減少文件的大小
減少帶寬
提高靈活性

層疊順序(Cascading Order)
上文中我們已經解釋了怎麼使用內外或外部的方式鏈接css文件,如果你已經理解了,那真讓人欣慰,如果沒有,也不好着急,本書纔剛剛開始。假設你已經理解,你也許會問我們可以同時使用這兩種方式嗎?答案是肯定的,另外我們還可以同時使用第三種方式
行內樣式(inline styles)
到現在我才提及行內樣式是因爲在某種程度上行內樣式與我們使用css的初衷並不一致,定義位置在你要定義樣式的元素的開始標籤裏(Inline styles are defined right in the (X)HTML file along side the element you want to style. See example below.),如下所示:

<p style=”color: #ff0000;”>Some red text</p>


line styles will NOT allow the user to change styles of elements or text formatted this way(行內樣式不充許用戶改變元素的樣式或者...這裏還沒想好怎麼翻譯)

So, which is better?(哪種方式更好呢?)

那麼,這麼多種定義css的方式,你也許會問哪種更好呢?如果我使用多種定義方式,會按什麼順序將這多種方式定義的css載入到瀏覽器呢?
所有的各種方法,將進入一個新的“僞”級聯樣式表(All the various methods will cascade into a new “pseudo” stylesheet):
1.行內樣式表(定義在(x)html元素裏)
2.內部樣式表(定義在<head>標籤裏面)
3.外部樣式表

至於哪種方法更好,這取決於你想要做什麼。如果你只有一個文件那麼使用內部樣式表(放在head標籤裏)會更好。若有多個文件,外部樣式表纔是最佳選擇。選擇<link related=> 還是@import這取決於你。 友情提醒,相比link這種方式,在ie瀏覽器中,import方式在IE中使用@import 將會引起文件的下載順序被改變。這更會引起樣式文件花費更長的時間來下載,這會阻礙頁面的渲染,讓人感到頁面比較慢。

殘疾人用戶

外部樣式表可以使殘疾人用戶受益,用戶可以關掉你的樣式表或者使用他們自己增加文字大小,改變顏色等的樣式表來替換。爲了你網站上的更多信息能讓所有用戶訪問請閱讀Dive into accessibility

高級用戶
交換樣式表(Swapping stylesheets)不但有益於殘疾人用戶而且有益於對閱讀web文檔比較講究(挑剔)的高級用戶。
關於用戶自定義樣式表的權重及加載方式
可以參考http://blog.csdn.net/qq578933760/article/details/7540553

瀏覽器問題
當你深入進css的世界你會發現所有的瀏覽器都是不相同的,同一段css代碼有可能在不同的瀏覽器呈現不同是很讓人頭疼的一件事。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章