學會 HTML & CSS (關於 CSS 的部份)


Posted by Nicolakacha on 2020-09-06

怎麼學習 CSS

  • 利用 XMind 畫圖

CSS selector

p {
    margin: 10px;
    font-size: 16px;
}

基礎寫法

* 可以選到所有元素
tag div, body, etc...

  • #id
  • .class

CSS 的單位

color

RGBA

  • (255, 255, 255, 0) 最後一個參數是不透明度

HEX

  • HEX 色碼是以 16 進位值來代表不同色彩模式中的顏色的方式。 16 進位色碼的格式為 #RRGGBB,其中RR是紅色,GG 是綠色,而 BB 則是藍色。這些 16 進位整數可以落在 00 到 FF 的範圍內以指定顏色的強度。

HSL / HSLA

  • H 為 hue (色相)、S 為 saturation (飽合度)、L 為 lightness (亮度)

units

px // 一個點的寬度
pt // 印表機在紙上的基本單位
% // 以父元素為主做百分比計算
em // 1em = 100px
rem // 參照底層的單位倍數

搭配使用

#header li // 選子孫
#nav > ul > .important // 選孩子
#target ~ p // 在它之後的 p 都會被選到
#target + p // 在它之後的那一個 p 都會被選到

連寫

#nav li.important // 既是 li 且也有 important 這個 class
div.bg-yellow

屬性

[target] // 用屬性選
[target="_blank"] // 用屬性選

次序

li:first-child // 第一個孩子
li:last-child // 最後一個孩子

  • nth-chlid

    先看順序再看 class

    • li:nth-child(2) //指定第二個孩子
    • li:nth-child(odd) 奇數
    • li:nth-child(even) 偶數
    • li:nth-child(3n) 把 1 帶進去
    • li:nth-child(2n+1)//選奇數的孩子

Pseudo-classes 偽類

:active // 滑鼠按下的樣式
:focus // 鍵盤聚焦的樣式
:hover // 滑鼠滑過的樣式
:link // 還沒被訪問的樣式
:visited // 被訪問過的樣式

Pseudo-element 偽元素

::before
::after

用 CSS 把 HTML 的值抓出來

<div class="price" data-id="hello yoyoyo"
.price::after {
    content: attr(data-id);
    color: red
}

屬性與排版

Display:

  • block 有自己的寬和高: div, h1, p
  • inline 內容多寬就多寬,沒有自己的寬高,調寬高和上下邊距沒有用
  • inline-block 有自己的寬跟高卻不會占據一整行 button input select
  • none 不顯示

Position:

調整的位置跟起始點的關係

  • static 靜止的,沒辦法改變位置,自然的文章流動
  • relative 相對於它原本應該出現的位置,可調整位置,或是相當容器
  • absolute 不管身邊的其他元素,找有設定過 position 的祖先當作依據,通常會搭配容器
  • fixed 一直在可視畫面 viewport 上做位置的設定,調整位置就是以可視畫面來做計算
  • sticky: 滾到設定的 top 會固定住成 fixed
  • z-index: 10 你前面還是我前面

float & clear

  • float left, right
  • clear left, right
    插入一個空的 div 做清除浮動,才不會影響排版

CSS .clearfix { clear: both; } // 清除浮動

Box model

box-sizing 概念

  • content-box // 以 content 為主調整 width
  • border-box // 指定給邊框到邊框,從 border 開始算起,width 為 border + padding + content

Border

  • border-width 寬度
  • border-style 框線
  • border-color 顏色
  • border: 2px solid black // 簡寫
  • border-radius: 弧度

Outline

  • 外框線,不會影響到原本元素的寬高

margin & padding

  • margin 是兩個物件之間的距離
  • padding 是 content 與 border 之間的距離
  • 簡寫為上右下左 ,缺的值會由對面的補起來
  • margin: 10px 20px 20px 10px
  • padding: 10px 20px 20px 10px

Background

background-color: #
rbga(255, 255, 255, 0.9) 最後一個參數是透明度
background-image: url()
height, width
backgound-repeat

  • repeat (default) 自動重複背景
  • no-repeat 不重複
  • repeat-x 往 x 軸重複
  • repeat-y 往 y 軸重複
    background-attachment
  • scroll 背景跟內容一起滾動
  • fixed 背景保持不動
    background-size
  • cover 背景整個覆蓋在網頁上
  • contain 整個背景都能顯示在網頁上
  • px / % /auto 直接下數字,沒有設定的自動會設為 auto
    background-position
  • top / bottom / left/ right/ center: left center
    只下一個值,另一個會補 center
  • px / %
    沒有設定第二個值,會自動補 50%
    縮寫
    backgound: #ffffff url("img_tree.png") no-repeat right top;

Font

color:

  • red
  • rbg(255, 255, 255)

font-size:

  • 20px
  • 120%

line-height: n

  • n 倍的字體大小當作行高
  • 1.5 em 對應到字體的大小

font-weight:

  • normal
  • 100, 200, 300, 400 // normal: 400 bold: 700
  • font-family:
  • "Times New Roman", Georgia, serif
  • 一般會設定好幾個字型,因為不是每個電腦都有該字型
  • text 相關
  • text-align: center / left / right 置中置左置右
  • text-decoration
    • underline 底線
    • none 無底線
    • overline 上標線
    • line-through 刪除線
  • letter-spacing 字距
  • word-break:
    • break-all
    • break-word 按照字來換行
  • whilte-space
    • nowrap 永遠放在同一行
  • overflow
    • visible 爆掉會直接顯示出來
    • flow 不管有沒有超過,都會給 scroll bar
    • auto 沒超過不會給 scroll bar,超過就有 scroll bar
    • hidden 爆掉直接藏起來
  • text-overflow
    • ellipsis
      要搭配 overflow: hidden 和 white-space: nowrap

list-style-type

disc
circle
square
none
漸變

  • transition: all 1s linear

cursor: pointer

移上去的時候,滑鼠會變成手指的形狀

Transform

  • scale 變大小
  • rotate 旋轉
  • translateX(50px) 移動
  • transplate(50px, 60px)

display: inline, block 跟 inline-block 的差別是什麼?

  1. block:和塊級元素一樣,有自己的寬跟高。
  2. inline:內容多寬舊多寬,沒有自己的寬高。
  3. inline-block:有自己的寬跟高卻不會占據一整行。

position: static, relative, absolute 跟 fixed 的差別是什麼?

  1. static:靜止的,沒辦法改變位置,預設的自然文章流動。
  2. relative:相對於它原本應該出現的位置,可調整位置,可用來當作容器,作為子層元素的定位參考點。
  3. absolute:不管身邊的其他元素,找 position 不是 static 的上層元素當作定位依據。
  4. fixed:在可視畫面上做位置的設定,調整位置就是以可視畫面來做計算。

CSS specificity 權重

  • !important 10,000
  • inline styles 1,000
  • ids 100
  • classes / attributes / pseudo-classes 10
  • elements and pseudo-elements 1
  • 新的蓋過舊的

Animation

如何建立動畫?

  • 在 selector 中下 animation 來決定動畫的性質,並建立對應的 @keyframes 來決定動畫的內容
    參數

animation: name duration timing-function delay iteration-count direction fill-mode;
動畫名稱、播放時間、延遲時間、速度、次數、方向、填充模式

alternate 可以來回播放
infinite 可以無限次播放

.box1 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f00;
  animation: amos 2s;
    }

@keyframes amos {
    0%{ border-radius: 50%; }
    100%{ border-radius: 0%; }
}

@media 媒體查詢

用來為不同的媒體類型、設備應用不同的樣式,做 RWD 響應式設計,範例:

/* 當我的裝置是螢幕,而且大於等於 768px 的時候 */
    @media screen and (min-width: 768px) {
      .amos {
        width: 50%;
        float: left;
      }
    }

#css #程式導師計畫







Related Posts

CSS - Flexbox實現footer置底

CSS - Flexbox實現footer置底

MTR04_1022

MTR04_1022

Command Line 筆記

Command Line 筆記


Comments