CSS - HackMD

CSS === ###### tags:`css` # 背景 ## background ```css= 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) ![](https://i.imgur.com/MVf0edk.png) ## border ```css= 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 ```css= margin: 25px 50px 0px 100px; /* 歸0也可以用auto */ margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; ``` ## padding ```css= padding: 25px 50px 75px 100px; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; ``` ## outline ![](https://i.imgur.com/cTymydh.png) ```css= /*備註: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 ```css= height: 100px; width: 500px; /* 隨著畫面縮放物件框的最大與最小值 */ max-width: 500px; max-height: 500px; min-width: 500px; min-height: 300px; ``` # 位置 ## position ```css= position: relative; top: 10px; bottom: 10px; left: 10px; right: 10px; /* relative 從原本位置調整該物件的位置 */ /* absolute 固定此物件在畫面的位置 */ /* static 預設的狀態 top right bottom left z-index 屬性值無法影響 */ /* fixed 依照(viewport)視區調整該物件的位置，且不會離開原來所在的(gap) */ /* sticky 碰到滾動條所在的位置會按照調整的參數，保持在參數設定的位置 */ ``` # 位移和變形 ## transform ```css= /* transform */ transform: translate(50px, 100px); transform: rotate(20deg); transform: scale(0.5) translate(-100%, -100%); /* matrix 變形矩陣，用6個數字同時做到位移，旋轉，縮放 * translate 移動 * scale 縮放 * rotate 旋轉 * skew 傾斜 * 可混用 * */ ``` # 文字 ## text ```css= 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"> */ ``` # 超連結 ```css= 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 ```css= /* 清單 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 ```css= box-sizing:content-box; /* 可以使用此屬性來模擬不正確支持CSS盒子模型規範的瀏覽器 */ /* content-box border-box inherit;*/ ``` # 動畫 ## animation ``` css= 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 ``` css= /* 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 ``` css= img { float: right; /* left right none inherit */ clear: both; } ``` # 游標 ## cursor ``` css= a:hover { cursor: help; /* 非常多樣式，不一一列出 */ } ``` ### ```css= /* 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; } ``` ```css= /*額外補充*/ /*內鍵記數器範例*/ 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 */ ``` ``` html=  預處理器 sass lesscss stylus postcss 盒子模型(Box Model)           <i class="fas fa-heart"></i> -->  <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=  <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 參考資源 1. [金魚都能懂的CSS必學屬性](https://ithelp.ithome.com.tw/articles/10248942) 2. [w3school](https://www.w3schools.com/) 3. [Wibibi網頁設計教學百科](https://www.wibibi.com/) ---