Head First HTML与CSS阅读笔记(二)
上一篇Head First HTML與CSS閱讀筆記(一)中總結了《Head First HTML與CSS》前9章的知識點,本篇則會將剩下的10~15章內容進行總結,具體如下所示。
div與Span
此元素應該是HTML中使用頻度最高的元素之一,div將屬于一個邏輯區的元素包含起來;
如果添加div有助于將頁面分解為邏輯區,保證結構清晰并便于指定樣式,則應該使用div,否則,過多的div只會讓頁面更加復雜,不應濫用;
width屬性指定元素內容區的寬度,不包括內邊距,邊框和外邊距的寬度;
整個元素寬度 = 內容區寬度 + 兩側內邊距寬度 + 兩側邊框寬度 + 兩側外邊距寬度;
塊元素默認的寬度是“auto”,允許內容填滿可用的全部空間,一般不用指定元素的高度,默認為auto;
text-align只能在塊元素上設置,對塊元素中所有內聯內容對其;
CSS子孫選擇器:注意#id h2與#id>h2的區別,后者是直接子元素,前者則是#id下的所有子孫h2元素;
line-height屬性值可直接使用數字表示,如:
#elixirs {line-height: 1; }表示#elixirs <div>中的個元素行高是其自己字體大小的1倍;
一些屬性的簡寫形式:
background: white url(image/coll.png) repeat-x; border: #007e7e solid thin; font: font-style font-variant font-weight font-size/line-height font-family; 如: font: small/1.6em Verdana, Helvetica, sans-serif;偽類
a元素的幾種狀態:link, visited, hover, focus(焦點在此鏈接上時), active(第一次單擊鏈接時),偽類舉例:
#elixirs a:link {color: #007e7e; }#elixirs a:visited {color: #333333; }偽類還有很多,如first-child,last-child等,偽類會根據元素的狀態來指定元素的樣式;
nth-child偽類,狀態是一個元素相對于它的兄弟元素的數字順序;
p:nth-child(even) { //偶數background-color: red; }p:nth-child(odd) { //奇數background-color: green; }p:nth-child(2n) {background-color: red; }p:nth-child(2n+1) {background-color: green; }層疊
在所有樣式表中,最優先的是作者的樣式表,其次是讀者的樣式表,最后才是瀏覽器的樣式表,如果讀者在樣式表的一個屬性聲明最后加上“!important”就可覆蓋作者的樣式;
布局與定位
并排放置兩個內聯元素時,兩元素的外邊距不會折疊,上下放置兩個塊元素時,會把他們共同的外邊距折疊折疊在一起,折疊的外邊距高度就是最大的外邊距高度;
即使一個元素嵌套在另一個元素內,如果外面元素沒設置邊框,這兩個外邊距也會折疊;
流體布局
擴展瀏覽器窗口時,頁面中的內容會擴展以適應頁面;
浮動float
浮動一個元素步驟:
1. 指定一個標識(id); 2. 指定一個寬度,所有浮動元素都必須有一個寬度; 3. 使用float: right/left是元素浮動;浮動元素會被從正常流中刪除,但是在對內聯元素定位時,會考慮浮動元素的邊界,會圍繞著浮動元素;浮動一個元素時,如果希望它在某個元素的后面,就要移動浮動元素的HTML,讓它緊挨著放在那個元素的下面;
設置兩欄布局的話,可以采用右側邊欄浮動,左側主內容區使用margin-right指定距右側的距離,如邊欄總寬度330px,則設置margin-right: 330px;
使用了浮動,下面的元素則會上移,可能會出現重疊的問題,應使用clear屬性,clear會要求當元素流入頁面時,在這個元素的左邊,右邊或兩邊不允許有浮動內容,如:clear: right/left/both;
浮動元素的外邊距不會折疊;
浮動布局適合在一個文本段落中浮動圖像,讓文本圍繞著這個圖像;
缺點:必須把需要浮動的<div>移到其父元素之下最前面位置,另外,無法創建兩個高度相同的列;
凍結布局
當用戶調整屏幕大小時,設計仍能保持原樣,指定頁面的總寬度,調整瀏覽器大小,寬度不會變化;
凝膠布局
凝膠布局會鎖定頁面中內容區的寬度,但會將它在瀏覽器中居中,使用margin: 0 auto;
很多博客網站采用此種布局;
缺點:內容不會擴展來填滿整個瀏覽器窗口;
絕對定位
使用position屬性制定這個元素要絕對定位,例如:
#sidebar {position: absolute;top: 100px;right: 200px;width: 280px; }一個元素絕對定位時,瀏覽器會將它從正常流中完全刪除,然后將它放在top和right屬性指定的位置上,并且流中的元素不會將其內聯內容圍繞在一個絕對定位的元素周圍;
絕對定位可以分層放置,一個元素可以放在另一個絕對定位元素上面,每個定位元素(絕對定位,相對定位,固定定位)都有一個名為z-index的屬性,z-index值越大,越方在上面;
可以對任何元素指定絕對位置,包括塊元素和內聯元素;
position屬性有static(默認值),absolute,fixed(固定定位,固定元素永遠也不會移動),relative(相對定位會讓元素正常流入頁面,在頁面上顯示之前要進行偏移);
相對定位元素仍在正常流中(還在它原本的位置上),然后按照指定的量偏移,可以使用top、left,bottom,right偏移元素,它是相對于其外圍包含的元素來定位的;
絕對定位是相對于離它最近的父元素來定位的,可以將一個<div>放在另一個<div>中,對外圍<div>使用相對定位,然后用絕對定位指定內部<div>的位置,這樣就能相對于父<div>定位了,即一個絕對定位元素嵌套在另一個定位元素中,這個元素就會相對外包含元素定位;
固定定位
#coupon {position: fixed;top: 300px;left: -90px; } 固定定位元素是相對瀏覽器的位置不會變動,而不是頁面;表格布局
表格布局結構也比較簡單,如下所示:
首先,創建一個<div>表示整個表格,行和列要嵌套在這個<div>中; 然后,對表格中的每一行創建一個<div>,包含行的內容; 最后,在行中,對于每一列,只需要一個塊元素作為該列內容;<div id="tableContainer"><div id="tableRow"><div id="main">...</div><div id="sidebar">...</div></div> </div>div#tableContainer {display: table;border-spacing: 10px; //指定表格中單元格之間的邊框間距,可看做常規元素的外邊距 }div#tableRow {display: table-row; }#main {display: table-cell;verticle-align: top;
width: 500px; //控制列寬度 }#sidebar {display: table-cell;
verticle-align: top/middle/bottom; }
border-spacing和外邊距創建的空間不會折疊;
建立多欄布局,且內容欄是均勻的,表格布局就比較適合;
HTML5標記
<section>與<article>的區別?
使用<section> 可以把相關內容分組在一起,<article>包含獨立內容,如一個新聞報道,一個博客帖子或者一個簡短的報告;要組織相關的內容就是用<section>,而對于獨立的內容,則使用<article>;
<time>元素負責在頁面中增加日期或時間,datetime屬性用來指定一個日期或時間,如果元素內容沒有采用官方Internet日期/時間格式來寫,就必須有datetime屬性;
<time datetime="2015-01-31">1/31/2015</time>在<section>、<article>、<aside>元素中也可以是用<header>和<footer>元素,可以把一些元素組合起來放在首部或尾部;
導航使用<nav>元素,導航內容一般使用列表來構建;
<video>元素使用
<video controls autoplay width="512" height="288" src="video/test.mp4" poster="images/test.png"> </video>controls屬性使播放器提供一些控制視頻音頻播放的組件; autoplay屬性,一旦頁面加載,視頻就會自動播放; poster屬性,提供一個可選的海報圖像,視頻未播放時就顯示這個圖像;loop屬性,布爾屬性,如果有loop,視頻結束播放后會自動重新開始播放視頻;
preload屬性,preload屬性通常用來細粒度的控制視頻如何加載,來實現優化,值為"none"表示用戶在真正播放視頻之前不下載,"metadata"表示下載視頻元數據,但不下載視頻內容;
<video>元素可以對每一種視頻格式分別使用一個<source>元素,提供一組視頻,讓瀏覽器選擇其支持的第一種格式,如下:
<video controls autoplay width="512" height="288"><source src="video/tweetsip.mp4"><source src="video/tweetsip.webm"><source src="video/tweetsip.ogv"><p>Sorry, your browser doesn't support the video element</p> </video><mark>元素用于突出顯示某些文本;
<audio>包含聲音內容;
<canvas>在頁面中顯示用JS繪制的圖像和動畫;
<progress>顯示任務的完成進度;
<meter>顯示某個范圍的度量;
表格與列表
<caption>元素指定表格標題,默認顯示在表格上方,想將標題移動到表格下方,可在css中使用caption-side: bottom來改變;
不能單獨地設置各個單元格的“外邊距”,而要使用border-spacing為所有單元格設置一個共同的間距;
border-collapse屬性用來折疊邊框,使單元格之間沒有邊框間距,如下所示:
table {border: thin solid black;caption-side: bottom;border-collapse: collapse; }可以使用rowspan屬性指定一個表格數據單元格占多少行,然后從這個單元格所跨越的其他行中刪除相應的表格數據元素;
使用colspan屬性指定跨多列,跨多列時,需要刪除同一行中的表格數據元素;
嵌套表格也很簡單,只需要把另一個<table>元素放在一個<td>中即可;
列表的主要屬性是list-style-type,disc是默認值,其他值還包括circle,square,none(會刪除所有列表標記);
定制標記
list-style-image屬性允許為列表設置標記圖像;
li {list-style-image: url(image/backpack.gif);padding: 5px; }list-style-position控制列表上的文本回繞,屬性設為"inside"文本會在標記下回繞,設為"outside"文本會在文本下回繞;
HTML表單
?表單里可以有什么?
<input type="text" name="fullname" placeholder="Buckaroo Banzai" required> //文本輸入 <input type="submit"> //提交按鈕 <input type="radio" name="hotornot" id="hot" value="hot" checked><label for="hot">hot</label>
<input type="radio" name="hotornot" id="not" value="not">
<label for="not">not</label>
<input type="checkbox" name="spice" value="Salt" checked> <input type="checkbox" name="spice" value="Pepper"> <input type="checkbox" name="spice" value="Garlic"> <textarea name="comments" rows="10" cols="48"> xxxx </textarea> <select name="characters"><option value="Buckaroo">Buckaroo</option><option value="Tommy">Tommy</option><option value="Penny">Penny</option> </select> <input type="number" min="0" max="20"> //限制只能輸入數字 <input type="range" min="0" max="20" step="5"> //范圍輸入,顯示為滑動條 <input type="color"> //顏色輸入 <input type="date"> //日期輸入 <input type="email"> //email輸入 <input type="tel"> //電話號碼輸入 <input type="url"> //URL輸入 email、tel、url都是text的變體,在移動設備上會顯示不同的定制鍵盤;
<input type="password" name="secret">
<input type="file" name="doc"> //文件輸入
多選菜單
<select name="characters" multiple>
<option value="Buck">Buckaroo</option>
....
</select>
CSS選擇器
偽元素
偽元素可以用來選擇元素的某些部分,如:first-letter偽元素用來選擇一個塊元素中文本的第一個字母;:first-line偽元素用來選擇段落的第一行;
p:first-letter {font-size: 3em; }屬性選擇器
根據屬性值來選擇元素;
img[width] {border: black thin solid;} img[height="300"] {border: red thin solid;} img[alt~="flowers"] {border: #ccc thin solid;} //alt屬性包含“flowers”的所有圖像;按兄弟選擇
h1+p {font-style: italic; } 選擇所有緊跟在<h1>元素后面的p元素;結合選擇器
div#greentea > blockquote p:first-line {font-style: italic; }開發商特定的CSS屬性
div#box {transform: rotate(45deg); //通用屬性,旋轉45度-webkit-transform: rotate(45deg); //Safari,Chrome-moz-transform: rotate(45deg); //mozilla-o-transform: rotate(45deg); //Opera-ms-transform: rotate(45deg); //IE }CSS變換和過渡
transition屬性,使元素在規定時間內變換到新狀態;
#box {position: absolute;top: 100px;left: 100px;width: 200px;height: 20px;transition: transform 2s;-webkit-transition: -webkit-transform 2s;-moz-transition: -moz-transform 2s;-o-transition: -o-transform 2s; }#box:hover {transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg); }?
轉載于:https://www.cnblogs.com/pflee/p/4264811.html
總結
以上是生活随笔為你收集整理的Head First HTML与CSS阅读笔记(二)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: laravel安装笔记
- 下一篇: COJ 1163 乘法逆元的求解