首頁 > 開發者 > JavaScript
#8.8.16總結# 痛點：關係選擇符，
1.什麼是CSS?
CSS(Cascading Style Sheets):層疊樣式表,一種網頁表現與內容分離的樣式設計語言。
2. CSS能做什嗎？a.一些動畫效果b.頁面配置c.控制整個網站的主題 3. CSS文法結構？4. 如何引入CSS？ a.內聯式 直接把CSS樣式代碼寫在HTML代碼裡面<p style="color:#F00;">這裡文字是紅色</p>
b.嵌入式 把CSS樣式代碼寫在<style type="text/css"></style>標籤之間,一般情況下嵌入式css樣式寫在<head></head>之間
<style type="text/css">span{ color:red; }</style>
c.外部式 css樣式，寫在單獨的一個檔案中
<link href="appearance.css" rel="stylesheet" type="text/css" />5. CSS優先順序 a.權值一樣 就近原則（離被設定元素越近優先順序別越高）
優先順序：內聯式 > 嵌入式 > 外部式(前提:嵌入式css樣式的位置一定在外部式的後面。)
b.權值不一樣
CSS 優先順序法則：
A 選取器都有一個權值，權值越大越優先
B 當權值相等時，後出現的樣式表設定要優於先出現的樣式表設定
C 創作者的規則高於瀏覽者：即網頁編寫者設定的CSS 樣式的優先權高於瀏覽器所設定的樣式
D 繼承的CSS 樣式不如後來指定的CSS 樣式
E 在同一組屬性設定中標有“!important”規則的優先順序最大
6. CSS注釋 a.單行注釋代碼 //...//我是一個萌萌噠小男孩！
b.多行注釋代碼 /*...*/
/*我是一個萌萌噠小男孩！嘿嘿嘿~*/
7. 選擇符a. 通配選擇符萬用字元使用星號*表示，意思是“所有的”。比如：* { color : red; } 這裡就把所有元素的字型設定為紅色。b. 元素選擇符如果要設定 HTML 的樣式，選取器通常是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身c. 群組選擇符通常在CSS樣式中有好幾個地方需要使用到相同的設定時，一個一個分開寫是一件累人的工作，重複性太高且顯得冗長，更不好管理。在CSS中，可以把這幾個相同設定的選取器合并在一起，將同樣的定義應用於多個選取器，可以將選取器以逗號分隔的方式並為組。例如：p,div,a{color:red;}d. 關係選擇符A. DIV P <div>元素中所有<p>元素B. DIV>P <div>元素中所有直接子項目 <p>C.DIV+P 所有位於 <div> 元素後的第一個 <p> 元素D.DIV~P <div> 元素的所有相鄰兄弟元素 <p>舉例： A.DIV P
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>關係選擇符</title> <style type="text/css"> div p{ color:#FFFF00; } </style></head><body><p>我是第一段</p> <div> <p>我是第二段</p> <span><p>我是第三段</p></span> </div> <p>我是第四段</p><p>我是第五段</p><p>我是第六段</p></body></html>
B.DIV>P
<style type="text/css"> div>p{ color:#FFFF00; } </style>
C.DIV+P
<style type="text/css"> div+p{ color:#FFFF00; } </style>
D.DIV~P
<style type="text/css"> div~p{ color:#FFFF00; } </style>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
