html的字體樣式主要通過css的font-size以及font-family來定義的，標(biāo)簽詳解如下：
成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計、網(wǎng)站制作、旅順口網(wǎng)絡(luò)推廣、小程序開發(fā)、旅順口網(wǎng)絡(luò)營銷、旅順口企業(yè)策劃、旅順口品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供旅順口建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
font-size
指定字體大小，常用單位有em和px
font-family
指定使用的字體
常用的中文字體有微軟雅黑和宋體，英文字體有Arial
可以同時指定多個字體，使用英文的逗號分隔，瀏覽器會按順序查找，找不到就找下一個，全部沒找到就使用系統(tǒng)默認(rèn)的
字體用中文表示 則需要用雙引號或者單引號分隔，英文字體一般不需要用引號，但是如果 有特殊字符的（如空格，反斜杠，#，$等）也需要使用引號
font-weight
字體粗細(xì)（bold相等于設(shè)置該屬性的值為700，normal相等于設(shè)置該屬性值為400–不用單位，建議使用數(shù)字因為解析會更快）
fon-style
normal（一般用于讓斜體不傾斜，em標(biāo)簽有加重強調(diào)的語義 但是字體會傾斜，可以為em 標(biāo)簽設(shè)置 font-style 屬性值為 normal 取消其傾斜的效果）
字體樣式可以連寫
即 所有的字體樣式 使用一個語句，但是有一定的語法規(guī)則和順序
選擇器 { font : font-style font-weight font-size/line-height font-family; }
字體樣式連寫時需要注意：一定要按順序?qū)懀梢杂惺÷圆粚懙臉邮降且欢ㄒ错樞?，而且font-size和font-family是不可以省略的，否則會不起作用
文本外觀樣式
color：字體顏色
預(yù)定義的顏色如green，red等
十六進制，順序是紅綠藍，十六進制是最常用的顏色表示方式
#ff0000 表示紅色，等同于#f00（縮寫，必須是兩兩相同的才可以進行縮寫）；#00f表示藍色；#0f0表示綠色；#fff表示白色（所有的顏色都滿格），#000000即#000表示黑色（所有的顏色都沒有）
RGB代碼：rgb(255,255,255)表示白色
文本修飾：text-decoration：none、underlined（比較常用，用于添加下劃線和取消下劃線）
line-hight：行間距，一般情況下，行間距只需要比字體大小大7或8個像素就可以了
text-align：文本內(nèi)容的水平對齊方式
text-indent：段落首行縮進，單位使用em，1em就是一個字，所以該樣式值為2em 表示 段落首行縮進兩個字符
學(xué)習(xí)導(dǎo)航
1、css中的長度與顏色
2、css中的文字屬性
3、css中的文本屬性
1、文字樣式屬性
font-family 字體屬性
作用：元素內(nèi)文字以什么字體來顯示
語法：font-family:[字體1],[字體2],[......];
說明：含空格字體名和中文，用英文引號（"）括起；多個字體用英文逗號隔開；引號嵌套，外使用雙引號，內(nèi)使用單引號。
font-size 文字大小
作用：元素內(nèi)文字大小
語法：font-size:絕對單單位，相相對單位
color 文字顏色
語法：顏色名|十六進制|RGB
font-weight 文字粗細(xì)
語法：font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 細(xì)體 | 100-900
說明：默認(rèn)值：normal 400等同于normal,而700等同于bold
font-style 文字樣式
作用：為元素內(nèi)文字設(shè)置樣式
語法：font-style:normal 正常顯示 | italic 文字傾斜 | oblique 文字傾斜（基本不用）
font-variant 字體變形
作用：設(shè)置元素中文本為小型大寫字母
語法：font-variant:normal 正常顯示| small-caps 將英文大小寫字母調(diào)成為同寬
font 屬性簡寫
語法：font:font-style font-variant ?font-weight font-size/line-height font-family;
說明：值之間空格隔開，注意書寫順序。
2、CSS文本樣式
text-align
作用：設(shè)置元素內(nèi)文本的水平對齊方式
語法：tex-align:left 左對齊?| right 右對齊 | center 居中對齊 | justify 兩端對齊
注意：該屬性對塊級元素設(shè)置有效
line-height
作用：設(shè)置元素中文本行高
語法：line-height:長度值 | 百分比
說明：一行文字的高度，行高指文本行的基線間的距離
文字基線
注意：基線并不是漢字文字的下沿，看圖理解自行理解
行高和行距
行高：基線到基線的距離
行距：底線到頂線的距離
注意：看圖自行理解
行框和行內(nèi)框
注意：看圖自行理解
vertical-align
作用：設(shè)置元素內(nèi)容的垂直方式
語法：vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom |?長度 | 百分比
注意：看圖自行理解
text-indent 首行縮進
3、文本樣式屬性
text-transform:?capitzlize?首字母大寫 |?uppercase?字母大寫?|?lowercase? 字母小寫 |?none 正常
text-decoration:?underline?下劃線 |?overline 上劃線?|?line-through?刪除線 | none 正常
綜合實操案例
如果您覺得有用，記得在下方點贊、關(guān)注、留言，我會定期奉 上更多的驚喜哦，您的打賞支持才是我繼續(xù)努力的動力，么么噠。
每日分享在學(xué)習(xí)過程中總結(jié)的學(xué)習(xí)經(jīng)驗，學(xué)習(xí)筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學(xué)習(xí)為目的，每天閱讀一篇文章，了解身邊的技術(shù)。陪有夢想的人一起成長！
盒子模型是CSS中一個很重要的概念，頁面中的所有元素都可以看成一個盒子，并占據(jù)一定的頁面空間，一個頁面由很多盒子組成，盒子之間會互相影響。只有掌握盒模型以及其中每個屬性的用法，才能真正控制好頁面元素。
盒子模型主要定義四個區(qū)域： 內(nèi)容(content)、內(nèi)邊距/填充(padding)、邊框(border)和外邊距(margin) 。
盒子的內(nèi)容區(qū)域存放文本和圖片等頁面元素，擁有如下屬性：
邊框基本屬性：
通過一個屬性設(shè)置四個方向邊框的寬度、樣式、顏色
屬性：border
取值：width style color;
只設(shè)置某一條邊框的寬度、樣式、顏色
語法：border-方向（top/right/bottom/left）：width style color;
只設(shè)置邊框的寬度、樣式、顏色中的一種
語法：border-屬性（width/style/color）：取值;
只設(shè)置某一條邊框的寬度、樣式、顏色中的一種
語法：border-方向（top/right/bottom/left）-屬性（width/style/color）：取值;
屬性：border-radius
作用：設(shè)置倒角位置處圓的半徑，半徑越大，弧度越大。
取值：
屬性：border-image
語法：
border-image-source ：引入背景圖片
取值：
默認(rèn)值：無圖片
url(圖片URL地址)
border-image-slice ：切割引入背景圖片，把邊框背景切成9份
取值：
number：默認(rèn)單位px
百分比：
fill：保留邊框圖像的中間部分
border-image-width ：指定邊框圖片的寬度
border-image-repeat ：指定邊框背景圖片的排列方式，可定義2個參數(shù)，即水平和垂直方向
取值：
Stretch：默認(rèn)值，拉伸
Repeat：平鋪
Round：取整平鋪
內(nèi)容區(qū)域和邊框（邊緣）之間的距離
語法：padding: 值；
單邊設(shè)置：padding-方向（top/right/bottom/left）:值；
取值：
數(shù)值px
百分比
內(nèi)邊距的簡寫方式：
padding:value;
四個方向內(nèi)邊距的值均為value
padding:value1 value2;
Value1為上下內(nèi)邊距的值，value2為左右內(nèi)邊距的值
padding:value1 value2 value3;
Value1為上內(nèi)邊距的值，value2為左右內(nèi)邊距的值，value3為下內(nèi)邊距的值
padding:value1 value2 value3 value4;
上右下左內(nèi)邊距的值分別為value1， value2， value3， value4
外邊距指元素與元素之間的距離，即圍繞在元素邊框之外的空白區(qū)域，通過外邊距可以為元素創(chuàng)建額外的“空間”。默認(rèn)不能被其他元素所占據(jù)，用于拉伸兩個元素間的距離。
語法：margin: 值；
單邊設(shè)置：margin-方向（top/right/bottom/left）:值；
取值：
重新制定元素尺寸計算模式
屬性：box-sizing
取值：
屬性：resize
取值：
位于元素邊框之外的一條線
屬性：
outline：width style color;
屬性：box-shadow
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
取值：由一組值構(gòu)成的值列表
屬性：background-color
取值：顏色值或transparent
注意：背景顏色是從邊框位置處開始繪制
屬性：background-image
取值：url(背景圖像URL)
屬性：background-repeat
取值：
屬性：background-attchment
取值：
scroll：默認(rèn)值，滾動
fixed：固定
屬性：background-position
取值：
屬性：background-size
取值：
屬性：background-origin
取值：
屬性：background-clip
取值：
CSS3多背景通過為每個背景屬性提供多個屬性值實現(xiàn)。
font 簡寫屬性語法：
將所有字體屬性合寫為一行，其中font-family是復(fù)合屬性中必不可少的屬性。
可以不設(shè)置其中的某個值，如果省略值地話，就使用屬性的默認(rèn)值。
②文本屬性：
（2）CSS3文本陰影屬性：
屬性：text-shadow
作用：產(chǎn)生陰影和模糊主體
語法：
作用：定義列表的編號樣式
屬性：list-style-type
作用：用于設(shè)置列表項的圖像屬性
語法：
圖像URL地址：圖像的相對路徑或絕對路徑
none：默認(rèn)值，不指定圖像
注意：圖片圖標(biāo)與文字之間的距離在不同瀏覽器中是不一樣的，因此，一般情況下不采用這種方式來設(shè)置列表的圖片樣式。
通過設(shè)置li的背景圖片的方式來設(shè)置列表圖片基本步驟：
設(shè)置list-style-type屬性值為none
設(shè)置li標(biāo)記的背景屬性backgruond
作用：用于聲明列表標(biāo)志相對于列表項內(nèi)容的位置
語法：
作用：可以同時設(shè)定列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。
語法：
注意：
可以不設(shè)置其中的某個值，未設(shè)置的屬性采用默認(rèn)值
同時指定list-style-image和list-style-type時，list-style-image優(yōu)先顯示，除非list-style-image設(shè)置為none，或圖片路徑錯誤無法顯示
當(dāng)列表與列表項目同時使用樣式時，列表項目的樣式優(yōu)先顯示
特點：
可以設(shè)置寬度和高度
默認(rèn)情況下每個塊級元素獨占一行
作用：
塊級元素主要用于頁面布局
常用塊級元素：
div、p、h1~h6、ol、ul等
特點：
不可以設(shè)置寬度和高度，其寬度就是自身文字或圖片的寬度
默認(rèn)情況下多個行內(nèi)元素會在一行內(nèi)顯示，遇父元素邊界時會自動換行
作用：
行內(nèi)元素主要用于設(shè)置文樣式
常用行內(nèi)元素：
a、span、em、b、i、strong、img、input等
作用：控制頁面元素脫離原有文檔流，實現(xiàn)向左或向右移動，直到該元素外邊緣碰到其包含框或另一個浮動框的邊緣停止，標(biāo)準(zhǔn)流中的其他盒子將頂?shù)礁雍凶拥奈恢?。浮動的元素不占?jù)實際空間。
屬性： float
取值：
浮動元素不會相互重疊；
浮動元素不會上下浮動，如果一個浮動元素在另一個浮動元素之后顯示，而且會超出容納塊，則它下降到低于先前任何浮動元素的位置。
作用：規(guī)定元素的哪一側(cè)不允許出現(xiàn)其他浮動元素。
取值：
作用：控制頁面元素在頁面中的位置。
屬性：position
取值：static/relative/absolute/fiexed
默認(rèn)屬性值，元素按照標(biāo)準(zhǔn)文檔流進行排列，塊級元素獨占一行， 行內(nèi)元素位于一行內(nèi)顯示，一行顯示不下，自動換行。
特點：
相對于自身原有位置進行偏移
仍處于標(biāo)準(zhǔn)文檔流中
隨即擁有偏移屬性和z-idex屬性
偏移屬性:
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
當(dāng)元素相對定位后會產(chǎn)生Z軸上的堆疊，不設(shè)置z-index屬性時，默認(rèn)該元素出現(xiàn)在X軸和Y軸構(gòu)成的平面上。
特點：
建立了以包含塊為基準(zhǔn)的定位
絕對定位的元素的位置相對于最近的已定位祖先元素（設(shè)定了絕對定位、相對定位或固定定位中的任何一種），如果元素沒有已定位的祖先元素，則該元素的位置相對于瀏覽器窗口。
完全脫離了標(biāo)準(zhǔn)文檔流
隨即擁有偏移屬性和z-idex屬性
偏移屬性：
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
絕對定位未設(shè)置偏移量的特點：
無論是否存在已經(jīng)定位的祖先元素，都保持在元素的初始位置
脫離了標(biāo)準(zhǔn)文檔流
設(shè)定固定定位的元素框的表現(xiàn)類似于將position設(shè)置為absolute，不過其包含塊是瀏覽器窗口本身。
在計算機顯示中把垂直于屏幕平面的方向稱為Z方向，CSS絕對定位容器的z-index屬性即對應(yīng)該方向。
作用：用于控制元素的層疊次序，使得某個元素浮于其他元素之上。
語法：
auto：遵循其父元素的定位
number：整數(shù)，可負(fù)，值大者疊加在上層
注意：使用z-index屬性時，要求該元素的position屬性值為absolute、relative或fixed。
作用：用于定義建立布局時元素生成的顯示框類型
語法：dispaly:值;
作用：用于定義建立布局時元素生成的顯示框類型
語法：visibility:值;
1、文本縮進：text-indent
2、文本對齊：text-align
3、字間隔：word-spacing
4、字母間隔：letter-spacing
5、字母轉(zhuǎn)換：text-transform
6、文本裝飾：text-decoration
7、處理空白符：white-space
8、文本方向：decoration
9、文本顏色：color
10、背景顏色：background-color
11、文本陰影：text-shadow
還有一些屬性，不是很常用，就沒有列舉了，了解每個具體的使用方法，可以到百度
"w3cschool
"了解！
希望對你有所幫助。
1、文本縮進：text-indent
2、文本對齊：text-align
3、字間隔：word-spacing
4、字母間隔：letter-spacing
5、字母轉(zhuǎn)換：text-transform
6、文本裝飾：text-decoration
7、處理空白符：white-space
8、文本方向：decoration
9、文本顏色：color
10、背景顏色：background-color
11、文本陰影：text-shadow
還有一些屬性，不是很常用，就沒有列舉了，了解每個具體的使用方法，可以到百度 "w3cschool "了解！
希望對你有所幫助。
重慶分公司
重慶分公司
