文本屬性,邊界圓角,背景屬性,精靈圖案例

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軸

四.精靈圖案例

原理:先設置顯示區域大小,再根據背景圖片的移動結合僞類進行操做來完成一些動畫效果