css樣式表及選擇器
內嵌式是將css**集中寫在html文件的head頭部標籤中,並且用style標籤定義,其基本語法格式如下:
>
type
="text/css"
>
選擇器style
>
head
>
1.在html5中可以省略,但一般都會寫上,比較規範
2.一般放在head標籤內,也可以放在其他位置
內聯樣式,又有人稱行內樣式、行間樣式、內嵌樣式。是通過標籤的style屬性來設定元素的樣式,其基本語法格式如下:
《標籤名
style
="屬性1
:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
">
內容 標籤名
>
>
href
="css檔案的路徑"
type
="text/css"
rel="stylesheet"
/>
head
>
link單標籤,放在頭部head裡面
1.herf,定義外部樣式檔案的url,可以是相對路徑,也可以是絕對路徑
2.type,所連線文件的型別,text/css表示是乙個css檔案
3.rel 定義當前文件和所鏈結文件的關係,在這裡需要指定stylesheet,表示鏈結的是乙個樣式表檔案
樣式表優點
缺點使用情況
控制範圍
行內樣式表
書寫方便,權重高
沒有實現樣式和結構的分離
較少控制乙個標籤
內部樣式表
部分結構和樣式分離
沒有完全分離
較多控制乙個頁面的標籤
外部樣式表
完全實現樣式和結構的分離
需要引入
最多,牆裂推薦
控制整個站點
標籤的型別(顯示模式)
html標籤一般分為塊標籤和行內標籤兩種型別,它們也稱塊元素和行內元素。具體如下:
常見的塊元素有
復合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。
由兩個選擇器組成,標籤選擇器,第二個class選擇器,兩個選擇器之間不能有空格
p .p1
交集用的比較少
並集選擇器用逗號鏈結,任何形式的選擇器都可以作為並集選擇器的一部分
div,p
也稱為包含選擇器,用空格連線,子子孫孫都可以被選中
注意:把外層標籤寫在前面,內層標籤寫在後面,中間用空格分割
只包含子元素,父級標籤寫在前面自己標籤寫在後面,中間用》連線
選取標籤帶有某些特殊屬性的選擇器 我們稱為屬性選擇器
div[class^=font]
div[class$=font]
div[class*=font]
標籤名[屬性名^=屬性值]
【強制】屬性名與之後的:之間不允許包含空格,:與屬性值之間必須包含空格
font-size: 12px;
【強制】當包含多個選擇器時,每個選擇器宣告都必須獨佔一行
.one, .two, .three 錯誤寫法
.one, 正確寫法
.two,
.three
【建議】選擇器的巢狀層級不應該大於**
【強制】屬性定義必須另起一行
【強制】屬性定義後必須加上分號
css 可以新增背景顏色和背景,以及來進行設定。
background-color
背景顏色
background-image
背景位址
background-repeat
是否平鋪
background-position
背景位置
background-attachment
背景固定還是滾動
背景的合寫(復合屬性)
background:背景顏色 背景位址 背景平鋪 背景滾動 背景位置
語法:
background-image
: none | url (url)
none 無背景圖
語法:
background-repeat
: repeat | no-repeat | repeat-x | repeat-y
語法:
background-position
: length || length
background-position
: position || position
語法:
background-attachment
: scroll | fixed
background:背景顏色 背景位址 背景平鋪 背景滾動 背景位置
background
: color url(image.jpg) repeat-y scroll 50% 0 ;
css3支援背景半透明的寫法語法格式是:
background
:rgba
(0,0,0,0.3)
;
其引數設定如下:
a) 可以設定長度單位(px)或百分比(設定百分比時,參照盒子的寬高)
b) 設定為cover時,會自動調整縮放比例,保證始終填充滿背景區域,如有溢位部分則會被隱藏。我們平時用的cover 最多
c) 設定為contain會自動調整縮放比例,保證始終完整顯示在背景區域。
以逗號分隔可以設定多背景,可用於自適應布局 做法就是 用逗號隔開就好了。
CSS選擇器及CSS樣式表
牛腩新聞發布系統中記憶最深的就是各種 css選擇器各種 css樣式,這些選擇器之間肯定有它的優先順序,包括 css樣式也一樣,也是有它的優先順序,本文介紹一些各種 css選擇器各種 css樣式以及它們的優先順序。由兩個主要的部分構成 選擇器,以及一條或者多條宣告。部分css部分 h1html 部分z...
css樣式表 樣式表分類 選擇器
一 樣式表分三類 1.內聯樣式表。放在元素的開始標記中。只對當前元素起作用。例 結果 2.內嵌樣式表。放在頁面的中間。可以對整個頁面。你好 執行結果 3.外部樣式表。放在乙個單獨的.css樣式表檔案中。可以對整個 操作 新建乙個css檔案,用來存放樣式表 在html中呼叫樣式表,要在html中右鍵 ...
css層疊樣式表及選擇器
六 css層疊樣式表 由網頁組成 網頁的結構由html組成 網頁的樣式由css組成 1.css概念 cascading style sheets 層疊 樣式 表 css是定義html表現形式的描述性語言 2.如何設定標題文字顏色 對齊方式 背景色 h3 北京 h3 文字顏色 巢狀 font font...