目標
注意:
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文字,文字常用樣式
字型屬性 font family 如果電腦沒有第乙個字型,就切換到下乙個 bodyfont size 字型大小 瀏覽器字型預設大小一般16px px是絕對大小,不會隨瀏覽器變化變化 em相對單位 rem主要應用移動端 color 三種顏色表示 color rgb 0 255 10進製 color r...
CSS 文字 文字屬性
css控制文字屬性 1 font size 18px 設定字型大小 2 color 093 設定字色 3 font family 宋體 設定字型 可以有多種字型,兩個字型之間有,分隔開,表示如果系統中有第乙個字型則顯示效果是第乙個字型,如果沒有則顯示的是第二個字型的效果,以此類推 4 line he...
03 CSS樣式之字型樣式
屬性 含義font sytle字型風格 font weight字型粗細 font size字型大小 font family字型樣式 font綜合設定 以上1 font style 字型風格 1 normal 正常字型 一般把傾斜字型變為普通字型 2 italic傾斜字型 不常用 舉例快樂最重要 漂亮...