# [CSS] 常用語法

###### tags: `CSS`

### 1. 文字顏色

* RGB色系表: https://www.w3schools.com/colors/colors_rgb.asp

color: blue; 
color: #ff0000; 
color:rgba(255,255,0,0.5) 

---

### 2. text 相關語法

* 字體 font-family:cursive;
* 文字大小 font-size: 10px;
* 文字置中 text-align: center;
* 文首縮排 text-indent:20px;
* 底線 text-decoration: underline;
* 行距 line-height: 2;

---

### 3. 外框線條

border:10px solid #000

---

### 4. 區塊、行內元素

* 區塊元素：display:block (換行呈現)
* 行內元素：display:inline (並排呈現)

> ul清單標籤原設定為區塊元素，display:inline即可變更為並排
> 如果要變更區塊元素，要先class命名才可進行更改
> span行內元素，div區塊元素
>

---

### 5. 權重表


---

### 6. hover觸發效果

游標滑動至指定屬性，即觸發動作

.menu a:hover{
    text-decoration: underline;
}

---

### 7. 背景圖片語法（含取代文字）

* 導入圖片檔案

body {
　background-image:url( ' 要顯示的圖片網址 ' );
　background-repeat:no-repeat;
　background-color: 背景顏色;
}

x=水平重複 background-repeat: repeat-x;
y=垂直重複 background-repeat: repeat-y;

* 圖片取代文字

瀏覽器爬蟲網頁的過程會以搜尋文字為主，採用此形式協助網站做seo優化

參考連結：https://ithelp.ithome.com.tw/articles/10193599

.logo h2{
    background-image: url(/photo/logoword.jpg);
    width: 200px;
    height: 300px;
    display:block;
    overflow: hidden;
    text-indent:101%;
    white-space:nowrap;   
}

---

### 8. 陰影效果

box-shadow: 2px 3px 10px lightgray;

---

### 9. float多欄式版型

參考資料：https://www.wibibi.com/info.php?tid=167

一般網頁製作使用warp設定固定寬度，以margin:0 auto網頁置中

.wrap{
    width: 1000px;
    margin: 0 auto;
}

* clear語法
如果後面的元素不使用float效果，便可利用clear清除

.clearfix{
   clear.both;
}


---

### 10. 文字font便捷寫法

.info_address{
  font: 14px/19px Roboto;
}

font-size: 14px;
line-height: 19px;
font-family: Roboto