CSS
.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)
.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);
}
.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);
}
.word-wrap{
/* break-word過長的單字會自動換到下一行 */
word-wrap: break-word;
}
.break-all{
/* 允許單字字母中換行,就是不一定要完整單字 */
word-break: break-all;
}
.keep-all{
/* 在半形空格或連字符號處換行 */
word-break: keep-all;
}
對空白的處理
預設,忽略空白,文字正常排列,遇到最右邊換行
.normal{
white-space: normal;
}
pre 標籤,保留空白顯示於畫面
.pre{
white-space: pre;
}
強制不換行,會強制超出區塊,除非遇到br
.nowrap{
white-space: nowrap;
}
保留空白顯示於畫面,且會換行。
.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;
}
<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>
<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-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')
}