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)

1. 加入字形(+select this style)
   
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);
        }

多重文字陰影

.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

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

break-break

break-all

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

keep-all

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

---

white-space

對空白的處理

normal

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

.normal{
      white-space: normal;
}

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')
 }