目錄
1. 基本語法格式
2. 引入方式
2.1 內部樣式
2.2 內聯樣式
2.3 外部樣式
3. 基礎選擇器
3.1 標簽選擇器
3.2 類選擇器
3.3 ID選擇器
4. 復合選擇器
4.1 后代選擇器
4.2 子選擇器
4.3 并集選擇器
4.4 偽類選擇器
1. 基本語法格式
選擇器+若干屬性聲明
2. 引入方式
2.1 內部樣式
使用style標簽，直接把CSS寫到HTML文件中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
/* {}中編寫CSS屬性，可以寫一個或多個
每個屬性都是一個鍵值對，鍵和值之間用:分割，
鍵值對之間用;分割
每個鍵值對既可獨占一行，也可不獨占一行*/
color:green;
font-size: 30px;
}
</style>
</head>
<body>
<p>
這是一個段落
</p>
</body>
</html>
注：style標簽可以編寫在代碼的任何位置：head標簽中可以，body標簽中也可；
2.2 內聯樣式
使用style屬性，針對指定的元素設置樣式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color:green; font-size: 40px;">
這是一個段落
</p>
<p>
這是另一個段落
</p>
</body>
</html>
注：（1）不需要寫選擇器，直接寫屬性鍵值對，此時只對當前元素生效；
（2）內聯樣式的優(yōu)先級高于外部樣式的優(yōu)先級：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p style="color:green; font-size: 40px;">
這是一個段落
</p>
<p>
這是另一個段落
</p>
</body>
</html>
2.3 外部樣式
外部樣式就是把CSS代碼單獨作為一個CSS文件，再通過link屬性，令HTML引入該CSS文件：
（1）在當前html文件所在文件夾下創(chuàng)建css文件，名為：STYLE.css：
p{
color:blue;
font-size: 25px;
}（2）在code2.html文件中引用CSS文件并運行如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="STYLE.css">
</head>
<body>
<p>
這是一個段落
</p>
<p>
這是另一個段落
</p>
</body>
</html>根據目錄打開文件：
注：外部樣式是在實際開發(fā)中最常見的編寫CSS的方式，這種方式可以有效實現HTML和CSS分離開來，相互不影響。（為演示簡單方便，教學中多采用內部樣式）
3. 基礎選擇器
3.1 標簽選擇器
在大括號前寫標簽名字，表示選中當前頁面中所有的指定標簽；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:goldenrod;
font-size: 25px;
}
</style>
</head>
<body>
<p>
這是第一個段落
</p>
<div>
這是一個div
</div>
<p>
這是第二個段落
</p>
</body>
</html>根據目錄打開文件：
所有的p標簽都被設置了
3.2 類選擇器
可以創(chuàng)建CSS類，手動指定哪些元素應用這個類：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
/* 定義一個CSS類，類名為.one */
.one{
color:brown;
}
.two{
color:darkgreen;
}
.three{
color:cornflowerblue;
}
.four{
font-size: 25px;
}
</style>
<div class="one">
這是第一個div
</div>
<div class="two">
這是第二個div
</div>
<div class="one">
這是第三個div
</div>
<div class="three four">
這是第四個div
</div>
</body>
</html>
注：（1）此處的類與面向對象的類無關，CSS的類是一組屬性的集合，方便其他地方引用；
（2）在CSS中，定義類名必須以.開頭，但在body對應段落中引用類時不需要再加.；
（3）一個類可以被一個元素引用，也可以被多個元素引用；
? ? ? ? 一個元素可以引用一個類，也可以引用多個類；
（4）CSS全稱為Cascading Style Sheets，即：層疊樣式表，即一個元素可以被應用多組樣式的，這些樣式就像層層疊加一樣，在網頁中打開DOM資源管理器選中第四個div查看樣式：
即第四個div最終效果是由font-size和color兩個屬性疊加起來的綜合效果；
3.3 ID選擇器
HTML頁面中的每個元素都可以設置一個唯一的id，作為元素的身份標識：給元素安排id后，就可以通過id來選中對應元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#firstDiv{
color:brown;
}
</style>
</head>
<body>
<div id="firstDiv">
這是一個div
</div>
<div id="secondDiv">
這是另一個div
</div>
</body>
</html>
注：（1）同一個頁面中元素的id必須是唯一的，跨頁面可以存在重名的id；
（2）對于類選擇器，允許令多個元素應用同一個類的；
? ? ? ? 對于ID選擇器，則只能針對唯一的元素生效；
4. 復合選擇器
以上三選擇器均屬于簡單的基礎選擇器，除此之外，CSS還支持一些更復雜的復合選擇器，即組合基礎選擇器；
4.1 后代選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
ul li{
color:brown;
}
.one li{
color:forestgreen;
}
</style>
<ol class="one">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
</html>根據目錄打開文件：?
?
注：（1）寫法含義為：先去頁面中查詢所有的ul，再在這些ul中查詢所有的li，此時頁面中ol中的li是不會被選中的；
（2）li只要是ul的后代即可，不只是子元素，孫代元素亦可；
（3）后代選擇器可以將多個簡單基礎選擇器進行組合，可以是標簽、類、id選擇器的任意組合；
4.2 子選擇器
子選擇器也是將多個基礎選擇器進行組合，但子選擇器只找匹配的子元素，不找孫代元素，針對性更強：
格式為：選擇器1>選擇器2{
屬性...
}
比如：基于以下body內代碼：
<div class="one">
<!-- 鏈接1元素是one的子元素 -->
<a href="#">鏈接1</a>
<!-- p標簽是one的子元素 -->
<p>
<!-- 鏈接2是one的孫子元素 -->
<a href="#">鏈接2</a>
</p>
</div>分別使用后代選擇器表示法（空格）與子選擇器表示法（>）：
（1）后代選擇器：
<style>
.one a{
color:red;
}
</style>根據目錄打開文件：
子元素與孫代元素均被選擇器選中，變?yōu)榧t色；
（2）子選擇器：
<style>
.one>a{
color:red;
}
</style>
子元素被選中，變?yōu)榧t色；
孫代元素沒有被選中，仍舊為默認色；
4.3 并集選擇器
語法格式為：
選擇器1, 選擇器2{
屬性...
}
含義為：既針對選擇器1生效，又對選擇器2生效，即多組選擇器應用了同樣的樣式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.two{
font-size: 25px;
}
.three{
font-size: 25px;
}
</style>
</head>
<body>
<div class="one">
<a href="#" class="two">鏈接1</a>
<p>
<a href="#" class="three">鏈接2</a>
</p>
</div>
</body>
</html>對于以上代碼，將two類與three類中的內容字體均設置為25px，可以使用并集選擇器實現：
<style>
.two, .three{
font-size: 25px;
}
</style>?運行結果如下：
4.4 偽類選擇器
偽類選擇器是復合選擇器的一種特殊用法。之前的選擇器是選中某個元素，但偽類選擇器選中某個元素的某個特定狀態(tài)；
（1）:hover 鼠標懸停時的狀態(tài)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one:hover{
color:red;
font-size: 40px;
/* 表示鼠標懸停在內容上時，字體變紅且字體變?yōu)?0像素*/
}
</style>
</head>
<body>
<div class="one">這是一個div</div>
</body>
</html>運行后頁面如下：
鼠標未懸停在字體上時：
鼠標懸停在字體上時：
（2）:active 鼠標按下時的狀態(tài)文章來源：http://www.zghlxwxcb.cn/news/detail-705452.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-705452.html
到了這里，關于【JavaEE】_CSS引入方式與選擇器的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
