---
# System prepended metadata

title: '[CSS] 常用語法'
tags: [CSS]

---

# [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. 權重表

![](https://i.imgur.com/ZLdj2aa.png)


---

### 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;
}
```
![](https://i.imgur.com/9kJOcTd.png)



---

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


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

```


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


