目標
注意:
p
p
常用技巧:
1. 各種字型之間必須使用英文狀態下的逗號隔開。
2. 中文字型需要加英文狀態下的引號,英文本型一般不需要加引號。當需要設定英文本型時,英文本型名必須位於中文字型名之前。
3. 如果字型名中包含空格、#、$等符號,則該字型必須加英文狀態下的單引號或雙引號,例如font-family: "times new roman";。
4. 盡量使用系統預設字型,保證在任何使用者的瀏覽器中都能正確顯示。
解決:
字型名稱
英文名稱
unicode 編碼
宋體simsun
\5b8b\4f53
新宋體nsimsun
\65b0\5b8b\4f53
黑體simhei
\9ed1\4f53
微軟雅黑
microsoft yahei
\5fae\8f6f\96c5\9ed1
楷體_gb2312
kaiti_gb2312
\6977\4f53_gb2312
隸書lisu
\96b6\4e66
幼園youyuan
\5e7c\5706
華文細黑
stxihei
\534e\6587\7ec6\9ed1
細明體mingliu
\7ec6\660e\4f53
新細明體
pmingliu
\65b0\7ec6\660e\4f53
為了照顧不同電腦的字型安裝問題,我們盡量只使用宋體和微軟雅黑中文字型
可以使用css 來實現,但是css 是沒有語義的。
屬性值描述normal
預設值(不加粗的)
bold
定義粗體(加粗的)
100~900
400 等同於 normal,而 700 等同於 bold 我們重點記住這句話
提倡:我們平時更喜歡用數字來表示加粗和不加粗。
可以使用css 來實現,但是css 是沒有語義的
font-style屬性用於定義字型風格,如設定斜體、傾斜或正常字型,其可用屬性值如下:
屬性作用
normal
預設值,瀏覽器會顯示標準的字型樣式 font-style: normal;
italic
瀏覽器會顯示斜體的字型樣式。
小技巧:
平時我們很少給文字加斜體,反而喜歡給斜體標籤(em,i)改為普通模式。
font屬性用於對字型樣式進行綜合設定
選擇器
屬性表示
注意點font-size
字型大小我們通常用的單位是px 畫素,一定要跟上單位
font-family
字型實際工作中按照團隊約定來寫字型
font-weight
字型粗細
記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數字不要跟單位
font-style
字型樣式
記住傾斜是 italic 不傾斜 是 normal 工作中我們最常用 normal
font
字型連寫
1. 字型連寫是有順序的 不能隨意換位置 2. 其中字型大小 和 字型 必須同時出現
表示表示
屬性值預定義的顏色值
red,green,blue,還有我們的御用色 pink
十六進製制
#ff0000,#ff6600,#29d794
rgb**
rgb(255,0,0)或rgb(100%,0%,0%)
屬性解釋
left
左對齊(預設值)
right
右對齊center
居中對齊
技巧:
一般情況下,行距比字型大小大7.8畫素左右就可以了。
line-height: 24px;
1em 就是乙個字的寬度 如果是漢字的段落, 1em 就是乙個漢字的寬度
p
text-decoration 通常我們用於給鏈結修改裝飾效果值描述
none
預設。定義標準的文字。 取消下劃線(最常用)
underline
定義文字下的一條線。下劃線 也是我們鏈結自帶的(常用)
overline
定義文字上的一條線。(不用)
line-through
定義穿過文字下的一條線。(不常用)
屬性表示
注意點color
顏色我們通常用 十六進製制 比如 而且是簡寫形式 #fff
line-height
行高控制行與行之間的距離
text-align
水平對齊
可以設定文字水平的對齊方式
text-indent
首行縮排
通常我們用於段落首行縮排2個字的距離 text-indent: 2em;
text-decoration
文字修飾
記住 新增 下劃線 underline 取消下劃線 none
此工具是我們的必備工具,以後**出了問題
我們首先第一反應就是:
小技巧:
ctrl+滾輪 可以 放大開發者工具**大小。
左邊是html元素結構 右邊是css樣式。
右邊css樣式可以改動數值和顏色檢視更改後效果。
ctrl + 0 復原瀏覽器大小
emmet的前身是zen coding,它使用縮寫,來提高html/css的編寫速度。
生成標籤 直接輸入標籤名 按tab鍵即可 比如 div 然後tab 鍵, 就可以生成
如果想要生成多個相同標籤 加上 * 就可以了 比如 div*3 就可以快速生成3個div
如果有父子級關係的標籤,可以用 > 比如 ul > li就可以了
如果有兄弟關係的標籤,用 + 就可以了 比如 div+p
如果生成帶有類名或者id名字的, 直接寫 .demo 或者 #two tab 鍵就可以了
如果生成的div 類名是有順序的, 可以用 自增符號 $
emment語法
CSS字型樣式屬性除錯工具
目標 注意 pp常用技巧 1.各種字型之間必須使用英文狀態下的逗號隔開。2.中文字型需要加英文狀態下的引號,英文本型一般不需要加引號。當需要設定英文本型時,英文本型名必須位於中文字型名之前。3.如果字型名中包含空格 等符號,則該字型必須加英文狀態下的單引號或雙引號,例如font family tim...
CSS字型樣式屬性
font size字型大小大小 一般推薦使用相對長度 px em 不推薦使用絕對長度 in,cmm,mm,pt font family字型 1.可以同時指定多個字型,中間用英文狀態的逗號隔開,英文本型一般不需要加引號,中文字型需要新增英文狀態下的引號,當需要設定英文本型時,英文本型必須位於中文字型之...
css字型樣式屬性
font size 字型大小大小 font size 字型大小大小用於設定字型大小,該屬性可以用相對長度單位 也可以使用絕對長度單位。其中相對長度單位比較常用,推薦使用畫素單位px,絕對長度用得相對較少。相對長度單位有 em px,推薦使用px font family 字型設定 font famil...