CSS字體與文本樣式詳解

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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了稷山免費(fèi)建站歡迎大家使用！

1、css中的長度與顏色

2、css中的文字屬性

3、css中的文本屬性

1、文字樣式屬性

font-family 字體屬性

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

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

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

font-size 文字大小

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

語法：font-size:絕對單單位，相相對單位

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 屬性簡寫

語法：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 首行縮進(jìn)

3、文本樣式屬性

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

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

綜合實操案例

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

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

網(wǎng)頁設(shè)計中的CSS是什么意思？？？

CSS是Cascading Style Sheets(層疊樣式表)的縮寫。

是一種對web文檔添加樣式的簡單機(jī)制，屬于表現(xiàn)層的布局語言。

1.基本語法規(guī)范

分析一個典型CSS的語句：

p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

?其中"p"我們稱為"選擇器"(selectors)，指明我們要給"p"定義樣式；

?樣式聲明寫在一對大括號"{}"中；

?COLOR和BACKGROUND稱為"屬性"(property)，不同屬性之間用分號";"分隔；

?"#FF0000"和"#FFFFFF"是屬性的值(value)。

2.顏色值

顏色值可以用RGB值寫，例如：color : rgb(255,0,0)，也可以用十六進(jìn)制寫，就象上面例子color:#FF0000。如果十六進(jìn)制值是成對重復(fù)的可以簡寫，效果一樣。例如:#FF0000可以寫成#F00。但如果不重復(fù)就不可以簡寫，例如#FC1A1B必須寫滿六位。

3.定義字體

web標(biāo)準(zhǔn)推薦如下字體定義方法：

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }

字體按照所列出的順序選用。如果用戶的計算機(jī)含有Lucida Grande字體，文檔將被指定為Lucida Grande。沒有的話，就被指定為Verdana字體，如果也沒有Verdana，就指定為Lucida字體，依此類推，；

?Lucida Grande字體適合Mac OS X；

?Verdana字體適合所有的Windows系統(tǒng)；

?Lucida適合UNIX用戶

?"宋體"適合中文簡體用戶;

如果所列出的字體都不能用，則默認(rèn)的sans-serif字體能保證調(diào)用;

4.群選擇器

當(dāng)幾個元素樣式屬性一樣時，可以共同調(diào)用一個聲明，元素之間用逗號分隔，：

p, td, li { font-size : 12px ; }

5.派生選擇器

可以使用派生選擇器給一個元素里的子元素定義樣式，例如這樣：

li strong { font-style : italic; font-weight : normal；}

就是給li下面的子元素strong定義一個斜體不加粗的樣式。

6.id選擇器

用CSS布局主要用層"div"來實現(xiàn)，而div的樣式通過"id選擇器"來定義。例如我們首先定義一個層

div id="menubar"/div

然后在樣式表里這樣定義：

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

其中"menubar"是你自己定義的id名稱。注意在前面加"#"號。

id選擇器也同樣支持派生，例如：

#menubar p { text-align : right; margin-top : 10px; }

這個方法主要用來定義層和那些比較復(fù)雜，有多個派生的元素。

6.類別選擇器

在CSS里用一個點(diǎn)開頭表示類別選擇器定義，例如：

.14px {color : #f60 ;font-size:14px ;}

在頁面中，用class="類別名"的方法調(diào)用：

span class="14px"14px大小的字體/span

這個方法比較簡單靈活，可以隨時根據(jù)頁面需要新建和刪除。

7.定義鏈接的樣式

CSS中用四個偽類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}

a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}

a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}

a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

以上語句分別定義了"鏈接、已訪問過的鏈接、鼠標(biāo)停在上方時、點(diǎn)下鼠標(biāo)時"的樣式。注意，必須按以上順序?qū)懀駝t顯示可能和你預(yù)想的不一樣。記住它們的順序是“LVHA”。

css中各個樣式的意義

:active

設(shè)置對象在被用戶激活(在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件)時的樣式。

在CSS1中此偽類僅可用于 a 對象。對于無 href 屬性(特性)的 a 對象，此偽類不發(fā)生作用。

在CSS2中此偽類可以應(yīng)用于任何對象。

并且 :active 可以和 :link 以及 :visited 狀態(tài)同時發(fā)生。 a:active { font-size: 14pt; text-decoration: underline; color: blue; }

:hover

設(shè)置對象在其鼠標(biāo)懸停時的樣式。

在CSS1中此偽類僅可用于 a 對象。對于無 href 屬性(特性)的 a 對象，此偽類不發(fā)生作用。

在CSS2中此偽類可以應(yīng)用于任何對象。

a:hover { font-size: 14pt; text-decoration: underline; color: blue; }

a:hover span{ color:red; }

CSS是Cascading Style Sheets(層疊樣式表)的縮寫。是一種對web文檔添加樣式的簡單機(jī)制，屬于表現(xiàn)層的布局語言。

1.基本語法規(guī)范

分析一個典型CSS的語句：

p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

其中"p"我們稱為"選擇器"(selectors)，指明我們要給"p"定義樣式；

樣式聲明寫在一對大括號"{}"中；

COLOR和BACKGROUND稱為"屬性"(property)，不同屬性之間用分號";"分隔；

"#FF0000"和"#FFFFFF"是屬性的值(value)。

2.顏色值

顏色值可以用RGB值寫，例如：color : rgb(255,0,0)，也可以用十六進(jìn)制寫，就象上面例子color:#FF0000。如果十六進(jìn)制值是成對重復(fù)的可以簡寫，效果一樣。例如:#FF0000可以寫成#F00。但如果不重復(fù)就不可以簡寫，例如#FC1A1B必須寫滿六位。

3.定義字體

web標(biāo)準(zhǔn)推薦如下字體定義方法：

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }

字體按照所列出的順序選用。如果用戶的計算機(jī)含有Lucida Grande字體，文檔將被指定為Lucida Grande。沒有的話，就被指定為Verdana字體，如果也沒有Verdana，就指定為Lucida字體，依此類推，；

Lucida Grande字體適合Mac OS X；

Verdana字體適合所有的Windows系統(tǒng)；

Lucida適合UNIX用戶

"宋體"適合中文簡體用戶;

如果所列出的字體都不能用，則默認(rèn)的sans-serif字體能保證調(diào)用;

4.群選擇器

當(dāng)幾個元素樣式屬性一樣時，可以共同調(diào)用一個聲明，元素之間用逗號分隔，： p, td, li { font-size : 12px ; }

5.派生選擇器

可以使用派生選擇器給一個元素里的子元素定義樣式，例如這樣：

li strong { font-style : italic; font-weight : normal；}

就是給li下面的子元素strong定義一個斜體不加粗的樣式。

6.id選擇器

用CSS布局主要用層"div"來實現(xiàn)，而div的樣式通過"id選擇器"來定義。例如我們首先定義一個層

div id="menubar"/div

然后在樣式表里這樣定義：

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

其中"menubar"是你自己定義的id名稱。注意在前面加"#"號。

id選擇器也同樣支持派生，例如：

#menubar p { text-align : right; margin-top : 10px; }

這個方法主要用來定義層和那些比較復(fù)雜，有多個派生的元素。

6.類別選擇器

在CSS里用一個點(diǎn)開頭表示類別選擇器定義，例如：

.14px {color : #f60 ;font-size:14px ;}

在頁面中，用class="類別名"的方法調(diào)用：

span class="14px"14px大小的字體/span

這個方法比較簡單靈活，可以隨時根據(jù)頁面需要新建和刪除。

7.定義鏈接的樣式

CSS中用四個偽類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}

a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}

a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}

a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

以上語句分別定義了"鏈接、已訪問過的鏈接、鼠標(biāo)停在上方時、點(diǎn)下鼠標(biāo)時"的樣式。注意，必須按以上順序?qū)懀駝t顯示可能和你預(yù)想的不一樣。記住它們的順序是“LVHA”。

CSS代碼是什么

CSS就是一種叫做樣式表（stylesheet）的技術(shù)。也有的人稱之為層疊樣式表（Cascading

Stylesheet）。

在主頁制作時采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。

只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。

它的作用可以達(dá)到：

（1）在幾乎所有的瀏覽器上都可以使用。

（2）以前一些非得通過圖片轉(zhuǎn)換實現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實現(xiàn)，從而更快地下載頁面。

（3）使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。

（4）你可以輕松地控制頁面的布局

。

（5）你可以將許多網(wǎng)頁的風(fēng)格格式同時更新，不用再一頁一頁地更新了。你可以將站點(diǎn)上所有的網(wǎng)頁風(fēng)格都使用一個CSS文件進(jìn)行控制，只要修改這個CSS文件中相應(yīng)的行，那么整個站點(diǎn)的所有頁面都會隨之發(fā)生變動。

10.css盒子模型-邊框常用寫法及簡寫

為元素設(shè)置邊框

要為一個元素設(shè)置邊框必須指定三個樣式

border-width:邊框的寬度

border-color:邊框顏色

border-style:邊框的樣式

和寬度一樣，color也提供四個方向的樣式，可以分別指定顏色

可選值：

style也可以分別指定四個邊的邊框樣式，規(guī)則和width一致，

同時它也提供border-xxx-style四個樣式，來分別設(shè)置四個邊

示例:

邊框的簡寫樣式，通過它可以同時設(shè)置四個邊框的樣式，寬度，顏色

而且沒有任何的順序要求

border一指定就是同時指定四個邊不能分別指定

border-top border-right border-bottom border-left

可以單獨(dú)設(shè)置四個邊的樣式，規(guī)則和border一樣，只不過它只對一個邊生效

文章名稱：css樣式簡寫,css縮寫的全稱
網(wǎng)站鏈接：http://chinadenli.net/article40/dsgpgeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、微信公眾號、品牌網(wǎng)站制作、網(wǎng)頁設(shè)計公司、小程序開發(fā)、域名注冊

廣告

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