CSS學習筆記(一) 作用方式

2021-07-10 11:12:23 字數 1705 閱讀 6763

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 屬性後,浮動元素會被移...