07.31自我總結 一.文本屬性 大小:font size. 顏色:color 字重:font weight 可選屬性 | | |`bolder 細`| |`粗 更粗` 100 900之間整百的數字 字族:font family 可以選擇多個用 隔開,匹配原則從左往右哪個能用就用哪個 字體樣式: ...
07.31自我總結
一.文本屬性
大小:font-size.
註意點最小是12ox你選擇1px也是12,我們要更加小就ui自己設計字體了顏色:color
字重:font-weight
可選屬性
lighter|normal|bold|bolder分別為細|正常|粗|更粗- 100-900之間整百的數字
字族:font-family
可以選擇多個用
,隔開,匹配原則從左往右哪個能用就用哪個字體樣式:font-style
文本劃線:text-decoration
可選屬性
underline|line-through|overline|none分別是下劃線|刪除線|上劃線|沒有劃線,預設是沒有劃線
文本水平位置:text-align
可選屬性
left|center|right
行高:line-height
- 首行縮進:text-indent
字間距:letter-spacing
整體設置font: bold 10px/300px '黑體', 'Arial'; 分別是字重,字體大小,行高,字族,順序可以交換不影響
二.邊界圓角
border-radius
特點
- 最多可以填寫8個參數
- 可填寫的參數
固定值|百分百 - 左上為第一個角，順時針編號
- 不足找對角
- 填寫一個值所有邊都是這個值
- 填寫八個參數的時候
橫縱分離,先橫後縱橫縱直接用/分開
三.背景屬性
- 背景圖片設置
/*顯示比屏幕大的圖片：縮放尺寸*/
background-image: url("img/kj.gif");
/*儘量只設置寬，高等比縮放，不失真*/
background-size: 300px 300px;
/*平鋪: repeat-x repeat-y repeat no-repeat*/
background-repeat: no-repeat;
/*位置*/
/*1.只設置x軸，y軸預設center*/
/*2.x軸：left center right 具體像素 百分百*/
/*2.y軸：top center bottom 具體像素 百分百*/
background-position: center center;先x軸再y軸四.精靈圖案例
原理:先設置顯示區域大小,再根據背景圖片的移動結合偽類進行操作來完成一些動畫效果
