歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
CSS(Cascading Style Sheet,層疊樣式表)定義如何顯示HTML元素。
當瀏覽器讀到一個樣式表,它就會按照這個樣式表來對文檔進行格式化(渲染)。
CSS實例
每個CSS樣式由兩個組成部分:選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之后用分號結束。
前端:原來你是這樣的CSS
前端:原來你是這樣的CSS
CSS注釋
注釋是代碼之母。
行內樣式
行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。
內部樣式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下:
外部樣式
外部樣式就是將css寫在一個單獨的文件中,然后在頁面進行引入即可。推薦使用此方式。
基本選擇器
元素選擇器
ID選擇器
類選擇器
注意:
樣式類名不要用數字開頭(有的瀏覽器不認)。
標簽中的class屬性如果有多個,要用空格分隔。
通用選擇器
組合選擇器
后代選擇器
兒子選擇器
毗鄰選擇器
弟弟選擇器
屬性選擇器
分組和嵌套
分組
當多個元素的樣式相同的時候,我們沒有必要重復地為每個元素都設置樣式,我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。
例如:
上面的代碼為div標簽和p標簽統一設置字體為紅色。
通常,我們會分兩行來寫,更清晰:
嵌套
多種選擇器可以混合起來使用,比如:.c1類內部所有p標簽設置字體顏色為紅色。
偽類選擇器
偽元素選擇器
first-letter
常用的給首字母設置特殊樣式:
before
after
before和after多用于清除浮動。
選擇器的優先級
CSS繼承
繼承是CSS的一個主要特征,它是依賴于祖先-后代的關系的。繼承是一種機制,它允許樣式不僅可以應用于某個特定的元素,還可以應用于它的后代。例如一個body定義了的字體顏色值也會應用到段落的文本中。
此時頁面上所有標簽都會繼承body的字體顏色。然而CSS繼承性的權重是非常低的,是比普通元素的權重還要低的0。
我們只要給對應的標簽設置字體顏色就可覆蓋掉它繼承的樣式。
此外,繼承是CSS重要的一部分,我們甚至不用去考慮它為什么能夠這樣,但CSS繼承也是有限制的。有一些屬性不能被繼承,如:border, margin, padding, background等。
選擇器的優先級
我們上面學了很多的選擇器,也就是說在一個HTML頁面中有很多種方式找到一個元素并且為其設置樣式,那瀏覽器根據什么來決定應該應用哪個樣式呢?
其實是按照不同選擇器的權重來決定的,具體的選擇器權重計算方式如下圖:
前端:原來你是這樣的CSS
前端:原來你是這樣的CSS
除此之外還可以通過添加 !important方式來強制讓樣式生效,但并不推薦使用。因為如果過多的使用!important會使樣式文件混亂不易維護。
萬不得已可以使用!important
寬和高
width屬性可以為元素設置寬度。
height屬性可以為元素設置高度。
塊級標簽才能設置寬度,內聯標簽的寬度由內容來決定。
字體屬性
文字字體
font-family可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體,則會嘗試下一個。瀏覽器會使用它可識別的第一個值。
簡單實例:
字體大小
如果設置成inherit表示繼承父元素的字體大小值。
字重(粗細)
font-weight用來設置字體的字重(粗細)。
值描述normal默認值,標準粗細bold粗體bolder更粗lighter更細100~900設置具體粗細,400等同于normal,而700等同于boldinherit繼承父元素字體的粗細值
文本顏色
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定:
還有rgba(255,0,0,0.3),第四個值為alpha, 指定了色彩的透明度/不透明度,它的范圍為0.0到1.0之間。
文字屬性
文字對齊
text-align 屬性規定元素中的文本的水平對齊方式。
值描述left左邊對齊 默認值right右對齊center居中對齊justify兩端對齊
文字裝飾
text-decoration 屬性用來給文字添加特殊效果。
值描述none默認。定義標準的文本。underline定義文本下的一條線。overline定義文本上的一條線。line-through定義穿過文本下的一條線。inherit繼承父元素的text-decoration屬性的值。
常用的為去掉a標簽默認的自劃線:
首行縮進
將段落的第一行縮進 32像素:
背景屬性
支持簡寫:
使用背景圖片的一個常見案例就是很多網站會把很多小圖標放在一張圖片上,然后根據位置去顯示圖片。減少頻繁的圖片請求。
參考鏈接點我
一個有趣的例子:
邊框
邊框屬性
通常使用簡寫方式:
邊框樣式
值描述none無邊框。dotted點狀虛線邊框。dashed矩形虛線邊框。solid實線邊框。
除了可以統一設置邊框外還可以單獨為某一個邊框設置樣式,如下所示:
border-radius
用這個屬性能實現圓角邊框的效果。
將border-radius設置為長或高的一半即可得到一個圓形。
display屬性
用于控制HTML元素的顯示效果。
值意義display:"none"HTML文檔中元素存在,但是在瀏覽器中不顯示。一般用于配合JavaScript代碼使用。display:"block"默認占滿整個頁面寬度,如果設置了指定寬度,則會用margin填充剩下的部分。display:"inline"按行內元素顯示,此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什么影響。display:"inline-block"使元素同時具有行內元素和塊級元素的特點。
display:"none"與visibility:hidden的區別:
visibility:hidden: 可以隱藏某個元素,但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響布局。
display:none: 可以隱藏某個元素,且隱藏的元素不會占用任何空間。也就是說,該元素不但被隱藏了,而且該元素原本占用的空間也會從頁面布局中消失。
CSS盒子模型
看圖吧:
前端:原來你是這樣的CSS
前端:原來你是這樣的CSS
margin外邊距
推薦使用簡寫:
順序:上右下左
常見居中:
padding內填充
推薦使用簡寫:
順序:上右下左
補充padding的常用簡寫方式:
float
在 CSS 中,任何元素都可以浮動。
浮動元素會生成一個塊級框,而不論它本身是何種元素。
關于浮動的兩個特點:
三種取值
left:向左浮動
right:向右浮動
none:默認值,不浮動
參考示例
clear
clear屬性規定元素的哪一側不允許其他浮動元素。
值描述left在左側不允許浮動元素。right在右側不允許浮動元素。both在左右兩側均不允許浮動元素。none默認值。允許浮動元素出現在兩側。inherit規定應該從父元素繼承 clear 屬性的值。
注意:clear屬性只會對自身起作用,而不會影響其他元素。
清除浮動
清除浮動的副作用(父標簽塌陷問題)
主要有三種方式:
偽元素清除法(使用較多):
overflow溢出屬性
值描述visible默認值。內容不會被修剪,會呈現在元素框之外。hidden內容會被修剪,并且其余內容是不可見的。scroll內容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內容。auto如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容。inherit規定應該從父元素繼承 overflow 屬性的值。
圓形頭像示例
定位(position)
static
static 默認值,無定位,不能當作絕對定位的參照物,并且設置標簽對象的left、top等值是不起作用的的。
relative(相對定位)
相對定位是相對于該元素在文檔流中的原始位置,即以自己原始位置為參照物。有趣的是,即使設定了元素的相對定位以及偏移值,元素還占有著原來的位置,即占據文檔流空間。對象遵循正常文檔流,但將依據top,right,bottom,left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意:position:relative的一個主要用法:方便絕對定位元素找到參照物。
absolute(絕對定位)
定義:設置為絕對定位的元素框從文檔流完全刪除,并相對于最近的已定位祖先元素定位,如果元素沒有已定位的祖先元素,那么它的位置相對于最初的包含塊(即body元素)。元素原先在正常文檔流中所占的空間會關閉,就好像該元素原來不存在一樣。元素定位后生成一個塊級框,而不論原來它在正常流中生成何種類型的框。
重點:如果父級設置了position屬性,例如position:relative;,那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題,即父級為自適應的,那我子元素就設置position:absolute;父元素設置position:relative;,然后Top、Right、Bottom、Left用百分比寬度表示。
另外,對象脫離正常文檔流,使用top,right,bottom,left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
fixed(固定)
fixed:對象脫離正常文檔流,使用top,right,bottom,left等屬性以窗口為參考點進行定位,當出現滾動條時,對象不會隨著滾動。而其層疊通過z-index屬性 定義。 注意點: 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點,因為這是兩個不同的流,一個是浮動流,另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
在理論上,被設置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標,不論窗口是否滾動,它都會固定在這個位置。
示例代碼:
是否脫離文檔流
上述例子可知:
脫離文檔流:
絕對定位
固定定位
不脫離文檔流:
相對定位
z-index
設置對象的層疊順序。
opacity
用來定義透明效果。取值范圍是0~1,0是完全透明,1是完全不透明。
頂部導航菜單

如需轉載,請注明文章出處和來源網址:http://www.589004.tw/css3-style/c58312.shtml

金龙策略配资