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

CSS樣式詳解

創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為大余等服務(wù)建站，大余等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為大余企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

字體樣式(font)

字體

font-family:字體名

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

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

字體系列

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

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

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

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

文字大小

font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | 長度 | 百分比

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

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

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

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

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

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

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

larger：增大(相對)；

smaller：減小(相對)；

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

百分比：相對字體大小。

文字大小調(diào)整

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

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個級別，數(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：從大到小逐步縮小；

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

expanded：拉伸文字；

extra-expanded：拉伸得很大；

ultra-expanded：拉伸得特別大。

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

修飾

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

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

underline：下劃線；

overline：上劃線；

line-through：貫穿線；

blink：閃爍。

陰影

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

none：不設(shè)置；

color：陰影的顏色；

length：長度值；

inherit：繼承父級樣式。

陰影有3個length要進(jìn)行設(shè)置，分別是水平方向的距離、垂直方向的距離和模糊半徑的長度(不能為負(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ǔ)上再做增加來設(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：詞間距的大小；

inherit：繼承。

文本樣式

文字縮進(jìn)

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

length：縮進(jìn)量；

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

inherit：繼承。

水平對齊

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

left：左對齊；

right：右對齊；

center：居中對齊；

justify：兩端對齊；

string：字符對齊，多用于表格里；

inherit：繼承。

垂直對齊

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

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

sub：下標(biāo)；

super：上標(biāo)；

top：頂端對齊；

text-top：文本行頂端對齊；

middle：中間對齊；

bottom：底端對齊；

text-bottom：文本行底端對齊；

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

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

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)值，不打開流入的文字，對其文字不重排；

embed：打開流入的文字，在對象內(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)值，瀏覽器自動忽略多余的空格，連續(xù)多個空格只顯示一個；

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

nowrap：不自動換行；

inherit：繼承。

詞間換行

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

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

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

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

首字樣式

使用偽元素fitst-letter，對于英文則代表第一個字母，對于中文則代表第一個文字。

首行樣式

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

顏色與背景樣式

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

color: 顏色 | inherit

顏色：使用指定顏色值；

inherit：繼承。

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

background: transparent | 顏色 | inherit

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

顏色：使用指定顏色值；

inherit：繼承。

背景圖片

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

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

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

inherit：繼承；

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

background-attachment: scroll | fixed | inherit

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

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

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è)置兩個值，分別是相對于元素左上角的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樣式設(shè)計整個網(wǎng)站字體

網(wǎng)站字體分為兩種類型，一種是默認(rèn)字體，一種是外部字體。

默認(rèn)字體

如果整個網(wǎng)頁都要弄成宋體的話就將body定義為宋體即可，即在樣式表中加入：body{font-family:"宋體"}，如果只要一部分為宋體，那將那一部分的層的字體樣式定義為宋體就行了。

默認(rèn)的字體有宋體、楷體、黑體、新宋體、仿宋等。

外部字體

樣式表中嵌入外部字體，用@font-face語法。

@font-face{font-family:name;src:url;sRules;}

name：為自定義字體名稱

url：使用絕對或相對地址指定OpenType字體

sRules：樣式表定義

如：

@font-face{

font-family:YH;

src:url();

}

然后再設(shè)置需要變換字體的樣式即可，如：body{font-family:YH}，字體名稱是上述所說自定義好的名稱。

css表達(dá)字體格式

因為你提到了點擊，所以我猜想你那個文字應(yīng)該是A標(biāo)簽。所以對A標(biāo)簽做了處理

代碼如下：

html

head

title?New?Document?/title

style?type="text/css"

a{????//默認(rèn)格式

font-size:10px;????//字體大小

font-weight:bold;????//加粗

color:#FF3030;????//未點擊過的顏色

text-decoration:none;????//去下劃線

}

a:hover{????//鼠標(biāo)移動上去的格式

color:#A020F0;????//移動上去時的顏色

text-decoration:underline;????//移動上去時顯示下劃線

}

a:visited{????//訪問過的樣式

color:#A1A1A1;????//訪問過的顏色。

}

/style

/head

body

a?href="#"123/a

/body

/html

css設(shè)置默認(rèn)字體樣式 字體大小 行距多少為好

字體樣式 中文-微軟雅黑，英文-arial

字體大小 12px-14px 標(biāo)題16px-20px

行距 1.5-1.75

顏色 #333

html.css樣式字體是什么

基本語法結(jié)構(gòu)：

.divcss5{font-size:12px;}

設(shè)置了文字大小為12px像素

Font-size+字體大小數(shù)值+單位

單詞：font-size

語法：font-size : absolute-size | relative-size | length

取值：xx-small | x-small | small | medium | large | x-large | xx-large

xx-small:最小

x-small:較小

small:小

medium:正常(默認(rèn)值)，根據(jù)字體進(jìn)行調(diào)整

large:大

x-large:較大

xx-large:最大

也可取具體長度單位值

本文題目：解析css默認(rèn)字體樣式,解析css默認(rèn)字體樣式在哪
瀏覽地址：http://www.yijiale78.com/article0/dschiio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、用戶體驗、建站公司、動態(tài)網(wǎng)站、企業(yè)建站、網(wǎng)站建設(shè)

廣告

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