# CSS basic introduction

---
tags: HTML CSS relate
---

###### tags: `HTML, CSS`

課程網頁:
https://www.freecodecamp.org/learn

Cascading Style sheets(CSS) tell the browser how to display the text and other content that you write in HTML.

Be careful your capitalization it may cause bugs !
大小寫很重要要看清楚不然很容易出錯

you can use CSS to design your browsers using:

* color
* fonts
* positioning
* spacing
* sizing
* decorations
* transitions

There are three main ways to apply CSS styling.

* inline style in a HTML element. 直接寫在HTML裡面
* use a style tag in a HTML document. 寫在HEAD裡面然後影響全部的標籤
* use a style tag in a external style sheet.額外用一個CSS標籤去影響所有HTML

Even though the first two options have their use cases, **most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code.**

第三總方法比較多人用，因為可讀性比較好以及可重用性佳。

----

# CSS Basic : Change the Color of Text

Here's how you would set your h2 element's text color to blue(use inline style):

`<h2 style="color: blue;">CatPhotoApp</h2>`

Note that it is a good practice to end inline style declarations with a **;** .
像這個就是標準的inline 屬性，直接寫在HTML裡面。

---

# CSS Basic: Use CSS Selectors to Style Elements

Inside that style block, you can create a **CSS selector for all h2 elements**.

For example, if you wanted all h2 elements to be red, you would add a style rule that looks like this:

<style>
  h2 {
    color: red;
  }
</style>

這個部分就是寫在HEAD裡面可以影響整份HTML的h2的內容

---

# CSS Basic: Use a CSS Class to Style an Element

You can see that we've created a CSS class called blue-text within the `<style> `tag. You can apply a class to an HTML element like this:

<style>
  .blue-text {
    color: blue;
  }
</style>

<h2 class="blue-text">CatPhotoApp</h2>

用這樣的方式可以創造一個CSS到處都可以用只要附上` blue-text `就可以使用這個屬性。

---

# CSS Basic: Style Multiple Elements with a CSS Class

Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your red-text class to the first p element.

只要在上方HEAD的部分寫好條件就可以很檢的把他們套進去其他元素中:

<style>
  .red-text {
    color: red;
  }
</style>

像這樣丟進去就好
<h2 class="red-text">CatPhotoApp</h2>

----

# CSS Basic: Change the Font Size of an Element

Font size is controlled by the `font-size` CSS property, like this:

使用這個屬性修改文字大小

h1 {
  font-size: 30px;
}

---

# CSS Basic: Set the Font Family of an Element

You can set which font an element should use, by using the font-family property.

你可以使用這個屬性決定要使用哪一種字型。

假設你要使用sans- serif這個字體程式碼如下:

h2 {
  font-family: sans-serif;
}

-----

# CSS Basic: Import a Google Font

Google fonts內含大量的字型可以使用: https://fonts.google.com/

要引用之前要先加入連結字型才能進去HTML裡面喔!

`<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">`

Google Fonts is a free library of web fonts that you can use in your CSS by referencing the font's URL.

然後CSS的寫法會像是這樣:

`font-family: FAMILY_NAME, GENERIC_NAME;`

-----

# CSS Basic: Specify How Fonts Should Degrade(降級)

當第一個字型不管用的時候，可以降級去找你安排的下一個

For example, if you wanted an element to use the Helvetica font, but degrade to the sans-serif font when Helvetica isn't available, you will specify it as follows:

p {
  font-family: Helvetica, sans-serif;
}

----

# CSS Basic: Size Your Images

調節寬度 單位是px 並且使用 `class= larger-image`

**這邊記得使用class的時候再CSS那邊的寫法會是(".")**

CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.

<style>
  .larger-image {
    width: 500px;
  }
</style>

----

# CSS Basis: Add Borders Around Your Elements

CSS borders have properties like style, color and width.

CSS的邊框也會也style, color and width這些屬性。然後一樣要使用在class裡面:

`class= "smaller-image thick-green-border"`

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>

-----

# CSS Basic: Add Rounded Corners with border-radius

加入圓潤的邊框，單位也是使用px

Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.

通常使用在boder裡面:

.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 10px;
  }

----

# CSS Basic: Make Circular Images with a border-radius(待查證)

boder-radius 同時也可以使用percentage來做表示。

In addition to pixels, you can also specify the border-radius using a **percentage**.

.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

邊框就變成圓球狀了，似乎最多就是50%我試過再往上調整好像也沒有甚麼變化。(待查證)


---

# CSS Basic: Give a Background Color to a div Element

一樣放入style中以及要加入的HTML中並且使用`class="green-background"`就可得到灰色的背景顏色瞜

For example, if you wanted an element's background color to be silver, you'd put this within your style element:

.green-background {
  background-color: silver;
}


----

# CSS Basic: Set the id of an Element

除了class之外，每個HTML元素可以擁有一個 id 屬性

**id屬性的的CSS前面放入的符號都會是(“#”)**

an ID selector is a name preceded by a hash character (“#”).

重點是可以之後會加入JAVASCRIPT，然後只能只用一個不然就出錯給你看

There are several benefits to using id attributes: You can use an id to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript

它通常長這樣:

`<h2 id="cat-photo-app">`

---

# CSS Basic: Use an id Attribute to Style an Element

**An id is not reusable and should only be applied to one element.**

id屬性是不能再使用的以及只能作用在一個元素裡面。

An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.

id 比 class 的重要性還高所以當衝突發生的時候，程序會選擇先使用id。

簡單的使用範例如下:

}
  #cat-photo-form {
  background-color: green;
}

<form id="cat-photo-form">

----

# CSS Basic: Adjust the Padding of an Element

**All HTML elements are essentially little rectangles.**

三個重要的屬性使用在Padding裡面padding, border, and margin.

Three important properties control the space that surrounds each HTML element: padding, border, and margin.

padding控制了元素內容到邊框之間的空白大小

An element's padding controls the amount of space between the element's content and its border.

.blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
  }

---

# CSS Basic: Adjust the Margin of an Element

margin 控制了各個元素周圍的空白大小

margin controls the amount of space between an element's border and surrounding elements.

}

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
    margin: 20px;
  }

---

# CSS Basic: Add a Negative Margin to an Element

如果margin是負值元素的內容就會變大

If you set an element's margin to a negative value, the element will grow larger.

}

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
    margin: -15px;
  }

---

# CSS Basic: Add Different Padding to Each Side of an Element

padding可以在四邊去處理

.blue-box {
    background-color: blue;
    color: #fff;
    padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
  
}    
  

---

# CSS Basic: Use Clockwise Notation to Specify the Padding of an Element

Clockwise 順時鐘

Notation 符號

上右下左 是 padding這樣寫的順序就不用打一堆top bottom了喔

padding: 10px 20px 10px 20px;

.blue-box {
    background-color: blue;
    color: #fff;
    padding:40px 20px 20ox 40px;
  }

---

# CSS Basic: Use Clockwise Notation to Specify the Margin of an Element

這次換使用margin來用順時間符號標表示了

上右下左

margin: 10px 20px 10px 20px;

  .blue-box {
    background-color: blue;
    color: #fff;
    margin: 40px 20px 20px 40px;
  }

---

# CSS Basic: Use Attribute Selectors to Style Elements

這個功能可以讓框框變圓

The below code changes the margins of all elements with the attribute type and a corresponding value of radio:

}
  [type='radio'] {
  margin: 10px 0px 15px 0px;
}

---

# CSS Basic: Understand Absolute versus Relative Units

Pixels are a type of length unit

Px是一種長度單位

下面是其他兩種:
1.absolute就是實際上有的單位 英寸以及毫米

Absolute units tie to physical units of length.For example, in and mm

2.relative units, are relative to another length value.
such as em or rem

.red-box {
    background-color: red;
    margin: 20px 40px 20px 40px;
    padding: 1.5em
  }

---

# CSS Basic: Style the HTML Body Element

我們可以證實body這個元素的存在藉著用下面的程式碼給它顏色以得證明。
We can prove that the body element exists here by giving it a background-color of black.

body {
  background-color: black;
}

---

CSS Basic: Inherit Styles from the Body Element

你可以向裝飾其他HTML一樣裝飾body，然後你在body做的更動會影響所有的HTML內容。

Remember, you can style your body element just like any other HTML element, and all your other elements will inherit your body element's styles.

<style>
  body {
    background-color: black;
    color: green;
    font-family: monospace 
  }
  
</style>

---

# CSS Basic: Prioritize One Style Over Another

以下這串程式碼來看，最終結果跑出來是粉紅色的，表示pink-text蓋過了style裡面的color

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text{
    color: pink;
  }
</style>

<h1 class="pink-text">Hello World!</h1>

---

# Basic CSS Basic: Override Styles in Subsequent CSS

class有兩個以上的屬性的時候，可以這樣把引號放在外面寫，然後這邊要去比較哪個屬性會勝出覆蓋整個HTML，結果是放在style下方的會勝出。

class="class1 class2"

Note: It doesn't matter which order the classes are listed in the HTML element這邊要特別注意""引號裡面的順序不重要，重點是style裡面的順序!!

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
</style>
<h1 class="blue-text pink-text">Hello World!</h1>

---

# CSS Basic: Override Class Declarations by Styling ID Attributes

the browser will use whichever CSS declaration came last!

不過這邊再度強調 id 可以再蓋過其他的全部，不管其他class的順序。

向下面的程式碼最後勝出的還是id

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text {
    color: pink;
     #orange-text {
  color: orange;
  }
  }
  .blue-text {
    color: blue;
  
}
  #orange-text {
  color: orange;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

----

# CSS Basic: Override Class Declarations with Inline Styles

inline屬性可以覆蓋過 id 跟 class，比他們更高了一階層。

`<h1 style="color: green;">`

假設這樣子去跑出來的結果會是白色勝出也就是inline元素勝出。

<h1 style="color: white;" id="orange-text" class="pink-text blue-text">Hello World!</h1>

---

# CSS Basic: Override All Other Styles by using Important

when you absolutely need to be sure that an element has specific CSS, you can use !important

放上!important就可以讓那個CSS勝出~

.pink-text {
    color: pink!important;
  }

---

# CSS Basic: Use Hex Code for Specific Colors

hexadecimal(十六進制) code, or hex code for short.

0123456789abcdef (共16位)

In CSS, we can use 6 hexadecimal digits to represent colors.

body {
  color: #000000;
}

-----

# CSS Basic: Use Hex Code to Mix Colors

The digit 0 is the lowest number in hex code, and represents a complete absence of color.

The digit F is the highest number in hex code, and represents the maximum possible brightness.

----

# CSS Basic : Use Abbreviated Hex Code

運用縮寫

For example, red's hex code #FF0000 can be shortened to #F00.

This reduces the total number of possible colors to around 4,000. But browsers will interpret #FF0000 and #F00 as exactly the same color.

這樣縮寫會減少大約四千總顏色種類，不過電腦還是可以分辨#FF0000 and #F00是一樣的顏色。

----

# CSS Basic: Use RGB values to Color Elements

`rgb(0, 0, 0)`

# The RGB value for black looks like this:

`rgb(0, 0, 0)`

---

# CSS Basic: Use RGB to Mix Colors
#

`rgb(0, 0, 0)`

---

# CSS Basic: Use CSS Variables to change several elements at once

CSS變數是一個很強大的方法只要改變一個value就可以更改許多的CSS。

CSS Variables are a powerful way to change many CSS style properties at once by changing only one value.

修改前跟修改 (修改顏色)後:



.penguin {

    /* Only change code below this line */
    --penguin-skin: black;
    --penguin-belly: gray;
    --penguin-beak: yellow;
    /* Only change code above this line */

    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
  }

---

# Basic CSS: Create a custom CSS Variable

創造一個CSS變數只要加上兩個-就可以摟並且後面加上value

To create a CSS variable, you just need to give it a name with two hyphens in front of it and assign it a value like this:

`--penguin-skin: gray;`

一樣放在style裡面直接放進去就好

.penguin {
/* Only change code below this line */

/* Only change code above this line */
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
--penguin-skin: gray;
}

---

# CSS Basic: Use a custom CSS Variable

當你做好變數的時候，你可以把他們安排進去不同的屬性裡面只要借用它的名子就好

After you create your variable, you can assign its value to other CSS properties by referencing the name you gave it.

`background: var(--penguin-skin);`

----
# CSS Basic: Attach a Fallback value to a CSS Variable

給條退路走，當browser抓不到顏色的時候有退路黑色可以選

background: var(--penguin-skin, black);

----

# CSS Basic: Improve Compatibility with Browser Fallbacks

從下方程式碼可以理解最簡單的Fallback就是再創一個的當作保障並且放在要保障的元素位置的前面。

This means that if you do want to provide a browser fallback, it's as easy as providing another more widely supported value immediately before your declaration.

 }
  .red-box {
    background: red;
    background: var(--red-color);
    height: 200px;
    width:200px;
  }

---

# CSS Basic CS: Inherit CSS Variables

把要覆蓋全部頁面的變數放在root裡面就可以覆蓋全部頁面的HTML瞜

:root {
    /* Only change code below this line */
  --penguin-belly: pink;
    /* Only change code above this line */
  }

---

# CSS Basic: Change a variable for a specific area

覆蓋全部頁面的變數放在root裡面就可以覆蓋全部頁面的HTML

但是當你要覆蓋特定的HTML tag時，就在要改變的HTML元素那再把變數寫進去一次改寫就可以搂!

You can then over-write these variables by setting them again within a specific element.

<style>
  :root {
    --penguin-skin: gray;
    --penguin-belly: pink;
    --penguin-beak: orange;
  }

  body {
    background: var(--penguin-belly, #c6faf1);
  }

  .penguin {
    **/* Only change code below this line */
    --penguin-belly: white;
    /* Only change code above this line */**
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
  }

---

# CSS Basic: Use a media query to change a variable

CSS Variables can simplify the way you use media queries.

當螢幕變小的時候，可以改變畫面的呈現，這是media query的功能CSS variables可以幫助它簡化並且更好的達到目標。

在@meadia的部分加入變數可以直接修改整個下方企鵝的圖片讓px值在縮小到低於一定程度就時候就改變顏色範例如下:

<style>
  :root {
    --penguin-size: 300px;
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
  }

  @media (max-width: 350px) {
    :root {
      /* Only change code below this line */
--penguin-size:200px;
--penguin-skin: black;
      /* Only change code above this line */
    }
  }



完成課程~