CSS字體與文本樣式詳解

學(xué)習(xí)導(dǎo)航

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出江達(dá)免費(fèi)做網(wǎng)站回饋大家。

1、css中的長(zhǎng)度與顏色

2、css中的文字屬性

3、css中的文本屬性

1、文字樣式屬性

font-family 字體屬性

作用：元素內(nèi)文字以什么字體來顯示

語法：font-family:[字體1],[字體2],[......];

說明：含空格字體名和中文，用英文引號(hào)（"）括起；多個(gè)字體用英文逗號(hào)隔開；引號(hào)嵌套，外使用雙引號(hào)，內(nèi)使用單引號(hào)。

font-size 文字大小

作用：元素內(nèi)文字大小

語法：font-size:絕對(duì)單單位，相相對(duì)單位

color 文字顏色

語法：顏色名|十六進(jìn)制|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 屬性簡(jiǎn)寫

語法：font:font-style font-variant ?font-weight font-size/line-height font-family;

說明：值之間空格隔開，注意書寫順序。

2、CSS文本樣式

text-align

作用：設(shè)置元素內(nèi)文本的水平對(duì)齊方式

語法：tex-align:left 左對(duì)齊?| right 右對(duì)齊 | center 居中對(duì)齊 | justify 兩端對(duì)齊

注意：該屬性對(duì)塊級(jí)元素設(shè)置有效

line-height

作用：設(shè)置元素中文本行高

語法：line-height:長(zhǎng)度值 | 百分比

說明：一行文字的高度，行高指文本行的基線間的距離

文字基線

注意：基線并不是漢字文字的下沿，看圖理解自行理解

行高和行距

行高：基線到基線的距離

行距：底線到頂線的距離

注意：看圖自行理解

行框和行內(nèi)框

注意：看圖自行理解

vertical-align

作用：設(shè)置元素內(nèi)容的垂直方式

語法：vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom |?長(zhǎng)度 | 百分比

注意：看圖自行理解

text-indent 首行縮進(jìn)

3、文本樣式屬性

text-transform:?capitzlize?首字母大寫 |?uppercase?字母大寫?|?lowercase? 字母小寫 |?none 正常

text-decoration:?underline?下劃線 |?overline 上劃線?|?line-through?刪除線 | none 正常

綜合實(shí)操案例

如果您覺得有用，記得在下方點(diǎn)贊、關(guān)注、留言，我會(huì)定期奉 上更多的驚喜哦，您的打賞支持才是我繼續(xù)努力的動(dòng)力，么么噠。

每日分享在學(xué)習(xí)過程中總結(jié)的學(xué)習(xí)經(jīng)驗(yàn)，學(xué)習(xí)筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學(xué)習(xí)為目的，每天閱讀一篇文章，了解身邊的技術(shù)。陪有夢(mèng)想的人一起成長(zhǎng)！

4.文本樣式-CSS基礎(chǔ)

在前端開發(fā)中，對(duì)于外觀控制一般用 CSS 來實(shí)現(xiàn)的，而不是用標(biāo)簽來實(shí)現(xiàn)，這更加符合結(jié)構(gòu)和樣式分離的原則，提高可讀性和可維護(hù)性 。

CSS樣式是什么作用的，為什么用CSS樣式在瀏覽時(shí)不會(huì)使文字產(chǎn)生變化？

你先了解下css：

層疊樣式表 (Cascading Style Sheet) 是一系列格式規(guī)則，控制網(wǎng)頁內(nèi)容的外觀。使用 CSS 樣式可以非常靈活并更好地控制確切的網(wǎng)頁外觀，從精確的布局定位到特定的字體和樣式。對(duì)于網(wǎng)頁的排版，行間據(jù)，特定字體的效果等等都非常有效果哦。

至于你說的瀏覽時(shí)文字不產(chǎn)生效果，我只能說是你的代碼問題了，你可能沒定義，也可能是有些錯(cuò)誤，把代碼發(fā)上來我可以幫你看看

什么是css

CSS之入門篇——推薦新手

關(guān)于CSS樣式表

一.在學(xué)習(xí)css之前你應(yīng)該掌握哪些基礎(chǔ)知識(shí)

1.什么是網(wǎng)頁，什么是超文本語言（html）。

2.會(huì)使用Dreamweaver等常用的網(wǎng)頁編輯器。

Dreamweaver是現(xiàn)今最好的網(wǎng)站編輯工具之一，而Dreamweaver8增加的對(duì)CSS的支持更是你容易得來使用CSS，用它來給制作網(wǎng)頁的CSS樣式表會(huì)更簡(jiǎn)單、更方便。本教程教你如何利用Dreamweaver8在頁面中加入CSS，你不用死記硬背的記代碼標(biāo)記，也不用去看很厚的CSS手冊(cè)，你就可以輕松自如的在網(wǎng)頁中運(yùn)用CSS。不過首先你要對(duì)CSS有一定的了解。因此，本教程的前面4章為CSS理論知識(shí)，主要是對(duì)CSS的全面介紹，希望讀者看后對(duì)CSS的語法、結(jié)構(gòu)、應(yīng)用有一個(gè)全面的了解；后面4章為DW實(shí)戰(zhàn)，主要是教你如何利用Dreamweaver8靈活運(yùn)用CSS在網(wǎng)頁中。閱讀此文前，你需要對(duì)HTML有一定的了解，并會(huì)使用Dreamweaver。

二.認(rèn)識(shí)CSS

CSS就是Cascading Style Sheets，中文翻譯為“層疊樣式表”，簡(jiǎn)稱樣式表，它是一種制作網(wǎng)頁的新技術(shù)。

網(wǎng)頁設(shè)計(jì)最初是用HTML標(biāo)記來定義頁面文檔及格式，例如標(biāo)題h1、段落p、表格table、鏈接a等，但這些標(biāo)記不能滿足更多的文檔樣式需求，為了解決這個(gè)問題，在1997年W3C(The World Wide Web Consortium)頒布HTML4標(biāo)準(zhǔn)的同時(shí)也公布了有關(guān)樣式表的第一個(gè)標(biāo)準(zhǔn)CSS1, 自CSS1的版本之后，又在1998年5月發(fā)布了CSS2版本，樣式表得到了更多的充實(shí)。W3C把DHTML(Dynamic HTML)分為三個(gè)部分來實(shí)現(xiàn)：腳本語言(包括JavaScript、Vbscript等)、支持動(dòng)態(tài)效果的瀏覽器(包括Internet Explorer、Netscape Navigator等)和CSS樣式表。

注意：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的瀏覽器支持，有些效果需要更高版本的瀏覽器支持。

三.怎樣使用CSS

如果你使用的是Dreamweaver MX 2004以上的版本，在定義文字字體、顏色、大小等屬性的時(shí)候，查看一下代碼你會(huì)發(fā)現(xiàn)有這樣的一部分在head區(qū)域：

style type="text/css"

!--

.STYLE2 {

font-size: 16pt;

font-family: "Courier New", Courier, monospace;

font-weight: bold;

color: #FF3300;

}

--

/style

那么恭喜你，你已經(jīng)使用了CSS設(shè)計(jì)網(wǎng)頁。

那么除了這種調(diào)用CSS的方法外，還有別的嗎？回答是“當(dāng)然有了”，下面是系統(tǒng)介紹

標(biāo)記加注法(in-line)：

如果只有一個(gè)HTML標(biāo)記需要設(shè)定樣式，則可在該標(biāo)記內(nèi)，加上屬性

style=" "

以個(gè)別修訂樣式。

頁面內(nèi)嵌法：

style type="text/css" !-- body { background : white ; color : black ; } -- /style

外部調(diào)用法：

link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /

link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /

雙表法調(diào)用樣式表：

link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /

style type="text/css" media="all"@import url( css/style01.css );/style

1. 基本語法

CSS的定義是由三個(gè)部分構(gòu)成：選擇符（selector），屬性（properties）和屬性的取值（value）。

基本格式如下：

selector {property: value}

（選擇符 {屬性：值}）

選擇符是可以是多種形式，一般是你要定義樣式的HTML標(biāo)記，例如BODY、P、TABLE……，你可以通過此方法定義它的屬性和值，屬性和值要用冒號(hào)隔開：

body {color: black}

選擇符body是指頁面主體部分，color是控制文字顏色的屬性，black是顏色的值，此例的效果是使頁面中的文字為黑色。

如果屬性的值是多個(gè)單詞組成，必須在值上加引號(hào)，比如字體的名稱經(jīng)常是幾個(gè)單詞的組合：

p {font-family: "sans serif"}

（定義段落字體為sans serif）

如果需要對(duì)一個(gè)選擇符指定多個(gè)屬性時(shí)，我們使用分號(hào)將所有的屬性和值分開：

p {text-align: center; color: red}

（段落居中排列；并且段落中的文字為紅色）

為了使你定義的樣式表方便閱讀，你可以采用分行的書寫格式：

p

{

text-align: center;

color: black;

font-family: arial

}

（段落排列居中，段落中文字為黑色，字體是arial）

2. 選擇符組

你可以把相同屬性和值的選擇符組合起來書寫，用逗號(hào)將選擇符分開，這樣可以減少樣式重復(fù)定義：

h1, h2, h3, h4, h5, h6 { color: green }

（這個(gè)組里包括所有的標(biāo)題元素，每個(gè)標(biāo)題元素的文字都為綠色）

p, table{ font-size: 9pt }

（段落和表格里的文字尺寸為9號(hào)字）

效果完全等效于：

p { font-size: 9pt }

table { font-size: 9pt }

3. 類選擇符

用類選擇符你能夠把相同的元素分類定義不同的樣式，定義類選擇符時(shí)，在自定類的名稱前面加一個(gè)點(diǎn)號(hào)。假如你想要兩個(gè)不同的段落，一個(gè)段落向右對(duì)齊，一個(gè)段落居中，你可以先定義兩個(gè)類：

p.right {text-align: right}

p.center {text-align: center}

然后用不在不同的段落里，只要在HTML標(biāo)記里加入你定義的class參數(shù)：

p class="right" 這個(gè)段落向右對(duì)齊的

/p

p class="center"

這個(gè)段落是居中排列的

/p

p class="right" 這個(gè)段落向右對(duì)齊的

/p

p class="center"

這個(gè)段落是居中排列的

/p

注意：類的名稱可以是任意英文單詞或以英文開頭與數(shù)字的組合，一般以其功能和效果簡(jiǎn)要命名。

類選擇符還有一種用法，在選擇符中省略HTML標(biāo)記名，這樣可以把幾個(gè)不同的元素定義成相同的樣式：

.center {text-align: center}

（定義.center的類選擇符為文字居中排列）

這樣的類可以被應(yīng)用到任何元素上。下面我們使h1元素（標(biāo)題1）和p元素（段落）都?xì)w為“center”類，這使兩個(gè)元素的樣式都跟隨“.center”這個(gè)類選擇符：

h1 class="center"

這個(gè)標(biāo)題是居中排列的

/h1

p class="center"

這個(gè)段落也是居中排列的

/p

注意：這種省略HTML標(biāo)記的類選擇符是我們經(jīng)后最常用的CSS方法，使用這種方法，我們可以很方便的在任意元素上套用預(yù)先定義好的類樣式。

4. ID選擇符

在HTML頁面中ID參數(shù)指定了某個(gè)單一元素，ID選擇符是用來對(duì)這個(gè)單一元素定義單獨(dú)的樣式。

ID選擇符的應(yīng)用和類選擇符類似，只要把CLASS換成ID即可。將上例中類用ID替代：

p id="intro"

這個(gè)段落向右對(duì)齊

/p

定義ID選擇符要在ID名稱前加上一個(gè)“#”號(hào)。和類選擇符相同，定義ID選擇符的屬性也有兩種方法。下面這個(gè)例子，ID屬性將匹配所有id="intro"的元素：

#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

（字體尺寸為默認(rèn)尺寸的110%；粗體；藍(lán)色；背景顏色透明）

下面這個(gè)例子，ID屬性只匹配id="intro"的段落元素：

p#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

注意：ID選擇符局限性很大，只能單獨(dú)定義某個(gè)元素的樣式，一般只在特殊情況下使用。

5. 包含選擇符

可以單獨(dú)對(duì)某種元素包含關(guān)系定義的樣式表，元素1里包含元素2，這種方式只對(duì)在元素1里的元素2定義，對(duì)單獨(dú)的元素1或元素2無定義，例如：

table a

{

font-size: 12px

}

在表格內(nèi)的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為默認(rèn)大小。

6. 樣式表的層疊性

層疊性就是繼承性，樣式表的繼承規(guī)則是外部的元素樣式會(huì)保留下來繼承給這個(gè)元素所包含的其他元素。事實(shí)上，所有在元素中嵌套的元素都會(huì)繼承外層元素指定的屬性值，有時(shí)會(huì)把很多層嵌套的樣式疊加在一起，除非另外更改。例如在DIV標(biāo)記中嵌套P標(biāo)記：

div { color: red; font-size:9pt}

……

div

p

這個(gè)段落的文字為紅色9號(hào)字

/p

/div

（P元素里的內(nèi)容會(huì)繼承DIV定義的屬性）

注意：有些情況下內(nèi)部選擇符不繼承周圍選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性值是不會(huì)繼承的，直覺上，一個(gè)段落不會(huì)同文檔BODY一樣的上邊界值。

另外，當(dāng)樣式表繼承遇到?jīng)_突時(shí)，總是以最后定義的樣式為準(zhǔn)。如果上例中定義了P的顏色：

div { color: red; font-size:9pt}

p {color: blue}

……

div

p

這個(gè)段落的文字為藍(lán)色9號(hào)字

/p

/div

我們可以看到段落里的文字大小為9號(hào)字是繼承div屬性的，而color屬性則依照最后定義的。

不同的選擇符定義相同的元素時(shí)，要考慮到不同的選擇符之間的優(yōu)先級(jí)。ID選擇符，類選擇符和HTML標(biāo)記選擇符，因?yàn)镮D選擇符是最后加上元素上的，所以優(yōu)先級(jí)最高，其次是類選擇符。如果想超越這三者之間的關(guān)系，可以用!important提升樣式表的優(yōu)先權(quán)，例如：

p { color: #FF0000!important }

.blue { color: #0000FF}

#id1 { color: #FFFF00}

我們同時(shí)對(duì)頁面中的一個(gè)段落加上這三種樣式，它最后會(huì)依照被!important申明的HTML標(biāo)記選擇符樣式為紅色文字。如果去掉!important，則依照優(yōu)先權(quán)最高的ID選擇符為黃色文字。

7. 注釋

你可以在CSS中插入注釋來說明你代碼的意思，注釋有利于你或別人以后編輯和更改代碼時(shí)理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以"/*" 開頭，以"*/" 結(jié)尾，如下：

/* 定義段落樣式表 */

p

{

text-align: center; /* 文本居中排列 */

color: black; /* 文字為黑色 */

font-family: arial /* 字體為arial */

}

/* 定義段落樣式表 */

p

{

text-align: center; /* 文本居中排列 */

color: black; /* 文字為黑色 */

font-family: arial /* 字體為arial */

}

前面我們了解了CSS的語法，但要想在瀏覽器中顯示出效果，就要讓瀏覽器識(shí)別并調(diào)用。當(dāng)瀏覽器讀取樣式表時(shí)，要依照文本格式來讀，這里介紹四種在頁面中插入樣式表的方法：[u]鏈入外部樣式表[/u]、[u]內(nèi)部樣式表[/u]、[u]導(dǎo)入外表樣式表[/u]和[u]內(nèi)嵌樣式[/u]。

1. 鏈入外部樣式表

鏈入外部樣式表是把樣式表保存為一個(gè)樣式表文件，然后在頁面中用link標(biāo)記鏈接到這個(gè)樣式表文件，這個(gè)link標(biāo)記必須放到頁面的head區(qū)內(nèi)，如下：

head

……

link href="mystyle.css" rel="stylesheet" type="text/css" media="all"

……

/head

上面這個(gè)例子表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。rel=”stylesheet”是指在頁面中使用這個(gè)外部的樣式表。type=”text/css”是指文件的類型是樣式表文本。href=”mystyle.css”是文件所在的位置。media是選擇媒體類型，這些媒體包括：屏幕，紙張，語音合成設(shè)備，盲文閱讀設(shè)備等。

一個(gè)外部樣式表文件可以應(yīng)用于多個(gè)頁面。當(dāng)你改變這個(gè)樣式表文件時(shí)，所有頁面的樣式都隨之而改變。在制作大量相同樣式頁面的網(wǎng)站時(shí)，非常有用，不僅減少了重復(fù)的工作量，而且有利于以后的修改、編輯，瀏覽時(shí)也減少了重復(fù)下載代碼。

樣式表文件可以用任何文本編輯器（例如：記事本）打開并編輯，一般樣式表文件擴(kuò)展名為.css。內(nèi)容是定義的樣式表，不包含HTML標(biāo)記，mystyle.css這個(gè)文件的內(nèi)容如下：

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

/*定義水平線的顏色為土黃；段落左邊的空白邊距為20象素；頁面的背景圖片為images目錄下的back40.gif文件*/

2. 內(nèi)部樣式表

內(nèi)部樣式表是把樣式表放到頁面的head區(qū)里，這些定義的樣式就應(yīng)用到頁面中了，樣式表是用style標(biāo)記插入的，從下例中可以看出style標(biāo)記的用法：

head

……

style type="text/css"

css工作原理

Normalize.css

是一種CSS reset的替代方案。它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。

知乎總結(jié)的html tags

html一共有114個(gè)標(biāo)簽，但html5有添加了一些標(biāo)簽，如nav、header、article、section、aside、footer等。

閉合標(biāo)簽的基本格式如下：

標(biāo)簽名文本內(nèi)容/標(biāo)簽名

可以給這個(gè)標(biāo)簽添加一些屬性，比如：

標(biāo)簽名 屬性_1="屬性值" 屬性_2="屬性值"文本內(nèi)容/標(biāo)簽名

標(biāo)題、段落等文本元素都要求閉合標(biāo)簽，也就是要有一個(gè)開標(biāo)簽和一個(gè)閉標(biāo)簽，比如：

標(biāo)簽名 屬性_1="屬性值" 屬性_n="屬性值" /

非文本內(nèi)容是通過自閉合標(biāo)簽顯示的。閉合標(biāo)簽與自閉合標(biāo)簽的區(qū)別在于，閉合標(biāo)簽包含的是會(huì)顯示的實(shí)際內(nèi)容，而自閉合標(biāo)簽只是給瀏覽器提供一個(gè)對(duì)要顯示內(nèi)容的引用。

標(biāo)簽名 屬性_1="屬性值" 屬性_n="屬性值" /

** 塊級(jí)元素盒子會(huì)擴(kuò)展到與父元素同寬**

塊級(jí)標(biāo)簽

行內(nèi)元素盒子會(huì)“收縮包裹”其內(nèi)容，并且會(huì)盡可能包緊。

行內(nèi)標(biāo)簽：

CSS規(guī)則分兩部分，即選擇符和聲明。聲明又由兩部分組成，即屬性和值。聲明包含在一對(duì)花括號(hào)內(nèi)。

圖中文字：selector：選擇符；declaration：聲明；property：屬性；value：值；opening curly bracket：左花括號(hào)；closing curly bracket：右花括號(hào)。

對(duì)這個(gè)基本的結(jié)構(gòu)，有三種方法可以進(jìn)行擴(kuò)展。

第一種方法：多個(gè)聲明包含在一條規(guī)則里。

p {color:red; font-size:12px; font-weight:bold;}

這樣，一條規(guī)則就可以把段落文本設(shè)置成紅色，12像素大，粗體。

第二種方法：多個(gè)選擇符組合在一起。如果想讓h1、h2和h3的文本都變成藍(lán)色，粗體，可以這樣分別寫：

但其實(shí)，把三個(gè)選擇符組合在一起也可以，這樣就能減少重復(fù)輸入：

千萬注意每個(gè)選擇符之間要用逗號(hào)分隔（最后一個(gè)后面不用加）。

第三種方法：多條規(guī)則應(yīng)用給一個(gè)選擇符。 假設(shè)，你在寫完前面那條規(guī)則后，又想只把h3變成斜體，那可以再為h3寫一條規(guī)則：

用于選擇特定元素的選擇符又分三種。

上下文選擇符的格式如下：

標(biāo)簽1 標(biāo)簽2 {聲明}

上下文選擇符，嚴(yán)格來講（也就是CSS規(guī)范里），叫后代組合式選擇符（descendant combinator selector），就是一組以空格分隔的標(biāo)簽名。用于選擇作為指定祖先元素后代的標(biāo)簽。

article p {font-weight:bold;}

這個(gè)例子中的上下文選擇符表明，只有是article后代的p元素才會(huì)應(yīng)用后面的樣式。換句話說，上面這條規(guī)則的目標(biāo)是位于article上下文中的p元素。

css class style 顯示效果

多類選擇符

p class="specialtext featured"Here the span tag spanmay or may not/span be styled./p

.specialtext .featured {font-size:120%;}

多個(gè)類名，如這里的specialtext和featured，放在同一對(duì)引號(hào)里，用空格分隔。實(shí)際上，更準(zhǔn)確的說法，就應(yīng)該是HTML的class屬性可以有多個(gè)空格分隔的值。要選擇同時(shí)存在這兩個(gè)類名的元素，可以這樣寫：

ID與類的寫法相似，而且表示ID選擇符的#（井號(hào)）的用法，也跟表示類選擇符的.（句號(hào)）類似。

如果有一個(gè)段落像下面這樣設(shè)定了ID屬性

那么，相應(yīng)的ID選擇符就是這樣的：

#specialtext {CSS樣式聲明}

ID的用途是在頁面標(biāo)記中唯一地標(biāo)識(shí)一個(gè)特定的元素。它能夠?yàn)槲覀兙帉慍SS規(guī)則提供必要的上下文，排除無關(guān)的標(biāo)記，而只選擇該上下文中的標(biāo)簽。

相對(duì)來說，類是可以應(yīng)用給任意多個(gè)頁面中的任意多個(gè)HTML元素的公共標(biāo)識(shí)符，以便我們?yōu)檫@些元素應(yīng)用相同的CSS樣式。而且，使用類也讓為不同標(biāo)簽名的元素應(yīng)用相同的樣式成為可能。

規(guī)則一：包含ID的選擇符勝過包含類的選擇符，包含類的選擇符勝過包含標(biāo)簽名的選擇符。

規(guī)則二：如果幾個(gè)不同來源都為同一個(gè)標(biāo)簽的同一個(gè)屬性定義了樣式，行內(nèi)樣式勝過嵌入樣式，嵌入樣式勝過鏈接樣式。在鏈接的樣式表中，具有相同特指度的樣式，后聲明的勝過先聲明的。

規(guī)則三：設(shè)定的樣式勝過繼承的樣式，此時(shí)不用考慮特指度（即顯式設(shè)定優(yōu)先）。

1、塊級(jí)標(biāo)簽轉(zhuǎn)換為行內(nèi)標(biāo)簽：display:inline;

2、行內(nèi)標(biāo)簽轉(zhuǎn)換為塊級(jí)標(biāo)簽：display:block;

3、轉(zhuǎn)換為行內(nèi)塊標(biāo)簽：display：inline-block

通過對(duì)上面css的分析，我們可以初步理解class樣式的設(shè)置以及對(duì)display屬性的理解。

在線HTML格式化工具和在線CSS樣式格式化工具的工作原理是什么啊？

本質(zhì)就是根據(jù)一套設(shè)定的規(guī)則用編程語言(js、asp、php、ruby..)來判斷處理字符串

格式前：

html body/body/html

格式后：

html

body/body

/html

只說一種大致原理，具體實(shí)現(xiàn)有很多算法：

規(guī)則：根據(jù)html里是一個(gè)元素開始，/是一個(gè)元素結(jié)束來查找元素

程序讀到第一個(gè)html就去找與之對(duì)應(yīng)的/html

然后又去找html/html之間有無能配對(duì)的/，沒有的話則不處理

有子元素的話，就需要插入換行把子元素和父級(jí)分開(同時(shí)處理細(xì)節(jié)，如父子標(biāo)簽之間多余的空格、插入tab縮進(jìn)等)

然后又去找body/body里面有沒有配對(duì)的/，沒有則不處理，有的話則向前面幾步一樣循環(huán)往復(fù)的查找、處理

------------------------------------------------------

css格式化的大概規(guī)則：

body{color:red;}.myclass{font-size:12px;}#myid span{width:100px;color:yellow;}

找配對(duì)的{}，里面的玩意根據(jù);為結(jié)尾的規(guī)則換行：

{

width:100px;

color:yellow;(最后一句可以不寫這個(gè)“;”所以這種情況也要考慮)

}

加點(diǎn)tab縮進(jìn)：

{

width:100px;

color:yellow;

}

還有就是判斷一對(duì){...}外面那些字符，加入換行：

body{}

.myclass{}

#myid span{}

最后你看到的就是：

body{

color:red;

}

.myclass{

font-size:12px;

}

#myid span{

width:100px;

color:yellow;

}

具體實(shí)現(xiàn)中，上面的還有很多情況也是要考慮的，比如寫代碼的人忘了寫/html，程序找到html后找不到配對(duì)的/html，這時(shí)怎么處理？是忽略、提示錯(cuò)誤、還是另外弄套更復(fù)雜的規(guī)則去智能的補(bǔ)寫一個(gè)/html上去？反正很多細(xì)節(jié)，寫程序的人要盡量先想到可能的各類情況。

其他什么玩意格式化也是這個(gè)原理，只是查找的規(guī)則不一樣而已。

反過來，有很多壓縮js、css、html代碼的東西，是為了節(jié)約字節(jié)減少服務(wù)器壓力，把文件里面的無用空格、換行都刪除掉，就是把這些步驟反過來。

另外處理字符串，你可以百度下：正則表達(dá)式

文章名稱：css文本樣式的原理,css樣式的語法
文章URL：http://chinadenli.net/article47/dsijhhj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)頁設(shè)計(jì)公司、App開發(fā)、網(wǎng)站維護(hù)、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)