html--css的引入方式 ,選擇器 選擇器的優先順序 和偽類選擇器
阿新 • • 發佈：2019-01-09
CSS的引入方式
CSS的選擇器
CSS選擇器進階
CSS選擇器的優先順序
CSS的偽類選擇器
## 內容回顧:
1.h1~h6:加粗,數字越大級別越小,自動換行
2.br:換行; hr:分割線; & nbsp ;(特殊符號,空格)
3.p:與前邊和後邊內容之間有間距
4.a標籤的href:本地檔案連線;網路連線;錨鏈接
target:_blank另期頁面,預設是自己頁面
name:主要為了設定錨鏈接的錨點
5. img圖片,src:本地檔案地址和網路地址
- alt:圖片損壞時給的提示
- align:圖片的對齊方式
- title:滑鼠懸浮時提示的文字
- width:寬度
- hight:高度
6.ul:無序列表,內部能包裹li,type更改顯示的樣式,預設是實心圓,還可以更改為空心圓(circle)和正方塊(square)
7.有序列表,內部能包裹li,type型別,預設是阿拉伯數字,可更改為大小寫字母,還可以更改為羅馬文字
start,序號起始位置
8.dl定義列表,dt,dd*5 tab一下就出來了,pycharm幫我做的.
9table表格標籤,border:邊框型別;bordercolor:邊框顏色;bgcolor:背景顏色;background:被禁圖片,寬高,align:對齊方式;style="border-collapse:collapse"讓表格的線條變成實心線.
tr代表一行
td代表一行內的一個單元格;rowspan:縱向合併;colspan:橫向合併.
10.form表單;action:對應要提交的網路地址;method:get和post兩個方法,預設是get.
input的型別們
- text普通文字輸入框
- password,密文文字輸入框
- checkbox,多選框,多用來服務條款點那個對號
- radio,單選,多用於選擇性別,name得統一才能實現單選
- file,檔案上傳按鈕
- date,日期選擇框
- submit:form表單提交資料時候用它
- button:普通按鈕
- image:一個圖片,自帶submit,src(王瑞東)=圖片地址.
- select:下拉選單,更改下拉選單的多選multiple,size
- option下拉的每一個選項,預設選中此選項用selected
- textarea:文字輸入框,可改變大小.
## 內容詳細
1.div
是塊兒級標籤,是嫖老師的最愛,因為他灰常單純,什麼都沒有,想捏成什麼樣就捏成什麼樣
塊級標籤內的文字,超過了塊的寬度則會自動換行,但是如果是長英文沒分割的字串,不會換行,會溢位
2.span
是行級標籤,嫖老師設定的樣式特別是寬高,不顯示了,並不是你想怎麼樣就怎樣
一個行內的寬高和背景大小由填充的內容決定.不管內容多少,都不會溢位.
3.行內塊
可以設定寬高,不自動換行.
在一行內顯示,而且可以設定寬高
一個底邊對齊的現象
img圖片標籤
input輸入框
textarea文字輸入區域
4.都在一行內的標籤--簡稱為行內標籤
不能設定寬高,不自動換行,同時具備
a標籤
span標籤
b標籤 strong標籤
em標籤,i標籤
u標籤,del標籤
5.不在一行內的標籤-- 塊級標籤
可以設定寬高,可以自動換行同時具備才叫做塊級標籤
p
h1~h6
table
列表:ol;ul;dl
div
其他:不在上邊三類裡的.
form標籤 不算,它是一個容器,容器內放了很多標籤,他自己有自己的屬性.
br
hr
==================================================================
## CSS的簡介
cascdaing style sheet 層疊樣式表,簡稱CSS
層疊:通過CSS的屬性等把頁面層疊起來
樣式:設定頁面每一塊的樣式
表:頁面排版
## CSS的書寫方式
方式一:行內式,在標籤中直接書寫
優點:肯定不會選錯標籤
缺點:程式碼冗餘,且修改不方便
方式二:一個頁面內接入的,稱為內接式
書寫在head裡的style標籤裡
優點:修改方便,直觀.
缺點:關聯性太強.如果寫錯變數名可能會釀成大禍.
方式三:外接式
匯入方式:利用link標籤匯入
優點:協同開發,不同型別的程式碼分檔案存放
缺點,檔案出問題或者丟了,頁面就塌了.
## CSS基本選擇器
基本選擇器中的標籤選擇器
通過標籤名直接就可以選擇到標籤,頁面中所有符合選擇條件的標籤都會被選擇.
id選擇器:常濤
通過#號找到id
id不能以數字開頭
指哪打哪,因為id是唯一的
類選擇器
通過.找到類名
類名可以重複
類一般值的同一群相同屬性的統稱.
萬用字元選擇器
用*號操作所有標籤
使用場景:刪除邊框
```css
* {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
```
CSS的優先順序
- 標籤選擇器層級一致的時候,從上往下,以下邊的為準
- 類的選擇器的優先順序大於標籤選擇器
- 通過id找到的具有唯一性,優先順序最高
- 行內樣式的設定優先順序最高
- 繼承的樣式優先順序是最低的s
## CSS的高階選擇器
後代選擇器
```
/* 後代選擇器 */
body li {
color: red;
}
```
子代選擇器
```
/*!* 子代選擇器 *!*/
body ul > p {
color: green;
}
```
弟弟選擇器
```
/*!* 弟弟選擇器 *!*/
h1 ~ h2 {
color: pink;
}
```
毗鄰選擇器
```
/*!* 毗鄰選擇器 *!*/
h1 + h2 {
color: #cc6600;
}
```
組合選擇器
```
/* 組合選擇器 */
h1 ~ h2, li, h1 {
color:darkviolet ;
color: green;
}
```
偽類選擇器
a標籤的四個形態:愛恨準則 LoVe HAte
```html
<style>
/* 愛恨準則LoVe HAte */
a:link {
color: green;
}
a:visited {
color: blueviolet;
}
a:hover {
color: yellow;
}
a:active {
color: red;
}
</style>
<body>
<a href="http://www.jd.com">a標籤未被點選時的形態link</a><br>
<a href="#">a標籤被點選時的形態</a><br>
<a href="#">a標籤點選完畢時的形態</a><br>
<a href="#">a標籤懸浮時的形態</a><br>
</body>
```
偽元素選擇器
```HTML
<style>
/* 在文字之前新增內容 */
div:before {
content: "SB";
}
/* 在文字之後新增內容 */
div:after {
content: "翔";
}
/* 文字的第一個字母發生變化 */
div:first-letter {
color: green;
}
/* 文字的首行發生變化 */
div:first-line {
color: #cc6600;
}
</style>
<div>alex吃...</div>
```
注意:偽元素選擇器,僅僅適用於塊級標籤.