Try   HackMD
tags: CSS

CSS 基礎樣式

Font 樣式設定

基礎

.font-style{ color: rgb(133, 84, 20); /* 設定字體家族,第一個找到就使用它,沒有就使用下一個。 */ font-family:fantasy , '微軟正黑體' , Verdand; /* 設定字體大小,px,em,rem,% */ font-size: 20px; /* 設定斜體 */ font-style: italic; /* 設定粗體 字體變粗或變細,bold、bolder、100~900*/ font-weight: bold ; /* 設定字體變成大寫,但第一個字較大。 */ font-variant: small-caps; }

自訂字型

/* 自定義字體 */ @font-face{ font-family: 'my font'; src:url(字型/Adine\ Kirnberg.ttf), url(字型/waltograph42.otf), url(字型/Antro_Vectra_Bolder.otf), url(字型/Ace\ Records.ttf) } .font-set{ font-family: 'my font'; font-size: 50px; }

google字形(https://fonts.google.com/?category=Handwriting)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  1. 加入字形(+select this style)
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
  2. 複製第2+3個link到head。字體名稱為下面那個。

Text 樣式設定

基礎

.text-style{ /* 設定文字或inline 或 inline-block的位置,left、right、conter */ text-align: left; /* none、underline,overline;line-though */ text-decoration: underline; /* 縮排 */ text-indent:32px; /* 字體大小寫 cpaitalize,uppercase。lowercase */ text-transform: capitalize; /* 字母字距 */ letter-spacing: 10px; /* 單字字句 (中文沒什麼用)*/ word-spacing: 10px; /* 行高 ,只有數值時為倍數。可加單位 px, % */ line-height: 32px ; /* 文字陰影 */ /* 水平位置 、垂直位置 、陰影模糊半徑 、顏色 */ /* 水平正=>右,負=>左。垂直正=>下,負=>上 */ text-shadow: 10px 5px 5px rgba(0,0,0,0.5); }

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

多重文字陰影

.mulite-text-shadow{ font-size: 4rem; text-shadow: 1px 1px 1px rgb(212, 120, 120), 2px 2px 1px rgba(192, 206,73,1), 3px 3px 1px rgba(240, 73, 73,1), 4px 4px 1px rgba(49, 47, 156,1); }

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


文字換行、截斷與空白處理

word-wrap

.word-wrap{ /* break-word過長的單字會自動換到下一行 */ word-wrap: break-word; }

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

break-break

break-all
.break-all{ /* 允許單字字母中換行,就是不一定要完整單字 */ word-break: break-all; }

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

keep-all
.keep-all{ /* 在半形空格或連字符號處換行 */ word-break: keep-all; }

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


white-space

對空白的處理

normal

預設,忽略空白,文字正常排列,遇到最右邊換行

.normal{ white-space: normal; }

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

pre

pre 標籤,保留空白顯示於畫面

.pre{ white-space: pre; }

nowrap

強制不換行,會強制超出區塊,除非遇到br

.nowrap{ white-space: nowrap; }

pre-wrap

保留空白顯示於畫面,且會換行。

.pre-wrap{ white-space: pre-wrap; }

連結顏色變化

a:link{ color:rgb(165, 228, 204); text-decoration: none; } /* 拜訪過後的顏色 */ a:visited{ color: rgb(13, 14, 14); } /* 滑鼠移入的顏色 */ a:hover{ color: brown; text-decoration: underline; } /* 點擊時的顏色 */ a:active{ color: chartreuse; }

rem 與 em 的差異

rem

  • 為 root 預設 font-size 的倍數,預設為 16 px 。
<div style="font-size: 1rem;"> font 1erm=16px 16*1 <div style="font-size: 2rem;"> font 2erm=32px 16*2 <div style="font-size: 3rem;">font 3erm=48px 16*3 </div> </div> </div>

em

  • em 可能為父層或祖先層 font-size 的倍數,父層有設定文字尺寸就以它為基準。若沒有會繼續往外面找。若都沒有就會以 root 預設 font-size為基準,也就是16px
<div style="font-size: 1em;"> font 1em=16px <div style="font-size: 2em;"> font 2em=32px 16x2 <div style="font-size: 3em;">font 3em=96px 32*3 </div> </div> </div>

background

/* background-color */ .bg-color{ background-color: pink; } /* background-image */ .bg-img{background-image: url(https://picsum.photos/100/100/?ransom=10);} /* background-repeat */ .bg-repeat-x{ background-repeat:repeat-x ; } .bg-repeat-y{ background-repeat:repeat-y ; } .bg-no-repeat{ background-repeat: no-repeat; } .bg-size{ background-image:url(/03.background/300200.jpg) ; background-repeat: no-repeat; /* 單值-關鍵字 auto(預設)contain,cover */ /* cover 背景圖會等比例縮放,背景會填滿整個盒子 */ /* contain 背景圖片會等比例縮放,背景圖片一邊碰到盒子的一邊時,另一邊停止縮放。 */ background-size: cover ; /* 單值 - 百分比、絕對數值(px em rem )第一個數值指寬度。第二個值指高度省略會被設定會auto */ background-size: 500px; /* 雙值 - 第一個是寬度、第二個是高度。 */ background-size: 300px 400px ; } .bg-position{ /* 雙值 => 第一個為水平(X) 第二個為垂直(Y) 第一個關鍵字 left、center,right => 0%、50%、100% 第二個關鍵字 top,center,bottom => 0%、50%、100% */ background-position: 50% center; /* 可以用px 、 em 、 rem */ background-position: 100px 100px ; /* 單值,只設定一個值,該值為水平,省略的設為center, 另一邊會變成center,因此上右下左可以單一寫成top right bottom left */ background-position: left; } .pikachu{ width: 600px; height: 300px; border: 5px solid #fff; margin: 100px auto; font-size: 3rem; color: yellow; text-shadow: 0px 0px 3px rgb(0,0,0); box-shadow: 0 0 20px rgba(0,0,0,0.5); background-image: url('pica.png'); background-repeat: no-repeat; background-position: 0px -100px; background-size: cover; } .bg-abbr{ /* 縮寫可以任意順序使用各種數值,注意以下規則 1. background-size一定要在background-position之後,且要用斜線。 2. 設定background-position 雙值時,先設定水平再設定垂直。 */ background: skyblue url(https://picsum.photos/500/500/?ransom=10) no-repeat center center/200px; } .bg-three{ /* 多層背景 1. 使用多層背景重疊時,各屬性可以用逗號分隔,圖片列出的順序,由上而下排列,上方會蓋住下方。 2. 第一個背景圖片為最上層,第二為第二層,最後一個為底層。 */ background-image: url(https://picsum.photos/600/100/?ransom=1), url(https://picsum.photos/600/400/?ransom=2), url(https://picsum.photos/600/100/?ransom=1); background-repeat: no-repeat,no-repeat,no-repeat; background-position: left top ,left 100px, left bottom; /* 縮寫版 */ background: url(https://picsum.photos/600/100/?ransom=1) no-repeat left top, url(https://picsum.photos/600/400/?ransom=2) no-repeat left 100px , url(https://picsum.photos/600/100/?ransom=1) no-repeat left bottom; } /* 1. background、background-imge 都可以設定漸層,漸層是背景圖片的一種。 2. 漸變軸向判斷,角度 + 時針由圓心到針頭的方向(為顏色渲染漸變的方向) 3. 預設角度方向為 180 deg = to bottom 4. 0 deg = 360 deg = to top */ .liner-gradient{ /* background-image: linear-gradient(red,yellow,white);*/ /* background: linear-gradient(red,yellow,white); */ /* 預設 180 deg */ background-image: linear-gradient( to top,blue,skyblue,white); } .liner-gradient2{ background-image: linear-gradient(to right top, #fff 0%, lightblue 25%, #fff 50%, lightblue 75%, #fff 100%) } .liner-gradient3{ background: linear-gradient(90deg,rgb(179, 157, 179) 50% , white 0%) repeat-x top center/100px 100px } .radial-gradient{ background-image: radial-gradient(white,#ffffaa,pink); /* 設定漸層起點 */ background-image: radial-gradient(white 0%,#ffffaa 10%, pink 100%); } /* 半透明顏色背景,使用透明漸層蓋在背景圖上。 */ .half-opacity{ background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('/03.background/300200.jpg') }