每個設(shè)計師都應(yīng)該知道的20個基本CSS技巧

這是絕對的初學者。了解了框模型的工作原理以及如何浮動這些框之后，就該認真考慮CSS了。為此，我們匯總了許多技巧，竅門，技巧以及偶爾的骯臟技巧，以幫助您構(gòu)建所需的設(shè)計。

CSS可能會很棘手，您也應(yīng)該這樣做。現(xiàn)在，您幾乎不需要知道什么（幾乎）就可以了：

1.絕對定位

如果您想始終控制某個元素在我們網(wǎng)站上的位置，則絕對定位是實現(xiàn)此目標的關(guān)鍵。如果您將瀏覽器視為一個大邊界框，則絕對定位使您可以精確控制元素將在該邊界中保留的位置。使用頂部，右側(cè)，底部和左側(cè)以及像素值來控制元素的位置。

position:absolute; top:20px; right:20px

上面的CSS將元素的位置設(shè)置為與瀏覽器的頂部和右側(cè)邊緣保持20px的距離。您也可以在div中使用絕對定位。

2. * +選擇器

在*可讓您選擇一個特定選擇的所有元素。例如，如果您使用* p然后添加CSS樣式，它將使用<p>標記對文檔中的所有元素進行處理。這樣就可以輕松地將網(wǎng)站的各個部分作為全球目標。

3.覆蓋所有樣式

應(yīng)該謹慎使用，因為如果您對所有操作都這樣做，從長遠來看，您將發(fā)現(xiàn)自己遇到了麻煩。但是，如果要為特定元素覆蓋其他CSS樣式，請在CSS中的樣式之后使用！important。例如，如果我希望網(wǎng)站的特定部分中的H2標頭為紅色而不是藍色，則可以使用以下CSS：

.section h2 { color:red !important; }

4.居中

居中很棘手，因為它取決于您要居中的內(nèi)容。讓我們看一下基于內(nèi)容的要居中項的CSS。

文本

使用text-align：center;將文本居中 。如果您希望它在任一側(cè)，請使用向左或向右而不是中心。

內(nèi)容

甲DIV（或任何其它元件）可以通過將嵌段性給它，然后使用自動邊緣居中。CSS看起來像這樣：

#div1 {  display: block;  margin: auto;  width: anything under 100%  }

我將“任何低于100％的寬度”放置為寬度的原因是，如果寬度為100％，則為全角寬度并且不需要居中。最好具有固定的寬度，例如60％或550px等。

5.垂直對齊（一行文本）

您將在CSS導航菜單中使用它，我?guī)缀蹩梢员ＷC。關(guān)鍵是使菜單的高度和文本的行高相同。當我回頭為客戶編輯現(xiàn)有網(wǎng)站時，我會看到很多技巧。這是一個例子：

.nav li{  line-height:50px;  height:50px; }

6.懸停效果

這用于按鈕，文本鏈接，站點的Bock部分，圖標等。如果您想在有人將鼠標懸停在其上時更改某些顏色，請使用相同的CSS，但在其中添加：hover并更改樣式。這是一個例子：

.entry h2{  font-size:36px;  color:#000;  font-weight:800; }  .entry h2:hover{  color:#f00; }

它的作用是當有人將鼠標懸停在h2標簽上時，它會將h2標簽的顏色從黑色更改為紅色。使用：hover的好處是，如果字體大小或粗細沒有變化，則不必再次聲明它。它只會更改您指定的內(nèi)容。

過渡

對于懸停效果，例如菜單或網(wǎng)站上的圖像，您不希望顏色過快地捕捉到最終結(jié)果。理想情況下，您希望逐漸緩解更改，這是過渡屬性起作用的地方。

.entry h2:hover{  color:#f00;  transition: all 0.3s ease; }

這使更改發(fā)生在0.3秒內(nèi)，而不是立即變?yōu)榧t色。這使懸停效果更令人愉悅，震顫更少。

7.鏈接狀態(tài)

這些樣式被許多設(shè)計師所遺漏，并且確實引起了訪問者的可用性問題。的：鏈接偽類控制還沒有被點擊但所有鏈接。的：參觀偽類處理所有你訪問過的鏈接的樣式。這會告訴網(wǎng)站訪問者他們已經(jīng)在您網(wǎng)站上的位置以及他們尚未探索的位置。

a:link { color: blue; } a:visited { color: purple; }

8.輕松調(diào)整圖像大小以適合

有時，您會遇到需要按比例縮放圖像的情況，以適應(yīng)一定的寬度。一種簡單的方法是使用最大寬度進行處理。這是一個例子：

img {  max-width:100%;  height:auto; }

這意味著圖像最大可能為100％，并且根據(jù)圖像寬度自動計算高度。在某些情況下，您可能還必須將寬度指定為100％。

9.控制部分的元素

使用上面的圖像示例，如果您只想定位某個部分（例如您的博客）的圖像，請為博客部分使用一個類，然后將其與實際選擇器組合。這樣，您就只能選擇博客部分的圖像，而不能選擇其他圖像（例如徽標或社交meia圖標）或站點的其他任何部分（如側(cè)邊欄）中的圖像。CSS的外觀如下：

.blog img{  max-width:100%;  height:auto; }  

10.直系子女

我希望我剛開始使用CSS時就知道這一點。這樣可以節(jié)省我很多時間！使用>選擇元素的直接子代。例如：

#footer > a

這將選擇和設(shè)置位于頁腳ID下的所有活動鏈接元素的樣式。它不會選擇活動元素之外的任何內(nèi)容，也不會選擇頁腳中包含的其他任何內(nèi)容，例如純文本。這也適用于頂級導航元素。

特定的子元素

相信我，這在您設(shè)置列表樣式時非常方便。您只需要計算要樣式化的元素下的多少項，然后應(yīng)用該樣式即可。

li:nth-child(2) {  font-weight:800;  color: blue;  text-style:underline; }

上面的CSS以列表中的第二個項目為目標，并使其變?yōu)榇煮w，帶下劃線的藍色。在括號中的數(shù)字后面添加“ n”，您可以定位每個第二個列表項。想象一下，能夠以表格樣式的布局為每行設(shè)置樣式以便于閱讀。CSS將是：

li:nth-child(2)

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

假設(shè)您要在所有圖像，博客部分和側(cè)邊欄周圍添加相同的邊框。您不必寫相同的完全相同的CSS 3次。只需列出這些項目，并用逗號分隔即可。這是一個例子：

.blog, img, .sidebar {  border: 1px solid #000; }

無論您是多年的網(wǎng)頁設(shè)計師，還是剛剛起步的人，學習如何以正確的方式構(gòu)建網(wǎng)站似乎是一段艱難，永無止境的旅程。一旦確定了要學習的語言，就必須學習和提高技能。

無論您學習什么，CSS都是必備的技巧之一，但您必須掌握這些技巧。不過，它不必那么困難，特別是如果您知道一些方便且鮮為人知的CSS技術(shù)來完成這項工作。

12. box-sizing：邊框框；

這是許多Web設(shè)計人員的最愛，因為它解決了填充和布局問題。基本上，當您將框設(shè)置為特定寬度并向其中添加填充時，填充會增加框的大小。但是，使用box-sizing：border-box; ，這被否定，并且框保持原本應(yīng)有的大小。

13.：之前

此CSS是一個選擇器，使您可以選擇CSS元素，并在應(yīng)用了特定類的每個元素之前插入內(nèi)容。假設(shè)您有一個網(wǎng)站，每個H2標簽前都需要特定的文本。您需要我們進行以下設(shè)置：

h2:before {   content: "Read: "; <span class="Apple-converted-space"> color: #F00;</span> }

這非常方便，尤其是在使用圖標字體的情況下。您可以將圖標放在某些元素之前，然后將其全局應(yīng)用。

14 .：之后

與：before選擇器一樣，您可以使用：after在特定元素上全局插入內(nèi)容。實際用途是在博客的每個摘錄之后添加“更多內(nèi)容”。這是您要執(zhí)行的操作。

p:after{   content: " -Read more… ";  color:#f00; }

15.內(nèi)容

content是一個CSS屬性，在您需要插入要控制的元素時會派上用場。我見過的最常見的用法是在特定位置從圖標字體插入圖標。在上面的示例中，您可以看到必須將要插入的文本用引號引起來。

16. CSS重置

不同的瀏覽器具有默認的CSS設(shè)置，因此必須重置這些設(shè)置，這樣您才能獲得均勻，一致的競爭環(huán)境。可以將其想象成是蓋房，無論您是建在山坡上，沙灘上還是林木之中，您都希望該地基平整。

這種CSS重置方法為所有網(wǎng)站設(shè)置了標準基礎(chǔ)，從而使它們在CSS起點方面保持一致。它刪除了不需要的邊框，預設(shè)邊距，填充，線條高度，列表中的樣式等。EricMeyer創(chuàng)建了一個效果很好的邊框。

17.首字下沉

每個人都喜歡戴帽。它使我們想起了傳統(tǒng)的印刷書，并且是開始內(nèi)容頁面的一種好方法。也就是說1 ^日，大信真正抓住你的注意力。有一種簡單的方法可以在CSS中創(chuàng)建首字下沉，這是通過使用偽元素：：first來實現(xiàn)的。這是一個例子：

p:first-letter{  display:block;  float:left;  margin:3px;  color:#f00;  font-size:300%; }

這將字母設(shè)置為其他字母大小的3倍。它將字母周圍的空間設(shè)置為3px以防止重疊，并將字母的顏色設(shè)置為紅色。

18.強制文本全部大寫，全部小寫或大寫

在所有大寫字母中輸入整個部分是荒謬的。想象一下，當網(wǎng)站格式更改或更新時，必須稍后再進行修復。相反，請使用以下css樣式將文本強制為某種格式。此CSS以h2 title標簽為目標。

• h2 {text-transform：大寫；} –全部大寫
• h2 {text-transform：小寫；} –全部小寫
• h2 {text-transform：大寫；} –大寫每個單詞的^第一個字母。

19.垂直屏幕高度

有時，無論屏幕大小是多少，您都希望一個部分充滿整個屏幕。您可以使用vh或查看高度來控制它。它之前的數(shù)字是百分比，因此，如果您希望它填充瀏覽器的100％，則可以將其設(shè)置為100。您可以將其設(shè)置為類似85％的值以容納固定的導航菜單。

杭州網(wǎng)站建設(shè)創(chuàng)建一個類，并應(yīng)用所需的vh量。您可能需要調(diào)整的一件事是針對特定屏幕或屏幕方向的媒體查詢值，例如縱向模式下的手機。想象一下拉伸風景圖像以適合人像模式。那看起來并不好。