在學習了一個星期的 HTML + CSS之后,發現還有一些東西需要去記憶,俗話說的好:
眼過千遍不如手過一遍,這就把需要記憶的東西記下來。
很多時候我們遇到的情況是:
設置背景圖片background-image:url(xxx.jpg);
如果背景圖片不平鋪就達不到全屏的效果,如果平鋪了之后效果就有些差強人意,這時候CSS這個屬性就派上用場了
background-size: cover; //把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。
這個屬性有四個值:
length 設置背景圖像的高度和寬度,第一個值設置寬度,第二個值設置高度。如果只設置一個值,則第二個值會被設置為 "auto"
percentage 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度,第二個值設置高度。如果只設置一個值,則第二個值會被設置為 "auto"。
cover 把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
contain 把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。
還有一些屬性和值是需要經常用但是不易記住的屬性
letter-spacing //設置字符間距
text-decoration //文本的裝飾 例如:下划線
text-shadow //文字陰影
text-indent //首行縮進
font-family //設置字體
font-style //斜體文本
font-weight //文本粗細
列表樣式
list-style-type //列表項目外觀
list-style-position //列表符號的位置
list-style-image //把圖像設置為列表項目的標記
偽類選擇器
a:link //未訪問的鏈接
a:visited //已訪問的鏈接
a:hover //鼠標移動上去
a:active //鼠標點上去不放
:focus //選中那塊標簽的顏色
:first-child //選擇元素第一個子元素
:last-child //選擇某個元素最后一個子元素
:nth-child(x) //選擇某個元素的第x個元素
偽元素選擇器
::before //在內容之前插入新內容
::after //在內容之后插入新內容
::first-line //選擇指定選擇器首行
::first-letter //選擇文本的第一個字符
如果是div溢出需要用到overflow屬性,該屬性值如下:
visible //默認值,超出內容不會被修剪呈現在元素外
hidden //超出部分被隱藏
scroll //不論是否需要一直顯示滾動條
auto //按需顯示滾動條
邊框
outline:dashed; //虛線輪廓
先寫到這里,如果有需要會繼續添加