整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          網(wǎng)站都變成灰色,幾行代碼就搞定了


          家看到網(wǎng)站的內(nèi)容都變成了灰色,包括按鈕、圖片等等。這時(shí)候我們可能會(huì)好奇這是怎么做到的呢?

          有人會(huì)以為所有的內(nèi)容都統(tǒng)一換了一個(gè) CSS 樣式,圖片也全換成灰色的了,按鈕等樣式也統(tǒng)一換成了灰色樣式。但你想想這個(gè)成本也太高了,而且萬一某個(gè)控件忘記加灰色樣式了豈不是變成生產(chǎn)事故要扣獎(jiǎng)金了。

          解決方案很簡(jiǎn)單,只需要幾行代碼就能搞定了。F12看下各大網(wǎng)站怎么實(shí)現(xiàn)的。

          百度:

          百度

          京東:

          京東

          慕課網(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%);

          擴(kuò)展:CSS3 filter(濾鏡)

          一、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%);
          }

          filter效果示例

          全文共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)用能力。

          >案例所用工具及功能

          • 圖層混合模式(正片疊底、線性加深、顏色加深)
          • 魔棒工具
          • 套索工具
          • 色階調(diào)整功能
          • 色相/飽和度調(diào)整功能
          • 圖層蒙版功能

          >素材展示

          圖 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?

          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 與 HTML 有何不同?

          談到 CSS 提問題時(shí),首先要了解的是何時(shí)使用 CSS 等樣式語言以及何時(shí)使用 HTML 等標(biāo)記語言。

          • 所有重要的網(wǎng)站內(nèi)容都應(yīng)使用 HTML 等標(biāo)記語言添加到網(wǎng)站。
          • 網(wǎng)站內(nèi)容的呈現(xiàn)應(yīng)該由樣式語言定義,例如 CSS。

          不屬于網(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 語法

          CSS 語法包括選擇器、屬性、值、聲明、聲明塊、規(guī)則集、at 規(guī)則和語句。

          • 選擇器是一個(gè)代碼片段,用于標(biāo)識(shí)受樣式影響的網(wǎng)頁元素或元素。
          • 屬性是要受影響的元素的方面。例如,顏色、內(nèi)邊距、邊距和背景是一些最常用的顏色 CSS 屬性。
          • 值用于定義屬性。例如,屬性顏色可能被賦予紅色值,如下所示color: red;
          • 屬性的組合稱為聲明。
          • 在許多情況下,多個(gè)聲明應(yīng)用于單個(gè)選擇器。聲明塊是用于指代應(yīng)用于單個(gè)選擇器的所有聲明的術(shù)語。
          • 單個(gè)選擇器和緊隨其后的聲明塊組合稱為規(guī)則集。
          • At-rules類似于規(guī)則集,但以**@符號(hào)而不是selector開頭。最常見的@media規(guī)則是通常用于創(chuàng)建基于查看網(wǎng)頁的設(shè)備大小應(yīng)用的 CSS 規(guī)則塊的規(guī)則。
          • 規(guī)則集at-rules都是CSS語句。

          CSS 語法示例

          讓我們使用一段 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:red;
          • font-size: 3em;
          • text-decoration: underline;

          colorfont-sizetext-decoration都是性質(zhì)。您可以使用數(shù)百個(gè) CSS 屬性,但常用的只有幾十個(gè)。

          我們將值red3emunderline應(yīng)用于我們使用的屬性。每個(gè) CSS 屬性都被定義為接受以特定方式格式化的存在。

          對(duì)于color屬性,我們可以使用顏色關(guān)鍵字或 HexRGBHSL 格式的顏色公式。在這種情況下,我們使用了 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文本本身將保持為我們屬性中定義的紅色。

          為樣式準(zhǔn)備 HTML 標(biāo)記

          CSS 應(yīng)該用于向網(wǎng)頁添加內(nèi)容。該任務(wù)最好由 HTMLXML等標(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í)使用它們很重要。

          何時(shí)使用類

          當(dāng)單個(gè)網(wǎng)頁上有多個(gè)元素需要設(shè)置樣式時(shí),請(qǐng)使用類。例如,假設(shè)您希望頁面頁眉和頁腳中的鏈接以一致的方式設(shè)置樣式,但與頁面正文中的鏈接不同。要查明這些鏈接,您可以為每個(gè)鏈接或包含鏈接的容器添加一個(gè)類。然后,您可以使用該類指定樣式,并確保它們僅應(yīng)用于具有該類屬性的鏈接。

          何時(shí)使用 ID

          對(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)航欄的 HTMLCSS 代碼示例。

          <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;
          }
          

          何時(shí)不使用 Hooks

          您不必為 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)目
          

          在這種情況下,即使我們只為ulp元素編寫了一次樣式規(guī)則,但會(huì)影響多個(gè)項(xiàng)目。通過在網(wǎng)站的每個(gè)頁面上創(chuàng)建一致的標(biāo)題、列表和段落文本樣式,使用元素選擇器是創(chuàng)建有吸引力、可讀性和一致的網(wǎng)站體驗(yàn)的好方法。

          為樣式準(zhǔn)備標(biāo)記的最佳實(shí)踐

          既然您知道如何將類、ID 和元素標(biāo)簽用作 CSS 規(guī)則集的鉤子,那么您如何才能最好地利用這些知識(shí)來編寫標(biāo)記,以便輕松定位特定元素?

          • 自由而一致地應(yīng)用課程。對(duì)應(yīng)該在一個(gè)方向或另一個(gè)方向?qū)R的項(xiàng)目以及在單個(gè)網(wǎng)頁上重復(fù)出現(xiàn)的任何元素使用類。
          • 將 ID 應(yīng)用于在網(wǎng)頁上僅出現(xiàn)一次的項(xiàng)目。例如,在div包含您的網(wǎng)頁內(nèi)容的ul、包含導(dǎo)航菜單的 以及div包含您的網(wǎng)頁標(biāo)題的 上使用 ID。

          將 CSS 規(guī)則鏈接到 HTML 文檔的方法

          向網(wǎng)頁添加 CSS 規(guī)則的方法有以下三種:

          • 內(nèi)聯(lián)樣式
          • 內(nèi)部樣式表
          • 外部樣式表

          在絕大多數(shù)情況下,應(yīng)該使用外部樣式表。但是,在某些情況下可以使用內(nèi)聯(lián)樣式或內(nèi)部樣式表。

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

          內(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)部樣式表。內(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í)使用每種方法

          在幾乎所有情況下,外部樣式表都是設(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)樣式可以在兩種情況下使用:

          1. 編寫僅應(yīng)用于單個(gè)網(wǎng)頁上的單個(gè)元素的 CSS 規(guī)則時(shí)。
          2. 當(dāng)被集成到內(nèi)容管理系統(tǒng)(如 WordPress)中的 tinyMCE 編輯器等所見即所得編輯器應(yīng)用時(shí)。

          在所有其他情況下,應(yīng)避免使用內(nèi)聯(lián)樣式以支持外部樣式表。

          CSS 是如何工作的

          在編寫 CSS 時(shí),很多時(shí)候編寫的規(guī)則相互沖突。例如,在設(shè)置標(biāo)題樣式時(shí),以下所有規(guī)則都可能適用于h1元素。

          • h1在網(wǎng)站的所有頁面上創(chuàng)建一致呈現(xiàn)的元素級(jí)規(guī)則。
          • 定義在特定位置呈現(xiàn)的元素的類級(jí)別規(guī)則h1——例如博客文章的標(biāo)題。
          • 一個(gè) id 級(jí)別的元素,定義了一個(gè)h1元素在一個(gè)或多個(gè)網(wǎng)頁上的一個(gè)地方的渲染——例如網(wǎng)站名稱。

          開發(fā)人員如何編寫足夠通用的規(guī)則以涵蓋每一個(gè)h1又足夠具體的規(guī)則,以定義只應(yīng)出現(xiàn)在給定元素的特定實(shí)例上的樣式?

          CSS 樣式遵循兩個(gè)規(guī)則,您需要了解這些規(guī)則才能編寫有效的 CSS。了解這些規(guī)則將幫助您編寫在需要時(shí)可以廣泛使用的 CSS,但在需要時(shí)卻可以非常具體。

          控制 CSS 行為方式的兩個(gè)規(guī)則是繼承和特異性。

          級(jí)聯(lián)繼承

          為什么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。

          • 最不具體的選擇器類型是元素級(jí)別選擇器。
          • 當(dāng)一個(gè)類被用作選擇器時(shí),它會(huì)否決使用元素標(biāo)簽作為選擇器編寫的 CSS 規(guī)則。
          • 當(dāng)一個(gè) ID 用作選擇器時(shí),它會(huì)否決使用元素或類選擇器編寫的 CSS 規(guī)則。

          影響特異性的另一個(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)頁上的元素。

          CSS 能做什么?

          一個(gè)更好的問題可能是:“CSS 不能做什么?”

          CSS 可用于將 HTML 文檔轉(zhuǎn)換為專業(yè)、精美的設(shè)計(jì)。下面是一些你可以通過 CSS 完成的事情:

          • 創(chuàng)建一個(gè)靈活的網(wǎng)格,用于設(shè)計(jì)在任何設(shè)備上都能呈現(xiàn)精美的完全響應(yīng)式網(wǎng)站。
          • 從排版到表格,再到表格等,應(yīng)有盡有。
          • float使用諸如、positionoverflowflex和等屬性將網(wǎng)頁上的元素相對(duì)于彼此定位box-sizing
          • 將背景圖像添加到任何元素。
          • 創(chuàng)建形狀、交互和動(dòng)畫。

          這些概念和技術(shù)超出了本入門指南的范圍,但以下資源將幫助您解決這些更高級(jí)的主題。

          盒子模型

          如果您打算使用 CSS 來構(gòu)建網(wǎng)頁布局,那么首先要掌握的主題之一就是盒子模型。盒子模型是一種可視化和理解網(wǎng)頁上每個(gè)項(xiàng)目如何組合內(nèi)容、填充、邊框和邊距的方法。

          了解這四個(gè)部分如何組合在一起是一個(gè)基本概念,在繼續(xù)討論其他 CSS 布局主題之前必須掌握它。

          了解盒子模型的兩個(gè)好地方包括:

          • 來自萬維網(wǎng)聯(lián)盟的盒子模型的解釋。
          • 來自 Mozilla 開發(fā)者網(wǎng)絡(luò)的CSS 盒子模型介紹。

          創(chuàng)建布局

          有許多技術(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-alignfloatposition.

          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)它。

          網(wǎng)頁字體和排版

          可以做很多事情來增加個(gè)性并提高網(wǎng)站內(nèi)容的可讀性。在我們的字體和網(wǎng)頁排版指南中了解有關(guān)為網(wǎng)絡(luò)選擇字體和排版的更多信息。

          創(chuàng)建一致的跨瀏覽器體驗(yàn)

          每個(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" />

          上一篇:HTML基礎(chǔ)
          下一篇:CSS Float(浮動(dòng))
          主站蜘蛛池模板: 鲁丝片一区二区三区免费| 日韩一区二区三区在线精品| 成人区精品一区二区不卡亚洲 | 日韩高清一区二区| 日本免费精品一区二区三区| 91福利一区二区| 久久亚洲色一区二区三区| 免费一本色道久久一区| 性色A码一区二区三区天美传媒| 精品视频一区二区观看| 欧美激情一区二区三区成人| 亚洲一区影音先锋色资源| 一区二区三区电影在线观看| 国产精品美女一区二区三区| 精品熟人妻一区二区三区四区不卡 | 国产AV午夜精品一区二区入口 | 国产一区二区三区免费看| 日韩一区二区在线视频| 国产高清一区二区三区| 国产无人区一区二区三区| 午夜福利国产一区二区| 国产午夜精品一区二区三区| 一区二区三区电影网| 日韩视频在线观看一区二区| 国偷自产视频一区二区久| 色欲AV蜜桃一区二区三| 香蕉久久ac一区二区三区| 国产丝袜无码一区二区视频| 日本v片免费一区二区三区| 理论亚洲区美一区二区三区| 国产主播一区二区三区| 国产福利电影一区二区三区,日韩伦理电影在线福 | 国产午夜精品一区二区| 国产福利电影一区二区三区,亚洲国模精品一区 | 日韩aⅴ人妻无码一区二区| 国产午夜精品一区二区三区极品| 亚洲一区二区三区四区视频| 亚洲AV成人精品日韩一区| 成人精品视频一区二区| 日韩一区二区三区视频久久| 国产免费一区二区视频|