CSS選擇器（2）

集選擇器

給所有的選擇器選中的標簽設置屬性。以","隔開,如下所示

 
   <style>
     /* 為 <h1> ~ <h4> 元素的文本內容設置相同顏色 */
     /* h1 {
       color: lightcoral;
     }
 ?
     h2 {
       color: lightcoral;
     }
 ?
     h3 {
       color: lightcoral;
     }
 ?
     h4 {
       color: lightcoral;
     }
     */
       
     /* 通過并集選擇器進行改寫 */
     h1,h2, h3, h4{
                 color: lightcoral;
         }
   </style>
 ?
 <body>
   <h1>標題一</h1>
   <h2>標題二</h2>
   <h3>標題三</h3>
   <h4>標題四</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">啟嘉網</div>
 </body>
 ?
 </html>

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

偽類選擇器

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

寫法：選擇器：關鍵字

例子：

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

效果：原本鼠標放上去是沒有顏色的，現在鼠標放上去變成了紅色、

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

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

動態偽類選擇器:常與<a>元素配合使用，用來表示用戶的某種行為狀態。
目標偽類選擇器:常與<a>元素配合使用，用來定位當前HTML頁面中唯一一個目標元素。
元素狀態偽類選擇器:常與表單組件元素配合使用，用來表示表單組件的某種狀態。
結構偽類選擇器:常與<table> 元素配合使用，利用HTML元素之間的關系定位目標元素。
否定偽類選擇器:用來定位與指定選擇器不匹配的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標簽。</p>
   <p class="C">我是帶有class的p標簽！</p>
   <div>我不是一個塊標簽。</div>
 </body>

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

偽元素選擇器

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

寫法：選擇器::偽元素

例子：

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

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

before和after偽元素

添加一些修飾性的內容，寫法::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在文本的前面添加修飾內容，::after在文本下面添加了修飾內容

下次更新HTML的顏色

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

什么是 CSS？

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

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

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

CSS 的優點和應用領域

一個成功的網站不僅取決于內容，還取決于良好的設計。用戶很快就會對不用戶友好或結構良好的網站失去興趣。在這里，CSS 提供了一系列純 HTML 中不提供的設計選項。

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

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

CSS 語句的結構

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

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

如何將 CSS 集成到您的網站中？

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

外部樣式表

在外部樣式表中，CSS 指令通過“.css”結尾在外部文件中定義，并通過“link”標簽集成到 HTML 文件中。這是最常見的方法，因為內容和設計完全分開，并且可以輕松進行更改。該鏈接在 HTML 文檔的“head”區域中創建，如下所示：

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

內部樣式表

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

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

內聯樣式

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

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

CSS 和 HTML 的交互

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

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

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

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

現效果：

HTML結構：

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

利用偽類添加內置陰影效果:

代碼

效果圖

同理設置另外四個陰影，同時旋轉45度角

代碼

和上圖重疊后效果：

效果

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

代碼

效果圖

主要使用了css中：

box-shadows：設置內陰影顏色

transition：設置顏色過渡動畫

在線咨詢

上一篇：Apache Tomcat如何高并發處理請求
下一篇：10款比較好用的網頁設計工具

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商