CSS選擇器（2）

集選擇器

給所有的選擇器選中的標(biāo)簽設(shè)置屬性。以","隔開,如下所示

 
   <style>
     /* 為 <h1> ~ <h4> 元素的文本內(nèi)容設(shè)置相同顏色 */
     /* h1 {
       color: lightcoral;
     }
 ?
     h2 {
       color: lightcoral;
     }
 ?
     h3 {
       color: lightcoral;
     }
 ?
     h4 {
       color: lightcoral;
     }
     */
       
     /* 通過并集選擇器進行改寫 */
     h1,h2, h3, h4{
                 color: lightcoral;
         }
   </style>
 ?
 <body>
   <h1>標(biāo)題一</h1>
   <h2>標(biāo)題二</h2>
   <h3>標(biāo)題三</h3>
   <h4>標(biāo)題四</h4>
 </body>

效果：h1~h4顏色相同，可以用并集選擇器集合起來

交集選擇器

 <!DOCTYPE html>
 <html lang="en">
 ?
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>交集選擇器</title>
   <style>
     p {
       color: lightcoral;
     }
 ?
     .cls {
       color: lightskyblue;
     }
 ?
     /* 交集選擇器 */
     p.cls {
       color: magenta;
     }
   </style>
 </head>
 ?
 <body>
   <p>18級啟嘉班</p>
   <p class="cls">19級啟嘉班</p>
   <p>20級啟嘉班</p>
   <div class="cls">啟嘉網(wǎng)</div>
 </body>
 ?
 </html>

效果：交集改變了19級啟嘉班的顏色

偽類選擇器

CSS 偽類是向已有選擇器添加關(guān)鍵字，改變元素的狀態(tài)。例如，:hover 可被用于在用戶將鼠標(biāo)懸停在按鈕上時改變按鈕的顏色。

寫法：選擇器：關(guān)鍵字

例子：

   <style>
       /*改變button的顏色*/
     button:hover {
       background-color: lightcoral;
     }
   </style>

效果：原本鼠標(biāo)放上去是沒有顏色的，現(xiàn)在鼠標(biāo)放上去變成了紅色、

說明：CSS允許在同一個選擇器上同時編寫多個偽類選擇器。

偽類選擇器按照用途分為以下5中類型：

動態(tài)偽類選擇器:常與<a>元素配合使用，用來表示用戶的某種行為狀態(tài)。
目標(biāo)偽類選擇器:常與<a>元素配合使用，用來定位當(dāng)前HTML頁面中唯一一個目標(biāo)元素。
元素狀態(tài)偽類選擇器:常與表單組件元素配合使用，用來表示表單組件的某種狀態(tài)。
結(jié)構(gòu)偽類選擇器:常與<table> 元素配合使用，利用HTML元素之間的關(guān)系定位目標(biāo)元素。
否定偽類選擇器:用來定位與指定選擇器不匹配的HTML元素。

否定偽類選擇器

否定選擇器用來定位不匹配某個選擇器定位的HTML元素的元素

 寫法：:not (某個選擇器){
         屬性：屬性值
 }

例子：

 <style>
     .C {
       text-shadow: 2px 2px 3px rgb(240, 9, 98);/*文本陰影*/
     }
 ?
     p:not(.C) {
       color: green;
     }
 ?
     body :not(p) {
       text-decoration: underline;/*表示下劃線*/
     }
   </style>
 </head>
 ?
 <body>
   <p>我是一個p標(biāo)簽。</p>
   <p class="C">我是帶有class的p標(biāo)簽！</p>
   <div>我不是一個塊標(biāo)簽。</div>
 </body>

效果：p:not(.c)是篩選不是p標(biāo)簽里有Class選擇器的p標(biāo)簽,那就是第一個p標(biāo)簽,所以是綠色的，而.C不是綠色的。

偽元素選擇器

CSS中偽元素選擇器的用法與偽類選擇器的用法類似，都是在指定CSS選擇器增加關(guān)鍵字。但作用不同，偽類選擇器是用來改變狀態(tài)信息的，偽元素選擇器是用來設(shè)定樣式的。

寫法：選擇器::偽元素

例子：

 <style>
     .p1::first-line {
       color: lightcoral;
     }
 ?
     .p2 span {
       color: lightcoral;
     }
   </style>
 </head>
 ?
 <body>
   <p class="p1">家鄉(xiāng)門前空院上植有一棵梨樹。至今約莫三十個年頭。萬不是那聲名顯赫的名品，結(jié)的是青皮小個的酸梨。
 ?
 這梨即使熟透到掉落都難得有一絲絲的甜蜜，恰如這人生百味，甘之如飴是只應(yīng)天上有的美好期盼。
 ?
 猶記年幼時候，每至初春，那皚皚白雪還沒有全部退去，滿樹的花蕾迎著乍暖還寒的風(fēng)便竄出頭來，約莫兩三個星期，滿樹梨花放，伴著那春陽和煦，梨樹便時常沒來由的飛花飄絮，如那仙女翩翩起舞的霓裳，美的張揚而放肆。</p>
   <p class="p2"><span>待過兩個月滿樹都是那酸酸的青皮梨，父親知我喜愛上樹摘梨，時常憂心我的安危，便自制了一個專用的摘梨小網(wǎng)，放于瓦檐之下。</span> 
 即使小網(wǎng)上面布滿塵埃，我也難得去用它，我就喜歡攀樹而上，腳下感受著樹枝有節(jié)奏的顫動。一手抓著樹枝，一手摘得那繁葉不能遮擋的向陽方向的果子。因為向陽的那一面有一塊紅彤彤的皮，那是我認為勇敢者的勛章。
 母親和奶奶站在樹下，早已按捺不住心中的擔(dān)憂，仰頭看著我不斷叮嚀：“小心、小心……”此起彼伏?？捎趾ε侣暣髧樦?，所以兩個平時坦誠干凈的農(nóng)村婦人斂起了嗓門兒，有了難得一見的溫柔。</p>
 </body>

效果：.p1::first-line的一直是一行，他會自動的把第一行的字加上顏色

before和after偽元素

添加一些修飾性的內(nèi)容，寫法::before 和 ::after

示例代碼：

 <style>
         h1::before{
             color: brown;
             content: "?";
         }
         p::after{
             color: chartreuse;
             content: "?";
         }
         p{
             font-size: 30px;
         }
     </style>
 </head>
 <body>
     <h1>18級啟嘉班</h1>
     <p>19級啟嘉班</p>
 </body>

效果：如下 ::before在文本的前面添加修飾內(nèi)容，::after在文本下面添加了修飾內(nèi)容

下次更新HTML的顏色

疊樣式表 (CSS) 是一種編程語言，可用于確定電子文檔的設(shè)計。借助簡單說明（以清晰的源代碼形式呈現(xiàn)），可以根據(jù)需要調(diào)整布局、顏色和版式等網(wǎng)站元素。由于級聯(lián)樣式表，文檔的語義結(jié)構(gòu)和內(nèi)容不受影響。 CSS 出現(xiàn)于 20 世紀 90 年代中期，現(xiàn)在被認為是萬維網(wǎng)上的標(biāo)準樣式表語言。

什么是 CSS？

CSS 與 HTML 一樣，是萬維網(wǎng)的核心語言之一。當(dāng)您使用 HTML 將文本添加到網(wǎng)站并按語義構(gòu)建其結(jié)構(gòu)時，您可以使用 CSS 定義其內(nèi)容的設(shè)計。雖然 HTML 和 CSS 結(jié)合使用，但 CSS 設(shè)計指令和 HTML 元素是分開存在的。這意味著即使沒有 CSS，機器也可以讀取電子文檔。在 CSS 的幫助下，瀏覽器內(nèi)容可以在視覺上準備好并以吸引人的方式呈現(xiàn)。

CSS 是一種“生活標(biāo)準”，由萬維網(wǎng)聯(lián)盟繼續(xù)開發(fā)。因此，總是有新的功能和實際應(yīng)用有待發(fā)現(xiàn)。廣泛應(yīng)用的樣式表語言出現(xiàn)于 20 世紀 90 年代。使用樣式表來顯示 Web 內(nèi)容的想法在當(dāng)時已不再是全新的。但 CSS 與 HTML 中已存在的其他面向顯示的元素在一個重要方面有所不同：用戶現(xiàn)在可以選擇為跨多個文檔和單個樣式表的元素組定義設(shè)計規(guī)則。

定義：CSS（層疊樣式表）
用于網(wǎng)站視覺設(shè)計的編程語言。例如，使用層疊樣式表，您可以確定顯示 HTML 元素的字體、大小或顏色。

CSS 的優(yōu)點和應(yīng)用領(lǐng)域

一個成功的網(wǎng)站不僅取決于內(nèi)容，還取決于良好的設(shè)計。用戶很快就會對不用戶友好或結(jié)構(gòu)良好的網(wǎng)站失去興趣。在這里，CSS 提供了一系列純 HTML 中不提供的設(shè)計選項。

例如，CSS 允許您集中控制某些規(guī)范。這意味著可以使用單個命令來識別單個文檔中的相似元素（例如所有超鏈接或圖像）并對其進行格式化。設(shè)計指令不必采用 HTML 文檔本身內(nèi)部樣式表的形式。如果將 CSS 指令保存在外部樣式表（即單獨的文件）中，則這也可以用于其他文檔。

除了與 HTML 元素的顏色、形狀和排版相關(guān)的基本顯示指令外，CSS 中現(xiàn)在還有更復(fù)雜的模塊。例如，使用這些，您可以根據(jù)輸出媒體定義動畫或不同的表示形式。這樣，可以為所有可能的媒體以相同的方式準備相同的 HTML 文檔。由于本文檔中的內(nèi)容和設(shè)計是分開的，因此網(wǎng)站的代碼更加清晰。相關(guān)的樣式語言 SASS 提供了更多的可能性，但它并沒有完全取代 CSS。

CSS 語句的結(jié)構(gòu)

CSS 語句確定電子文檔中的元素應(yīng)具有的值或?qū)傩浴?在其基本結(jié)構(gòu)中，該指令由選擇器和大括號組成。聲明列在括號內(nèi)，并用分號分隔。每個聲明由名稱、冒號和特定值組成。在最終聲明之后和右括號之前，可以添加另一個分號，但這不是強制性的。例如，下面示例中的 CSS 指令要求標(biāo)題 h1 以藍色顯示，字體大小為 12：

h1 {color:blue; font-size:12px}

如何將 CSS 集成到您的網(wǎng)站中？

可以使用內(nèi)部和外部樣式表將 CSS 合并到電子文檔中。此外，可以使用內(nèi)聯(lián)樣式將屬性直接放置在元素的 HTML 源代碼中。下面，我們概述了將 CSS 集成到 HTML 中的三種方法。

外部樣式表

在外部樣式表中，CSS 指令通過“.css”結(jié)尾在外部文件中定義，并通過“l(fā)ink”標(biāo)簽集成到 HTML 文件中。這是最常見的方法，因為內(nèi)容和設(shè)計完全分開，并且可以輕松進行更改。該鏈接在 HTML 文檔的“head”區(qū)域中創(chuàng)建，如下所示：

<!DOCTYPE html>
  <html>
  <head>
  <link rel="stylesheet" href="stylesheet.css">
    </head>
<body>
    <h1>這是一個標(biāo)題</h1>
  <p>這是一個段落</p>
</body>
</html>

內(nèi)部樣式表

您可以在此處將所有 CSS 指令添加到 HTML 文件中。請注意，這些僅適用于相關(guān)文件。對于內(nèi)部樣式表，將“style”元素插入 HTML 文檔的“head”區(qū)域，如下所示：

<!DOCTYPE html>
  <html>
  <head>
  <style>
  h1 {color:blue; font-size:12px;}</style></head>
  <body>
  <h1>這是一個標(biāo)題</h1>
<p>這是一個段落</p>
  </body>
</html>

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

與內(nèi)部樣式表一樣，CSS 指令包含在 HTML 文件中。然而，有一個重要的區(qū)別：相應(yīng)的屬性直接位于元素的開始標(biāo)記中，并且不適用于任何其他元素。如果您不想進行一般設(shè)計說明，則此方法特別有用。

<!DOCTYPE html>
  <html>
  <body>
  <h1 style="color:blue; font-size:12px;">這是一個標(biāo)題</h1>
<p>這是一個段落</p>
</body>
</html>

CSS 和 HTML 的交互

上面的例子表明 CSS 只能與經(jīng)典的 HTML 結(jié)構(gòu)結(jié)合使用。由于 HTML 通過段落、列表和表格構(gòu)建內(nèi)容，而 CSS 負責(zé)視覺設(shè)計，因此這兩種網(wǎng)絡(luò)語言相輔相成，并以這種方式緊密相連。編寫級聯(lián)樣式表通常圍繞設(shè)計“盒子”進行。 HTML 文檔的結(jié)構(gòu)基于嵌套原則，其中各個元素像盒子一樣相互疊放。網(wǎng)站上占用空間的每個“盒子”都具有以下屬性：

padding：元素內(nèi)容周圍的空間
border：位于 padding 外部的線
margin：邊框外的空間

然后通過指定大小、形狀和顏色來格式化這些“框”。除了這些簡單的屬性之外，還有更復(fù)雜的 CSS 指令，用于在文本中插入陰影、添加圖像過濾功能以及突出顯示表單和其他元素。

一旦您了解了樣式表語言的基本原理，它們的應(yīng)用就足夠簡單了。了解有關(guān) CSS 頂級技巧的更多信息，這些技巧將使您的網(wǎng)站看起來更加專業(yè)。

現(xiàn)效果：

HTML結(jié)構(gòu)：

基礎(chǔ)樣式：此時只是一個白色的正方形。

利用偽類添加內(nèi)置陰影效果:

代碼

效果圖

同理設(shè)置另外四個陰影，同時旋轉(zhuǎn)45度角

代碼

和上圖重疊后效果：

效果

按鈕hover之后，中間選擇文字出現(xiàn)，顏色向邊框處改變：

代碼

效果圖

主要使用了css中：

box-shadows：設(shè)置內(nèi)陰影顏色

transition：設(shè)置顏色過渡動畫

在線咨詢

上一篇：Apache Tomcat如何高并發(fā)處理請求
下一篇：10款比較好用的網(wǎng)頁設(shè)計工具

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商