家看到網(wǎng)站的內(nèi)容都變成了灰色,包括按鈕、圖片等等。這時(shí)候我們可能會(huì)好奇這是怎么做到的呢?
有人會(huì)以為所有的內(nèi)容都統(tǒng)一換了一個(gè) CSS 樣式,圖片也全換成灰色的了,按鈕等樣式也統(tǒng)一換成了灰色樣式。但你想想這個(gè)成本也太高了,而且萬一某個(gè)控件忘記加灰色樣式了豈不是變成生產(chǎn)事故要扣獎(jiǎng)金了。
百度:
百度
京東:
京東
:
慕課網(wǎng):
慕課網(wǎng)
給大家總結(jié)出一段規(guī)范的代碼,把這段代碼加入網(wǎng)站頁面的CSS里面即可實(shí)現(xiàn)頁面變成灰色的效果:
規(guī)范代碼
filter是濾鏡的意思,filter:gray的意思就是說給頁面加上一個(gè)灰度的濾鏡,所以html里面的所有內(nèi)容都會(huì)變成黑白的了。不過這個(gè)濾鏡對(duì)于chrome和safari瀏覽器是無效的,所以下面會(huì)有一行-webkit-filter: grayscale(100%);
一、blur(px)高斯模糊
給圖像高斯模糊。如果沒有設(shè)定值,則默認(rèn)值是0;這個(gè)參數(shù)可設(shè)置css長(zhǎng)度值,不接受百分比值
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
二、brightness(%)亮度
使圖像看起來更亮或更暗。值是100%,圖像無變化,超過100%,變亮,小于100%,變暗。
filter: brightness(150%)
三、contrast(%)對(duì)比度
filter: contrast(200%)
四、drop-shadow(x y blur speed color) 陰影效果
filter-shadow: (50px 50px 5px tomato)
與box-shadow效果上有顯著的區(qū)別
五、grayscale(%)灰度
filter: grayscale(100%)
六、hue-rotate()色相旋轉(zhuǎn)
filter: hue-rotate(100%)
七、invate(%)
反轉(zhuǎn)輸入圖像。值為100%是完全反轉(zhuǎn)。 值為0%則圖像無變化。0%~100%之間,則是效果的線性乘子。
filter: invate(100%)
八、opacity(%)
轉(zhuǎn)化圖像的透明度。值為0%則是完全透明。值為100%則圖像無變化
filter: opacity(100%)
九、saturate(%)
轉(zhuǎn)換圖像的飽和度。值為0%則是完全不飽和,值為100%則圖像無變化。值允許大于100%,會(huì)有更高的飽和度。
filter: saturate(100%)
十、sepia(%)
將圖像轉(zhuǎn)為深褐色。值為100%則完全是深褐色
img {
-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
filter: sepia(100%);
}
十一、復(fù)合函數(shù)
使用多個(gè)濾鏡,每個(gè)濾鏡使用空格分割。
注意:順序是非常重要的(例如使用grayscale()再使用sepia()將產(chǎn)生一個(gè)完整的灰度圖片)
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */
filter: contrast(200%) brightness(150%);
}
全文共1382字,11圖)
>原視頻教程來源:https://huke88.com/course/17391.html
變暗系案例:
圖 1 裂紋肌肉男合成效果
今天帶來的是來源于虎課網(wǎng)講師——設(shè)計(jì)狗,制作的變暗系混合模式的實(shí)例操作。本文的主要目的是分析講師的設(shè)計(jì)意圖,并解讀其所有的操作。
各位可以先觀看一遍操作視頻,再結(jié)合本文進(jìn)行理解,如有分析不到位的地方,敬請(qǐng)諒解。
>原圖展示
圖 2 原圖
*設(shè)計(jì)意圖:運(yùn)用裂紋素材與原圖進(jìn)行合成處理,鍛煉變暗系圖層混合模式的運(yùn)用能力。
>案例所用工具及功能
>素材展示
圖 3 裂紋素材
*注:素材經(jīng)過了“去色”處理,只保留顏色的亮度信息,便于使用圖層混合模式與原圖進(jìn)行合成處理。
>原圖與素材圖片顏色信息對(duì)比
圖 4 原圖和素材的直方圖
*查看直方圖可以發(fā)現(xiàn)原圖整體的亮度比素材圖片要更亮(軍綠色區(qū)域?yàn)樗夭膱D片的顏色信息),所以我們?cè)趯?shí)際操作中需要使用色階(可以專門用來調(diào)整灰度圖像)來適當(dāng)提亮素材圖片的亮度,以響應(yīng)下面的原圖。
>實(shí)例操作
1)第一步,使用魔棒工具將原圖的白底選取出來,并應(yīng)用圖層蒙版去除。
2)第二步,將原圖和素材都拖到一個(gè)組中,并給這個(gè)組應(yīng)用第一步做的蒙版。這樣做可以讓原圖和素材都只保留中間人物的區(qū)域,屬于一個(gè)小技巧。
圖 5
3)第三步,對(duì)原圖執(zhí)行一個(gè)色相/飽和度調(diào)整層和一個(gè)色階調(diào)整層,簡(jiǎn)單的給原圖調(diào)色,并應(yīng)用剪切蒙版。
圖 6
*分析:原圖的色調(diào)整體偏紅,這里執(zhí)行色相/飽和度調(diào)整層是為了減淡一點(diǎn)紅色調(diào),然后再加一個(gè)色階提亮原圖的灰色像素,彌補(bǔ)一下原圖的高光過曝。
4)將素材復(fù)制3個(gè)出來,隱藏其他2個(gè),對(duì)第一個(gè)執(zhí)行“正片疊底”,將素材就融入到原圖中。
圖 7
*分析:素材圖片比原圖更暗的像素在正片疊底模式下會(huì)顯示出來,素材圖片與原圖混合后,結(jié)果色會(huì)更暗。
5)在這個(gè)素材上方執(zhí)行一個(gè)“色階”調(diào)整層,移動(dòng)白色滑塊的數(shù)值至110~115,并創(chuàng)建剪切蒙版。
圖 8
*分析:這一步是將圖7中多余的細(xì)小裂紋去除,運(yùn)用色階是為了將素材圖片變的比原圖更亮,這樣那些更亮的區(qū)域,用正片疊底就不會(huì)顯示出來了。
6)顯示之前隱藏的第2個(gè)素材圖片,更改其混合模式為“顏色加深”。同樣加一個(gè)色階拖動(dòng)灰色滑塊將素材圖片稍微提亮,去除掉一些細(xì)小裂紋,并創(chuàng)建剪切蒙版。
圖 9
*分析:因?yàn)樯弦徊绞褂蒙A將素材圖片大幅度提亮去除了大部分小裂紋,但破壞了很多細(xì)節(jié),所以這一步執(zhí)行“顏色加深”是為了將原圖和素材圖片的顏色修復(fù)回來,再稍微去除一下小裂紋。
7)顯示之前隱藏的第3個(gè)素材圖片,更改混合模式為“線性加深”,同樣加一個(gè)色階拖動(dòng)灰色滑塊將素材圖片大幅度提亮,然后拖動(dòng)黑色滑塊靠近灰色滑塊,去除掉一些細(xì)小裂紋,并讓大裂紋更顯真實(shí)。
圖 10
*分析:“線性加深”的作用就是讓暗的地方變得更暗,這樣可以使裂紋陷入的感覺更加真實(shí),同時(shí)加一個(gè)色階是為了去除多余的細(xì)小裂紋。
8)最后一步,使用多邊形套索工具順著裂紋開裂的方向摳出合適的形狀,讓最后的合成效果更顯真實(shí)感。
圖 11
注:用多邊形套索工具摳出的選區(qū)直接在“組”的蒙版上填充黑色即可。
小結(jié):這個(gè)案例不僅是鍛煉你對(duì)于圖層混合模式運(yùn)用能力,更多的鍛煉你對(duì)圖層混合模式的綜合理解,并不是說我看懂了就行了,你還得思考,要能夠用自己的話說出來這么做是為什么。且都運(yùn)用了什么原理。只有這樣才算是真正的吸收了知識(shí)。
(本文最后編輯于2018年10月9日,編號(hào)0038)
SS 是自定義網(wǎng)頁呈現(xiàn)的語言。它用于添加顏色、背景圖像和紋理,以及在頁面上排列元素。然而,CSS 不僅僅是繪制漂亮的圖片。它還能增強(qiáng)網(wǎng)站的可用性。下圖顯示了 YouTube 的首頁。左邊是頁面的常規(guī)渲染,右邊是沒有 CSS 的頁面。
右側(cè)的圖像不僅不那么有趣,而且使用起來也更加困難
在這個(gè)簡(jiǎn)短的指南中,我們將介紹 CSS、演示 CSS 語法、解釋 CSS 的工作原理、向您展示如何將 CSS 標(biāo)記添加到 HTML 文檔中,并為您提供來自網(wǎng)絡(luò)的大量資源,您可以在其中了解有關(guān) CSS 的更多信息。
CSS 代表層疊樣式表,它是用于設(shè)置網(wǎng)頁視覺呈現(xiàn)樣式的語言。CSS 是告訴 Web 瀏覽器如何呈現(xiàn)網(wǎng)頁的不同部分的語言。
網(wǎng)頁上的每個(gè)項(xiàng)目或元素都是以標(biāo)記語言編寫的文檔的一部分。在大多數(shù)情況下,HTML 雖然是標(biāo)記語言,但也有其他語言在使用,例如 XML。在本指南中,我們將使用 HTML 來演示 CSS 的實(shí)際應(yīng)用,請(qǐng)記住,如果您使用 XML或不同的標(biāo)記語言,同樣的原則和技術(shù)也適用。
談到 CSS 提問題時(shí),首先要了解的是何時(shí)使用 CSS 等樣式語言以及何時(shí)使用 HTML 等標(biāo)記語言。
不屬于網(wǎng)頁演示的博客文章、頁面標(biāo)題、視頻、音頻和圖片都應(yīng)使用 HTML 添加到網(wǎng)頁中。背景圖像和顏色、邊框、字體大小、排版以及網(wǎng)頁上項(xiàng)目的位置都應(yīng)該由 CSS 定義。
做出這種區(qū)分很重要,因?yàn)槲茨苁褂谜_的語言可能會(huì)導(dǎo)致將來難以對(duì)網(wǎng)站進(jìn)行更改,并為使用純文本瀏覽器或屏幕閱讀器的網(wǎng)站訪問者造成可訪問性和可用性問題。
CSS 語法包括選擇器、屬性、值、聲明、聲明塊、規(guī)則集、at 規(guī)則和語句。
讓我們使用一段 CSS 來闡明這些項(xiàng)目是什么。
h1 {
color: red;
font-size: 3em;
text-decoration: underline;
}
在本例中,h1是選擇器。選擇器后跟一個(gè)包含三個(gè)聲明的聲明塊。每個(gè)聲明與下一個(gè)聲明之間用分號(hào)分隔。制表符和換行符是可選的,但大多數(shù)開發(fā)人員使用它來使 CSS 代碼更易于閱讀。
通過h1用作選擇器,我們是說網(wǎng)頁上的每個(gè) 1 級(jí)標(biāo)題都應(yīng)遵循此規(guī)則集中包含的聲明。
規(guī)則集包含三個(gè)聲明:
color、font-size 和text-decoration都是性質(zhì)。您可以使用數(shù)百個(gè) CSS 屬性,但常用的只有幾十個(gè)。
我們將值red、3em和underline應(yīng)用于我們使用的屬性。每個(gè) CSS 屬性都被定義為接受以特定方式格式化的存在。
對(duì)于color屬性,我們可以使用顏色關(guān)鍵字或 Hex、RGB 或 HSL 格式的顏色公式。在這種情況下,我們使用了 color 關(guān)鍵字red。CSS3 中有幾十個(gè)顏色關(guān)鍵字可用,但其他顏色模型可以訪問數(shù)百萬種顏色。
我們將 的值應(yīng)用于3em屬性font-size。我們可以使用多種尺寸單位,包括像素、百分比等。
最后,我們將值添加underline到屬性text-decoration中。我們也可以使用overlineorline-through作為 的值text-decoration。此外,CSS3 允許使用純線、雙線、點(diǎn)線、虛線和波浪線樣式,這些都是文本裝飾顏色的規(guī)范。我們可以通過使用這樣的聲明一次應(yīng)用所有三個(gè)值:
text-decoration: blue double underline;
該規(guī)則將導(dǎo)致h1我們最初示例中的 用藍(lán)色雙線下劃線。color文本本身將保持為我們屬性中定義的紅色。
CSS 應(yīng)該用于向網(wǎng)頁添加內(nèi)容。該任務(wù)最好由 HTML 和 XML等標(biāo)記語言處理。相反,CSS 用于選擇網(wǎng)頁上已經(jīng)存在的項(xiàng)目并定義每個(gè)項(xiàng)目的顯示方式。
為了盡可能容易地選擇網(wǎng)頁上的項(xiàng)目,應(yīng)將標(biāo)識(shí)符添加到網(wǎng)頁上的元素中。這些標(biāo)識(shí)符,在 CSS 上下文中通常稱為鉤子,可以更容易地識(shí)別應(yīng)該受 CSS 規(guī)則影響的項(xiàng)目。
類和 ID 用作 CSS 樣式的掛鉤。雖然 CSS 的呈現(xiàn)方式不受使用類和鉤子的影響,但它們使開發(fā)人員能夠精確定位他們希望設(shè)置樣式的 HTML 元素。
類和 ID 不可互換。知道何時(shí)使用它們很重要。
當(dāng)單個(gè)網(wǎng)頁上有多個(gè)元素需要設(shè)置樣式時(shí),請(qǐng)使用類。例如,假設(shè)您希望頁面頁眉和頁腳中的鏈接以一致的方式設(shè)置樣式,但與頁面正文中的鏈接不同。要查明這些鏈接,您可以為每個(gè)鏈接或包含鏈接的容器添加一個(gè)類。然后,您可以使用該類指定樣式,并確保它們僅應(yīng)用于具有該類屬性的鏈接。
對(duì)僅在網(wǎng)頁上出現(xiàn)一次的元素使用 ID。例如,如果您使用 HTML 無序列表進(jìn)行站點(diǎn)導(dǎo)航,則可以使用nav等 ID為該列表創(chuàng)建唯一的掛鉤。
這是一個(gè)用于基本電子商務(wù)網(wǎng)站的簡(jiǎn)單導(dǎo)航欄的 HTML 和 CSS 代碼示例。
<style>
#nav {
background: lightgray;
overflow: auto;
}
#nav li {
float: left;
padding: 10px;
}
#nav li:hover {
background: gray;
}
</style>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Shop</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
該代碼將生成一個(gè)從頁面左側(cè)開始的淺灰色背景的水平導(dǎo)航菜單。每個(gè)導(dǎo)航項(xiàng)目的四周都有 10 像素的間距,當(dāng)您將鼠標(biāo)懸停在每個(gè)項(xiàng)目的背景上時(shí),它的背景會(huì)變暗。
同一網(wǎng)頁上的任何其他列表都不會(huì)受到該代碼的影響。
#example-nav {
background: lightgray;
overflow: auto;
}
#example-nav li {
float: left;
padding: 10px;
}
#example-nav li:hover {
background: gray;
}
您不必為 HTML元素添加類或 ID 即可使用 CSS對(duì)其進(jìn)行樣式設(shè)置。如果您知道要為網(wǎng)頁上特定元素的每個(gè)實(shí)例設(shè)置樣式,則可以使用元素標(biāo)簽本身。
例如,假設(shè)您要?jiǎng)?chuàng)建一致的標(biāo)題樣式。與向每個(gè)標(biāo)題添加類或 ID 相比,使用標(biāo)題標(biāo)簽簡(jiǎn)單地設(shè)置所有標(biāo)題元素的樣式會(huì)容易得多。
<style>
ul {
list-style-type: upper-roman;
margin-left: 50px;
}
p {
color: darkblue
}
</style>
<p>Some paragraph text here. Two short sentences.</p>
<ul>
<li>A quick list</li>
<li>Just two items</li>
</ul>
<p>Additional paragraph text here. This time let's go for three sentences. Like this.
</p>
該代碼顯示的效果如下:
.code_sample ul {
list-style-type: upper-roman;
左邊距:50px;
}
.code_sample p {
顏色:深藍(lán)色
}
這里有一些段落文本。兩個(gè)短句。
快速列表
只有兩個(gè)項(xiàng)目
此處附加段落文本。這次讓我們來三句話。像這樣。
另一個(gè)清單
仍然只有兩個(gè)項(xiàng)目
在這種情況下,即使我們只為ul和p元素編寫了一次樣式規(guī)則,但會(huì)影響多個(gè)項(xiàng)目。通過在網(wǎng)站的每個(gè)頁面上創(chuàng)建一致的標(biāo)題、列表和段落文本樣式,使用元素選擇器是創(chuàng)建有吸引力、可讀性和一致的網(wǎng)站體驗(yàn)的好方法。
既然您知道如何將類、ID 和元素標(biāo)簽用作 CSS 規(guī)則集的鉤子,那么您如何才能最好地利用這些知識(shí)來編寫標(biāo)記,以便輕松定位特定元素?
向網(wǎng)頁添加 CSS 規(guī)則的方法有以下三種:
在絕大多數(shù)情況下,應(yīng)該使用外部樣式表。但是,在某些情況下可以使用內(nèi)聯(lián)樣式或內(nèi)部樣式表。
內(nèi)聯(lián)樣式應(yīng)用于特定的 HTML 元素。HTML 屬性style用于定義僅適用于該特定元素的規(guī)則。下面看一下編寫內(nèi)聯(lián)樣式的語法。
<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>
該代碼將導(dǎo)致該標(biāo)題以紅色下劃線文本和所有邊的 10 像素填充呈現(xiàn)。在極少數(shù)情況下應(yīng)該使用內(nèi)聯(lián)樣式。在幾乎所有情況下,都應(yīng)該避免它們并將樣式添加到樣式表中。
前面的示例使用了內(nèi)部樣式表。內(nèi)部樣式表是添加到 HTML 文檔head元素的 CSS 塊。style元素用于開始和結(jié)束標(biāo)簽之間,head所有的 CSS 聲明都添加在style標(biāo)簽之間。
我們可以使用這種語法在內(nèi)部樣式表中復(fù)制上面代碼中的內(nèi)聯(lián)樣式。
<head>
<style>
h1 {
color: red;
padding: 10px;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Example Heading</h1>
</body>
該代碼將產(chǎn)生與內(nèi)聯(lián)樣式相同的結(jié)果。但是,使用內(nèi)部樣式表而不是內(nèi)聯(lián)樣式的好處是h1頁面上的所有元素都會(huì)受到樣式的影響。
外部樣式表是只包含 CSS 語句的文檔。文檔中定義的規(guī)則通過使用 HTML 文檔元素中的link標(biāo)記鏈接到一個(gè)或多個(gè) HTML文檔。head
要使用外部樣式表,首先要?jiǎng)?chuàng)建 CSS 文檔。
/*************************************************
Save with a name ending in .css such as styles.css
*************************************************/
h1 {
color: red;
padding: 10px;
text-decoration: underline;
}
現(xiàn)在我們有了一個(gè)帶有一些樣式的外部樣式表,我們可以使用該link元素將它鏈接到一個(gè) HTML 文檔。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Example Heading</h1>
</body>
加載此 HTML 文檔時(shí),該link標(biāo)記將導(dǎo)致將文件styles.css中*的樣式加載到網(wǎng)頁中。因此,所有 1 級(jí)標(biāo)題元素都將顯示為紅色文本、帶下劃線,并且每邊都應(yīng)用了 10 像素的填充。
在幾乎所有情況下,外部樣式表都是設(shè)置網(wǎng)頁樣式的正確方法。使用外部樣式表的主要好處是它們可以鏈接到任意數(shù)量的 HTML 文檔。因此,可以使用單個(gè)外部樣式表來定義整個(gè)網(wǎng)站的呈現(xiàn)方式。
設(shè)計(jì)簡(jiǎn)單的單頁網(wǎng)站時(shí)可以使用內(nèi)部樣式表。如果網(wǎng)站永遠(yuǎn)不會(huì)超出使用內(nèi)部樣式表的單個(gè)初始頁面是可以接受的。
內(nèi)聯(lián)樣式可以在兩種情況下使用:
在所有其他情況下,應(yīng)避免使用內(nèi)聯(lián)樣式以支持外部樣式表。
在編寫 CSS 時(shí),很多時(shí)候編寫的規(guī)則相互沖突。例如,在設(shè)置標(biāo)題樣式時(shí),以下所有規(guī)則都可能適用于h1元素。
開發(fā)人員如何編寫足夠通用的規(guī)則以涵蓋每一個(gè)h1又足夠具體的規(guī)則,以定義只應(yīng)出現(xiàn)在給定元素的特定實(shí)例上的樣式?
CSS 樣式遵循兩個(gè)規(guī)則,您需要了解這些規(guī)則才能編寫有效的 CSS。了解這些規(guī)則將幫助您編寫在需要時(shí)可以廣泛使用的 CSS,但在需要時(shí)卻可以非常具體。
控制 CSS 行為方式的兩個(gè)規(guī)則是繼承和特異性。
為什么CSS 樣式被稱為級(jí)聯(lián)?當(dāng)編寫多個(gè)相互沖突的規(guī)則時(shí),將執(zhí)行最后編寫的規(guī)則。通過這種方式,樣式向下級(jí)聯(lián)并應(yīng)用最后寫入的規(guī)則。
讓我們看一個(gè)例子。讓我們?cè)谝粋€(gè)內(nèi)部樣式表中編寫兩個(gè)直接相互矛盾的 CSS 規(guī)則。
<head>
<style>
p {color: red;}
p {color: blue;}
</style>
</head>
<body>
<p>What color will the text of this paragraph be?</p>
</body>
瀏覽器將級(jí)聯(lián)樣式并應(yīng)用遇到的最后一個(gè)樣式,推翻所有以前的樣式。結(jié)果,標(biāo)題是藍(lán)色的。
.code_sample_p {顏色:紅色;}
.code_sample_p {顏色:藍(lán)色;}
這一段的文字是什么顏色的?
當(dāng)使用外部樣式表時(shí),同樣的級(jí)聯(lián)效應(yīng)也會(huì)發(fā)揮作用。使用多個(gè)外部樣式表是很常見的。head發(fā)生這種情況時(shí),樣式表會(huì)按照它們?cè)?HTML 文檔元素中出現(xiàn)的順序加載。如果樣式表規(guī)則之間發(fā)生沖突,則每個(gè)樣式表中包含的 CSS 規(guī)則將覆蓋先前加載的樣式表中包含的那些規(guī)則。以下面的代碼為例:
<head>
<link rel="stylesheet" type="text/css" href="styles_1.css">
<link rel="stylesheet" type="text/css" href="styles_2.css">
</head>
如果這兩個(gè)樣式表中包含的樣式之間存在沖突,則將應(yīng)用styles_2.css中的規(guī)則。
樣式的繼承是 CSS 樣式級(jí)聯(lián)行為的另一個(gè)例子。
當(dāng)您為父元素定義樣式時(shí),子元素會(huì)收到相同的樣式。例如,如果我們將顏色樣式應(yīng)用于無序列表,則子列表項(xiàng)將顯示相同的樣式。
<head>
<style>
ul {color: red;}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
以下是該代碼的呈現(xiàn)方式。
.code-sample-ul {顏色:紅色;}
項(xiàng)目 1
第 2 項(xiàng)
并非每個(gè)屬性都從父元素傳遞到其子元素。瀏覽器將某些屬性視為非繼承屬性。邊距是不從父元素傳遞到子元素的屬性的一個(gè)示例。
確定對(duì)每個(gè) HTML 元素應(yīng)用哪些規(guī)則的第二個(gè)規(guī)則是[特異性規(guī)則。
具有更多特定選擇器的CSS 規(guī)則將覆蓋具有較少特定選擇器的 CSS 規(guī)則,無論哪個(gè)先出現(xiàn)。正如我們所討論的,三個(gè)最常見的選擇器是元素標(biāo)簽、類和 ID。
影響特異性的另一個(gè)因素是編寫 CSS 樣式的位置。與屬性內(nèi)聯(lián)style編寫的樣式會(huì)覆蓋在內(nèi)部或外部樣式表中編寫的樣式。
增加選擇器特異性的另一種方法是使用一系列元素、類和 ID 來精確定位您要處理的元素。例如,如果您想精確定位列表上的無序列表項(xiàng)目,其中包含divid 為“example-div”的類“example-list”,您可以使用以下選擇器來創(chuàng)建具有高度特異性的選擇器。
div#example-div > ul.example-list > li {styles here}
雖然這是創(chuàng)建非常具體的選擇器的一種方法,但建議限制使用這些類型的選擇器,因?yàn)樗鼈儽群?jiǎn)單的選擇器需要更多的時(shí)間來處理。
一旦您了解了繼承和特異性的工作原理,您將能夠高度準(zhǔn)確地定位網(wǎng)頁上的元素。
一個(gè)更好的問題可能是:“CSS 不能做什么?”
CSS 可用于將 HTML 文檔轉(zhuǎn)換為專業(yè)、精美的設(shè)計(jì)。下面是一些你可以通過 CSS 完成的事情:
這些概念和技術(shù)超出了本入門指南的范圍,但以下資源將幫助您解決這些更高級(jí)的主題。
如果您打算使用 CSS 來構(gòu)建網(wǎng)頁布局,那么首先要掌握的主題之一就是盒子模型。盒子模型是一種可視化和理解網(wǎng)頁上每個(gè)項(xiàng)目如何組合內(nèi)容、填充、邊框和邊距的方法。
了解這四個(gè)部分如何組合在一起是一個(gè)基本概念,在繼續(xù)討論其他 CSS 布局主題之前必須掌握它。
了解盒子模型的兩個(gè)好地方包括:
有許多技術(shù)和策略用于使用 CSS 創(chuàng)建布局,理解盒子模型是每個(gè)策略的先決條件。掌握了盒子模型后,您將準(zhǔn)備好學(xué)習(xí)如何操作網(wǎng)頁上的內(nèi)容盒子。
Mozilla 開發(fā)者網(wǎng)絡(luò)對(duì) CSS 布局進(jìn)行了很好的介紹]。這篇簡(jiǎn)短的閱讀涵蓋了 CSS 布局背后的基本概念,并快速介紹了諸如text-align、float和position.
W3C 提供了更廣泛、更深入的 CSS 布局指南:CSS 布局模型。本文檔是面向?qū)I(yè)開發(fā)人員的資源,因此如果您是 CSS 新手,請(qǐng)花點(diǎn)時(shí)間查看它。這不是快速閱讀。但是,您需要了解的有關(guān)創(chuàng)建 CSS 布局的所有信息都包含在本文檔中。
多年來,網(wǎng)格布局一直是設(shè)計(jì)響應(yīng)式布局的首選策略。CSS 網(wǎng)格已經(jīng)從零開始創(chuàng)建多年,市場(chǎng)上有許多不同的網(wǎng)格生成網(wǎng)站和開發(fā)框架。然而,在幾年內(nèi),對(duì)網(wǎng)格布局的支持將成為 CSS3 規(guī)范的一部分。您可以通過閱讀 W3C 網(wǎng)站上的主題來了解很多關(guān)于網(wǎng)格的知識(shí)。有關(guān)網(wǎng)格布局的更輕松、更簡(jiǎn)短的介紹。
幾年之內(nèi),CSS3靈活框或flexbox有望成為設(shè)計(jì)網(wǎng)站布局的主導(dǎo)模型。flexbox 規(guī)范還沒有完全完成和最終確定,并且瀏覽器之間對(duì) flexbox 的支持并不一致。然而,每個(gè)初露頭角的 CSS 開發(fā)者都需要熟悉flexbox并準(zhǔn)備在不久的將來實(shí)現(xiàn)它。
可以做很多事情來增加個(gè)性并提高網(wǎng)站內(nèi)容的可讀性。在我們的字體和網(wǎng)頁排版指南中了解有關(guān)為網(wǎng)絡(luò)選擇字體和排版的更多信息。
每個(gè)瀏覽器對(duì) HTML 規(guī)范的解釋略有不同。因此,當(dāng)在兩個(gè)不同的瀏覽器中呈現(xiàn)相同的代碼時(shí),呈現(xiàn)代碼的方式通常會(huì)存在細(xì)微差別。
以這段簡(jiǎn)短的代碼為例。
<h1>Heading 1</h1>
<p>A short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p>
<h2>Heading 2</h2>
<ul>
<li>Just a short list</li>
<li>Three items on this list</li>
<li>We'll make it an unordered list</li>
</ul>
<h3>Heading 3</h3>
<p>One final short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p>
如果我們?cè)趦蓚€(gè)不同的瀏覽器中渲染該代碼,我們會(huì)看到細(xì)微的差別。以下是 Mozilla Firebox 和 Microsoft Edge 呈現(xiàn)該代碼的方式。
你能看出細(xì)微的差別嗎?左邊的 Firefox 在每個(gè)標(biāo)題元素周圍增加了一點(diǎn)邊距。此外,在 Edge 中渲染時(shí),項(xiàng)目符號(hào)點(diǎn)會(huì)小一些。雖然這些差異不是必然的,但在某些情況下,瀏覽器之間的這些微小差異可能會(huì)產(chǎn)生問題。
CSS 可用于解決這些跨瀏覽器兼容性問題。一種流行的方法是實(shí)現(xiàn)一個(gè)名為normalize.css的樣板 CSS 文檔。這個(gè)免費(fèi)提供的 CSS 文件可以鏈接到任何 HTML 文檔,以幫助最小化跨瀏覽器的呈現(xiàn)差異。
在您的設(shè)計(jì)工作中包含normalize.css的最簡(jiǎn)單方法是鏈接到Google 托管的副本。為此,只需將這行代碼放入HTML 文檔的元素中。head
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。