CSS常用屬性(筆記)
阿新 • • 發佈:2019-01-05
#Note { color: green; /*設定字型顏色*/ background-color: red; /*設定背景顏色*/ font-size: 50px; /*設定字型大小*/ font-style: oblique; /*使文字傾斜*/ font-weight: bold; /*字型加粗*/ font-family: '幼圓'; /*設定字型樣式*/ font: italic bold 16px/20px arial; /*font的綜合使用,分別代表設定 斜體/加粗/大小/行高/樣式*/ letter-spacing: 10px; /*字元間距,中文一個字當成一個英文字元*/ word-spacing: 20px; /* 單詞之間的間距,中文中間有空格的情況下會當作一個單詞來處理 */ white-space: pre/nowrap; /*預格式化,按文件的書寫格式保留空格,空行原樣顯示/不換行顯示*/ line-height:19px; /*設定行高*/ text-align: center; /*設定文字水平居中對齊*/ text-indent: 2em; /*設定首行縮排,只能用於塊級元素*/ text-decoration:none/underline/overline/line-through; /* 去掉下劃線/下劃線/上劃線/刪除線 */ border-style: dashed/double/dotted/solid; /* 設定邊框樣式 單虛線/雙實線/點狀線/單實線 */ border-width: 10px; /* 邊框寬度 */ border-color: purple; /* 邊框顏色 */ border-top-color: green; /* 設定邊框頭部樣式,物以類聚以此類推 top/bottom/left/right */ border: 1px double green; /* 統一設定,邊框的寬度,邊框的樣式,邊框的顏色 */ border-collapse: collapse; /*讓邊框摺疊*/ outline-style: none; /* 去掉輪廓 連結有虛線 和 文字框有藍色邊框*/ padding: 20px; /* 將內邊距設定為上下左右均為20px 以此類推 top/bottom/left/right */ margin: 100px; /* 上下左右分別是100px 以此類推 top/bottom/left/right*/ margin: 0 auto; /* 外邊距讓盒子居中,水平方向 上下邊距為0 左右自動計算居中*/ margin: 0; padding: 0; /* 設定內外邊距為0 預設網站起初都會設定這個選項*/ float: right/left/none; /* 向右/向左/不/浮動 */ overflow: hidden; /* 把溢位的隱藏掉 使父元素具有包裹性 */ overflow: visible/hidden/auto/scroll; /*內容不會被修剪/溢位部分內容會被修剪/在需要時產生滾動條/終有滾動條*/ clear: left/right/both; /* 清除左側/右側/兩側/浮動 */ position: static/relative/absolute/fixed; /*自動定位/相對定位/絕對定位/固定定位*/ z-index: 100; /* 層次劃分 */ list-style: none; /* 去掉列表預設樣式 */ display: none; /*隱藏層*/ display: block; /* 顯示層 */ display: inline-block /* 設定為塊級元素 */ display:none/inline/block/inline-block; /* display值的解釋: none:此元素不被顯示,在文件中被移除. block:此元素按塊級元素顯示:前後帶換行符,自己站=佔一行. 內聯元素 ==> 塊元素 inline:此元素按內聯元素顯示:一個挨著一個. 塊元素 ==> 內聯元素 inline-block:按行內標籤進行排版,但是可以設定寬高,而且高度可以影響行高 */ background: #ccc url(../image/2.png) no-repeat scroll 0 -1709px; /* backkgorund合寫的順序:背景顏色/背景圖地址/平鋪設定/背景圖滾動/背景圖位置 */ background-color: #cda/transparent; /* 設定背景色/透明色 */ background-image: url(../img/a.png); /* 設定背景圖片,優先順序要高於背景色 */ background-repeat: repeat-x/repeat-y/repeat/no-repeat/inherit; /*設定背景圖片是否重複/橫向重複/縱向重複/橫向縱向都重複/不重複/繼承父類的方式*/ background-position: left/right/top/bottom/center; /*設定背景影象的開始位置*/ background-position: left bottom; /*設定圖片左邊和底部對齊*/ background-position: 60% 50%; /*以xy軸的起始點為0%,來確定位置*/ background-position: -500px 0; /*以xy軸座標,以圖片的左上角為點,-500px 0 就是左上角的座標*/ background-attachment: scroll/fixed; /*設定背景圖是否固定 fixed背景圖固定/scroll隨著文字內容滾動 預設值*/ vertical-align: middle; /* 設定行內塊對齊方式(使用display-inline-block進行對齊小圖示時使用) */ border-radius: 50%/100px; /*邊框圓角設定 兩種表現形式:百分比和畫素*/ }