css:cascading style sheets 層疊樣式表
在html裡面使css生效有三種方式:內嵌(embedded)、外部鏈結(link標籤)、內聯(inline),內嵌和建立外部鏈結都必須寫在html的頭部(head)裡面,內聯樣式(incline style)是利用html中標籤的style屬性來達成。
1 內嵌
在html的之間,建立乙個標籤對,然後將css寫入其中,如:
csstitle>
charset="utf-8">
type="text/css">
p
style>
head>
2 外部鏈結
2.1
在html的標籤對中使用html的標籤鏈結到乙個外部的css檔案
語法為:
@import
url()
;
而@import
必須寫在的最前面,後面再跟其他的樣式屬性,如:
h1style>如果沒有在最前面,則@import
鏈結的樣式表不能生效。
與標籤的區別是,@import
可以寫在css檔案中,因為css檔案不能包含其他任何文件標記,但是可以在任何css外部檔案裡面使用@import
來鏈結到另外乙個css外部檔案,舉例如下:
temptitle>
rel="stylesheet"
type="text/css"
href="temp2.css">
head>
temp2.css為
@import
url("te***.css")
;/*或可以寫成@import url(te***.css)即不帶引號,不會影響結果*/
p
te***.css為
h1
經過驗證,等同於如下的效果:
type="text/css">
p h1
style>
和一樣,乙個html文件裡可以有多個@import
,此外,@import
無法指定候選樣式表
網上有帖子談到了@import
會在一定程度上造成頁面載入上的延遲,見(因此不推薦用此方法載入樣式表
3 內聯(inline)
利用html的style
屬性,為除了之外出現的任意標籤來設定樣式,這樣子只能為單一元素指定一些樣式,舉例:
style="color:red;">tempp>/*用雙引號而不是大括號*/
html的style
屬性一定程度上會削弱css組織管理文件的樹形結構,所以也不推薦。
參考: 《css: the definitive guide》 第三版
CSS學習筆記一
css是cascading style sheets 層疊樣式表 的縮寫。是一種對web文件新增樣式的簡單機制,屬於表現層的布局語言。然後在樣式表裡這樣定義 menubar 其中 menubar 是你自己定義的id名稱。注意在前面加 號。id選擇器也同樣支援派生,例如 menubar p 這個方法主...
css學習筆記(一)
1.群組選擇器 如 p,body,img,div 2.兄弟選擇器 如 p p 3.屬性選擇器 如 p title 4.包含 後代 選擇器 如 body ul li 5.子元素選擇器 如 div p 6.id選擇器 如 mydiv 7.類選擇器 如 class1 8.偽元素選擇器 如 e first ...
CSS學習筆記 一
什麼是文件流?對乙個網頁而言,body 元素下的任意元素,根據其前後順序,組成乙個個上下關係,這便是文件流。瀏覽器根據這些元素的順序去顯示它們在網頁之中的位置。文件流是瀏覽器的預設顯示規則。什麼是浮動?float具有屬性值 left right none 當設定了 float 屬性後,浮動元素會被移...