一、定義顏色的三種方式
color: #000; # 定義顏色的方式一，通過16進制的形式設置(#000000簡寫：#000) color: black; # 定義顏色的方式二，通過顏色名字設置 color: rgb(0,0,0); # 定義顏色的方式三，范圍0-255(黑色：0，0，0 ，白色：255，255，255) color: rgba(0,0,0,0.5); # 定義顏色的方式四，透明度范圍：0-1
二、定義字體屬性
font-size: 16px # 字體大小默認16px font-weight: bold; # 字重：bold(粗體)，normal(默認值，標准)，bolder(更粗)，lighter(更細)，100-900(通過數值設置粗細，默認400) font-family: "Arial Black", “arial-black,” “cursive”; # 指定瀏覽器選擇字體類型，如果不支持當前當前字體，依次往后嘗試下一個字體類型 text-align: center; # 對齊方式：left(左對齊，默認)，right(右對齊)，center(居中對齊)，justify(兩端對齊) text-decoration: underline; # 文字裝飾：none(標准文本，默認)，underline(文本下划線)，overline(文本上划線)，line-through(穿過文本的一條線) text-indent: 32px; # 文本首行縮進2個字符(默認16px為一個字符大小) letter-spacing： 10px; # 指定字體間間隔 line-height: (height px); # 字體高度設置同塊級標簽高度一致時，豎直居中對齊
三、定義背景顏色
background-color:black; # 定義背景顏色：黑色 background: url("2.jpg"); # 背景設置的集合(范圍更廣，屬性中包含background-image) background-image: url('1.jpg'); # 設置背景的圖片樣式：url里面是圖片路徑，相對路徑：同html文件在一個目錄下， 絕對路徑：需要指定路徑 background-repeat: no-repeat; # 定義背景圖片放置類型：no-repeat(圖片不平鋪), repeat-y(垂直方向上平鋪), repeat-x(水平方向上平鋪), repeat(x軸和y軸重復平鋪，默認) background-position: right top; # 定義背景圖片位置：left top (上左)，center top(上中)，right top(上右)， center left (中左)，center center(中心)，center right(中右)，left bottom(下左)，center bottom (下中)， right bottom(下右)，通過指定具體參數(200px, 200px) background-attachment: fixed; # 固定背景圖片位置，防止滾動
四、邊框屬性
border: 2px solid red; # 定義邊框樣式:none(無邊框),dotted(點狀虛線邊框)， dashed(矩形虛線邊框)，solid(實線邊框) border-width: 2px; # 定義邊框寬度：2px border-style: solid; # 定義邊框類型：實線線框(solid) border-color: red; # 定義邊框寬度：顏色(red) border-top-style:dotted; # 定義頂層邊框類型 border-right-style:solid; border-bottom-style:dotted; border-left-style:none; border-top-color: red; # 定義頂層邊框顏色 border-right-color: red; # 定義頂層邊框顏色 border-bottom-color: red; # 定義頂層邊框顏色 border-left-color: red; # 定義頂層邊框顏色 border-radius: 50%; # 定義邊框的效果0-50%(邊框為正方形時：50%為一個圓形) padding: 10px 10px; # 設置內邊距：(上下：10px,左右：10px) padding: 10px 10px 10px 10px; # 設置內邊距：(上：10px,右：10px, 下：10px, 左：10px) 單獨設置內邊距(padding-left,padding-right,padding-top,padding-bottom) margin: 10px 10px; # 設置外邊距(上下：10px,左右：10px) margin: 10px 20px 30px 40px ; # 設置外邊距(上：10px,右：20px, 下：30px, 左：40px) 單獨設置外邊距(margin-right(右)，margin-bottom(下)，margin-left(左)，margin-top(上)) • auto(瀏覽器計算外邊距) • length(規定以具體單位計的外邊距值，比如像素、厘米等。默認值是 0px) • %(規定基於父元素的寬度的百分比的外邊距) • inherit(規定應該從父元素繼承外邊距) width: 100px # 設置邊框寬度 height: 100px # 設置邊框高度 max-width: 100px # 設置邊框的最大寬度(元素可以比指定值(width)窄，但不能比其寬) • none（默認。定義對元素的最大寬度沒有限制） • length（定義元素的最大寬度值） • %（定義基於包含它的塊級對象的百分比最大寬度） • inherit（規定應該從父元素繼承 max-width 屬性的值）
五、display常用屬性
display: none; # 設置標簽屬性：HTML文檔中元素存在，但是在瀏覽器中不顯示 display: block; # 設置標簽屬性：默認占滿整個頁面寬度，如果設置了指定寬度，則會用margin填充剩下的部分 display: inline; # 設置標簽屬性：變成行內標簽，width、height、margin-top、margin-bottom和float屬性無效 display: inline-block; # 設置標簽屬性：使元素同時具有行內元素和塊級元素的特點
六、float常用屬性
float:left # 向左浮動 float:right # 向右浮動 float:none # 默認值，不浮動 clear.none # 默認值。允許浮動元素出現在兩側 clear.left # 左側不允許浮動元素 clear.right # 右側不允許浮動元素 clear.both # 左右兩側均不允許浮動元素 clear.inherit # 規定應該從父元素繼承 clear 屬性的值
七、溢出屬性(overflow)
overflow： visible； # 默認值。內容不會被修剪，會呈現在元素框之外。 overflow： hidden； # 內容會被修剪，並且其余內容是不可見的。 overflow： scroll； # 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 overflow： auto； # 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 overflow： inherit； # 規定應該從父元素繼承 overflow 屬性的值。 • overflow（水平和垂直均設置） • overflow-x（設置水平方向，只出現x軸的滾動條） • overflow-y（設置垂直方向，只出現y軸的滾動條）
八、nth-child() 選擇器
div:nth-child(n) 選擇器匹配屬於其父元素(div)的第 N (數字、關鍵詞或公式)個子元素，不論元素的類型
九、vertical-align 屬性
vertical-align:text-top; # 設置元素的垂直對齊方式(把元素的頂端與父元素字體的頂端對齊) • baseline(默認。元素放置在父元素的基線上) • sub(垂直對齊文本的下標) • super(垂直對齊文本的上標) • top(把元素的頂端與行中最高元素的頂端對齊) • middle(把此元素放置在父元素的中部) • bottom(把元素的底端與行中最低的元素的底端對齊) • text-bottom(把元素的底端與父元素字體的底端對齊) • %(使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值) • inherit(規定應該從父元素繼承 vertical-align 屬性的值)
十、list-style 屬性
list-style # 簡寫屬性在一個聲明中設置所有的列表屬性 1. list-style-type # 設置列表項標記的類型 • none(無標記) • disc(默認。標記是實心圓) • circle(標記是空心圓) • square(標記是實心方塊) • decimal(標記是數字) 2. list-style-position # 設置在何處放置列表項標記 • inside(列表項目標記放置在文本以內，且環繞文本根據標記對齊) • outside(默認值。保持標記位於文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊） • inherit(規定應該從父元素繼承 list-style-position 屬性的值) 3. list-style-image # 使用圖像來替換列表項的標記 • url(圖像的路徑) • none(默認。無圖形被顯示) • inherit(規定應該從父元素繼承 list-style-image 屬性的值) 4. inherit # 規定應該從父元素繼承 list-style 屬性的值
十一、定位流屬性
z-index：1; # 設置元素的堆疊順序(擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面) • auto(默認。堆疊順序與父元素相等) • number(設置元素的堆疊順序) • inherit(規定應該從父元素繼承 z-index 屬性的值等)