學(xué)習(xí)導(dǎo)航
成都創(chuàng)新互聯(lián)公司始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營(yíng)理念，通過(guò)多達(dá)10多年累計(jì)超上千家客戶(hù)的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)營(yíng)銷(xiāo)解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶(hù)，其中包括：成都PVC花箱等企業(yè)，備受客戶(hù)贊揚(yáng)。
1、css中的長(zhǎng)度與顏色
2、css中的文字屬性
3、css中的文本屬性
1、文字樣式屬性
font-family 字體屬性
作用：元素內(nèi)文字以什么字體來(lái)顯示
語(yǔ)法：font-family:[字體1],[字體2],[......];
說(shuō)明：含空格字體名和中文，用英文引號(hào)（"）括起；多個(gè)字體用英文逗號(hào)隔開(kāi)；引號(hào)嵌套，外使用雙引號(hào)，內(nèi)使用單引號(hào)。
font-size 文字大小
作用：元素內(nèi)文字大小
語(yǔ)法：font-size:絕對(duì)單單位，相相對(duì)單位
color 文字顏色
語(yǔ)法：顏色名|十六進(jìn)制|RGB
font-weight 文字粗細(xì)
語(yǔ)法：font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 細(xì)體 | 100-900
說(shuō)明：默認(rèn)值：normal 400等同于normal,而700等同于bold
font-style 文字樣式
作用：為元素內(nèi)文字設(shè)置樣式
語(yǔ)法：font-style:normal 正常顯示 | italic 文字傾斜 | oblique 文字傾斜（基本不用）
font-variant 字體變形
作用：設(shè)置元素中文本為小型大寫(xiě)字母
語(yǔ)法：font-variant:normal 正常顯示| small-caps 將英文大小寫(xiě)字母調(diào)成為同寬
font 屬性簡(jiǎn)寫(xiě)
語(yǔ)法：font:font-style font-variant ?font-weight font-size/line-height font-family;
說(shuō)明：值之間空格隔開(kāi)，注意書(shū)寫(xiě)順序。
2、CSS文本樣式
text-align
作用：設(shè)置元素內(nèi)文本的水平對(duì)齊方式
語(yǔ)法：tex-align:left 左對(duì)齊?| right 右對(duì)齊 | center 居中對(duì)齊 | justify 兩端對(duì)齊
注意：該屬性對(duì)塊級(jí)元素設(shè)置有效
line-height
作用：設(shè)置元素中文本行高
語(yǔ)法：line-height:長(zhǎng)度值 | 百分比
說(shuō)明：一行文字的高度，行高指文本行的基線間的距離
文字基線
注意：基線并不是漢字文字的下沿，看圖理解自行理解
行高和行距
行高：基線到基線的距離
行距：底線到頂線的距離
注意：看圖自行理解
行框和行內(nèi)框
注意：看圖自行理解
vertical-align
作用：設(shè)置元素內(nèi)容的垂直方式
語(yǔ)法：vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom |?長(zhǎng)度 | 百分比
注意：看圖自行理解
text-indent 首行縮進(jìn)
3、文本樣式屬性
text-transform:?capitzlize?首字母大寫(xiě) |?uppercase?字母大寫(xiě)?|?lowercase? 字母小寫(xiě) |?none 正常
text-decoration:?underline?下劃線 |?overline 上劃線?|?line-through?刪除線 | none 正常
綜合實(shí)操案例
如果您覺(jué)得有用，記得在下方點(diǎn)贊、關(guān)注、留言，我會(huì)定期奉 上更多的驚喜哦，您的打賞支持才是我繼續(xù)努力的動(dòng)力，么么噠。
每日分享在學(xué)習(xí)過(guò)程中總結(jié)的學(xué)習(xí)經(jīng)驗(yàn)，學(xué)習(xí)筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學(xué)習(xí)為目的，每天閱讀一篇文章，了解身邊的技術(shù)。陪有夢(mèng)想的人一起成長(zhǎng)！
HTML（超文本標(biāo)記語(yǔ)言）和CSS（級(jí)聯(lián)樣式表）是用于構(gòu)建Web頁(yè)面的兩項(xiàng)核心技術(shù)。HTML為各種設(shè)備提供頁(yè)面的結(jié)構(gòu)，為CSS提供（視覺(jué)和聽(tīng)覺(jué)的）布局。與圖形和腳本一起，HTML和CSS是構(gòu)建網(wǎng)頁(yè)和?Web應(yīng)用程序的基礎(chǔ)。
HTML稱(chēng)為超文本標(biāo)簽語(yǔ)言，是一種標(biāo)識(shí)性的語(yǔ)言。它包括一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說(shuō)明文字，圖形、動(dòng)畫(huà)、聲音、表格、鏈接等。
超文本是一種組織信息的方式，它通過(guò)超級(jí)鏈接方法將文本中的文字、圖表與其他信息媒體相關(guān)聯(lián)。這些相互關(guān)聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠(yuǎn)的某臺(tái)計(jì)算機(jī)上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機(jī)方式進(jìn)行連接，為人們查找，檢索信息提供方便。
層疊樣式表(英文全稱(chēng)：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。
擴(kuò)展資料：
CSS具有以下特點(diǎn)：
1、豐富的樣式定義
CSS提供了豐富的文檔樣式外觀，以及設(shè)置文本和背景屬性的能力；允許為任何元素創(chuàng)建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內(nèi)容間的距離；允許隨意改變文本的大小寫(xiě)方式、修飾方式以及其他頁(yè)面效果。
2、易于使用和修改
CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個(gè)專(zhuān)門(mén)的CSS文件中，以供HTML頁(yè)面引用?？傊?，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。
另外，可以將相同樣式的元素進(jìn)行歸類(lèi)，使用同一個(gè)樣式進(jìn)行定義，也可以將某個(gè)樣式應(yīng)用到所有同名的HTML標(biāo)簽中，也可以將一個(gè)CSS樣式指定到某個(gè)頁(yè)面元素中。如果要修改樣式，我們只需要在樣式列表中找到相應(yīng)的樣式聲明進(jìn)行修改。
3、多頁(yè)面應(yīng)用
CSS樣式表可以單獨(dú)存放在一個(gè)CSS文件中，這樣我們就可以在多個(gè)頁(yè)面中使用同一個(gè)CSS樣式表。CSS樣式表理論上不屬于任何頁(yè)面文件，在任何頁(yè)面文件中都可以將其引用。這樣就可以實(shí)現(xiàn)多個(gè)頁(yè)面風(fēng)格的統(tǒng)一。
參考資料：百度百科——HTML
百度百科——css
CSS就是一種叫做樣式表（stylesheet）的技術(shù)。也有的人稱(chēng)之為層疊樣式表（Cascading
Stylesheet）。
在主頁(yè)制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。
只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。
它的作用可以達(dá)到：
（1）在幾乎所有的瀏覽器上都可以使用。
（2）以前一些非得通過(guò)圖片轉(zhuǎn)換實(shí)現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實(shí)現(xiàn)，從而更快地下載頁(yè)面。
（3）使頁(yè)面的字體變得更漂亮，更容易編排，使頁(yè)面真正賞心悅目。
（4）你可以輕松地控制頁(yè)面的布局
。
（5）你可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新，不用再一頁(yè)一頁(yè)地更新了。你可以將站點(diǎn)上所有的網(wǎng)頁(yè)風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，只要修改這個(gè)CSS文件中相應(yīng)的行，那么整個(gè)站點(diǎn)的所有頁(yè)面都會(huì)隨之發(fā)生變動(dòng)。
想一想，沒(méi)有使用CSS前我們是如何控制字體的顏色和大小以及所使用的字體的？我們一般使用HTML標(biāo)簽來(lái)實(shí)現(xiàn)，代碼非常煩瑣。
很難想象，如果在一個(gè)頁(yè)面里需要頻繁地更替字體的顏色大小，最終生成的HTML代碼的長(zhǎng)度一定臃腫不堪。
說(shuō)實(shí)話，CSS就是為了簡(jiǎn)化這樣的工作誕生的，當(dāng)然其功能決非這么簡(jiǎn)單。
CSS是通過(guò)對(duì)頁(yè)面結(jié)構(gòu)的風(fēng)格控制的思想，控制整個(gè)頁(yè)面的風(fēng)格的。
式樣單放在頁(yè)面中，通過(guò)瀏覽器的解釋執(zhí)行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。生殖對(duì)一些非常老的瀏覽器，頁(yè)不會(huì)產(chǎn)生頁(yè)面混亂的現(xiàn)象。
1、層疊樣式表(英文全稱(chēng)：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。
2、CSS是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，被用于描述網(wǎng)頁(yè)上的信息格式化和顯示的方式。CSS樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件。無(wú)論哪一種方式，樣式單包含將樣式應(yīng)用到指定類(lèi)型的元素的規(guī)則。外部使用時(shí)，樣式單規(guī)則被放置在一個(gè)帶有文件擴(kuò)展名_css的外部樣式單文檔中。
樣式規(guī)則是可應(yīng)用于網(wǎng)頁(yè)中元素，如文本段落或鏈接的格式化指令。樣式規(guī)則由一個(gè)或多個(gè)樣式屬性及其值組成。內(nèi)部樣式單直接放在網(wǎng)頁(yè)中，外部樣式單保存在獨(dú)立的文檔中，網(wǎng)頁(yè)通過(guò)一個(gè)特殊標(biāo)簽鏈接外部樣式單。
名稱(chēng)CSS中的“層疊（cascading）”表示樣式單規(guī)則應(yīng)用于HTML文檔元素的方式。具體地說(shuō)，CSS樣式單中的樣式形成一個(gè)層次結(jié)構(gòu)，更具體的樣式覆蓋通用樣式。樣式規(guī)則的優(yōu)先級(jí)由CSS根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果。
在前端開(kāi)發(fā)中，對(duì)于外觀控制一般用 CSS 來(lái)實(shí)現(xiàn)的，而不是用標(biāo)簽來(lái)實(shí)現(xiàn)，這更加符合結(jié)構(gòu)和樣式分離的原則，提高可讀性和可維護(hù)性 。
1、使用CSS 設(shè)置文本樣式有：color、letter-spacing、line-height、text-align、text-decoration、word-spacing
2、使用CSS 設(shè)置背景顏色的標(biāo)簽background-color，背景圖片的標(biāo)簽：background
3、使用CSS 設(shè)置的其他元素有哪些？margin、padding、position等
重慶分公司
重慶分公司
