Try   HackMD

CSS

tags:css

背景

background






































    background-color: red; 
    /* 背景色，設定顏色的其他形式 rgba(255, 99, 71, 0.1), #ff6347  */
    background-image: url("paper.gif");  /* 背景圖 */
    
    background-repeat: no-repeat;  /* 背景重複 */
    /* 可使用的值 
     * no-repeat 不重複，圖片只顯示一次
     * repeat-x 水平重複
     * repeat-y 垂直重複
     * repeat  水平垂直皆重複
     * space  與repeat相同但有空白將圖做切分
     * round 用完整的圖形將畫面塞滿且沒有間距
    */
    
    background-position: left center; /* 背景圖片位置 */
    /* 水平方向: left,center,right 
     * 垂直方向: top,center,bottom */
     
    background-attachment: scroll; 
    /* scroll 預設值 背景圖會隨著外圍頁面滾動而移動
     * fixed 圖片位置不動 
     * local 自己的區塊內如果滾動時，背景圖也會跟著移動 */
    /*備註: background-attachment 值可疊加使用造成不同效果*/
    background-clip: border-box;  
    /* 限制背景的範圍 border-box; padding-box; content-box;*/
    background-size: 300px 100px; /* 寬，高*/
    background-size: auto; /*瀏覽器自己決定，一般為0px*/
    background-origin: content-box;
    /*定位背景圖片的原點位置 border-box; padding-box; content-box;*/
    background:lightblue url("img_tree.gif") no-repeat fixed center; 
    /*一次使用多個屬性的範例寫法，插入的語法依序是
     * background-color
     * background-image
     * background-repeat
     * background-attachment
     * background-position
     * */

DEMO

邊框(border)，邊界(margin)，間距(padding)

border










































    border: 5px solid red;
    /* border-width border-style border-color*/
    border-width: 5px 20px; /*  上下距離皆為5px, 左右距離皆為20px */
    border-width: 25px 10px 4px 35px; /* 上距離25px, 右距離10px, 下距離4px, 左距離35px */

    border-style: dotted;
    /* 各種邊框的樣式 */
    /* dotted dashed solid double groove ridge inset outset none hidden */
    border-style: dotted dashed solid double;
    /* 邊框樣式可每個方向都不同 */
    /* 可以控制4個方向個別的樣式 */
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
    
    border-color: #ff0000; /* rgb(255, 0, 0) */
    border-color: red green blue yellow; /* 上顏色紅, 右顏色綠, 下顏色藍,  左顏色黃 */
    /* 可以控制4個方向個別的顏色 */
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: red;
    border-left-color: blue;
    

    border-left: 6px solid red;
    border-bottom: 6px solid red;
    border-collapse: collapse; 
    /* separate 預設值，邊框彼此間分開 
     * collapse 邊框合併為單一邊框 
     * inherit 繼承自父層的 border-collapse 屬性值。 */

    border-radius: 5px; /*可填1-4個參數*/
    border-top-left-radius: 4px 2px;
    border-top-right-radius:    3px 4px;
    border-bottom-right-radius: 6px 2px;
    border-bottom-left-radius:  3px 4px;
    /* 可以控制4個位置個別圓弧的比例 */
    
    
    border-image: url('/media/examples/border-diamonds.png') 30;

margin








    margin: 25px 50px 0px 100px;
    /* 歸0也可以用auto */

    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;

padding







    padding: 25px 50px 75px 100px;
    
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;

outline













    /*備註:outline和margin的差異是，outline是可設定border外的線和空間，margin只有空間*/
    
    /* 最外層 outline 中間 border 內容 content */
    outline: 5px solid yellow;

    outline-style: dotted;
    /* dotted dashed solid double groove ridge inset outset none hidden */
    outline-color: red; /* #ff0000 rgb(255, 0, 0) */
    outline-width: thin;
    /* thin 1px medium 3px thick 5px */
    outline-offset: 15px;
    /* outline到border的距離  */

DEMO

長寬

width & height








    height: 100px;
    width: 500px;
    /* 隨著畫面縮放 物件框的最大與最小值 */
    max-width: 500px;
    max-height: 500px;
    min-width: 500px;
    min-height: 300px;

位置

position












    position: relative;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    /* relative 從原本位置調整該物件的位置 */
    /* absolute 固定此物件在畫面的位置 */
    /* static 預設的狀態 top right bottom left z-index 屬性值無法影響 */
    /* fixed 依照(viewport)視區調整該物件的位置，且不會離開原來所在的(gap) */
    /* sticky 碰到滾動條所在的位置會按照調整的參數，保持在參數設定的位置 */

位移和變形

transform














/* transform */
transform: translate(50px, 100px);
transform: rotate(20deg);
transform: scale(0.5) translate(-100%, -100%);

/* matrix 變形矩陣，用6個數字同時做到位移，旋轉，縮放
 * translate 移動
 * scale 縮放 
 * rotate 旋轉
 * skew 傾斜
 * 可混用
 * */

文字

text














































































































    color: green; /* 字體顏色 */
    text-align: center; 
    /* left 靠左
     * center 置中
     * right 靠右
     * justify 左右對齊本文 
     * inherit 繼承父層的text-align屬性
     */
     
    vertical-align: top; 
    /* 圖片對齊 
     * baseline
     * sub
     * super
     * text-top
     * text-bottom
     * middle 
     * bottom
     */

    direction: rtl;
    /* 文字顯示的方向
     * ltr 由左往右
     * rtl 由右往左
     * initial 設為預設狀態
     * inherit 繼承父層的direction屬性設定
     * */
     
     
    text-decoration: none; 
    /* 文字底線
     * overline 上底線
     * line-through 刪除線
     * underline 下底線 */
    text-decoration: underline overline wavy blue;
    /*  text-decoration-line  (可單個可多個)
     * text-decoration-style  (單一個)
     * text-decoration-color  (單一個) */
    text-decoration-thickness: auto;
    /*
     * 底線粗細 auto from-font 0.1em 3px 10%
     * */
    text-transform: uppercase; 
    /* uppercase 文字全大寫
     * lowercase 文字全小寫
     * capitalize 首字大寫，其他小寫
     * */
    text-indent: 50px;
    /* 首行縮排距離 */
    letter-spacing: 3px;
    /* 字元間距 -3px*/
    line-height: 0.8;
    /* 行距 */
    word-spacing: 10px;
    /* 單字距離 */
    white-space: nowrap; 
    /* 處理元素內的空白字元 
     * normal
     * nowrap
     * pre
     * pre-wrap
     * pre-line
     * */
    text-shadow: 2px 2px 5px red; 
    /* 文字陰影 
     * 位移x軸 位移y軸 模糊半徑 顏色
     * */


    font: italic small-caps bold 12px/30px Georgia, serif;
    /* font-style font-variant font-weight font-size/line-height font-family  */
    font-family: Tahoma, Verdana, sans-serif, monospace;
    /* 如果第一個文體找不到，就自動使用第二個以此類推 
     * 順序是 字體，通用字形
     * */
    font-style:normal;
    /* normal italic oblique */
    font-weight:normal;
    /* normal bold */
    font-variant: normal;
    /* normal small-caps */
    font-size: 2.5em;
    /* 10vw 1.875em 40px */
    

    display: block; 
     /* none block inline-block inline */
     /* inline 所有的內容會成一行，但當內容超過原始設定的寬則會隨內文延長 */
     /* inline-box 寬高都可以被控制，且具有float:left的效果 */
     /* box  寬高不會隨內文而改變，且無法讓任何物件出現在右邊，即使使用float也不行 */
     
     /* 參考網址: https://www.digitalocean.com/community/tutorials/css-display-inline-vs-inline-block */
     
     /* 很多參數不足備載，只列出常用的 */
     
     
    visibility: hidden; 
    /* 
       hidden 保持物件原本的位置，隱藏不顯示
       visible 
       collapse 隱藏表格行或列，且不占用任何空間
    */

    
    opacity: 0.3; /* 透明度 */


    /* 可引用google font的文字 */
    /* <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire"> */

超連結














    a:link {color: red;}
    /*未訪問過 */
    a:visited {color: green;}
    /*已訪問過 */
    a:hover {color: hotpink;}
    /*游標蓋在上面 */
    a:active {color: blue;}
    /*點擊 */
    a:hover, a:active {background-color: red;}
    /* 多種觸發方式，使用同個樣式 */
    
    a.four:link {color: #ff0000;}
    /* 超連結內有個class為four的物件當未訪問過的時候 */

列表

list-style












    /* 清單 ul li ol*/
    ul.a {
        list-style-type: circle; 
        /* 標記樣式 */
        list-style-image: url('sqpurple.gif'); 
        /* 將標記換成指定圖片 */
        list-style-position: outside; 
        /* inside 將標記顯示在內容內或外 */
        list-style: square inside url("sqpurple.gif");
        /* list-style-type list-style-position list-style-image */
    }

區塊

box-sizing




    box-sizing:content-box;
    /* 可以使用此屬性來模擬不正確支持CSS盒子模型規範的瀏覽器 */
    /* content-box border-box inherit;*/

動畫

animation














img {
 /* CSS Animations */
/* @keyframes */
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
animation-iteration-count: 2; /* infinite*/ 
animation-direction: reverse; /* alternate alternate-reverse */ 
animation-timing-function:;
/* linear ease ease-in ease-out ease-in-out */ 
animation-fill-mode:none; /* none forwards backwards both */ 
animation: example 5s linear 2s infinite alternate;
}

transition















/* transition 轉場特效，輔助animation用 */
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
/* 可以包含一個或多個轉場設定，每一項設定都以逗點分開 */
/* property name | duration | timing function | delay */
transition-property: all;
transition-duration: 2s;
transition-delay: 1s;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}

浮動

float / clear





img {
    float: right; /* left right none inherit */
    clear: both;
}

游標

cursor





a:hover {
   cursor: help;
   /* 非常多樣式，不一一列出 */
}















































































/* table 補充屬性 RWD 
 * border 
 * border-collapse 
 * border-spacing 
 * caption-side 
 * empty-cells 
 * table-layout */

resize: none;
/* 使用者可以自行調整元素的大小 */


overflow: visible;
/* 當內容太多時，元素要對應的方式 */
/* hidden 超出的部分不顯示
 * scroll 產生卷軸在元素內容中
 * auto  
 * inherit*/


/* CSS 選取器分為五個種類
Simple selectors，
Combinator selectors，
Pseudo-class selectors，
Pseudo-elements selectors，
Attribute selectors */

/* Combinator selectors */
div p {background-color: yellow;} 
/* 指定div標籤內全部p標籤的元素 */
div > p {background-color: yellow;} 
/* 指定全部p標籤父標籤為div的元素 */
div + p {background-color: yellow;} 
/* 指定第一個div標籤內全部p標籤的元素 */
div ~ p {background-color: yellow;} 
/* 指定出現過p標籤包在div標籤後裡面的p標籤 */

/* Pseudo-class selectors */

a:active {color: #0000FF;}
a.highlight:hover {color: #ff0000;}
/* highlight 是class名稱 */
div:hover {background-color: blue;}
div:hover p{background-color: blue;} /* 當div被滑鼠蓋住 作用在裡面的p標籤上 */
p:first-child {color: blue;} /*作用在第一個P標籤上*/
p i:first-child {color: blue;} /*作用在P標籤裡面第一個I標籤上*/
p:first-child i {color: blue;} /*作用在P標籤裡面所有的I標籤上*/
.third span:nth-of-type(2n+1) {background-color: lime;}
/* nth-child 讓等差數列的資料呈現的css能有規律地不同 */
q:lang(no) {quotes: "~" "~"; /*將特定文字轉換成另一個*/}
/* 根據語言屬性來執行CSS屬性*/
/* <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> */



/* Pseudo-elements selectors */

h1::before {content: url(smiley.gif);} /* 標籤前使用屬性 */
input:focus{outline: none; border: 5px #faa solid;} /*當輸入提示在上面時觸發*/
p::before {content: attr(data-foo) " ";} /* attr 可以取得屬性值 */

/* Attribute selectors */

a[target=_blank] {background-color: yellow;} /* 當超連結有這個屬性設定相同就套用 */
/* <a href="http://www.disney.com" target="_blank">disney.com</a> */
[title~="flower"] {border: 5px solid yellow;} /* 當title屬性內有flower這個詞就套用 */
[class|="top"] {background: yellow;} /*當class中的top為一個獨立的詞就會套用 ex: top top-text 但像 toptext這種不套用*/
[class$="test"] {background: yellow;} /*當class內的結尾為test就會套用*/
[class*="te"] {background: yellow;} /*當class內含有te的字就會套用*/

input[type="button"] { 
    width: 120px;
    margin-left: 35px;
    display: block;
}


































/*額外補充*/

/*內鍵記數器範例*/
body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}


/* units */

/* Multiple Columns */

/* CSS Variables */

/* CSS Flex */

/* CSS Grid */



















































<!--添加CSS的三種方式
1.外部(External) CSS
2.內部(Internal) CSS
3.單行(Inline) CSS -->

預處理器 sass lesscss stylus postcss
盒子模型(Box Model)



<!-- 補充文件 - 偽類和偽元素 -->

<!-- 偽類總表 -->
<!-- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%E4%BC%AA%E7%B1%BB%EF%BC%88Pseudo-class%EF%BC%89 -->
<!-- https://www.w3schools.com/css/css_pseudo_classes.asp -->
<!-- https://www.w3schools.com/css/css_pseudo_elements.asp -->
<!-- 偽元素中也可搭配 attr ，從原本的 Element 獲取屬性的資料 -->



<!-- 偽類能夠在特定動作時改變 DOM 的 CSS 樣式 ex: :hover -->
<!-- 偽元素則是基於原有的 DOM ，創建另一個可設定不同 CSS 的 DOM 屬性 ex: ::after ::before -->



<!-- icon -->

<!-- <script src="https://kit.fontawesome.com/a076d05399.js"></script> -->
<i class="fas fa-heart"></i> -->

<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<i class="glyphicon glyphicon-user"></i>


<!-- 常見的範例 -->
導覽列 Navigation Bars
下拉選單 Dropdowns
圖片畫廊 image gallery
icon版導覽列 Image Sprites
響應式表單 Responsive Form
Tooltip
Hoverable Buttons
Simple Pagination

<!-- 網頁範例 -->
header
Navigation Menu
Content Main Content Content

RWD響應式網頁



<!-- css RWD -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

參考資源

  1. 金魚都能懂的CSS必學屬性
  2. w3school
  3. Wibibi網頁設計教學百科
Last changed by 
 
前端共筆文件小組
名稱都說明了，描述還要寫嗎?
0
4
1443

Read more

前端根目錄

<i class="fa fa-file-text fa-2x"></i>HACKMD Tutorial 目錄標籤 網頁的基礎知識 瀏覽器的運作 Html 基本介紹與範例 解決問題精華整理

Apr 28, 2025
MSSQL-使用教學

part 1 環境設定 下載MSSQL管理工具 安裝完成後，利用安裝工具下載安裝SQL Server Data Tools 完成後重新開機即可 part 2 基礎語法

Aug 2, 2024
HTML

基礎概念 常用標籤介紹 meta 可以用來提供網頁內容的資訊給瀏覽器或是搜尋引擎 script 嵌入或引用 JavaScript 程式碼 link 額外資源連結標籤 標題

Jan 29, 2023
TypeScript

&#x57FA;&#x790E;&#x6982;&#x5FF5; &#x57FA;&#x672C;Type &#x5DE5;&#x5177;Type

Jun 15, 2022
Read more from 前端共筆文件小組
Published on HackMD