北京實訓Day01-CSS部分-各種選擇器
0x00 選擇器介紹
選擇器：查詢頁面元素的一種方式方法
{}：規定了選擇器查詢到的元素(標籤)實現統一的樣式規定
樣式規則裡面放置的是屬性和屬性值
需要注意的是：屬性和屬性值需要使用冒號：連線
每一組屬性和屬性值結束後需要使用分號結尾
如果是最後一組，則不用寫分號
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 網站的組成部分 1、HTML的結構層======標籤 結構===完畢 2、CSS的樣式層=======對標籤結構的修飾 樣式修飾 語法： 選擇器{ 樣式規則 } 選擇器：查詢頁面元素的一種方式方法 {}：規定了選擇器查詢到的元素(標籤)實現統一的樣式規定 男生{ 髮型:3mm; T恤:大紅色; 短褲:正綠色; } 樣式規則裡面放置的是屬性和屬性值 注意：屬性和屬性值需要使用冒號：連線 每一組屬性和屬性值結束後需要使用分號結尾 如果你的屬性和屬性值是最後一組，則不需要使用分號 如果後面繼續填寫，則需要使用分號 3、JS的行為互動層====動態的效果 --> </body> </html>
0x01標籤、類選擇器
CSS的選擇器有 標籤選擇器、類選擇器、id選擇器等 通常配合style標籤使用
如果開發比較大的專案，則最好單獨建立css檔案，用類似
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
這樣的語句進行連結
基本語法：
標籤{樣式規則}
.類名{樣式規則}
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> h1{ background-color: red; } h2{ background-color: deeppink; } h3{ background-color: orange; } p{ background-color: yellow; } .p1{ background-color: aqua; } #love{ background-color: pink; } </style> </head> <body> <!-- 選擇器：頁面元素的查詢方式方法，不止一種 有哪些選擇器： 標籤選擇器：通過標籤的名字查詢頁面中的元素 通過標籤選擇器查詢頁面元素的時候，查詢的範圍太大了 類選擇器 給元素起一個類名，通過類名去查詢頁面元素 基本語法： HTML: <div class = "box1"></div> CSS : .box1{樣式規則} 注意:.不能省略 id選擇器 CSS基本語法的使用 一定要配合style標籤使用;並且style標籤需要放在head標籤裡面 --> <p class="p1">我是一個p標籤</p> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <h1 id="love">不管我是什麼，我都是愛壯壯的寶寶♥</h1> <div class="p1">我是第一個div</div> <div>我是第二個div</div> <div>我是第三個div</div> <div>我是第四個div <p>我是div裡面的p標籤</p> </div> <h1>我是一個一級標題</h1> <h2>我是一個二級標題</h2> <h3>我是一個三級標題</h3> <h4>我是一個四級標題</h4> </body> </html>
0x02-id選擇器
給元素起一個id的名字，CSS裡面通過這個id的名字查詢頁面的元素，實現對應的修飾
每一個id的取值不能一致，只能出現一次(從JS的角度考慮問題)
起名字的規範：
1、見名知意
2、不能以數字開頭
3、不能以漢字命名
4、能用字母、數字、下劃線配合使用 eg:box1 / box_1
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #bob{ background-color: aquamarine; } </style> </head> <body> <!-- id選擇器 給元素起一個id的名字，CSS裡面通過這個id的名字查詢頁面的元素，實現對應的修飾 每一個id的取值不能一致，只能出現一次(從JS的角度考慮問題) 基本語法： HTML：<div id = "bob"></div> CSS部分： #bob{ 樣式規則 } --> <div class = "box" id="bob"> 我是一個div，我有兩個名字，一個類名 一個id名字 </div> </body> </html>
0x03-標籤、類、id選擇器的優先順序
問題：
如果我使用不同的選擇器修飾同一個元素，實現的效果是啥樣的？
不同選擇器修飾元素的時候，實現的效果與程式碼的順序沒有關係，跟選擇器的權值大小有關
id選擇器權值>類選擇器權值>標籤選擇器權值
所以我們就有：
公式：id>類>標籤>萬用字元選擇器.
萬用字元選擇器就幹一件事：取消元素自帶的內邊距、外邊距
即
*{
margin: 0;
padding: 0;
}
選擇器對比示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*標籤選擇器*/
div{
width: 200px;
height: 200px;
background-color: orange;
}
/*類選擇器*/
.box{
width: 300px;
height: 300px;
background-color: yellow;
}
/*id選擇器*/
#bob{
width: 400px;
height: 400px;
background-color: #FFC0CB;
}
</style>
</head>
<body>
<div class="box" id="bob">
</div>
</body>
</html>
執行之後發現，頁面顯示的屬性是css中#bob的內容
0x04-萬用字元選擇器
用來取消元素自帶的外邊距和內邊距
外邊距(margin)：外邊框和另一個外邊框的距離
內邊距(padding): 內容和自己的外邊框之間的間距
這裡有一張圖可以快速理解：
消除元素自帶內邊距外邊距示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
如何取消元素自帶的內邊距和外邊距
-->
<style type="text/css">
/* 萬用字元選擇器 */
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>我是一個p標籤</p>
<h1>我是一個h1標籤</h1>
<h3>我是一個h3標籤</h3>
<ul>
<li>XX工業大學（XX省科學院）</li>
<li>北京千鋒教育</li>
</ul>
</body>
</html>
0x05-文字屬性、各種(上中下)劃線
1、文字加粗屬性
font-weight:bold;
2、文字傾斜屬性
font-style:italic;
3、下劃線 == 刪除線屬性====修飾線
text-decoration :
underline ===== 下劃線
line-through == 中劃線
overline ====== 上劃線
none ========== 取消文字修飾線(修飾線不夠的時候)
一個示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
/* 文字加粗屬性 */
font-weight: bold;
/* 實現傾斜效果 */
font-style: italic;
/* 文字修飾線 */
text-decoration: overline line-through underline;
}
/* u{
text-decoration: none;
}
s{
text-decoration: none;
}
a{
} */
</style>
</head>
<body>
<!--
CSS樣式規則：
規定了頁面中的標籤實現什麼樣的樣式
主要講解內容：屬性和屬性值
屬性：對元素的形容，對元素的修飾
屬性值：就是屬性的取值，修飾的取值
選擇器{
屬性:屬性值;
}
eg：
男生{
髮型:3mm;
}
-->
<p>今天是6月28日，來千鋒實訓的第一天，離家的第三天</p>
<u>我是一個下劃線標籤</u> <br>
<s>我是一個刪除線標籤</s> <br>
<u><s>我是一個下劃線和一箇中劃線在一起的效果喲</s></u>
</body>
</html>
0x06-元素的寬度和高度、背景
元素的寬度和高度屬性
元素的寬度
width:200px;
元素的高度
height:200px;
不是所有的元素都能直接設定寬度和高度的，因為元素的型別不同
塊級元素可以直接設定寬高，但是行內就不行。
目前來看可以設定寬高的有：div,p,ul,li,ol,dl,dt,dd,h1-h6,
不能設定寬高的元素：a,b,u,s,sup,sub,span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
div{
width: 200px;height: 200px;background-color: turquoise;
}
p{
width: 100px;height: 100px;background-color: mediumpurple;
}
b{
width: 200px;height: 200px;background-color: yellow;
}
</style>
<body>
<div>我是一個div</div>
<p>我是一個p標籤</p>
<b>我是一個b標籤</b>
<i>我是一個傾斜i標籤</i>
</body>
</html>
0x07-文字相關操作
調整文字大小
font-size:
10px其實已經是極限了，考慮到眼睛舒適度
預設瀏覽器字型大小：16px
文字顏色
color：
1.顏色
2.顏色的取值：可以為#配合六位十六進位制
0-9A-F
#ee1234
3.rgb(red,green,blue);
0-255
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.p1{
/* 設定字型大小 */
font-size: 16px;
/* 設定文字顏色 */
color:rgb(123,234,234);
}
</style>
</head>
<body>
<!-- 文字的顏色和文字的大小 -->
<p class="p1">千鋒教育聯合齊魯工業大學校內實訓課程</p>
<p class="p2">千鋒教育聯合齊魯工業大學校內實訓課程</p>
</body>
</html>