css復合選擇器
後代選擇器:
語法格式:
選擇器1 選擇器2
後代選擇器中用空格分開
子代選擇器:
語法格式:
選擇器1 > 選擇器2
後代選擇器使用者大於號分開
並集選擇器:
語法格式:
選擇器1,選擇器2
並集選擇器用逗號分開,最後乙個選擇器不需要逗號
交集選擇器:
語法格式:
選擇器1選擇器2
既…又…的關係應用場景不多
鏈結偽類選擇器:
針對鏈結的不同狀態設定不同的樣式
鏈結偽類選擇器 說明
a:link 選擇所有未被訪問的鏈結
a:visited 選擇所有已經被訪問的鏈結
a:hover 選擇滑鼠指標位於其上的鏈結
a:active 選擇啟用鏈結(滑鼠按下未抬起的鏈結)
focus偽類選擇器:
在表單中突出顯示當前獲得焦點的表單元素,提公升使用者體驗
語法格式:
>
input
input:focus
style
>
input和冒號中間不能有空格
元素的顯示模式
塊元素:
特點:1.獨佔一行;2.可以設定寬高等屬性;3.寬度預設是父級容器的寬度;4.可以存放其他行內元素和塊元素
行內元素:
特點 :1.一行可以存在多個;2.設定寬高等屬性無效;3.預設寬度是內容的寬度;4.只能容納文字和其他行內元素
行內塊元素:
特點:1.一行顯示,顯示多個;2.預設寬度是本身內容的寬度;3.可以設定寬、高等屬性
模式轉換:
display:block:轉換為塊結構;
display:inline:轉換為行內結構;
display:inline-block:轉換為行內塊結構;
背景
背景:語法:
background-image: none | url(url);
優點:非常容易控制位置
背景平鋪:
引數 說明
repeat 預設,水平垂直平鋪
no-repeat 不平鋪
repeat-x 水平平鋪
repeat-y 垂直平鋪
背景位置:
方位名詞:
background-position可以改變在背景中的位置
水平方向:left、center、right
垂直方向:top、center、right
精確單位:
background-position :x y;
如果只指定了乙個值,系統預設是方向的值,另乙個方向垂直居中顯示
背景固定:
background-attachment控制背景固定
scroll:背景影象跟隨滾動(預設)
fixed:背景影象固定
css div頁面布局中position的位置屬性
position的4個屬性 relative absolute fixed static 筆記整理 1.relative相對定位 相對於元素自身在文字流中原先的位置進行定位。結合left right top bottom屬性進行定位。top的值表示物件相對原位置向下偏移的距離,bottom的值表示物...
Css Div布局學習(二) 清理Clear
我們在css div布局學習 一 div布局基礎 這篇文章裡面講解了基本的布局方法,footer內有clear both 屬性就一句帶過了,事後想了一下對於清理還是有些話要講清楚的。那我就開闢一篇專門講一下。masthead sidebar a sidebar b content footer 這個...
CSS div頁面水平居中的布局方法總結
一 margin auto 0 與 text aligh center 在現代瀏覽器 如internet explorer 7 firefox opera等 現代瀏覽器實現水平居中的方法很簡單,只要設定到左右兩側的空白為自動即可。意即 wrap wrap 上面這段 的意思是說使wrap這個div到左...