【CSS基礎篇】——常用屬性

文字的設置

顏色

  div{
   color: #FF0000;
   color: red;
   color: rgb(255,0,0);
   color: rgba(255,0,0,0.5);
   }

設置顏色有以上的一些方法。
第一個是在輸入color後，編譯軟件會自己跳出顏色，我們可以直接按動上下鍵進行選擇，選擇到自己喜歡的顏色按下回車即可（即十六進制值）。
第二個就是懶得選顏色，自己手動打的咯（即顏色名稱）。
重點講一下第三個和第四個

rgb顏色

首先所有瀏覽器都支持rgb顏色
規定：rgb(red,green,blue)
每個參數定義顏色的強度，可以是介於2-255之間的整數也可以是百分比。

rgba顏色

rgba顏色得到以下瀏覽器的支持：IE9+，Firefox3+，chrome，safari，opera10+
rbga顏色是rgb顏色的一個擴展，增加了一個alpha通道，它可以用來設置不透明度。
規定：rgba（red，green，blue，alpha）
alpha參數是介於0.0（完全透明）到1.0（完全不透明）

字體

/* 字體大小，谷歌默認16像素，最小顯示12像素 */
   font-size: 20px;
   font-size: 1em;(倍數)
   /* 字體 */
   font-family: '微軟雅黑，宋體';
   /* 字體樣式，斜體 */
   font-style: italic;
   /* 字體粗細 */
   font-weight: 900;

在font-family設置字體樣式的時候，如果前一種樣式不存在，纔會執行後面的字體樣式。

文本的設置

h2{
   /* 文本水平對齊 */
   text-align: center;
   /* 下劃線 */
   text-decoration: underline;
   /* 刪除線 */
   text-decoration: line-through;
   /* 頂線 */
   text-decoration: overline;
  }

頂線

刪除線

下劃線

取消刪除線

s{
   /* 取消s標籤的刪除線 */
   text-decoration: none;
  }

就是將s標籤帶有的刪除線去掉。（其實不用s標籤就好咯，用了s標籤，又取消刪除線，哈哈哈，不吐槽，做個沒有感情的寫博機器）

縮進

p{
   /* 文本首行縮進 */
   text-indent: 32px;
   text-indent: 2em;
  }

說明一下，在文本中敲空格是無法讓他在頁面中顯示出縮進的樣子。

大小寫轉換

h3{
   /* 文本轉換 */
   /*全部大寫*/
   text-transform: uppercase;
   /*全部都小寫*/
   text-transform: lowercase;
   /* 只有首字母大寫 */
   text-transform: capitalize;   
  }

全部大寫

全部小寫

首字母大寫

邊框

.box{
   width: 200px;
   height: 200px;
   border-width: 1px;
   border-style: solid;
   border-color: red;
   border: 1px solid;
   border-left: 5px dashed;  
  }

solid ：實線
dashed：虛線

博主的彩蛋

.create{
   width: 0px;
   height: 0px;
   border-left: 10px solid rgba(0,0,0,0);
   border-top: 10px solid #2AC845;
   border-right: 10px solid transparent;   
  }

運行圖片如下

（這篇博客中提到了一些標籤，博主在第一篇博客中做了詳細的介紹，可以參照。）