【HTML/CSS】从放弃到入门-笔记1
從放棄到入門1 ? 從放棄到入門2
了解瀏覽器
瀏覽器和服務(wù)器(了解)
瀏覽器是一款軟件,瀏覽器功能:1將網(wǎng)頁渲染出來給用戶查看,2讓用戶通過瀏覽器與網(wǎng)頁交互
不同瀏覽器的內(nèi)核不同,渲染效果會(huì)有小的差別。市面上最常用的瀏覽器:
IE -內(nèi)核 Trident
谷歌 - 內(nèi)核 WebKit/Blink
火狐 - 內(nèi)核 Gecko
Safarf - 內(nèi)核 WebKit
歐朋 - 內(nèi)核 Presto
服務(wù)器也是電腦,你可以理解服務(wù)器為超級(jí)計(jì)算機(jī),因?yàn)樗呐渲帽燃矣秒娔X高,并且服務(wù)器不關(guān)機(jī)不斷電。
瀏覽器訪問網(wǎng)頁原理(理解)
當(dāng)用戶訪問網(wǎng)頁時(shí),是會(huì)有真實(shí)的數(shù)據(jù)傳輸,數(shù)據(jù)會(huì)緩存到用戶本地緩存文件夾,然后瀏覽器再渲染出來,所以通常第二次訪問網(wǎng)站比首次訪問快
網(wǎng)頁不是一個(gè)文件,是很多類型的文件組成的。
瀏覽器請(qǐng)求數(shù)據(jù)的過程(理解)
打開瀏覽器輸入U(xiǎn)RL敲下回車后,
-> 1 瀏覽器會(huì)發(fā)送“請(qǐng)求報(bào)文”(Request)給服務(wù)器
-> 2 服務(wù)器處理請(qǐng)求
-> 3 服務(wù)器將處理結(jié)果發(fā)送“響應(yīng)報(bào)文”(Response )給瀏覽器
-> 4 瀏覽器解析數(shù)據(jù)渲染出來
Request 請(qǐng)求報(bào)文: 請(qǐng)求行+請(qǐng)求頭+空行+請(qǐng)求體
Response 響應(yīng)報(bào)文: 響應(yīng)行+響應(yīng)頭+響應(yīng)體
什么是URL(理解)
https:// abc. com/index.html
https: URL協(xié)議類型,
abc. com: 服務(wù)器域名
:80: 服務(wù)器端口號(hào),
index.html: 需要訪問的資源
HTTP協(xié)議(理解)
超文本傳輸協(xié)議(HTTP, HyperText Transfer Protocol)
什么是協(xié)議?
兩個(gè)人約定要傳文件,他們協(xié)商好先傳文件名,再傳文件大小類型時(shí)間等信息,最后傳內(nèi)容,那么接收的一方在收到后就會(huì)返回一個(gè)狀態(tài),由于經(jīng)常要傳文件,他們就默認(rèn)了這種兩個(gè)人約定的傳輸方式,這叫原始協(xié)議。
隨著更多人要傳文件,這個(gè)協(xié)議被不會(huì)斷的新增完善細(xì)節(jié)化,慢慢的變成了一種標(biāo)準(zhǔn)協(xié)議。
HTTP協(xié)議是干什么的?:HTTP協(xié)議解決溝通的問題,作用是約束/規(guī)范瀏覽器與服務(wù)器之間如何溝通。
其它知識(shí)補(bǔ)充(理解)
HTML作用(掌握)
用一些文本來描述另一些文本的語義,而這些文本不會(huì)在網(wǎng)頁中顯示出來,所以我們稱這些文本為“超文本”,而這些文本又叫標(biāo)簽,所以HTML被稱為“超文本標(biāo)記語言”。
HTML的作用只有一個(gè),專門用來 給純文本添加語義的,而不是修改文本樣式的。
就像 《編碼》這本書中所講的盲文,用手去摸“< h1> HTML< /h1>”,這幾個(gè)字本沒有特別之處,但是因?yàn)閮蛇呌?h1的標(biāo)記而中間是HTML,那么盲文就會(huì)認(rèn)為這個(gè)HTML除本身代表的語義,它還是一個(gè)標(biāo)題。
h1標(biāo)簽它的作用是什么?
-錯(cuò)誤:h1標(biāo)簽可以用來修改文字的文本,并且還可以將文字加粗
-正確:h1標(biāo)簽的作用是告訴瀏覽器,這段文本的語義是標(biāo)題。
HTML發(fā)展史(了解)
1993年發(fā)布HTML1.0,1995年W3C接手制定標(biāo)準(zhǔn)發(fā)布2.0,2000年轉(zhuǎn)而制定另一種標(biāo)準(zhǔn)XHTML1.0,之后的2.0因?yàn)閄HTML標(biāo)準(zhǔn)過于嚴(yán)苛,幾大瀏覽器廠商拒絕執(zhí)行,并在2004年制定HTML5的草案,2008年W3C和幾大廠商合并發(fā)布HTML5
第一個(gè)HTML網(wǎng)頁(掌握)
html標(biāo)簽只是用來添加語義,不更改樣式。
HTML基本結(jié)構(gòu)詳解(掌握)
字符集問題(掌握)
解決亂碼問題,在head中加入 < meta charset=“utf-8”>
在實(shí)際開發(fā)中,使用GBK還是UTF-8呢? GBK存儲(chǔ)的字符比較少,存儲(chǔ)了所有漢字和常用外文,體積小。UTF-8存儲(chǔ)了全世界所有文字,體積大,如果網(wǎng)站只做中文站那么GBK訪問速度會(huì)更快,而使用UTF-8會(huì)更兼容。
亂碼的問題:1瀏覽器
標(biāo)簽的分類(掌握)
DTD文檔聲明上(掌握)
HTML有多個(gè)版本規(guī)范,為了讓瀏覽器能正確渲染,在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種:
DTD必須寫在第一行、不區(qū)分大小分、沒有結(jié)束標(biāo)簽。
< !DOCTYPE html>
DTD文檔聲明下(了解)
HTML-XHTML-HTML5區(qū)別(了解)
WebStorm安裝(理解)
H標(biāo)簽和P標(biāo)簽以及Hr標(biāo)簽(掌握)
h1 - h6 標(biāo)簽可定義標(biāo)題。h1 定義最大的標(biāo)題。h6 定義最小的標(biāo)題。在企業(yè)開發(fā)中,一個(gè)頁面只用一個(gè)h1標(biāo)簽,因?yàn)殛P(guān)系到SEO
p 標(biāo)簽 (paragraph 美 [p?r??ɡr?f] )定義段落。
p 元素會(huì)自動(dòng)在其前后創(chuàng)建一些空白。瀏覽器會(huì)自動(dòng)添加這些空間,您也可以在樣式表中規(guī)定。
hr標(biāo)簽在 HTML 頁面中創(chuàng)建一條水平線。
水平分隔線(horizontal rule)可以在視覺上將文檔分隔成各個(gè)部分。
標(biāo)簽綜合練習(xí)(掌握)
在 XHTML 中,< hr> 必須被正確地關(guān)閉,比如 < hr />。
在 HTML 中,< hr> 標(biāo)簽沒有結(jié)束標(biāo)簽。
注釋(掌握)
< !–這是一段注釋。注釋不會(huì)在瀏覽器中顯示。–>
img標(biāo)簽(掌握)
img 標(biāo)簽有兩個(gè)必需的屬性:src 屬性 和 alt 屬性。功能顯示圖像的 URL、圖像的替代文本。
讓圖片等比例放大縮小? 寬度和高度只設(shè)定一 項(xiàng)
br標(biāo)簽(掌握)
br換行,用于一句話還沒結(jié)束,但是要另起一行來寫的情況。段落之間不用br換行,企業(yè)開發(fā)中不常用 br標(biāo)簽
路徑問題(理解)
相對(duì)路徑,當(dāng)前項(xiàng)目所在位置開始查找
絕對(duì)路徑,從最底層目錄查找
路徑練習(xí)(理解)
a標(biāo)簽基本使用(掌握)
href屬性指向非當(dāng)前域名加 http://, 屬性target="_blank" 在新窗口打開頁面,屬性download當(dāng)鏈接地址指向二進(jìn)制文件時(shí)下載此文件
a標(biāo)簽其它屬性(掌握)
base標(biāo)簽(掌握)
< base> 標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。
注釋: 標(biāo)簽必須位于 head 元素內(nèi)部。
屬性有 href 和 target
假鏈接(掌握)
點(diǎn)擊之后不跳轉(zhuǎn),#號(hào)點(diǎn)擊返回頁面頂部,javascript:點(diǎn)擊沒有反應(yīng)
<a href="#">#號(hào)</a> <a href="javascript:">javascript:</a>錨點(diǎn)(掌握)
應(yīng)用場(chǎng)景,線在閱讀的書籍,一整本書都在一個(gè)頁面,點(diǎn)擊目錄就會(huì)定位到對(duì)應(yīng)的內(nèi)容
使用方法,在目標(biāo)錨點(diǎn)加上id,在 a 鏈路中,href等于# + id
跳轉(zhuǎn)到 HTTP協(xié)議
跳轉(zhuǎn)到其它頁面的指定位置,在目標(biāo)地址加上#id
示例跳轉(zhuǎn)到網(wǎng)站 W3C 簡(jiǎn)介 頁面底部
無序列表(掌握)
無序列表 unordered list,沒有先后順序,場(chǎng)景:新聞列表,導(dǎo)航條等
<ul><li>新聞一</li><li>新聞二</li> </ul>輸出:
- 新聞一
- 新聞二
無序列表練習(xí)(理解)
列表前面的圓,由實(shí)心變成空心
type=“circle”
無序列表練習(xí)2(理解)
可在列表中,加入其它標(biāo)簽進(jìn)而豐富界面
<h5>四大名著</h5> <ul><li><h6>三國(guó)演義</h6><p> 故事開始黃巾兵起義,結(jié)束于司馬氏滅吳開晉,以描寫戰(zhàn)爭(zhēng)為主,反映了魏、蜀漢、吳三。。 </p></li><li><h6>水滸傳</h6><p>是中國(guó)歷史上第一部用古白話文寫成的歌頌農(nóng)民起義的長(zhǎng)篇章回體版塊結(jié)構(gòu)小說。。</p></li> </ul>輸出:
四大名著
-
三國(guó)演義
故事開始黃巾兵起義,結(jié)束于司馬氏滅吳開晉,以描寫戰(zhàn)爭(zhēng)為主,反映了魏、蜀漢、吳三個(gè)。。
-
水滸傳
是中國(guó)歷史上第一部用古白話文寫成的歌頌農(nóng)民起義的長(zhǎng)篇章回體版塊結(jié)構(gòu)小說。。
無序列表練習(xí)3(理解)
在 li 里面再添加 ul>li
有序列表(理解)
有序列表 ordered list,所有數(shù)據(jù)有先后之分
type 屬性 a、A、1、i、I五個(gè)屬性值表示列表以何種方式排序,分別對(duì)應(yīng) 小寫字母、大寫字母、數(shù)字、小寫羅馬字符、大寫羅馬字符
輸出:
熱點(diǎn)榜
定義列表(掌握)
<dl> 標(biāo)簽定義了定義列表(definition list)。
<dl> 標(biāo)簽用于結(jié)合 <dt> (description term 定義列表中的項(xiàng)目)和 <dd>(description description 描述列表中的項(xiàng)目)。
應(yīng)用場(chǎng)景:網(wǎng)站底部的相關(guān)信息,圖文混排
<dl><dt>計(jì)算機(jī)</dt><dd>用來計(jì)算的儀器 ... ...</dd><dt>顯示器</dt><dd>以視覺方式顯示信息的裝置 ... ...</dd> </dl>輸出:
計(jì)算機(jī)定義列表練習(xí)(了解)
圖文混排,左邊圖片,右邊描述
表格標(biāo)簽基本使用(理解)
表格標(biāo)簽和列表標(biāo)簽都屬于組合標(biāo)簽,table 表格,th表頭,td表單元
<table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr> </table>| January | $100 |
表格標(biāo)簽的屬性(了解)
寬度和高度,水平對(duì)齊和垂直對(duì)齊,外邊距和內(nèi)邊距
width and height , algin = left/ center/ right, valgin =top/ middle/ bottom ,
cellspacing=“0” 單元格之間的空白, cellpadding 單元邊沿與其內(nèi)容之間的空白。
細(xì)線表格(理解)
cellspacing 邊框大小,bgcolor 邊框背景顏色
<table bgcolor="black" cellspacing="1" ><tr bgcolor="width"><th>表頭</th><th>表頭</th></tr><tr bgcolor="width"><td>表單元</td><td>表單元</td></tr> </table>表格中的其它標(biāo)簽(理解)
表格的結(jié)構(gòu)(了解)
單元格合并(理解)
colspan = “2” 當(dāng)前單元格橫跨2列
表格練習(xí)(了解)
colspan=“2” 當(dāng)前單元格橫向跨2列
rowspan=“2” 當(dāng)前單元格縱向跨2行
表單標(biāo)簽-input(掌握)
單選按鈕默認(rèn)支持多選,多個(gè)按鈕設(shè)置相同name才會(huì)單選,默認(rèn)選中checked屬性
名字:<input type="text"><br> 密碼:<input type="password"><br> 性別:<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女<br> <input type="checkbox" checked="checked">已閱讀 <input type="checkbox">同意<br>表單標(biāo)簽-按鈕(掌握)
隱藏表單,點(diǎn)擊按鈕,重置按鈕,提交按鈕
<form action=""><input type="hidden" name="" value=""><input type="button" name="" value="按鈕" onclick="console.log(111)"><input type="reset" name="" value="重置"><input type="submit" name="" value="提交"> </form>Label標(biāo)簽(掌握)
讓文字關(guān)聯(lián)輸入框,點(diǎn)擊文字光標(biāo)出現(xiàn)在輸入框,label標(biāo)簽的 for 綁定輸入框的 id
<label for="user"> 名字:<input type="text" id="user"></label><br> <label for="pwd"> 密碼:<input type="password" id="pwd"></label><br>dalist標(biāo)簽(了解)
把輸入框和下拉列表綁定,給datalist 添加一個(gè)id,給輸入框添加一個(gè)list,list的值等于id的值。
但是datailst標(biāo)簽眾多瀏覽器不支持,僅作為了解。
表單標(biāo)簽-H5(了解)
h5新增表單類型,郵箱,域名,數(shù)字,時(shí)間控件,取色板
目前瀏覽器對(duì)H5的支持不夠,
表單標(biāo)簽-非input標(biāo)簽(掌握)
H5下拉列表,默認(rèn)選中 selected屬性,長(zhǎng)文本輸入框cols文本區(qū)域可見寬,rows可見高度
<select name="" id=""><optgroup label="北京"><option value="">朝陽區(qū)</option><option value="">大興區(qū)</option></optgroup><optgroup label="廣州"><option value="">天河</option><option value="">黃浦</option></optgroup> </select> <textarea name="" id="" cols="30" rows="10"></textarea>表單練習(xí)上(理解)
表單練習(xí)下(理解)
H5完整的form表單, fieldset為表單加上邊框,legend讓文字出現(xiàn)在邊框左上角
<form action="#"> <fieldset><legend>注冊(cè)</legend><p>賬號(hào):<input type="text" name="account"></p><p>密碼:<input type="password" name="pwd"></p><p>性別:<input type="radio" checked="" name="gender" value="1"> 男<input type="radio" name="gender" value="0">女</p><p>愛好 :<input type="checkbox" name="hobby" value="a"> a<input type="checkbox" name="hobby" value="b"> b<input type="checkbox" name="hobby" value="c"> c</p><p>簡(jiǎn)介:<textarea name="desc" id="" cols="30" rows="10"></textarea></p><p>生日:<input type="date" name="birthday"></p><p>郵箱:<input type="email" name="email"></p><p>電話:<input type="number" name="tel"></p><p><input type="submit" value="注冊(cè)"><input type="reset" value="重置"></p> </fieldset> </form>video標(biāo)簽(掌握)
video標(biāo)簽用于播放視頻
屬性,src 視頻地址,autoplay自動(dòng)播放,controls顯示播放控件,poster播放前的圖片,loop循環(huán)播放,preload預(yù)加載即播放前加載視頻與autoplay同時(shí)出現(xiàn)會(huì)失效,muted靜音,width寬,height高
video標(biāo)簽第二種格式(掌握)
當(dāng)前,video 元素支持三種視頻格式:Ogg、MPEG 4、WebM
但沒有一種格式是所有瀏覽器廠商都支持的,為了兼容所有的瀏覽器,新加了source標(biāo)簽,所以至少要準(zhǔn)備兩個(gè)格式的視頻,一個(gè)mp4格式加一個(gè)ogg或者webm格式的視頻
video 元素允許多個(gè) source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式
audio標(biāo)簽(掌握)
audio音頻播放
autoplay 音頻就緒后馬上播放,controls 向用戶顯示播放控件,
loop 當(dāng)音頻結(jié)束后重新開始播放,preload 預(yù)備播放 頁面加載時(shí)音頻也加載 如果使用了autoplay則此屬性失效,src 音頻的URL。audio沒有寬/高屬性
詳情和概要標(biāo)簽(理解)
details 標(biāo)簽用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。目前只有 Chrome 支持 details 標(biāo)簽。
<details><summary>HTML 4.01 與 HTML 5 之間的差異</summary>標(biāo)簽是 HTML 5 中的新標(biāo)簽。 </details>marquee標(biāo)簽(理解)
讓文字從右向左水平滾動(dòng),此標(biāo)簽w3c沒有出標(biāo)準(zhǔn),但各大瀏覽器支持。
屬性 direction滾動(dòng)方向 值down,up,right,up,scrollamount移動(dòng)速度 值 number,loop滾動(dòng)次數(shù),behavior滾動(dòng)方式,值 slide觸到邊框就停止了 alternate觸到邊框就彈回
HTML中被廢棄的標(biāo)簽(掌握)
html標(biāo)簽是用來添加語義的,而在早期,有一部分html標(biāo)簽是用來修改樣式的,那些修改樣式的標(biāo)簽已經(jīng)全部廢棄。
br, hr, font, b, u, i, s
以上標(biāo)簽只能更改樣式并沒有任何語義,而新的替代者為文字加了語義
b -> strong 定義重要性強(qiáng)調(diào)文字
u -> ins 定義插入的文字
i -> em 強(qiáng)調(diào)的文字
s -> del 被刪除的文字
strong定義重要性強(qiáng)調(diào)文字 ins定義插入的文字 em定義強(qiáng)調(diào)的文字 del被刪除的文字
字符實(shí)體(理解)
在 HTML 中,某些字符是預(yù)留,比如不能使用小于號(hào)(<)和大于號(hào)(>),這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽,更多參考w3c字符實(shí)體
< > ?
體驗(yàn)CSS(理解)
CSS的作用,只有一個(gè)就是修改樣式,css寫在head標(biāo)簽之中,
text-algin 讓文字居中,font-family 設(shè)置字體
CSS的固定格式(掌握)
style寫在head標(biāo)簽內(nèi),與title同級(jí),屬性type="text/css"可寫可不寫,因?yàn)槟J(rèn)就是text/css。屬性格式 key: value; 冒號(hào)分號(hào)不能省
<head><title></title><style type="text/css">p {width: 500px;}</style> </head>文字相關(guān)屬性(掌握)
font-family 字體必須是用戶電腦上安裝了才會(huì)展示這種字體
font-style: italic; //italic 文字傾斜, normal 文字正常 font-weight: blod; // blod文字加粗,bloder 加粗+ ,lighter 細(xì)線,值100-900 font-size: 20px; //文字大小, pixels font-fmaily:字體屬性補(bǔ)充(掌握)2
family可以設(shè)置多個(gè)字體,如果前面的字體不存在,就會(huì)展示后面的字體,以逗號(hào)分隔。如果設(shè)置的多個(gè)字體都不存在,那么就會(huì)使用客戶端的默認(rèn)字體。
怎樣分別為中英設(shè)置字體?但凡是英文字體都不包含中文,但凡是中文字體一定包含英文,所以先設(shè)置英文字體,再設(shè)置中文字體。
企業(yè)開發(fā)常用字體,中文: 宋體/黑體/微軟雅黑,英文: “Times New Roman”, “Arial”
文字屬性的簡(jiǎn)寫(掌握)
font屬性
font: style weifht size family;
size family 這兩個(gè)值不能更改位置,不能刪除,style weifht這兩個(gè)隨意
文本屬性(掌握)
文本裝飾 text-decoration,文本水平對(duì)齊 text-align,文本縮進(jìn) text-indent
text-decoration: //上劃線 overline; 刪除線line-through;不要線包含超鏈接下劃線none; text-align: right; // right; left; center; text-indent: 2em; // 2個(gè)字符顏色控制屬性上(理解)
顏色的取值,更多顏色參考 W3C顏色
英文單詞。
rgb(red, green, blue)每個(gè)顏色取值范圍0-255 ,當(dāng)3個(gè)值相同,就是灰色。
rgba是CSS3新增,rgba(紅色,綠色,藍(lán)色,透明度),透明度取值0-1。
顏色控制屬性下(理解)
十六進(jìn)制,本質(zhì)是rgb,但是更方便書寫,十六進(jìn)制每?jī)晌槐硎疽粋€(gè)顏色,例如
#FFEE00 ,FF表示R,EE表示G,00表示B
10=A,11=B,12=C,13=D,14=E,15=F
計(jì)算方法
用十六進(jìn)制的第一位乘以16 ,加十六進(jìn)制的第二位 等于十進(jìn)制 ,
21 == 1 * 16 +5 == F5
FF == F *16 + F == 15 *16 + 15 == 255
練習(xí) rgb(0, 112, 255) 的十六進(jìn)制是多少?
0== 016+0= 00,112= 716+0= 70,255= 15*16+15= 1515= FF
等于 #0070FF
標(biāo)簽選擇器(掌握)
id選擇器(掌握)
根據(jù)ID名稱找到標(biāo)簽,在ID前面寫一個(gè)#號(hào),不過CSS通常不使用ID
<style type="text/css">#desc{} </style> <p id="desc" ></p>類選擇器(掌握)
根據(jù)class名稱找到標(biāo)簽,在class前面寫一個(gè)"."號(hào),類名是專用于css設(shè)置樣式的,而ID是JS使用的
.title { } <div class="title"></div>id選擇器和類選擇器(理解)
一個(gè)標(biāo)簽只能設(shè)置一個(gè)ID名,而一個(gè)標(biāo)簽可以設(shè)置多個(gè)類名,類名之間以空格分隔,在使用類名時(shí),如果多個(gè)類名有不同的樣式,把這幾個(gè)類名都添加到標(biāo)簽以實(shí)現(xiàn)一個(gè)整體樣式
.c1 { color: red; } .c2 { font-size: 30px; } <p class="c1 c2">一段文字</p> //這段文字展示效果是 紅色 + 加粗后代選擇器(掌握)
后代選擇器用空格分隔,后代選擇器會(huì)查找所有p標(biāo)簽內(nèi)的span標(biāo)簽,而不管有多少層級(jí)
示例,選擇div 標(biāo)簽內(nèi)的p標(biāo)簽,選擇p標(biāo)簽內(nèi)的a標(biāo)簽內(nèi)的span標(biāo)簽
子元素選擇器(掌握)
子元素選擇器使用大于 >符號(hào)分隔,子元素只會(huì)選擇元素下的第一層,如果在這個(gè)元素下面還有第二層第三層,它是不會(huì)選擇的。
以下示例中,div> p 第一層會(huì)被選擇,第四層不會(huì), div>li不會(huì)選中任何標(biāo)簽,ul 才是div的第一層,正確做法 div>ul>li
后代選擇器和子元素選擇器(理解)
后代選擇器使用空格連接,會(huì)選擇標(biāo)簽內(nèi)的兒子,孫子,更內(nèi)層的指定標(biāo)簽
子元素選擇器使用大于 >連接,只選擇第一層指定的標(biāo)簽
交集選擇器(理解)
選中標(biāo)簽中相交的那部分,選擇器之間沒有任何連接符號(hào)
示例,選擇P標(biāo)簽中類名等于rr的標(biāo)簽,選擇p標(biāo)簽中類名等于rr且id名等于two的標(biāo)簽,
并集選擇器(掌握)
以逗號(hào)連接
示例,選擇類名等于union,和類名等于selector的標(biāo)簽
兄弟選擇器(掌握)
相鄰選擇器,用加號(hào) + 連接,即選擇同級(jí)標(biāo)簽中,緊跟在指定標(biāo)簽之后的指定標(biāo)簽,如選擇h5之后的p,當(dāng)a標(biāo)簽將h5和p隔開就無法選中
兄弟選擇器,用波浪號(hào) ~ 連接,同級(jí)標(biāo)簽中,選擇在指定標(biāo)簽后面的所有標(biāo)簽。例如選擇h5后面的所有p,
序選擇器上(掌握)
css3新增,
選中同級(jí)別第一個(gè)標(biāo)簽,即是第一個(gè),且為指定的標(biāo)簽
選中同級(jí)別同類型的第一個(gè),即同級(jí)別中的第一個(gè)標(biāo)簽
選擇同級(jí)別的第N個(gè)標(biāo)簽,
下面的示例,last 同理
序選擇器下(掌握)
child和of-type的不同點(diǎn),child查找所有標(biāo)簽,而of-type只查找目標(biāo)標(biāo)簽
odd奇數(shù),even偶數(shù),n計(jì)算器x和y自定義(xn+y)
屬性選擇器上(理解)
用中括號(hào) [] 括號(hào)的統(tǒng)稱屬性選擇器
[attribute] 有這個(gè)屬性的標(biāo)簽, [attribute = value ] 有這個(gè)屬性并且值等于多少的標(biāo)簽
屬性選擇器下(理解)
*css2 |= 以什么開頭 ,~=包含某個(gè)值的 *
css2查找條件太苛刻比如必須要空格" “隔開必須要橫桿”-" 隔開才能找到,不建議使用。
css3 沒有任何限制,只要包含這個(gè)字的就找的到
^=以什么開頭,$=以什么結(jié)束,*=包含某個(gè)值的
屬性選擇器下-js(掌握)
下拉列表值等于 10,值以7開頭,值以5結(jié)束,值的引號(hào)可不加
$('select option[value="10"]').css('color','red'); $('select option[value^=7]').css('color','blue'); $('select option[value$=5]').css('color','green');<select name="" id=""><option value="10">10</option><option value="72">72</option><option value="55">55</option> </select>通配符選擇器(理解)
* 通配符 標(biāo)簽太多就會(huì)性能差
*{ 查找全部標(biāo)簽 }選擇器練習(xí)(理解)
用所有學(xué)過的選擇器選中兩個(gè)p標(biāo)簽
<div><h1>我是一個(gè)標(biāo)題</h1><p id="identity1" class="para">我是一個(gè)段落1</p><p id="identity2" class="para">我是一個(gè)段落2</p> </div> p{} 標(biāo)簽選擇器 #identity1{} id選擇器 .para{} 類選擇器 div p{} 后代選擇器 div>p{} 子元素選擇器 p.para{} 交集選擇器 #identity1,#identity2{} 并集選擇器 h1~p{} 兄弟選擇器 p:nth-child(2),p:last-child{} 序選擇器上 p:nth-child(odd),p:nth-child(even){},p:nth-child(n+1) 序選擇器下 p[class]{},p[class=para]{} 屬性選擇器上 p[class^=par] 屬性選擇器下 *{} 通配符選擇器谷歌開發(fā)者工具其它使用(理解)
CSS樣式學(xué)習(xí)
CSS三大特性 繼承性、層疊性、優(yōu)先級(jí)
繼承性(掌握)
給父元素設(shè)置屬性,所有子元素也會(huì)繼承,在瀏覽器的審查元素可看到 inherited from ***
但繼承僅限于以color/font/text/line開頭的屬性
也有特殊的標(biāo)簽不會(huì)繼承某些特性,比如H標(biāo)簽不繼承父元素的字體大小,A標(biāo)簽不繼承下劃線文字顏色
層疊性(掌握)
如果p標(biāo)簽被設(shè)置了紅色,p標(biāo)簽的class又設(shè)置了藍(lán)色,這時(shí)候類的屬性就會(huì)層疊掉P設(shè)置的屬性值,最終顯示是藍(lán)色,這是CSS的層疊性
CSS全稱 層疊樣式表 Cascading StyleSAheet
優(yōu)先級(jí)(掌握)
誰離標(biāo)簽最近,就是最優(yōu)先的 ,直接選中》繼承。當(dāng)優(yōu)先級(jí)相同,最后執(zhí)行覆蓋前面執(zhí)行
完整優(yōu)先級(jí) (為何通配符高于繼承?因?yàn)橥ㄅ浞侵苯幽玫搅藰?biāo)簽)
!important(掌握)
把優(yōu)先級(jí)別提升到最高,
示例中的ID優(yōu)先級(jí)是最高的,但是標(biāo)簽選擇器在屬性值后面加了 !important ,最終文字顏色是紅色
權(quán)重問題(掌握)
當(dāng)多個(gè)選擇器混合在一起使用,都指向同一個(gè)標(biāo)簽,我們就計(jì)算權(quán)重判斷哪個(gè)選擇器優(yōu)先級(jí)最高
計(jì)算規(guī)則:
從放棄到入門-筆記二
CSS三大特性練習(xí)(理解)
div和span標(biāo)簽(掌握)
CSS元素顯示模式(掌握)
CSS元素顯示模式轉(zhuǎn)換(掌握)
百度首頁(理解)
背景顏色(掌握)
背景圖片(掌握)
背景平鋪(掌握)
背景定位上(掌握)
背景定位下(掌握)
背景關(guān)聯(lián)和縮寫(理解)
背景圖片和插入圖片區(qū)別(掌握)
背景圖片練習(xí)(理解)
CSS精靈圖(掌握)
精靈圖練習(xí)(理解)
邊框?qū)傩陨?掌握)
邊框?qū)傩韵?掌握)
邊框練習(xí)(理解)
內(nèi)邊距屬性(掌握)
外邊距屬性(掌握)
外邊距合并現(xiàn)象(掌握)
盒子模型(理解)
盒子寬度和高度(理解)
盒子寬度和高度練習(xí)1(理解)
盒子寬度和高度練習(xí)2(理解)
盒子box-sizing屬性(理解)
盒子模型練習(xí)3(理解)
盒子居中和內(nèi)容居中(理解)
清空默認(rèn)邊距(掌握)
行高和字號(hào)(掌握)
還原字體和字號(hào)(掌握)
文字界面(理解)
網(wǎng)頁布局方式(掌握)
浮動(dòng)流基本概念(掌握)
浮動(dòng)元素脫標(biāo)(理解)
浮動(dòng)元素排序規(guī)則(理解)
浮動(dòng)元素貼靠現(xiàn)象(理解)
浮動(dòng)元素字圍現(xiàn)象(理解)
浮動(dòng)練習(xí)上(理解)
浮動(dòng)練習(xí)中(理解)
浮動(dòng)練習(xí)下(理解)
浮動(dòng)元素高度問題(掌握)
清除浮動(dòng)方式一(理解)
清除浮動(dòng)方式二(理解)
margintop失效原因(理解)
清除浮動(dòng)方式三(理解)
清除浮動(dòng)方式四(理解)
偽元素選擇器(掌握)
清除浮動(dòng)方式五(理解)
清除浮動(dòng)方式六(理解)
網(wǎng)易注冊(cè)界面-基本結(jié)構(gòu)搭建(理解)
網(wǎng)易注冊(cè)界面-完成頂部左邊(理解)
網(wǎng)易注冊(cè)界面-完成頂部右邊(理解)
網(wǎng)易注冊(cè)界面-完成中間頂部(理解)
網(wǎng)易注冊(cè)界面-完成中間右邊(理解)
網(wǎng)易注冊(cè)界面-完成中間左邊頂部(理解)
網(wǎng)易注冊(cè)界面-完成中間左邊底部中(理解)
網(wǎng)易注冊(cè)界面-完成中間左邊底部下(理解)
網(wǎng)易注冊(cè)界面-完善(理解)
定位流-相對(duì)定位(掌握)
相對(duì)定位-注意點(diǎn)(掌握)
定位流-絕對(duì)定位(掌握)
絕對(duì)定位0參考點(diǎn)(掌握)
絕對(duì)定位-注意點(diǎn)(掌握)
絕對(duì)定位-子絕父相(掌握)
絕對(duì)定位-水平居中(理解)
定位練習(xí)-團(tuán)購(gòu)界面(理解)
定位練習(xí)-焦點(diǎn)圖(理解)
定位流-固定定位(掌握)
定位練習(xí)-新浪首頁(理解)
定位流-z-index屬性(掌握)
a標(biāo)簽偽類選擇器(掌握)
a標(biāo)簽偽類選擇器注意點(diǎn)(掌握)
a標(biāo)簽偽類選擇器-練習(xí)(理解)
過渡模塊基本使用(掌握)
過渡模塊-其它屬性(理解)
過渡模塊-連寫(掌握)
過渡模塊-彈性效果(理解)
過渡模塊-手風(fēng)琴效果(理解)
2D轉(zhuǎn)換模塊(掌握)
2D轉(zhuǎn)換模塊-形變中心點(diǎn)(掌握)
2D轉(zhuǎn)換模塊-旋轉(zhuǎn)軸向(理解)
2D轉(zhuǎn)換模塊-透視屬性(理解)
2D轉(zhuǎn)換模塊-相片墻(理解)
盒子陰影和文字陰影(掌握)
翻轉(zhuǎn)菜單-綜合練習(xí)(理解)
動(dòng)畫模塊(掌握)
動(dòng)畫模塊-其它屬性上(理解)
動(dòng)畫模塊-其它屬性下(理解)
動(dòng)畫模塊-連寫(掌握)
動(dòng)畫模塊-云層動(dòng)畫(理解)
動(dòng)畫模塊-無限滾動(dòng)上(掌握)
動(dòng)畫模塊-無限滾動(dòng)下(掌握)
3D轉(zhuǎn)換模塊(掌握)
3D轉(zhuǎn)換模塊-正方體(理解)
3D轉(zhuǎn)換模塊-正方體(理解)
3D轉(zhuǎn)換模塊-長(zhǎng)方體(理解)
3D轉(zhuǎn)換模塊-練習(xí)(理解)
3D播放器上(理解)
3D播放器下(理解)
背景尺寸屬性(掌握)
背景圖片定位區(qū)域?qū)傩?理解)
背景繪制區(qū)域?qū)傩?理解)
多重背景圖片(掌握)
多重背景圖片-練習(xí)(理解)
CSS書寫格式(掌握)
努比亞-準(zhǔn)備工作(掌握)
努比亞-基本結(jié)構(gòu)(理解)
努比亞-頂部logo(掌握)
努力比-頂部導(dǎo)航(理解)
努力比-廣告區(qū)域(理解)
努比亞-廣告區(qū)域?qū)Ш?理解)
努比亞-輪播圖(掌握)
努比亞-序號(hào)(理解)
努比亞-視頻區(qū)域(掌握)
努比亞-內(nèi)容區(qū)域(掌握)
努比亞-最新產(chǎn)品(理解)
努比亞-精品配件(理解)
總結(jié)
以上是生活随笔為你收集整理的【HTML/CSS】从放弃到入门-笔记1的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 韦棋宝画柿子//作品欣赏
- 下一篇: 超市进销存之openGauss数据库的应