20-45
?20~45集--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
目錄
?20~45集--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
?表格標(biāo)簽
表格屬性
表單標(biāo)簽
表單與表格的組合使用
CSS基礎(chǔ)語法
CSS基礎(chǔ)語法：
內(nèi)聯(lián)樣式與內(nèi)部樣式
CSS的顏色表示法
CSS背景樣式：
CSS邊框樣式
family字體類型
字體大小粗細(xì)樣式
文本縮進(jìn)與文本對(duì)齊
文本的行高
CSS復(fù)合樣式
CLASS選擇器及注意事項(xiàng)
??列表之間可以互相嵌套
<ul><li>遼寧省<ul><li>沈陽</li><li>大連</li><li>山東</li></ul></li> </ul>?表格標(biāo)簽
<table>:表格的最外層容器
? ? <tr>：定義表格行
? ? <th>：定義表頭
? ? <td>：定義表格單元
? ? <caption>：定義表格標(biāo)題
語義化標(biāo)簽：<tHead><tBaby><tFood>————>表格更加規(guī)范
<thead>可以出現(xiàn)多次<tbaby><tfood>只可以出現(xiàn)一次
<table><caption>天氣預(yù)報(bào)</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：單元格內(nèi)的空間
cellspacing：單元格之間的空間
rowspan：合并行
colspan：合并列
align：左右對(duì)齊方式
valign：上下對(duì)齊方式
表單標(biāo)簽
form、input.....
? ? ? ? input（單標(biāo)簽）決定type是什么屬性
<form action="http://www.baidu.com"><h2>輸入框：</h2><input type="text" placeholder="請(qǐng)輸入用戶名"><h2>密碼框：</h2><input type="password" placeholder="請(qǐng)輸入密碼"><h2>復(fù)選框</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>請(qǐng)選擇</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">用戶注冊(cè)</td></tr><tr align="right"><td>用戶名</td><td><input type="text" placeholder="請(qǐng)輸入用戶名"></td></tr><tr align="right"><td>密碼：</td><td><input type="password" placeholder="請(qǐng)輸入密碼"></td></tr><tr align="center"><td colspan="2"><input type="submit"> <input type="reset"></td></tr></tbody></table></form> </body> </html>表單與表格的組合使用
<div>(塊)：
全稱為division，“分割、分區(qū)”的意思，<div>標(biāo)簽用來劃分一個(gè)區(qū)域，相當(dāng)于一塊區(qū)域容器，可以容納段落、標(biāo)題、表格、圖像等各種網(wǎng)頁元素。HTML中大多數(shù)的標(biāo)簽都可以嵌套在<div>標(biāo)簽中，<div>中還可以嵌套多層<div>，用來將網(wǎng)頁分割成獨(dú)立的、不同的部分，來實(shí)現(xiàn)網(wǎng)頁的規(guī)劃和布局。
<span>（內(nèi)聯(lián)）：
用來修飾文字的，div與span都是沒有任何默認(rèn)樣式的，需要有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基礎(chǔ)語法
格式：
選擇器{屬性1：值1；屬性2：值2}
單位：
px-->像素（pixel%）--->百分比
基本樣式：
width、height、blackground-color
CSS基礎(chǔ)語法：
選擇器{屬性1：值1；屬性2：值2}
width：寬
height：高
background—color：背景色
長(zhǎng)度單位：
? ? ? ? 1.px->像素
? ? ? ? 2.%->百分比
? ? ? ? ? ? ? ? 外容器->600px? 當(dāng)前容器 50%->300px
CSS注釋? ?/*注釋的內(nèi)容*/
快捷操作：shift+alt+a
ctrl+/
內(nèi)聯(lián)樣式與內(nèi)部樣式
內(nèi)斂（行內(nèi)，行間）樣式：
在html標(biāo)簽上添加style屬性來實(shí)現(xiàn)
內(nèi)部樣式：
在<style>標(biāo)簽內(nèi)添加的樣式
PS：內(nèi)部樣式用的代碼，可以復(fù)用代碼
CSS樣式的引入方式：
1、內(nèi)聯(lián)樣式：
style屬性
2、內(nèi)部樣式：
style標(biāo)簽
3、外部樣式：
引入一個(gè)單獨(dú)的CSS文件（name.css）
通過link標(biāo)簽引入外部資源，rel屬性指定資源跟頁面的關(guān)系，href屬性資源的地址
通過@inport方式引入外部樣式。（不建議使用）
<link>標(biāo)簽
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>這是一個(gè)大塊</div> </body> </html> div{ width: 100px; height: 100px; background-color: aqua}CSS的顏色表示法
1、單詞表示法：red bule green...
2、十六進(jìn)制表示法：#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）對(duì)應(yīng)白色
范圍0--255
CSS背景樣式：
background-color：背景顏色
background-image：背景圖片
url（背景地址）
background-repeat：背景圖片的平鋪方式
repeat-x? ? ? ?x軸平鋪
repeat-y? ? ? ? y軸平鋪
repeat（x，y都進(jìn)行平鋪，默認(rèn)值）
no-repeat? 都不平鋪
background-position：背景圖片的位置
x，y：number單詞
? ? ? ? x：left，center，right
? ? ? ? y，top，center，bottom
background-attachment：背景圖隨滾動(dòng)條的移動(dòng)方式
? ? ? ? scroll默認(rèn)值（背景位置按照當(dāng)前元素偏移）
? ? ? ? fixed（背景位置按照瀏覽器位置進(jìn)行偏移）
<!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>這是一個(gè)塊</div> </body> </html>CSS邊框樣式
1.border-style : 邊框樣式
solid : 實(shí)線
dashed: 虛線
dotted : 點(diǎn)線
2.border-width : 邊框的大小
px···
3.border-color : 邊框的顏色
red #f00 ···
注: 針對(duì)某一條進(jìn)行單獨(dú)設(shè)置 : border-left-style : 中間是方向 left、right、top、bottom
邊框?qū)崿F(xiàn)三角形
顏色 : 透明顏色 transparent
family字體類型
1.font-family : 字體類型
英文字體 : Arial,‘Times New Roman’
中文字體 : 微軟雅黑，宋體
2.中文字體的英文名稱 :
微軟雅黑: ‘Microsoft YaHei’(非襯線體)
宋體: SimSun(襯線體)
3.襯線體與非襯線體
==注意點(diǎn): ==
1.多個(gè)字體類型的設(shè)置目的
2.引號(hào)的添加目的
字體大小粗細(xì)樣式
front-size : 字體大小
1.默認(rèn)大小 : 16px
2.寫法 : number(px) | 單詞 ( small large ··· 不推薦使用)
文本修飾與文本大小寫
1.rext-decoration : 文本裝飾
下劃線(underline)、刪除線(line-through)、上劃線(overline)、不添加任何裝飾(none)
取值
注: 添加多個(gè)文本修飾 : line-through under-line overline
2.text-transform : 文本大小寫(針對(duì)英文)
小寫 : lowercase
大寫 : uppercase
只針對(duì)首字母大寫:capitalize
文本縮進(jìn)與文本對(duì)齊
1.text-indent : 文本縮進(jìn)
首行縮進(jìn)
em單位: 相對(duì)單位 ，1em永遠(yuǎn)跟字體大小相同
2.text-align : 文本對(duì)齊方式
對(duì)齊方式 : left、right、 center、justify (兩端點(diǎn)對(duì)齊)
文本的行高
line-height : 定義行高
取值: 1. number( px ) | scale(比列值，跟文字大小成比列的 )
行高: 一行文字的高度， 上邊距和下邊距的等價(jià)關(guān)系。
默認(rèn)行高: 不是固定值，而是變化的。根據(jù)當(dāng)前字體的大小再不斷的變化。
文本與段落實(shí)現(xiàn)個(gè)人簡(jiǎn)介
?
CSS復(fù)合樣式
一個(gè)CSS屬性只控制一種樣式，叫做單一樣式。
一個(gè)CSS屬性控制多種樣式，叫做復(fù)合樣式。
復(fù)合樣式:
復(fù)合的寫法，是通過空格的方式實(shí)現(xiàn)的。復(fù)合寫法有的是不需要關(guān)心順序的，例如: background、border；有的需要關(guān)心順序，例如:font。
1.background : red url() repeat 0 0;
2.border : 1px red solid
3.font :
注 : 最少要有兩個(gè)值( size、family)
weight style size family √
style weight size family √
weight style size/line-height family √
注: 盡量不要混寫，如果非要混寫，那么一定要線寫復(fù)合樣式再寫單一樣式。
ID選選擇器及注意事項(xiàng)
1.ID選擇器
css : #elem{}
html : id= “elem”
注:
1.在一個(gè)頁面中，ID值是唯一的。
2.命名規(guī)范:字母、下劃線、中劃線、數(shù)字(命名的第一位不能是數(shù)字)。
3.命名方式:駝峰式、下劃線式、短線式。
駝峰寫法: searchButton(小駝峰) SearchButton(大駝峰)
searchsmallRutton
短線寫法: search-small-button=
下劃線寫法: search_small_button
CLASS選擇器及注意事項(xiàng)
CLASS選擇器
css : elem{}
html : class = “elem”
注:
1.class選擇器是可以復(fù)用的。
2.可以添加多個(gè)class樣式。
3.多個(gè)樣式的時(shí)候，樣式的優(yōu)先級(jí)根據(jù)CSS決定，而不是class屬性中的順序
4.標(biāo)簽+類的寫法
?
總結(jié)
- 上一篇： CMMI证书背后的6大怪相
- 下一篇： Ubuntu安装屏幕录制软件