# [筆記] CSS 基礎
### 特性
寫在後面的CSS會覆蓋前面的CSS
### 用法
1. Inline
```HTML=
<p style="color: red">text</p>
```
2. Internal
```HTML=
<html>
<head>
<title>CSS Example</title>
<style>
p {
color: red;
}
a {
color: blue;
}
</style>
...
```
3. External
* style.css檔
```css=
p {
color: red;
}
a {
color: blue;
}
```
* HTML檔
```HTML=
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="style.css">
...
```
### Selectors, Properties, and Values
* 單位
* px
* em : 相對單位
* pt
* % : 螢幕寬度的 X %
### Colors
* red
* rgb(255,0,0)
* rgb(100%,0%,0%)
* #ff0000
* #f00
**可以用的Properties** : color、background-color
**好用工具** : 吸色工具
### Text
* font-family : 字型
* font-size : 字體大小
* font-weight : 文字粗細
* font-style : 斜體(italic )
* text-decoration
* text-decoration: underline
* text-decoration: overline
* text-decoration: line-through
* text-transform
* letter-spacing : 字母間隔
* word-spacing : 字間隔
* text-align : 靠左、靠右、置中
* text-indent : 縮排
**font-style, font-weight, font-size, line-height, font-family合在一起寫**
```css=
p {
font: italic bold 12px/2 courier;
}
```
### Margins and Padding
* Margins
```css=
p {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 20px;
}
```
可以寫成這樣(四個參數 : 上、右、下、左，兩個參數 : 上下、右左)
```css=
p {
margin: 1px 5px 10px 20px;
}
```
* 左右置中方法
1. 左右有margin
```css=
margin: 0 auto;
```
2. 左右沒有margin
```css=
text=align: center;
```
* Box Model : F12可看到，可搭配調整
### Borders
```css=
p {
border-width: 1px;
border-color: red;
border-style: solid;
}
```
可以寫成這樣
```css=
p {
border: 1px red solid;
}
```
### Class and ID Selectors
1. id
```css=
#id{
...
}
```
2. class
```css=
.class{
...
}
```
**class允許多個，但id擁有多個在javascript可能出錯，在CSS沒差**
### Grouping and Nesting
1. Grouping : id、class有相同的properties，可以合在一起使用
* Grouping前
```css=
h2 {
color: red;
}
.thisOtherClass {
color: red;
}
.yetAnotherClass {
color: red;
}
```
* Grouping後
```css=
h2, .thisOtherClass, .yetAnotherClass {
color: red;
}
```
2. Nesting
```css=
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
```
```HTML=
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
```
### Pseudo Classes
```css=
selector:pseudo_class{
property: value;
}
```
* link : 未連結
* visited : 已連結過
* active : 點擊連結
* hover : 滑鼠指到
* focus : 點擊過後不變
* first-child : 第一個selector
* last-child : 最後一個selector
* nth-child(2n+1) : 第2n+1個selector
### Background Images
```css=
body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
background-size: contain
}
```
**[Unsplash](https://unsplash.com/)** : 圖床
### Specificity
權重較高就不會被覆蓋
```css=
div p { color: red } //不會被影響
p { color: blue }
```
### Display
1. Inline : 文字
```css=
li { display: inline }
```
2. Block : 區塊
```css=
#navigation a {
display: block;
}
```
**Inline與Block差異 :**
3. None : 隱藏
### CSS版面配置
**margin: auto;**
水平置中，避免該元素從左到右撐滿容器
**max-width: 600px;**
可以完美處理瀏覽器視窗小於元素寬度的情形
**box-sizing: border-box;**
因為元素的邊框（margin）和內距（padding）會撐開元素，導致實際顯示的元素超出你的設定，這個可以解決這問題
**關於 position 屬性**
* static : 預設值
* relative : 可以設定top、right、bottom、left，來移動元素相對位置
* fixed : 可以設定top、right、bottom、left，來固定元素在畫面中的絕對位置
* absolute : 可以設定top、right、bottom、left，來固定元素在上層元素中的絕對位置
**關於 float 屬性**
可用於實現文繞圖，也能實現上述position的效果
**關於 clear 屬性**
解決使用float時的重疊現象
**clearfix 密技**
解決使用float時，圖片大小溢出容器外
```css=
.clearfix {
overflow: auto;
}
```
**百分比寬度**
百分比是一種相對於目前容器元素寬度的單位
**媒體查詢（media queries）**
一種讓網站針對不同的瀏覽器和上網裝置「響應」不同顯示效果的策略
```css=
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
```
###### tags: `筆記` `程式語言` `CSS`
Sign in with Wallet
Connect another wallet