CSS笔记之样式
? ?總結一下CSS樣式,做如下的筆記。
css樣式
1.背景
background-color 背景色
可以接受任何合法的顏色值,其默認值是 transparent(透明)
background-image 背景圖像
如body {background-image: url(/i/eg_bg_04.gif);},默認值是 none
background-repeat 背景重復
repeat-x(X軸方向)、repeat-y(Y軸方向)、no-repeat(不平鋪)
background-position 背景定位
可以接受關鍵字(top、bottom、left、right 和 center),接受長度(100px 或 5cm),可以接受百分比(50%)
background-attachment 背景關聯
可以接受值:fixed 估計背景圖片,使得不隨頁面進行滾動,默認值為 scroll,是指隨著頁面進行滾動
2.文本
text-indent 縮進文本
可以接受長度,百分比 且可以被繼承,子標簽可以繼承父標簽的該屬性。
text-align 水平對齊
可以接受關鍵字 left、right、center、justify、nherit 其中left是默認屬性
text-align:center與Center標簽的區別,其中Center標簽不僅影響文本,還會把整個元素全部居中,而text-align:center只會影響文本。
word-spacing 字間隔
改變字(單詞)之間的標準間隔,其默認值normal 與設置值為 0 是一樣的。
可以接受一個正長度值(間隔增加)或一個負長度值(拉近距離)。
letter-spacing 字母間隔
可以接受任何長度值,與word-spacing的區別在于,字母間隔修改的是字符或字母之間的間隔,同樣默認值normal與設置為0是一樣的
text-transform 字符轉換
接受的關鍵字為 none、uppercase、lowercase、capitalize,其中none是不做改動,capitalize只對每個單詞的首字母大寫
text-decoration 文本裝飾
接受的關鍵字為none、underline、overline、line-through、blink(會讓文字閃爍,不常用)
white-space 處理空白符
可以接受下面的關鍵字
3.字體
font-family 定義文本的字體系列
有兩種不同類型的字體系列 1.通用字體(擁有相似外觀的字體系列) 2.特定字體(具體的字體),其中通用字體定義了5中類型(Serif 字體、Sans-serif 字體、Monospace 字體、Cursive 字體、Fantasy 字體)
font-style 字體風格
可以接受3個值(normal - 文本正常顯示、italic - 文本斜體顯示、oblique - 文本傾斜顯示)
font-variant 設置小型大寫字母(采用不同大小的大寫字母)
可以接受3個值 1.normal(默認值)、2.small-caps(顯示小型大寫字母)3.inherit(使用父元素的font-variant)
font-weight 字體加粗
可以接受1.normal(默認值,相當于400)2.bold(相當于700)3.bolder(定義更粗的字符。)4.lighter(定義更細的字符)5.100~900(定義由粗到細的字符)6.inherit(繼承父元素的屬性)
font-size 字體大小
font-size值可以是絕對或相對值
可以通過像素來設置字體的大小
通過像素設置文本大小,可以對文本大小進行完全控制(在IE中,使用該方法會有問題)
使用 em 來設置字體大小
1em 等于當前的字體尺寸。如果一個元素的 font-size 為 16 像素,那么對于該元素,1em 就等于 16 像素。在設置字體大小時,em 的值會相對于父元素的字體大小改變。
4.鏈接
鏈接有如下4種狀態,其中需要注意的是a:hover 必須位于 a:link 和 a:visited 之后;a:active 必須位于 a:hover 之后
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標指針位于鏈接的上方
a:active - 鏈接被點擊的時刻
鏈接,主要從text-decoration(文本修飾)、background-color(背景色)、color(顏色)、font(字體)等方面進行樣式設置
5.表格
border-collapse 為表格設置合并邊框模型 接受如下的值
border-spacing 屬性設置相鄰單元格的邊框間的距離(僅用于“邊框分離”模式),接受如下的值
caption-side 設置表格標題的位置 可以接受如下的值
empty-cells 設置是否顯示表格中的空單元格 可以接受如下的值
table-layout 顯示表格單元格、行、列的算法規則 可以接受如下的值
6.列表
list-style 簡寫屬性,把所有的列表屬性都放在一起。
list-style-image 將圖象設置為列表項標志
可以接受值 url(圖像的路徑)、none(默認值)、inherit(從父元素繼承)
list-style-position 設置列表中列表項標志的位置
可以接受值 inside、outside(默認值)、inherit(繼承父元素) 其中inside表示為列表項目標記放置在文本以內,且環繞文本根據標記對齊
list-style-type 設置列表項標志的類型 可以接受disc(默認 實心圓)、circle(空心圓)、none(無標識)等。
7.輪廓
outline 在一個聲明中設置所有的輪廓屬性
可以接受如下的值 outline-color(邊框的顏色)、outline-style(邊框的樣式)、outline-width(邊框的寬度)、inherit(繼承父元素)
outline-color 輪廓的顏色
可以接受各種顏色屬性
outline-style 輪廓的樣式 可以接受如下的值
outline-width 輪廓的寬度
可以接受的值 thin(細輪廓)、medium(默認,中等的輪廓)、thick(粗的輪廓)、length(規定輪廓粗細的值)、inherit(繼承父類)
?
轉載于:https://www.cnblogs.com/nash-test/p/4704794.html
總結
- 上一篇: 部队文职招聘咨询电话
- 下一篇: Doom 规律+大数