CSS教# CSS教學

重置瀏覽器預設CSS - normalize

normalize CDN

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">

CSS基本語法

寫入Html中head的style標籤

<head>
    <title>這是標題</title>
    <style>
      css寫在這裡..
    </style>
</head>

構成語法

標記名稱 {
  CSS屬性 : 屬性值;
}

標籤定義

body {
  background-color: #FFFFFF;
}

class定義

.myClass {
  width: 100px;
  height: 100px;
}

id定義

#myId {
  position: absolute;
  top: 100px;
  left: 0px;## 
}
* id > class > tag
*

設定樣式

<div class="myClass" id="myId">這個內容將會套用 myClass 與 myId樣式</div>

CSS覆寫優先加權

id > class > tag
較後面的定義 > 較前面的定義

樣式屬性說明

Box

margin - 外距
bordar - 框線
padding - 內距

#myId {
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 0px;
  padding: 5px;
}

定位 Position

static 預設值，一班來說不須特別設定

div {
  position: static;
}

relative 相對位置,relative 表現的和 static 一樣，除非你增加了一些額外的屬性,例如left、top,會以目前的為自調整位置。

div {
  position: relative;
  left: 100px;
  top: 100px;
}

absolute 絕對位置，會出抽出原來的位置，以上一層的relative為原點做位置調整

div {
  position: absolute;
  left: 100px;
  top: 100px;
}

範例

fixed 固定定位，的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。

div {
  position: fixed;
  left: 100px;
  top: 100px;
}

範例

背景圖

#bg1 {
        background-color: #ff0000;
        background: url("./images/cat1.jpg");
        background-size: cover;
        background-position: center center;
    }

background-color 底色

background 底圖

background-size 底圖配置方法

範例

background-position 位置

w3c說明

CSS教學