[筆記] CSS 基礎

特性

寫在後面的CSS會覆蓋前面的CSS

用法

Inline
1
<p style="color: red">text</p>

Internal

<html>
<head>
<title>CSS Example</title>
<style>

    p {
        color: red;
    }

    a {
        color: blue;
    }

</style>
...

External

style.css檔

p {
    color: red;
}

a {
    color: blue;
}

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合在一起寫

1
2
3

p {
    font: italic bold 12px/2 courier;
}

Margins and Padding

Margins

p {
    margin-top: 1px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 20px;
}

可以寫成這樣(四個參數 : 上、右、下、左，兩個參數 : 上下、右左)

1
2
3

p {
    margin: 1px 5px 10px 20px;
}

左右置中方法
1. 左右有margin
  1
  margin: 0 auto;
2. 左右沒有margin
  1
  text=align: center;

Box Model : F12可看到，可搭配調整

Borders

p {
    border-width: 1px;
    border-color: red;
    border-style: solid;
}

可以寫成這樣

1
2
3

p {
    border: 1px red solid;
}

Class and ID Selectors

id
1
2
3
#id{
...
}
class
1
2
3
.class{
...
}

class允許多個，但id擁有多個在javascript可能出錯，在CSS沒差

Grouping and Nesting

Grouping : id、class有相同的properties，可以合在一起使用

Grouping前

h2 {
color: red;
}

.thisOtherClass {
    color: red;
}

.yetAnotherClass {
    color: red;
}

Grouping後

1
2
3

h2, .thisOtherClass, .yetAnotherClass {
    color: red;
}

Nesting

#top h1 {
    color: #ff0;
}

#top p {
    color: red;
    font-weight: bold;
}

<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

1
2
3

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

body {
    background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
    background-size: contain
}

Unsplash : 圖床

Specificity

權重較高就不會被覆蓋

1 2	div p { color: red } //不會被影響 p { color: blue }

Display

Inline : 文字
1
li { display: inline }
Block : 區塊
1
2
3
#navigation a {
display: block;
}

Inline與Block差異 :

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時，圖片大小溢出容器外

1
2
3

.clearfix {
  overflow: auto;
}

百分比寬度

百分比是一種相對於目前容器元素寬度的單位

媒體查詢（media queries）

一種讓網站針對不同的瀏覽器和上網裝置「響應」不同顯示效果的策略

@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;
  }
}