標籤:水平 weight 返回 選擇 ima 清除浮動 方式 如何 背景
CSS
一、CSS簡介
1,CSS (Cascading Style Sheets) 階層式樣式表 ,是一種電腦語言,用來控制HTML內容的顯示效果
2,CSS預先定義了眾多的和顯示效果有關的樣式屬性,比如color、font-size等。如果希望html內容顯示某個效果,就應用對應的CSS樣式屬性即可
3,CSS對樣式的控制是非常精確和精細的
二、CSS文法
1,CSS語言的基本單位是樣式聲明:proppertyName:value;
2,CSS語言的使用方式:
1,把CSS樣式聲明作為HTML標籤的style屬性值
2,使用CSS選取器
三、文本樣式
用來控制文本的顯示效果,常用樣式屬性:
color(文本的顏色):顏色值(顏色名、RGB / RGBA 顏色、十六進位顏色..)(見備忘)
text-indent(文本縮排): 長度值(長度單位:px、%、em、in、cm、mm..)
text-align(文本對齊): 枚舉值(left、right、center..)
word-spacing(單詞間隔):長度值
letter-spacing(字元間隔):長度值
text-decoration(文本修飾):枚舉值(none、underline、overline、line-through..)
四、字型樣式
font-family 設定字型名稱
font-size 設定字型的尺寸
font-style 設定字型風格
font-weight 設定字粗細
font 可以把上面的樣式屬性合并起來寫(值是有序的,使用空格分隔)
(font-weight font-size font-family)
五、CSS的特點
1,有的樣式屬性子標籤可以從父標籤那裡繼承過來,有的則不能
2,一個標籤可以同時應用若干個樣式屬性
3,一個標籤的最終顯示效果,是由若干個樣式屬性層疊(疊加)到一起形成的
六、CSS選取器
1,如果不適用元素style屬性值的方式,CSS要想控制元素的樣式,就要先定位、找到想要控制的元素
2,CSS使用選取器文法來定位元素,選取器有多種類型,並且選取器之間可以通過多種形式組合在一起使用,
CSS選取器靈活、精準、而且強大
3,選取器類型:
標籤選取器、id選取器、類別選取器、屬性選取器、偽類別選取器
4,選取器可以書寫在Html的<style>標籤裡面,文法格式為:
<style type="text/css">
選取器1{樣式聲明列表}
選取器1{樣式聲明列表}
</style>
七、屬性選取器
1,通過元素的屬性進行定位
[attr]選擇有attr屬性的標籤
[attr=val] 選擇以attr屬性值為val的標籤
[attr^=val] 選擇以attr屬性值以val開頭的標籤
[attr$=val] 選擇以attr屬性值以val結尾的標籤
[attr*=val] 選擇以attr屬性值中包含val的標籤
八、偽類別選取器
用來定位處於特定狀態下的元素
:link 沒有被點擊過的超連結
:visited 被點擊過的超連結
:hover 滑鼠經過的超連結
:focus 獲得焦點的標籤
:first-child 第一個子標籤
:last-child 最後一個子標籤
:empty 沒有內容的標籤
:enabled 可以操作的標籤
:disabled 不可操作的標籤
:checked 處於選擇狀態的標籤
九、複合選取器
選取器可以進行多種形式的組合:
selector1空格selector2 在1選中的元素中,使用2篩選其後代元素(2不要使用偽類別選取器)
selector1>selector2 在1選中的元素中,使用2篩選其子項目
selector1~selector2 在1選中的元素中,使用2篩選其後續兄弟元素
selector1+selector2 在1選中的元素中,使用2篩選其後續緊鄰的兄弟元素
selector1,selector2 各個選取器的並集
selector1(沒有空格)selector2 各個選取器的交集(複合後可識別才可以這樣使用)
十、CSS控制邊框效果
很多HTML元素都有邊框,如img、table、td、div、input等
border-style 邊框樣式,枚舉值
border-width 邊框寬度,長度值
border-color 邊框顏色,顏色值
可以合并上面三個樣式屬性 border:solid 2px red;
還可以分別控制上下左右邊框的樣式,如border-top-color樣式屬性
table元素使用border-collaps:collaps;可以合併儲存格邊框
十一、CSS控制元素背景樣式
很多HTML元素都可以設定背景樣式(背景色、背景圖片),如body、div等
background-color: red;背景色,顏色值
background-image: url("bg1.jpg"); 背景圖片
background-repeat: 背景圖片平鋪方式,枚舉值
background-attachment:背景圖片是否隨內容滾動,枚舉值
background-position-x:center; 背景圖片水平方向位置,枚舉值
同樣,背景樣式也可以寫在一起background: url("bg1.jpg") repeat ;
十二、盒子模型
為了更好的控制頁面樣式,CSS定義了盒子模型。一個HTML元素就是一個盒子
盒子的元素:
margin外邊距
border邊框
padding 內邊距
內容
1,一個盒子在頁面中佔據的範圍大小由外邊距、內邊距、內容的總面積決定
2,內邊距和外邊距只能指定寬度樣式
3,盒子的背景會對內邊距和內容起作用
4,外邊距、邊框、內邊距可對上下左右不分分別進行樣式控制
5,設定盒子高度或寬度時只對內容起作用
十三、盒子的定位
1,通過對每個盒子的外邊距、邊框、內邊距、內容、位置的精確控制,CSS可以實現複雜而精準的頁面配置
2,需要掌握下面幾個概念
區塊層級元素:這類元素預設有換行效果,典型的如div
行內元素:這類元素預設沒有換行效果,典型的如span
文檔流:HTML元素在頁面上顯示時,根據在源碼中出現的次序,按照從上到下、從左至右、區塊層級元素獨佔一行、行內元素不換行的規則
依次排列。文檔流中的元素會對後續元素的位置產生影響
盒子定位:
相對定位:
元素在顯示時,相對自己本來的位置向下或者向右位移指定數值,
但元素本身並不脫離文檔流,也就說後面的元素還認為此元素在原來的位置,
所以會排列在此元素原本位置的後面(但會造成覆蓋)
position: relative;
top: 50px;
left: 50px;
絕對位置:
以最近的已經定位的祖先元素為基準進行位移(如果沒有這樣的祖先元素則以瀏覽器視窗為基準),
元素本身脫離文檔流,也就說後面元素認為此元素不存在,所以會佔據此元素原來的位置
(但會造成覆蓋,脫離文檔流後就不具有區塊層級元素獨佔一行的性質了)
position: absolute;
top: 50px;
left: 50px;
固定定位:
和絕對位置類似也會脫離文檔流,但總是以瀏覽器視窗為基準,而且位置不會隨著捲軸移動
position: fixed;
top: 50px;
left: 50px;
浮動:
如果一個盒子向左浮動(float: left;):這個元素會成為行內元素;
它後面的區塊層級元素會失去一半的獨佔一行的特性,即左邊緊靠在浮動元素後面,右邊延伸到行尾
向右浮動和向左浮動效果類似
可以使用clear: both;清除浮動效果對後面盒子的影響
十四、z-index層級樣式屬性
由於元素定位後會產生元素的疊加覆蓋情況,為了靈活控制疊加部分的顯示,CSS提供了z-index層級樣式屬性
z-index只能取整數,預設為0,可正可負
z-index值大的元素會覆蓋值小的元素
z-index只對進行了定位的元素有效
十五、如何獲得元素在頁面中的座標
HTML所有的元素都具有下面這5個唯讀屬性
offsetLeft元素邊框距頁面左邊界的距離
offsetTop元素邊框距上邊界的距離
offsetWidth元素的寬度(左右邊框的跨度)
offsetHeight元素高度(上下邊框的跨度)
offsetParent返回已經定位的祖先元素,如果沒有則返回body元素或者null
十六、使用CSS的五種方式
1,行內樣式:寫在元素的style屬性裡
2,內嵌樣式:寫在<style>元素內
3,匯入樣式:在<style>元素內,開頭使用@import url(index.css);方式引入,這種方式實際上算是內嵌樣式
4,連結樣式:使用<link>元素引入css檔案,如<link type="text/css" rel="stylesheet" href="c1.css"/>
5,預設樣式:集合每一種html標籤都有預設的css樣式
當某個樣式屬性出現多次時,就需要使用優先順序規則解決產生的矛盾:
1,不同引入方式的優先順序:行內>內嵌、匯入和連結>預設
2,同一種引入方式或相同優先順序的引用方式中,後出現的會覆蓋先出現的
十七、其他常用樣式屬性
display控制元素的可見度
cursor控制滑鼠指標進入元素時的樣式
如鵬網學習筆記(八)CSS