CSS基礎-介紹及語法
1. CSS介紹
概述:
CSS指層疊樣式表
CSS樣式表極大地提高了工作效率
2. CSS基礎語法
selector { property1 : value1; property2: value2 ;}
例: h1 {color:red; font-size:14px;}
屬性大於1個之后, 屬性之間用分號隔開. 如果值大於1個單詞, 則需要加上引號:p{font-family: "sans serif";}
創建css文件, 打開IntelliJ IDEA, 新建一個項目, 右擊項目文件夾, new--> file, 出現的對話框中鍵入mycss.css(需指定文件擴展名)
並創建一個HTML file.
代碼:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <h1>應用了樣式表</h1> </body> </html>
mycss.css
h1 { color: red; font-size: 50px; }
3. CSS高級語法
1. 選擇器分組:
h1, h2, h3, h4, h5, h6{color:red;}
代碼:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <h1>應用了樣式表</h1> <a>h2樣式</a> <h2>h3應用了嗎</h2> <h3>h3樣式</h3>
</body> </html>
mycss.css
h1,h2,a { color: red; font-size: 50px; }
2. 集成:
body{color:green;}
代碼:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <h1>應用了樣式表</h1> <a>h2樣式</a> <h2>h3應用了嗎</h2> <h3>h3樣式</h3> <p>hell css3</p> 南心芭比 </body> </html>
mycss.css
h1,h2,a { color: red; font-size: 50px; } body { color: blueviolet; }
運行結果:
說明:標簽h1, h2, a 都有樣式表, 所以以自己的樣式表為主.
標簽h3沒有樣式表, 則繼承body的樣式表.
4. 派生選擇器
派生選擇器:
通過依據元素在其位置的上下文關系來定義樣式
代碼:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <p><strong>標簽 hello css</strong></p> <ul> <li><strong>li 標簽: hello strong</strong></li> </ul> </body> </html>
mycss.css
li strong { color: green; } strong { color: blue; }
運行結果:
說明: 通過li+空格+strong的方式來定義列表項中的strong標簽的樣式, 而p標簽中不會影響到
如果單獨定義一個strong樣式表, 除了指定定義了同名的strong標簽的樣式之外的所有strong標簽都將被定義此樣式
5. id選擇器
1. 概述:
id選擇器可以為標有id的HTML元素指定特定的樣式
id選擇器以"#"來定義樣式
代碼:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <!-- 為p標簽加上id --> <p id="pid"> hello css</p> </body> </html>
css
/*為id選擇器添加樣式*/ #pid { color: green; }
通常情況下 我們是把<div> 定義為id選擇器.
2. id選擇器和派生選擇器
目前比較常用的方式是id選擇器常常用於建立派生選擇器
代碼:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <div id="divid"> 這是第一個div選擇器 <p>id選擇器和派生選擇器</p> </div> </body> </html>
css
#divid p{ color: green; }
運行結果:
說明: <div>內的文字沒有樣式, 而<div>內的<p>有樣式, 這是id選擇器與派生選擇器的用法
6. 類選擇器
1. 類選擇器:
類選擇器是以一個點顯示
2. class也可以用作派生選擇器
代碼:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <!-- 類選擇器 --> <p class="pclass">這是一個類選擇器</p> <div class="dclass"> 類選擇器 <!-- class下的派生選擇器 --> <p>我是派生選擇器</p> </div> </body> </html>
css
/*類選擇器*/ .pclass{ color: blue; } /*類選擇器的派生選擇器p*/ .dclass p{ color: red; }
7. 屬性選擇器
1. 屬性選擇器
對帶有指定屬性的HTML元素設置樣式
2. 屬性和值選擇器
代碼:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> /*屬性選擇器*/ [title]{ color: cadetblue; } /*屬性和值選擇器*/ [title=te]{ color: aquamarine; } </style> </head> <p title="title">屬性選擇器</p> <!--當設置了屬性和值選擇器, 則設置屬性時, 值必須給指定的值, 否則將不生效 或 指定屬性選擇器--> <p title="te">屬性和值選擇器</ptit> </body> </html>
南心芭比: 熱愛分享, 收獲快樂~