CSS基礎和基礎選擇器
連結 a標籤
-
自帶屬性：
href: 連結的路徑
target:
_self 在當前頁跳轉，預設就是
_blank 在新頁面跳轉
-
設定所有連結預設在新頁面開啟
-
<base target="_blank"> -
頭部設定
-
-
區域性連結
-
<!-- 空連結, 加#站位 -->
<a href="#">點選</a>
<!-- #加上要跳轉位置對應的id值 -->
<a href="#a">出師表</a>
<a href="#b">岳陽樓記</a>
<a href="#c">小石潭記</a>
<h3 id="a">出師表</h3>
-
-
巢狀關係
-
a標籤除了不能巢狀a標籤之外，可以巢狀任何其他標籤
-
HTML列表
-
無序列表
-
1.塊級標籤
2.結構ul>li
3.前面預設自帶圓點符號
4.list-style-type: none; 可以去掉圓點符號
-
-
有序列表
-
1.塊級標籤
2.結構ol>li
3.前面自帶1、2、3、4
4.list-style-type: none;可以去掉符號
-
自帶屬性
type
1 A a I i
start
設定起始值
reversed
設定為倒數
-
-
自定義列表
-
1.塊級標籤
2.dl>dt或dd
3.dd自帶外邊距
-
HTML表格
-
表格的基本結構
-
table: 表格最外層大標籤
-
tr: 表格每一行
-
td: 表格每個單元格，預設居左
-
-
表格的完整結構
-
thead: 表格的頭部，通常寫表格每一列的標題
-
tbody: 表格的主體，寫表格的資料
-
tfoot: 表格的底部，寫表格的腳註
-
th: 表格標題的單元格。預設居中
-
caption: 表格的標題
-
-
表格自帶屬性
-
border: 表格的邊框
-
cellpadding: 單元格的內容與邊框之間的空間
-
cellspacing: 單元格與單元格之間的空間
-
align: 單元格的水平對齊方式
-
valign: 單元格的垂直對齊方式
-
-
表格的css屬性
-
border-collapse
-
collapse: 表格設定為單一邊框，cellspacing失效
-
-
-
表格的合併
-
行合併
-
rowspan
-
兩行合併為一行，上下合併
-
-
列合併
-
colspan
-
兩列合併為一列，左右合併
-
-
語義化
-
概念：運用合適的標籤和特定的屬性去格式化文件（合適標籤和屬性要用在合適的場合）
-
優點：
-
易於開發和維護
-
使用者體驗比較好
-
易於seo,易於爬蟲抓取關鍵字，能和搜尋引擎建立良好的溝通。
-
即使在沒有css樣式的情況下，也能呈現良好的效果
-
css簡介
-
cascanding style sheets （層疊樣式表）（級聯樣式表）
-
作用：
-
文字內容：文字大小，文字顏色，對齊方式。。。。
-
標籤的樣式 ： 背景色，邊框寬度顏色
-
頁面的佈局 ： 浮動，定位
-
css引入方式
-
行內式
-
行內式只作用於當前標籤
-
<div style="width: 200px;height: 200px;">1</div> -
特點：程式碼冗餘，結構層與表示層不分離。
-
-
內嵌式（文字內部引入）
-
只作用於當前文件
-
<head>
<style>
/* 標籤選擇器 */
div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head> -
特點：程式碼相對清晰，結構層與表示層不完全分離
-
-
外鏈式（文字外部引入）
-
可以作用於任何文件，需要link標籤引入
-
<link rel="stylesheet" href="./css/index.css"> -
特點：程式碼非常清晰，結構層與表示層完全分離
-
css語法
-
屬性名：屬性值；屬性名：屬性值；屬性名：屬性值；屬性名：屬性值；。。。
-
屬性名：屬性值；-----一個css樣式宣告
-
color:red;
css引入方式優先順序
-
行內式最優先，內嵌式和外鏈式後引入生效
基礎選擇器
-
萬用字元選擇器
-
格式：
* {
屬性名:屬性值;
屬性名:屬性值;
屬性名:屬性值;
。
。
}
* 代表所有標籤
-
-
標籤選擇器
-
格式：
關鍵字 {
屬性名:屬性值;
屬性名:屬性值;
屬性名:屬性值;
。
。
}
-
-
類選擇器
-
格式：
.類名 {
屬性名:屬性值;
屬性名:屬性值;
屬性名:屬性值;
。
。
}
-
-
id選擇器
-
格式
#id名 {
屬性名:屬性值;
屬性名:屬性值;
屬性名:屬性值;
。
。
}
-
-
優先順序
-
id選擇器>類選擇器>標籤選擇器>萬用字元選擇器
-
-