去哪兒網(wǎng)CSS樣式詳解

CSS樣式詳解

創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),林周網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:林周等地區(qū)。林周做網(wǎng)站價(jià)格咨詢:18980820575

字體樣式(font)

字體

font-family:字體名

font-family:字體名1，字體名2...

font-family: fantasy | monospace | ncursive | serif | sans-serif

字體系列

cursive：模擬手寫的字體，通常這類字體的曲線比較明顯。

monospace：無(wú)比例的字體。通常用于模擬打字機(jī)中打出來(lái)的文字，也就是等寬字體。

serif：有比例有襯線的字體，這種字體中的所有字母都根據(jù)不同需要占有不同的寬度，有襯線是指在字母上做裝飾的細(xì)線。

sans-serif：有比例無(wú)襯線的字體，這種字體中的所有字母都根據(jù)不同需要占有不同的寬度。

文字大小

font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | 長(zhǎng)度 | 百分比

xx-small：文字顯示為最小(絕對(duì))；

x-small：文字顯示為較小(絕對(duì))；

small：文字顯示為小(絕對(duì))；

medium：默認(rèn)值(絕對(duì))

large：文字顯示為大(絕對(duì))；

x-large：文字顯示為較大(絕對(duì))；

xx-large：文字顯示為最大(絕對(duì))；

larger：增大(相對(duì))；

smaller：減小(相對(duì))；

長(zhǎng)度：數(shù)值加上單位；

百分比：相對(duì)字體大小。

文字大小調(diào)整

在英文方面，一段文字看上去是否舒服，很大程度上取決于當(dāng)前字體的高度與這種字體的小寫x字母高度的比值，這個(gè)比值稱為字體的面值。

font-size-adjust: none | number

none：不改變文字大??；

number：強(qiáng)制文字使用面值。

粗體

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

normal：默認(rèn)值(400)，正常粗細(xì)；

bold：加粗(700)；

bolder：比normal粗，比bold細(xì)；

lighter：不比normal粗；

x00：分9個(gè)級(jí)別，數(shù)值越大越粗。

斜體

font-style: normal | italic | bolique

normal：默認(rèn)值，代表正常的字體；

italic：斜體；

bolique：傾斜的字體。

文字變形－小型大寫字母

fontvariant: normal | small-caps

normal：默認(rèn)值；

small-caps：小型大寫字母

小型大寫字母指將字母更改為大寫字母，并且該大寫字母比通常的大寫字母要小。

文字變形－文字拉伸

font-stretch: normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

normal：默認(rèn)值，不拉伸變形；

narrower：水平方向變窄；

wider：水平方向變寬；

condensed：壓縮文字；

extra-condensed：壓縮得很??；

ultra-condensed：壓縮得特別??；

semi-condensed：從大到小逐步縮?。?/p>

semi-expanded：從小到大逐步變大；

expanded：拉伸文字；

extra-expanded：拉伸得很大；

ultra-expanded：拉伸得特別大。

PS：font-stretch是CSS2中所規(guī)定的屬性，目前還沒(méi)有瀏覽器可以支持該屬性。

修飾

text-decoration: none | underline | overline | line-through | blink

none：默認(rèn)值，無(wú)修飾樣式；

underline：下劃線；

overline：上劃線；

line-through：貫穿線；

blink：閃爍。

陰影

text-shadow: none | color | length | length | length | inherit

none：不設(shè)置；

color：陰影的顏色；

length：長(zhǎng)度值；

inherit：繼承父級(jí)樣式。

陰影有3個(gè)length要進(jìn)行設(shè)置，分別是水平方向的距離、垂直方向的距離和模糊半徑的長(zhǎng)度(不能為負(fù)值)。

大小寫轉(zhuǎn)換

text-transform: capitalize | uppercase | lowercase | none | inherit

capitalize：首字母大寫；

uppercase：變大寫；

lowercase：變小寫；

none：不改變；

inherit：繼承。

間距－行間距

行間距：文本行與行之間的距離

line-height: normal | number | length | 百分?jǐn)?shù) | inherit

normal：默認(rèn)值；

number：在當(dāng)前文字大小的基礎(chǔ)上再做增加來(lái)設(shè)置行高(不能為負(fù)值)；

length：指定行高數(shù)(不能為負(fù)值)；

百分?jǐn)?shù)：用百分?jǐn)?shù)表示行高；

inherit：繼承。

行高是指上一行文字的基線與下一行文字之間的基線之間的距離，行高等于行間距加上文字高度。

間距－字間距

letter-spacing: normal | length | inherit

normal：默認(rèn)值；

length：字間距的大小；

inherit：繼承。

詞間距

word-spacing: normal | length | inherit

normal：默認(rèn)值；

length：詞間距的大?。?/p>

inherit：繼承。

文本樣式

文字縮進(jìn)

text-indent: length | 百分?jǐn)?shù) | inherit

length：縮進(jìn)量；

百分?jǐn)?shù)：父級(jí)元素的百分比；

inherit：繼承。

水平對(duì)齊

text-align: left | right | center | justify | string | inherit

left：左對(duì)齊；

right：右對(duì)齊；

center：居中對(duì)齊；

justify：兩端對(duì)齊；

string：字符對(duì)齊，多用于表格里；

inherit：繼承。

垂直對(duì)齊

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分?jǐn)?shù) | length | inherit

baseline：默認(rèn)值，基線對(duì)齊；

sub：下標(biāo)；

super：上標(biāo)；

top：頂端對(duì)齊；

text-top：文本行頂端對(duì)齊；

middle：中間對(duì)齊；

bottom：底端對(duì)齊；

text-bottom：文本行底端對(duì)齊；

百分?jǐn)?shù)：相對(duì)于父級(jí)元素的基線的百分比；

length：調(diào)整長(zhǎng)度；

inherit：繼承。

文字方向－文本流入方向

derection: ltr | rtl | inherit

ltr：left to right，默認(rèn)值，從左到右流入；

rtl：right to left，從右到左流入；

inherit：繼承。

文字方向－文字方向

unicode-bidi: normal | embed | bidi-override | inherit

normal：默認(rèn)值，不打開(kāi)流入的文字，對(duì)其文字不重排；

embed：打開(kāi)流入的文字，在對(duì)象內(nèi)部進(jìn)行隱式重排；

bidi-override：嚴(yán)格按流入方向重排文字；

inherit：繼承。

文字方向－豎排文字

layout-flow: horizontal | vertical-ideographic

horizontal：書寫方向從左到右，由上而下；

vertical-ideographic：書寫方向從上至下，由左至右。

空格處理

white-space: normal | pre | nowrap | inherit

normal：默認(rèn)值，瀏覽器自動(dòng)忽略多余的空格，連續(xù)多個(gè)空格只顯示一個(gè)；

pre：類似于pre元素，瀏覽器不忽略源代碼的空格；

nowrap：不自動(dòng)換行；

inherit：繼承。

詞間換行

word-break: normal | break-all | keep-all

normal：默認(rèn)值，對(duì)于英文則以單詞為單位換行，對(duì)于中文則以字為單位換行；

break-all：英文以字母為單位換行；

keep-all：對(duì)于英文以單詞為單位換行，對(duì)于中文則以標(biāo)點(diǎn)或空格為單位換行。

首字樣式

使用偽元素fitst-letter，對(duì)于英文則代表第一個(gè)字母，對(duì)于中文則代表第一個(gè)文字。

首行樣式

使用偽元素first-line，設(shè)置第一行文字的樣式。

顏色與背景樣式

文本顏色：指文本的顏色。

color: 顏色 | inherit

顏色：使用指定顏色值；

inherit：繼承。

背景色：指元素后面背景的顏色。

background: transparent | 顏色 | inherit

transparent：設(shè)置透明，默認(rèn)值；

顏色：使用指定顏色值；

inherit：繼承。

背景圖片

background-image: none | url(路徑) | inherit

none：無(wú)背景圖片(默認(rèn)值)；

url(路徑)：圖片的URL地址；

inherit：繼承；

背景附件：指背景圖片如何依附元素。

background-attachment: scroll | fixed | inherit

scroll：滾動(dòng)，隨內(nèi)容滾動(dòng)，默認(rèn)值；

fixed：固定，不隨內(nèi)容滾動(dòng)；

inherit：繼承。

背景重復(fù)

background-repeat: repeat | no-repeat | repeat-x | repeat-y | inherit

repeat：重復(fù)，平鋪圖片，默認(rèn)值；

no-repeat：不重復(fù)，不平鋪圖片；

repeat-x：水平方向重復(fù)；

repeat-y：垂直方向重復(fù)；

inherit：繼承。

背景定位：背景圖片的定位，要設(shè)置兩個(gè)值，分別是相對(duì)于元素左上角的x軸和y軸，默認(rèn)是0px。

background-position: top | center | bottom | left | right | 數(shù)值 | 百分?jǐn)?shù) | inherit

top：頂部；

center：中部；

bottom：底部；

left：左側(cè)；

right：右側(cè)；

數(shù)值：用數(shù)值指定圖片的位置；

百分?jǐn)?shù)：用百分?jǐn)?shù)表示位置；

inherit：繼承；

背景綜合應(yīng)用(可節(jié)省代碼)

background: background-color | background-image | background-repeat | background-attachmen | background-position

background-color：顏色；

background-image：圖片；

background-repeat：重復(fù)方式；

background-attachmen：附件；

background-position：定位。

css樣式表中字體加粗的屬性是什么?

css樣式表中字體加粗的屬性是：“font-weight”。

語(yǔ)法：font-weight：normal | bold | bolder | lighter | integer

normal：正常的字體。相當(dāng)于數(shù)字值400

bold：粗體。相當(dāng)于數(shù)字值700。

bolder：定義比繼承值更重的值（特粗體）

lighter：定義比繼承值更輕的值（細(xì)體）

integer：用數(shù)字表示文本字體粗細(xì)。取值范圍：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

設(shè)置或檢索對(duì)象中的文本字體的粗細(xì)。作用由客戶端系統(tǒng)安裝的字體的特定字體變量映射決定。系統(tǒng)選擇最近的匹配。也就是說(shuō)，用戶可能看不到不同值之間的差異。

擴(kuò)展資料

CSS font 屬性

在一個(gè)聲明中設(shè)置所有字體屬性：

p.ex2

{ font:italic bold 12px/20px arial,sans-serif; }

“font”簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有字體屬性。

這個(gè)簡(jiǎn)寫屬性用于一次設(shè)置元素字體的兩個(gè)或更多方面。使用 icon 等關(guān)鍵字可以適當(dāng)?shù)卦O(shè)置元素的字體，使之與用戶計(jì)算機(jī)環(huán)境中的某個(gè)方面一致。注意，如果沒(méi)有使用這些關(guān)鍵詞，至少要指定字體大小和字體系列。

可以按順序設(shè)置如下屬性：

font-style

font-variant

font-weight

font-size/line-height

font-family

可以不設(shè)置其中的某個(gè)值，比如 font:100% verdana; 也是允許的。未設(shè)置的屬性會(huì)使用其默認(rèn)值。

參考資料：百度百科-CSS樣式

表示文字粗細(xì)的css屬性是

html直接對(duì)對(duì)象加粗的標(biāo)簽如下：

b/b或strong/strong兩者效果相同。

還有一種是在css文字樣式中對(duì)文字進(jìn)行bai加粗（font-weight參數(shù)）：

font-weight參數(shù)：

normal : 正常的字體。相當(dāng)于number為400。聲明此值將取消之前任何設(shè)置

bold : 粗體。相當(dāng)于number為700。也相當(dāng)于b對(duì)象的作用

bolder : IE5+　特粗體

lighter : IE5+　細(xì)體

number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

css里面這句代碼：求解釋 font: normal 26px/38px "微軟雅黑";

這個(gè)是css的簡(jiǎn)寫形式，意思就是說(shuō)font:font-style font-size/line-height font-family;明白了嗎？

要是分開(kāi)寫就是：

font-style:normal;

font-size:26px;

line-height:38px;

font-family:"微軟雅黑";

希望對(duì)你有幫助！

文章名稱：css樣式normal,CSS樣式中選擇器嚴(yán)格區(qū)分大小寫正確嗎
文章來(lái)源：http://sd-ha.com/article6/dssgoig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)頁(yè)設(shè)計(jì)公司、全網(wǎng)營(yíng)銷推廣、移動(dòng)網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、微信公眾號(hào)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)