20-45
?20~45集--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
目錄
?20~45集--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
?表格標簽
表格屬性
表單標簽
表單與表格的組合使用
CSS基礎語法
CSS基礎語法：
內聯樣式與內部樣式
CSS的顏色表示法
CSS背景樣式：
CSS邊框樣式
family字體類型
字體大小粗細樣式
文本縮進與文本對齊
文本的行高
CSS復合樣式
CLASS選擇器及注意事項
??列表之間可以互相嵌套
<ul><li>遼寧省<ul><li>沈陽</li><li>大連</li><li>山東</li></ul></li> </ul>?表格標簽
<table>:表格的最外層容器
? ? <tr>：定義表格行
? ? <th>：定義表頭
? ? <td>：定義表格單元
? ? <caption>：定義表格標題
語義化標簽：<tHead><tBaby><tFood>————>表格更加規范
<thead>可以出現多次<tbaby><tfood>只可以出現一次
<table><caption>天氣預報</caption><thead><tr><th>日期</th><th>天氣情況</th><th>出行情況</th></tr></thead><tbody><tr><td>2022年1月1日</td><td>🌤</td><td>天氣晴朗適合出門</td></tr><tr><td>2022年1月2日</td><td>小雨</td><td>出門帶傘</td></tr></tbody><tfood></tfood></table>表格屬性
boeder:表格邊框
cellpadding：單元格內的空間
cellspacing：單元格之間的空間
rowspan：合并行
colspan：合并列
align：左右對齊方式
valign：上下對齊方式
表單標簽
form、input.....
? ? ? ? input（單標簽）決定type是什么屬性
<form action="http://www.baidu.com"><h2>輸入框：</h2><input type="text" placeholder="請輸入用戶名"><h2>密碼框：</h2><input type="password" placeholder="請輸入密碼"><h2>復選框</h2><input type="checkbox" checked>蘋果<input type="checkbox" checked>香蕉<input type="checkbox" disabled>葡萄<h2>單選框</h2><input type="radio" name="gender">男<input type="radio" name="gender">女<h2>上傳文件</h2><input type="file"><h2>提交按鈕和重置按鈕</h2><input type="submit"><input type="reset"> </form><textarea>：多行文本框
<select>、<option>：下拉菜單
<label>：輔助表單
一些常見屬性：
checke、disable、name.....
<h2>多行文本框</h2><textarea cols="30" rows="10"></textarea><h2>下拉菜單</h2><select><option selected disable>請選擇</option><option>北京</option><option>上海</option><option>杭州</option> </select><select size="3"><option>杭州</option><option>北京</option><option>上海</option></select><select multiple><option>杭州</option><option>上海</option><option>北京</option></select><input type="file" multiple><input type="radio" name="gender" id="man"><label for="man">男</label><input type="radio" name="gender" id="woman"><label for="woman">女</label></form> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><form action=""><table border="1" cellpadding="30"><tbody><tr align="center"><td rowspan="4">總體信息</td><td colspan="2">用戶注冊</td></tr><tr align="right"><td>用戶名</td><td><input type="text" placeholder="請輸入用戶名"></td></tr><tr align="right"><td>密碼：</td><td><input type="password" placeholder="請輸入密碼"></td></tr><tr align="center"><td colspan="2"><input type="submit"> <input type="reset"></td></tr></tbody></table></form> </body> </html>表單與表格的組合使用
<div>(塊)：
全稱為division，“分割、分區”的意思，<div>標簽用來劃分一個區域，相當于一塊區域容器，可以容納段落、標題、表格、圖像等各種網頁元素。HTML中大多數的標簽都可以嵌套在<div>標簽中，<div>中還可以嵌套多層<div>，用來將網頁分割成獨立的、不同的部分，來實現網頁的規劃和布局。
<span>（內聯）：
用來修飾文字的，div與span都是沒有任何默認樣式的，需要有CSS的配合
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div><h2><a href="#"><span>html5</html></span></h2><a HREF="#"><img src="" alt=""></a><p></p></div><span></span></body> </html>嘗試做出無修飾的
CSS基礎語法
格式：
選擇器{屬性1：值1；屬性2：值2}
單位：
px-->像素（pixel%）--->百分比
基本樣式：
width、height、blackground-color
CSS基礎語法：
選擇器{屬性1：值1；屬性2：值2}
width：寬
height：高
background—color：背景色
長度單位：
? ? ? ? 1.px->像素
? ? ? ? 2.%->百分比
? ? ? ? ? ? ? ? 外容器->600px? 當前容器 50%->300px
CSS注釋? ?/*注釋的內容*/
快捷操作：shift+alt+a
ctrl+/
內聯樣式與內部樣式
內斂（行內，行間）樣式：
在html標簽上添加style屬性來實現
內部樣式：
在<style>標簽內添加的樣式
PS：內部樣式用的代碼，可以復用代碼
CSS樣式的引入方式：
1、內聯樣式：
style屬性
2、內部樣式：
style標簽
3、外部樣式：
引入一個單獨的CSS文件（name.css）
通過link標簽引入外部資源，rel屬性指定資源跟頁面的關系，href屬性資源的地址
通過@inport方式引入外部樣式。（不建議使用）
<link>標簽
rel
href
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./common.css"><title>Document</title><style></style> </head> <body><div>這是一個大塊</div> </body> </html> div{ width: 100px; height: 100px; background-color: aqua}CSS的顏色表示法
1、單詞表示法：red bule green...
2、十六進制表示法：#000? ? ?#ffff
0 1 2 3 4 5 6 7 8? 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
3、rgb三原色表示法：rgb（255，255，255）對應白色
范圍0--255
CSS背景樣式：
background-color：背景顏色
background-image：背景圖片
url（背景地址）
background-repeat：背景圖片的平鋪方式
repeat-x? ? ? ?x軸平鋪
repeat-y? ? ? ? y軸平鋪
repeat（x，y都進行平鋪，默認值）
no-repeat? 都不平鋪
background-position：背景圖片的位置
x，y：number單詞
? ? ? ? x：left，center，right
? ? ? ? y，top，center，bottom
background-attachment：背景圖隨滾動條的移動方式
? ? ? ? scroll默認值（背景位置按照當前元素偏移）
? ? ? ? fixed（背景位置按照瀏覽器位置進行偏移）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{ width:300px;height：300px；background-color:red;background-image: url(./img/dog.jpg); background-repeat: no-repeat;background-position: 50% 50%;background-attachment: scroll;}</style> </head> <body><div>這是一個塊</div> </body> </html>CSS邊框樣式
1.border-style : 邊框樣式
solid : 實線
dashed: 虛線
dotted : 點線
2.border-width : 邊框的大小
px···
3.border-color : 邊框的顏色
red #f00 ···
注: 針對某一條進行單獨設置 : border-left-style : 中間是方向 left、right、top、bottom
邊框實現三角形
顏色 : 透明顏色 transparent
family字體類型
1.font-family : 字體類型
英文字體 : Arial,‘Times New Roman’
中文字體 : 微軟雅黑，宋體
2.中文字體的英文名稱 :
微軟雅黑: ‘Microsoft YaHei’(非襯線體)
宋體: SimSun(襯線體)
3.襯線體與非襯線體
==注意點: ==
1.多個字體類型的設置目的
2.引號的添加目的
字體大小粗細樣式
front-size : 字體大小
1.默認大小 : 16px
2.寫法 : number(px) | 單詞 ( small large ··· 不推薦使用)
文本修飾與文本大小寫
1.rext-decoration : 文本裝飾
下劃線(underline)、刪除線(line-through)、上劃線(overline)、不添加任何裝飾(none)
取值
注: 添加多個文本修飾 : line-through under-line overline
2.text-transform : 文本大小寫(針對英文)
小寫 : lowercase
大寫 : uppercase
只針對首字母大寫:capitalize
文本縮進與文本對齊
1.text-indent : 文本縮進
首行縮進
em單位: 相對單位 ，1em永遠跟字體大小相同
2.text-align : 文本對齊方式
對齊方式 : left、right、 center、justify (兩端點對齊)
文本的行高
line-height : 定義行高
取值: 1. number( px ) | scale(比列值，跟文字大小成比列的 )
行高: 一行文字的高度， 上邊距和下邊距的等價關系。
默認行高: 不是固定值，而是變化的。根據當前字體的大小再不斷的變化。
文本與段落實現個人簡介
?
CSS復合樣式
一個CSS屬性只控制一種樣式，叫做單一樣式。
一個CSS屬性控制多種樣式，叫做復合樣式。
復合樣式:
復合的寫法，是通過空格的方式實現的。復合寫法有的是不需要關心順序的，例如: background、border；有的需要關心順序，例如:font。
1.background : red url() repeat 0 0;
2.border : 1px red solid
3.font :
注 : 最少要有兩個值( size、family)
weight style size family √
style weight size family √
weight style size/line-height family √
注: 盡量不要混寫，如果非要混寫，那么一定要線寫復合樣式再寫單一樣式。
ID選選擇器及注意事項
1.ID選擇器
css : #elem{}
html : id= “elem”
注:
1.在一個頁面中，ID值是唯一的。
2.命名規范:字母、下劃線、中劃線、數字(命名的第一位不能是數字)。
3.命名方式:駝峰式、下劃線式、短線式。
駝峰寫法: searchButton(小駝峰) SearchButton(大駝峰)
searchsmallRutton
短線寫法: search-small-button=
下劃線寫法: search_small_button
CLASS選擇器及注意事項
CLASS選擇器
css : elem{}
html : class = “elem”
注:
1.class選擇器是可以復用的。
2.可以添加多個class樣式。
3.多個樣式的時候，樣式的優先級根據CSS決定，而不是class屬性中的順序
4.標簽+類的寫法
?
總結
- 上一篇： CMMI证书背后的6大怪相
- 下一篇： 联想服务器x3250 m5文档,【联想x