1.定位

如果你想控制某個(gè)元素在我們網(wǎng)站上的位置，定位是實(shí)現(xiàn)這個(gè)目標(biāo)的關(guān)鍵。如果你認(rèn)為你的瀏覽器是一個(gè)大的包圍盒，定位允許你精確地控制那個(gè)盒子里的元素會停留在哪里。使用頂部、右、底部和左側(cè)，并帶有一個(gè)像素值來控制元素停留的位置。

上面的CSS設(shè)置了一個(gè)元素的位置，從瀏覽器的頂部和右邊緣保持20px。您還可以在div中使用定位。

2.選擇器

允許您選擇特定選擇器的所有元素。例如，如果您使用*p，然后添加CSS樣式，那么它將對文檔中的所有元素執(zhí)行標(biāo)記。這使得你可以很容易地將你的網(wǎng)站的各個(gè)部分作為目標(biāo)。

3.覆蓋所有的風(fēng)格

使用時(shí)需要謹(jǐn)慎，如果您想要為特定的元素覆蓋另一個(gè)CSS樣式，請使用!在css樣式之后很重要。如想要在一個(gè)網(wǎng)站的某個(gè)特定區(qū)域的H2標(biāo)題為紅色而不是藍(lán)色，將使用以下CSS:

4.定心

定心是很棘手的，因?yàn)樗Q于你想要集中的東西。讓我們看一下以內(nèi)容為中心的項(xiàng)目的CSS。

文本

文本以文本對齊為中心;如果你想讓它左右兩邊，用左邊或者右邊而不是中心。

內(nèi)容

一個(gè)div(或任何其他元素)可以以添加塊屬性為中心，然后使用自動邊緣。CSS是這樣的:

所以把“”放在寬度上是因?yàn)槿绻菍挼?，那么如果它是全寬的，不需要定心。很好有固定的寬度，比?0%或550px等等。

5.垂直對齊

你會在CSS導(dǎo)航菜單中使用這個(gè)。關(guān)鍵是要使菜單的高度和文本的行高相同。當(dāng)為客戶編輯現(xiàn)有的網(wǎng)站時(shí)，會經(jīng)常看到這種技術(shù)。這里有一個(gè)例子:

6.懸停效果

它用于按鈕、文本鏈接、站點(diǎn)的bock區(qū)域、圖標(biāo)等等。如果你想改變顏色，當(dāng)有人把鼠標(biāo)懸停在它上面時(shí)，使用相同的CSS，但是添加:鼠標(biāo)懸停在它上，改變樣式。這里有一個(gè)例子:

它會改變你的h2標(biāo)簽從黑到紅的顏色當(dāng)有人在它上面徘徊時(shí)。使用的好處是:如果它沒有改變，你不必再次聲明字體大小或重量了。它只會改變您指定的內(nèi)容。

7.鏈接狀態(tài)

很多設(shè)計(jì)師都忽略了這些樣式，它確實(shí)會給訪問者帶來可用性問題。鏈接偽類控制所有尚未點(diǎn)擊的鏈接。訪問的pseudo類將處理您已經(jīng)訪問過的所有鏈接的樣式。這告訴網(wǎng)站訪問者他們已經(jīng)在你的網(wǎng)站上，以及他們還沒有探索的地方。

8.輕松調(diào)整圖像大小以適應(yīng)

有時(shí)，你會在縮放比例的情況下，在圖像需要符合一定寬度的情況下進(jìn)行縮放。一個(gè)簡單的方法是使用很大寬度來處理這個(gè)。這是一個(gè)例子:

這意味著很大的圖像可能是，并且高度是根據(jù)圖像寬度自動計(jì)算的。在某些情況下，你可能還必須指定寬度為。

9.控制部分的元素

使用上面的圖像示例，如果您只想針對某個(gè)部分的圖像(比如您的博客)，使用一個(gè)類作為blog部分，并將其與實(shí)際的選擇器相結(jié)合。這將使你只選擇博客部分的圖像，而不是其他圖像，例如您的徽標(biāo)，或社交meia圖標(biāo)，或站點(diǎn)其他任何部分的圖像，如側(cè)邊欄。下面是CSS的外觀:

10.垂直高度

有時(shí)你想要一個(gè)部分填充整個(gè)屏幕，不管屏幕大小是多少。您可以使用vh或視圖高度來控制它。在它之前的數(shù)字是一個(gè)百分比，所以如果你想讓它地填充瀏覽器，你會把它設(shè)置為100。您可以將其設(shè)置為85%，以適應(yīng)固定的導(dǎo)航菜單。

為容器創(chuàng)建一個(gè)類，并應(yīng)用您希望它擁有的vh的數(shù)量。你可能需要調(diào)整的一件事是特定屏幕的媒體查詢值，或者像豎屏模式的手機(jī)那樣的朝向。

11.將CSS應(yīng)用于多個(gè)類或選擇器

假設(shè)您想在所有圖片、博客區(qū)和側(cè)邊欄中添加一個(gè)相同的邊框。你不需要寫出相同的CSS 3次。把那些項(xiàng)目列出來，用逗號隔開。這是一個(gè)例子:

不管你是多年的網(wǎng)頁設(shè)計(jì)師，還是剛剛起步，學(xué)習(xí)如何正確地建立網(wǎng)站，一定要多學(xué)習(xí)。一旦你縮小了你想學(xué)的語言，你必須學(xué)習(xí)和提高你的技能。無論你學(xué)什么，CSS都是必不可少的。

網(wǎng)站欄目：前端設(shè)計(jì)須知：基本的CSS技巧
文章URL：http://www.rwnh.cn/news10/114860.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、做網(wǎng)站、小程序開發(fā)、虛擬主機(jī)、App開發(fā)、定制開發(fā)

廣告

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