學(xué)習(xí)和完成任務(wù)二的筆記
任務(wù)二：零基礎(chǔ)HTML及CSS編碼（一）
學(xué)習(xí)的資料
- MDN HTML入門
- [MDN CSS入門教程](https://developer.mozilla.org/zh-- CN/docs/Web/Guide/CSS/Getting_started)
- 慕課HTML+CSS基礎(chǔ)教程視頻
css介紹
CSS 是用來(lái)指定文檔顯示的芥映，讓頁(yè)面有不同的外觀洲尊。
如何定義一個(gè)樣式，可以新建一個(gè)文件strong.css在文件中寫如下代碼
strong {color: red;}奈偏。然后在你的html文件頭部加入一行<link rel="stylesheet" href="style1.css">坞嘀。再打開網(wǎng)頁(yè)你會(huì)發(fā)現(xiàn)之前標(biāo)記<strong>的文字由原來(lái)的 黑色 加粗變?yōu)榱?紅色。三種樣式寫法
優(yōu)先級(jí)為內(nèi)聯(lián)式 > 嵌入式 > 外部式
/*內(nèi)聯(lián)式惊来，直接寫在標(biāo)簽中*/
<span style="color:blue;">超酷的互聯(lián)網(wǎng)</span>
/*內(nèi)嵌式丽涩，寫在html文件中*/
<head>
......
<style type="text/css">
span{color:blue;}
</style>
</head>
/*外聯(lián)式，寫在單獨(dú)文件中唁盏，如上段中介紹的用法*/
-
CSS的層疊與繼承
CSS的來(lái)源有三種内狸，瀏覽器默認(rèn)樣式、用戶定義樣式和開發(fā)者定義樣式厘擂，而優(yōu)先級(jí)依次提高昆淡，也就是開發(fā)者定義的樣子優(yōu)先級(jí)最高會(huì)覆蓋前兩種定義的樣式。
同時(shí)樣式之間也有繼承關(guān)系刽严，如strong就繼承自p昂灵，子類樣式有更高的優(yōu)先級(jí)。
上面所定義的如strong為一條規(guī)則舞萄，而strong被稱為標(biāo)簽選擇器( 也就是說(shuō)為某一標(biāo)簽設(shè)置樣式規(guī)則 )眨补。規(guī)則還可以有class和id兩個(gè)屬性，對(duì)應(yīng)有類選擇器和id選擇器倒脓。這三個(gè)優(yōu)先級(jí)也是依次提高撑螺。
<p class="key" id="principal">`
類選擇器 在一個(gè)CSS樣式表中, 下面的規(guī)則將使所有class屬性等于key的元素文字顏色呈現(xiàn)綠色。（這些元素不一定都是<p>元素崎弃。）甘晤。一個(gè)標(biāo)簽可以有多個(gè)類用空格隔開
.key { color: green;}
id選擇器 下面的規(guī)則將使 id 等于 principal 的那個(gè)元素的文字變?yōu)榇煮w。同一html文件中 id必須唯一
#principal { font-weight: bolder;}
:before :after 在元素前面或者后面加元素
- CSS偽類選擇器 是加在選擇器后面的用來(lái)指定元素狀態(tài)的關(guān)鍵字饲做。比如线婚， hover 會(huì)在鼠標(biāo)懸停在選中元素上時(shí)應(yīng)用相應(yīng)的樣式。
a:hover{color:red:} /*鼠標(biāo)移動(dòng)到鏈接上時(shí)鏈接文字變紅*/
- 關(guān)系選擇器
| 選擇器 | 選擇的元素 |
|---|---|
A E |
任何是元素A的后代元素E (后代節(jié)點(diǎn)指A的子節(jié)點(diǎn)盆均，子節(jié)點(diǎn)的子節(jié)點(diǎn)塞弊，以此類推) |
A > E1 |
任何元素A的子元素 |
E:first-child |
任何元素的第一個(gè)子元素E |
B + E |
任何元素B的下一個(gè)兄弟元素E |
B ~ E |
B元素后面的擁有共同父元素的兄弟元素E |
你可以任意組合以表達(dá)更復(fù)雜的關(guān)系。
你還可以使用星號(hào)（*）來(lái)表示”任意元素“。
- 分組選擇器
h1,span{color:red;} /*使用這種寫法為多個(gè)選擇器設(shè)置相同規(guī)則*/
-
!important
在分號(hào)前加!important提高樣式為最高優(yōu)先級(jí)
p{color:red!important}
常用屬性
| 屬性 | 代碼 | 說(shuō)明 |
|---|---|---|
| 字體 | {font-family:"宋體";} |
- |
| 字號(hào) | {font-size:12px} |
- |
| 顏色 | {color:#ffffff} |
顏色表示有多種：#ffffff,rgb{0,0,0},red |
| 加粗 | {font-weight:bold;} |
- |
| 斜體 | {font-style:italic;} |
- |
| 下劃線 | {text-decoration:underline;} |
- |
| 刪除線 | {text-decoration:line-through;} |
- |
| 縮進(jìn) | {text-indent:2em;} |
- |
| 行間距 | {line-height:3em;} |
- |
| 字間距 | {letter-spacing:20px;} |
- |
| 對(duì)齊 | {text-align:center;} |
- |
| 背景色 | {background:pink;} |
- |
| 設(shè)置成塊 | {display:block;} |
- |
| 設(shè)置成內(nèi)聯(lián)元素 | {display:inline;} |
- |
| 設(shè)置成內(nèi)聯(lián)塊 | {display:inline-block;} |
- |
| 寬 | {width:30px;} |
- |
| 高 | {height:30px;} |
- |
盒模型
元素分類
常用的塊狀元素<div> <p> <h1>...<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
常用的內(nèi)聯(lián)元素<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
常用的內(nèi)聯(lián)塊狀元素<img> <input>塊級(jí)元素
a{display:block;} /*將a標(biāo)簽設(shè)置成塊級(jí)元素*/
每個(gè)塊級(jí)元素都從新的一行開始游沿，并且其后的元素也另起一行饰抒。元素的高度、寬度奏候、行高以及頂和底邊距都可設(shè)置循集。元素寬度在不設(shè)置的情況下，是它本身父容器的100%蔗草。
- 內(nèi)聯(lián)元素
p{display:inline;} /*將p標(biāo)簽設(shè)置成內(nèi)聯(lián)元素*/
和其他元素都在一行上咒彤；元素的高度、寬度及頂部和底部邊距不可設(shè)置咒精；元素的寬度就是它包含的文字或圖片的寬度镶柱，不可改變。
- 內(nèi)聯(lián)塊狀元素
display:inline-block;
和其他元素都在一行上模叙；元素的高度歇拆、寬度、行高以及頂和底邊距都可設(shè)置范咨。
- 邊框
/* dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）故觅。 */
div{
border-width:2px;
border-style:solid;
border-color:red;
}
/* 可簡(jiǎn)寫為如下 */
div{border:2px solid red;}
/* 可單獨(dú)設(shè)置某一邊框，使用如下屬性名 */
border-bottom border-top border-right border-left
- 寬度高度
/* */
div{
width:200px;
height: 20px;
}
-
填充
表示元素和邊框之間的距離渠啊。填充分成上右下左順時(shí)針寫输吏，如下
div{padding:20px 10px 15px 30px;}
/* 也可以分開寫，如下 */
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
/* 如果上替蛉、右贯溅、下、左的填充都為10px;可以這么寫 */
div{padding:10px;}
/* 如果上下填充一樣為10px躲查，左右一樣為20px它浅，可以這么寫*/
div{padding:10px 20px;}
-
邊界
元素與其它元素之間的距離可以使用邊界。屬性名為margin, 用法如同填充镣煮，將padding換成margin
布局模型
-
流動(dòng)模型
塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布姐霍。內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。 -
浮動(dòng)模型
設(shè)置元素浮動(dòng)就可以實(shí)現(xiàn)兩個(gè)塊狀元素并排顯示典唇。
/* 這樣設(shè)置元素浮動(dòng) */
div1{float:left;}
-
層模型
層模型有三種形式：
1邮弹、絕對(duì)定位(position: absolute)
設(shè)置position:absolute(表示絕對(duì)定位)，然后使用left蚓聘、right、top盟劫、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位夜牡。如果不存在這樣的包含塊，則相對(duì)于body元素，即相對(duì)于瀏覽器窗口塘装。
div{
position:absolute;
top:20px;
right:100px;
bottom:30px;
left:50px;
}
2急迂、相對(duì)定位(position: relative)
設(shè)置position:relative（表示相對(duì)定位），它通過(guò)left蹦肴、right僚碎、top、bottom屬性確定元素在正常文檔流中的偏移位置阴幌。相對(duì)定位完成的過(guò)程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來(lái))勺阐，然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left矛双、right渊抽、top、bottom屬性確定议忽，偏移前的位置保留不動(dòng)懒闷。
3、固定定位(position: fixed)
與absolute定位類型類似栈幸，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁(yè)窗口）本身愤估。與background-attachment:fixed?屬性功能相同。以下代碼可以實(shí)現(xiàn)相對(duì)于瀏覽器視圖向右移動(dòng)100px速址，向下移動(dòng)50px玩焰。并且拖動(dòng)滾動(dòng)條時(shí)位置固定不變。
#div1{
position:fixed;
left:100px;
top:50px;
}
水平居中設(shè)置
- 行內(nèi)元素
如果被設(shè)置元素為文本壳繁、圖片等行內(nèi)元素時(shí)震捣，水平居中是通過(guò)給父元素設(shè)置text-align:center來(lái)實(shí)現(xiàn)的。如下代碼：
div.txtCenter{ text-align:center; }
- 定寬塊狀元素
滿足定寬和塊狀兩個(gè)條件的元素是可以通過(guò)設(shè)置“左右margin”值為“auto”來(lái)實(shí)現(xiàn)居中的闹炉。
margin:20px auto;
- 不定寬塊狀元素
有三種方式蒿赢。方式一如下
/* 第一步：為需要設(shè)置的居中的元素外面加入一個(gè) table 標(biāo)簽 ( 包括 <tbody>、<tr>渣触、<td> )羡棵。
第二步：為這個(gè) table 設(shè)置“左右 margin 居中”（這個(gè)和定寬塊狀元素的方法一樣）。 */
<div>
<table margin:0px auto>
<tbody>
<tr>
<td>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
第二種方法：改變塊級(jí)元素的 display 為 inline 類型嗅钻，然后使用 text-align:center 來(lái)實(shí)現(xiàn)居中效果皂冰。
方法三：通過(guò)給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%养篓，子元素設(shè)置 position:relative 和 left:-50% 來(lái)實(shí)現(xiàn)水平居中秃流。
垂直居中設(shè)置
- 父元素高度確定的單行文本的豎直居中的方法是通過(guò)設(shè)置父元素的 height 和 line-height 高度一致來(lái)實(shí)現(xiàn)的。
.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
- 父元素高度確定的多行文本（方法一）：使用插入 table (包括tbody柳弄、tr舶胀、td)標(biāo)簽，同時(shí)設(shè)置 vertical-align：middle。
說(shuō)到豎直居中嚣伐，css 中有一個(gè)用于豎直居中的屬性 vertical-align糖赔，但這個(gè)樣式只有在父元素為 td 或 th 時(shí)，才會(huì)生效轩端。所以將在居中的元素放在td中放典，將td設(shè)置一個(gè)高度，再設(shè)置 vertical-align：middle（默認(rèn)已為middle）基茵。 - 父元素高度確定的多行文本（方法二）：在 chrome奋构、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級(jí)元素的 display 為 table-cell，激活 vertical-align 屬性耿导，但注意 IE6声怔、7 并不支持這個(gè)樣式。
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome舱呻、Firefox*/
vertical-align:middle;/*IE8以上及Chrome醋火、Firefox*/
}
隱性改變display類型
有一個(gè)有趣的現(xiàn)象就是當(dāng)為元素（不論之前是什么類型元素，display:none 除外）設(shè)置以下 2 個(gè)句之一：
position : absolute
float : left 或 float:right
元素會(huì)自動(dòng)變?yōu)橐?display:inline-block 的方式顯示箱吕，當(dāng)然就可以設(shè)置元素的 width 和 height 了且默認(rèn)寬度不占滿父元素芥驳。
