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

CSS樣式詳解

淮安網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,淮安網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為淮安千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的淮安做網(wǎng)站的公司定做！

字體樣式(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：文字顯示為最小(絕對(duì))；

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

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

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

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

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

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

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

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

長度：數(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：從大到小逐步縮小；

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：繼承父級(jí)樣式。

陰影有3個(gè)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：詞間距的大?。?/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)整長度；

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

embed：打開流入的文字，在對(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：無背景圖片(默認(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樣式表存在形式有哪些,應(yīng)用的側(cè)重點(diǎn)分別是什么？

一共有三種 形式存在

第一種為標(biāo)簽樣式，taglib為標(biāo)簽名，后面{}里面加屬性,這種樣式對(duì)頁面內(nèi)所有的標(biāo)簽名為taglibname的標(biāo)簽起作用。

第二種為css類樣式，需要在HTML開始標(biāo)簽 后綴 class="name"，name即類名，這類標(biāo)簽對(duì)HTML內(nèi)所有后綴同樣name的標(biāo)簽起作用 class="name" 可以設(shè)在多個(gè)開始標(biāo)簽后，表示這些標(biāo)簽具有同一類樣式。

第三種為cssID樣式，需要在HTML開始標(biāo)簽后綴 id="id",需要注意的是，ID樣式的話，每一個(gè)name都是獨(dú)立且不重復(fù)的，具有唯一性。

希望我的回答對(duì)你有幫助

HTML + CSS 寶典（五. CSS基礎(chǔ)----更多的樣式）

使用cursor設(shè)置

也可以設(shè)置圖片cursor:url()，圖片格式必須為.ico或.cur。

可以用visibility來控制圖標(biāo)或字體的閃爍

img元素是屬于HTML的概念

背景圖屬于css概念

所以img和背景圖的使用主要取決于內(nèi)容

默認(rèn)情況下，背景圖會(huì)在橫坐標(biāo)和縱坐標(biāo)中進(jìn)行重復(fù)

預(yù)設(shè)值：contain、cover，類似于object-fit

數(shù)值或百分比

設(shè)置背景圖的位置

預(yù)設(shè)值：left、bottom、right、top、bottom

數(shù)值或百分比：數(shù)字可以是負(fù)數(shù)

雪碧圖（精靈圖）（spirit）: 需要小圖標(biāo)合并成一張大圖片，大圖片就是雪碧圖

通常用它控制背景圖是否固定。

fixed: 此時(shí)背景圖是相對(duì)于視口的

CSS3 max/min-content及fit-content等width值理解

1. CSS2.1的尺寸體系

在CSS2.1的世界中，常見的尺寸分為這幾類：

2.1 充分利用可用空間。例如，一些div元素默認(rèn)寬度100%父元素，這種充分利用可用空間的行為就稱為“fill-available”。

2.2 收縮與包裹。典型代表就是浮動(dòng)，絕對(duì)定位以及inline-block，英文稱為“shrink-to-fit”，直譯為“收縮到合適”，這種直譯往往都是不準(zhǔn)確的，這種行為表現(xiàn)確實(shí)很難描述，有些只可意會(huì)不能言傳的感覺，而我自己一直以“包裹性”作為理解。在CSS3中有個(gè)專有的關(guān)鍵名稱，fit-content

2.3 收縮到最小。這個(gè)基本上就出現(xiàn)在table-layout為auto的表格中，想必有經(jīng)驗(yàn)的小伙伴一定見過下面這樣一柱擎天的盛況的吧！

大家空間都不夠的時(shí)候，文字能斷的就斷，中文是隨便斷的，英文單詞不能斷。于是乎，第一列被無情地每個(gè)字都斷掉，形成一柱擎天。這種行為稱之為“preferred minimum width”或者“minimum content width”，也就是本文的重點(diǎn)角色之一min-content，換了一個(gè)更加規(guī)范好聽的名字了。

2.4 超出容器限制 上面1~3情況，除非有明確的width相關(guān)設(shè)置，否則尺寸都不會(huì)主動(dòng)超過容器寬度的，但是，存在一些特殊情況，例如，連續(xù)的英文數(shù)字，好長好長；或者內(nèi)聯(lián)元素被設(shè)置了white-space:nowrap，則表現(xiàn)為一江春水向東流

例如下面：

max-content的表現(xiàn)與之有些類似，具有收縮特性，同時(shí)最大內(nèi)容寬度

2. 理解width:fill-available

width:fill-available比較好理解，比方說，我們?cè)陧撁嬷腥右粋€(gè)沒有其他樣式的div元素，則，此時(shí)，該div元素的width表現(xiàn)就是fill-available，自動(dòng)填滿剩余的空間。也就是我們平常所說的盒模型的margin,border,padding的尺寸填充。

出現(xiàn)fill-available關(guān)鍵字值的價(jià)值在于，我們可以讓元素的100%自動(dòng)填充特性不僅僅在block水平元素上，其他元素，例如，我們一直認(rèn)為的包裹收縮的inline-block元素上：

此時(shí)，元素兼具了塊狀元素的自動(dòng)填充特性以及內(nèi)聯(lián)元素的定位對(duì)齊等特性(vertical-align/height/line-height)。于是，（例如）我們就可以直接使用line-height讓一個(gè)塊狀表現(xiàn)的元素垂直居中

3. 理解width:max-content

max-content的行為表現(xiàn)可以這么理解，假設(shè)我們的容器有足夠的寬度，足夠的空間，此時(shí)，所占據(jù)的最大寬度是就是max-content所表示的尺寸。

會(huì)發(fā)現(xiàn)，width:max-content表現(xiàn)得好像設(shè)置了white-space:nowrap一樣，文字一馬平川下去，元素的寬度也變成了這些文字一行顯示的寬度！為什么會(huì)這么表現(xiàn)呢？定義就是這樣的，對(duì)吧，我們對(duì)照下， 首先，假設(shè)我們的容器有足夠的空間，你想呀，容器足夠空間，那下面的描述文字肯定會(huì)從左到右排列一行顯示了，此時(shí)，上面的圖片和下面的文字哪個(gè)內(nèi)容寬度大？，自然是文字啦，所謂max-content就是width值采用寬度大的那個(gè)內(nèi)容的寬度，也就是這里的文字的長度了

4. 理解width:min-content

min-content寬度表示的并不是內(nèi)部哪個(gè)寬度小就是哪個(gè)寬度，而是，采用內(nèi)部元素最小寬度值最大的那個(gè)元素的寬度作為最終容器的寬度。

首先，我們要明白這里的“最小寬度值”是什么意思。對(duì)于替換元素，例如圖片的最小寬度值就是圖片呈現(xiàn)的寬度，對(duì)于文本元素，如果全部是中文，則最小寬度值就是一個(gè)中文的寬度值；如果包含英文，因?yàn)槟J(rèn)英文單詞不換行，所以，最小寬度可能就是里面最長的英文單詞的寬度。So，大家明白的說

同樣的是和display:inline-block做比較，display:inline-block雖然也具有收縮特性，但寬度隨最大長度長的那一個(gè)（同時(shí)不超過可用寬度）。而width:min-content的最終寬度是圖片和文字最小寬度值里面較大的那一個(gè)

5. 理解width:fit-content

width:fit-content也是應(yīng)該比較好理解的，“shrink-to-fit”表現(xiàn)，換句話說，和CSS2.1中的float, absolute, inline-block的尺寸收縮表現(xiàn)是一樣的

OK，然后，有小伙伴會(huì)疑問，既然跟很多CSS聲明有一樣的表現(xiàn)，那為什么還要再弄個(gè)新東西呢？

就拿水平居中效果舉例，首先浮動(dòng)肯定不行，因?yàn)橹挥凶蟾?dòng)和右浮動(dòng)；絕對(duì)定位壓根不占據(jù)空間，普通流中根本無法應(yīng)用，而inline-block需要父級(jí)使用text-align:center，而本身可能還需要text-align:left略煩。

而width:fit-content可以沒有這些煩惱，因?yàn)?，width:fit-content可以實(shí)現(xiàn)元素收縮效果的同時(shí)，保持原本的元素block水平狀態(tài)，于是，就可以直接使用margin:auto實(shí)現(xiàn)元素向內(nèi)自適應(yīng)同時(shí)的居中效果了。

css樣式怎么寫

css樣式是HTML的一個(gè)補(bǔ)充，簡單的css使用樣式如下:

html

body

div?id=div/div

/body

style?type="text/css"

width:300px;//設(shè)置div的寬度300像素

height:500px;//設(shè)置div高度500像素

background-color:red;//設(shè)置div的背景顏色為紅色

/style

/html

css代碼位于style之間，詳細(xì)的css代碼解釋見代碼注釋。

CSS樣式分為哪三種？

CSS樣式分為：內(nèi)聯(lián)式css樣式、嵌入式css樣式、外部式css樣式。

對(duì)CSS三種樣式定義及其實(shí)例：

內(nèi)聯(lián)式css樣式。

內(nèi)聯(lián)式css樣式表就是把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中，如下面代碼：

1? ?p?style="color:red"這里文字是紅色。/p? ?

css樣式代碼要寫在style=""雙引號(hào)中，如果有多條css樣式代碼設(shè)置可以寫在一起，中間用分號(hào)隔開（英文狀態(tài)下;）。

嵌入式css樣式。

嵌入式css樣式，就是可以把css樣式代碼寫在標(biāo)簽之間。如下面代碼實(shí)現(xiàn)把三個(gè)標(biāo)簽中的文字設(shè)置為紅色：

1? ?style?type="text/css"span{color:red;}/style? ?

嵌入式css樣式必須寫在之間，并且一般情況下嵌入式css樣式寫在之間。

外部式css樣式。

外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中，這個(gè)css樣式文件以“.css”為擴(kuò)展名（也可以為調(diào)用其他網(wǎng)站CSS）。

1? ?link?href="style.css"?rel="stylesheet"?type="text/css"?/? ?

注意事項(xiàng)：?1、css樣式文件名稱以有意義的英文字母命名，如 main.css。?2、rel=”stylesheet” type=”text/css” 是固定寫法不可修改。?3、標(biāo)簽位置一般寫在標(biāo)簽之內(nèi)。

掌握好三種CSS三種樣式使用方法在Web開發(fā)中將節(jié)省很多時(shí)間。

當(dāng)前標(biāo)題：cssfit樣式的簡單介紹
分享網(wǎng)址：http://sd-ha.com/article14/dsihdge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、面包屑導(dǎo)航、ChatGPT、App開發(fā)、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站營銷

廣告

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