語法教學CSS

文字常用CSS

font-size「文字大小」 font-style「傾斜」 font-weight「粗體」 text-decoration「底線」 text-transform「英文大小寫」 text-align「水平對齊」 文字換行 字、詞間格 text-overflow「限制內容字數」 使用網路上的字型檔 色碼表十六進位值排列

．font 文字

color: #009FCC; /*文字顏色*/

 

font-family: Arial, sans-serif; /*文字風格字型*/

 

．font-size 文字大小

font-size: 19px; /*px絕對單位*/

 

font-size: 1.2em; /*網頁 ( 單位 )em 相對單位*/

font-size: 1.2rem; /*網頁 ( 單位 )rem 相對單位*/

font-size: 120%; /*網頁 ( 單位 )% 相對單位*/

font-size: 15pt; /*印刷 ( 單位 )pt 印表機的每個點*/

  1. font-size: 19px; I laugh in the face of danger.越危險就越合我心意。
  2. font-size: 1.2em; I laugh in the face of danger.越危險就越合我心意。
  3. font-size: 1.2rem; I laugh in the face of danger.越危險就越合我心意。
  4. font-size: 120%; I laugh in the face of danger.越危險就越合我心意。
  5. font-size: 15pt; I laugh in the face of danger.越危險就越合我心意。

 

．font-style 傾斜

font-style: normal; /*預設值，讓瀏覽器根據標準文字*/

 

font-style: oblique; /*傾斜*/

  1. font-style: normal; I laugh in the face of danger.越危險就越合我心意。
  2. font-style: oblique; I laugh in the face of danger.越危險就越合我心意。

 

．font-weight 粗體

font-weight: bold; /*粗體*/

 

font-weight: bolder; /*比粗體更粗一點*/

font-weight: lighter; /*比一般字體更細*/

font-weight: 600; /*100~900數字越大越厚，數字小於 500 似乎效果不明顯。*/

  1. font-style: bold; I laugh in the face of danger.越危險就越合我心意。
  2. font-style: bolder; I laugh in the face of danger.越危險就越合我心意。
  3. font-style: lighter; I laugh in the face of danger.越危險就越合我心意。
  4. font-style: 600; I laugh in the face of danger.越危險就越合我心意。

 

．text-decoration 底線

text-decoration: none; /*預設值，無額外文字特效*/

 

text-decoration: overline; /*上線*/

text-decoration: underline; /*底線*/

text-decoration: line-through; /*刪除線*/

  1. text-decoration: none; I laugh in the face of danger.越危險就越合我心意。
  2. text-decoration: overline; I laugh in the face of danger.越危險就越合我心意。
  3. text-decoration: underline; I laugh in the face of danger.越危險就越合我心意。
  4. text-decoration: line-through; I laugh in the face of danger.越危險就越合我心意。

 

．text-align 水平對齊

text-align: left; /*水平-向左對齊*/

 

text-align: right; /*水平-向右對齊/

text-align: center; /*水平-置中對齊*/

text-align: justify; /*左右對齊本文*/

text-align: inherit; /*繼承父元素的 text-align 屬性*/

垂直置中，line-height 設定跟 height 數值一樣

text-align: left;左對齊
text-align: right;右對齊
text-align: center;置中對齊。
text-align: justify;左右對齊。
text-align: inherit;繼承父元素

 

．line-height 文字行高

line-height: normal; /*預設值*/

 

line-height: 65px; /*自訂行高*/

line-height: normal;預設值
line-height: 65px;自訂行高

 

．text-transform 英文大小寫

text-transform: capitalize; /*字首大寫*/

 

text-transform: uppercase; /*英文全大寫*/

text-transform: lowercase; /*英文全小寫*/

  1. text-transform: capitalize; I laugh in the face of danger.越危險就越合我心意。
  2. text-transform: uppercase; I laugh in the face of danger.越危險就越合我心意。
  3. text-transform: lowercase; I laugh in the face of danger.越危險就越合我心意。

 

．white-space 強迫文字不換行

white-space: normal; /*預設，空白會被瀏覽器忽略*/

 

white-space: nowrap; /*不會換行*/

  1. white-space: normal I love waking up in the morning and not knowing what's going to happen, or who I'm going to meet, where I'm going to wind up.我喜歡早上起來時一切都是未知的,不知會遇見什麼人,會有什麼樣的結局。
  2. white-space: nowrap; I love waking up in the morning and not knowing what's going to happen,我喜歡早上起來時一切都是未知的,

 

．word-wrap 文字換行

word-wrap: normal; /*預設，任意換行*/

 

word-wrap: break-word; /*用詞換行*/

  1. word-wrap: normal; I love waking up in the morning and not knowing what's going to happen, or who I'm going to meet, where I'm going to wind up.我喜歡早上起來時一切都是未知的,不知會遇見什麼人,會有什麼樣的結局。
  2. word-wrap: break-word; I love waking up in the morning and not knowing what's going to happen, or who I'm going to meet, where I'm going to wind up.我喜歡早上起來時一切都是未知的,不知會遇見什麼人,會有什麼樣的結局。

 

．word-break 英文換行

word-break: normal; /*預設，任意換行*/

 

word-break: break-all; /*適用於英文，用字換行*/

word-break: keep-all; /*適用於英文，用詞換行*/

  1. word-break: normal; I love waking up in the morning and not knowing what's going to happen, or who I'm going to meet, where I'm going to wind up.我喜歡早上起來時一切都是未知的,不知會遇見什麼人,會有什麼樣的結局。
  2. word-break: break-all; I love waking up in the morning and not knowing what's going to happen, or who I'm going to meet, where I'm going to wind up.我喜歡早上起來時一切都是未知的,不知會遇見什麼人,會有什麼樣的結局。
  3. word-break: break-all; I love waking up in the morning and not knowing what's going to happen, or who I'm going to meet, where I'm going to wind up.我喜歡早上起來時一切都是未知的,不知會遇見什麼人,會有什麼樣的結局。

 

．letter-spacing 字間格

letter-spacing: normal; /*預設值，文字間距離為標準值*/

 

letter-spacing: 8px; /*自訂文字間距離*/

  1. letter-spacing: normal; I laugh in the face of danger.越危險就越合我心意。
  2. tletter-spacing: 8px; I laugh in the face of danger.越危險就越合我心意。

 

．word-spacing 詞的間格

word-spacing: normal; /*預設值，文字間距離為標準值*/

 

word-spacing: 8px; /*自訂詞距離*/

  1. word-spacing: normal; I laugh in the face of danger.越危險 就越合 我心意。
  2. word-spacing: 8px; I laugh in the face of danger.越危險 就越合 我心意。

 

．text-overflow 限制內容字數

為了讓網頁更整齊，常需要限制文字的字數，當文字超過限制時會自動顯示”…”的刪節號。

 

width: 200px; /*限定寬度*/

white-space: nowrap; /*讓文字不換行，強制超過寬度*/

overflow: hidden; /*超過寬度隱藏*/

text-overflow: ellipsis; /*超過寬度加上...*/

  1. I laugh in the face of danger.越危險 就越合 我心意。
  2. I laugh in the face of danger.越危險 就越合 我心意。

 

．使用網路上的字型檔來顯示網頁中的文字@font-face要套用css

基本使用方式-

@font-face { font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff); }

這裡我們指定了 Gentium 這個字型的字型檔案網址為 http://example.com/fonts/Gentium.woff，並設定讓所有網頁中的

都使用 Gentium 來顯示，而如果碰到不支援 @font-face 的瀏覽器，則會使用第二順位的 serif 這個一般的字型來顯示。

另外一個範例

@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf);
font-weight: bold;
}

這裡定義一個名稱為 MyHelvetica 的粗體字，而可使用的字型位置依序為使用者電腦中的

Helvetica Neue Bold 與 HelveticaNeue-Bold 兩個字型名稱，如果使用者電腦中找不到這些字型，

則從網頁上下載 MgOpenModernaBold.ttf 這個字型檔。

 

可以參考下方的．字體參考html寫法

 

無襯線字體 sans-serif

Arial ABCWLI abcwli 012345 &#@%${}~
Arial Black ABCWLI abcwli 012345 &#@%${}~
Arial Narrow ABCWLI abcwli 012345 &#@%${}~
Charcoal ABCWLI abcwli 012345 &#@%${}~
Impact ABCWLI abcwli 012345 &#@%${}~
Tahoma ABCWLI abcwli 012345 &#@%${}~
Trebuchet MS ABCWLI abcwli 012345 &#@%${}~
Verdana ABCWLI abcwli 012345 &#@%${}~
Helvetica ABCWLI abcwli 012345 &#@%${}~*

無襯線字體 serif

Georgia ABCWLI abcwli 012345 &#@%${}~*
Palatino ABCWLI abcwli 012345 &#@%${}~
Times New Roman ABCWLI abcwli 012345 &#@%${}~
Times ABCWLI abcwli 012345 &#@%${}~

手寫字體 cursive

Comic Sans MS ABCWLI abcwli 012345 &#@%${}~

等寬字體 monospace

Courier New ABCWLI abcwli 012345 &#@%${}~

幻想字體 Fantasy

Copperplate ABCWLI abcwli 012345 &#@%${}~
Papyrus ABCWLI abcwli 012345 &#@%${}~

Google Open Sans

Open Sans ABCWLI abcwli 012345 &#@%${}~
是一個由Google委託Steve Matteson設計的無襯線字型。

 

．色碼表

．以十六進位值排列<font color="#RRGGBB">
#FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000
#FFB7DD #FF88C2 #FF44AA #FF0088 #C10066 #A20055 #8C0044
#FFCCCC #FF8888 #FF3333 #FF0000 #CC0000 #AA0000 #880000
#FFC8B4 #FFA488 #FF7744 #FF5511 #E63F00 #C63300 #A42D00
#FFDDAA #FFBB66 #FFAA33 #FF8800 #EE7700 #CC6600 #BB5500
#FFEE99 #FFDD55 #FFCC22 #FFBB00 #DDAA00 #AA7700 #886600
#FFFFBB #FFFF77 #FFFF33 #FFFF00 #EEEE00 #BBBB00 #888800
#EEFFBB #DDFF77 #CCFF33 #BBFF00 #99DD00 #88AA00 #668800
#CCFF99 #BBFF66 #99FF33 #77FF00 #66DD00 #55AA00 #227700
#99FF99 #66FF66 #33FF33 #00FF00 #00DD00 #00AA00 #008800
#BBFFEE #77FFCC #33FFAA #00FF99 #00DD77 #00AA55 #008844
#AAFFEE #77FFEE #33FFDD #00FFCC #00DDAA #00AA88 #008866
#99FFFF #66FFFF #33FFFF #00FFFF #00DDDD #00AAAA #008888
#CCEEFF #77DDFF #33CCFF #00BBFF #009FCC #0088A8 #007799
#CCDDFF #99BBFF #5599FF #0066FF #0044BB #003C9D #003377
#CCCCFF #9999FF #5555FF #0000FF #0000CC #0000AA #000088
#CCBBFF #9F88FF #7744FF #5500FF #4400CC #2200AA #220088
#D1BBFF #B088FF #9955FF #7700FF #5500DD #4400B3 #3A0088
#E8CCFF #D28EFF #B94FFF #9900FF #7700BB #66009D #550088
#F0BBFF #E38EFF #E93EFF #CC00FF #A500CC #7A0099 #660077
#FFB3FF #FF77FF #FF3EFF #FF00FF #CC00CC #990099 #770077

 

arrow
arrow
    文章標籤
    fishdonttalk 默默魚 默默介紹 默默魚學語法 網頁設計 css html
    全站熱搜
    創作者介紹
    創作者 默默魚 的頭像
    默默魚

    FISHDONTTALK

    默默魚 發表在 痞客邦 留言(0) 人氣()