系列知識點匯總
這些HTML、CSS知識點，面試和平時開發都需要 No1-No4（知識點：HTML、CSS、盒子模型、內容布局）
這些HTML、CSS知識點，面試和平時開發都需要 No5-No7（知識點：文字設置、設置背景、數據列表）
這些HTML、CSS知識點，面試和平時開發都需要 No8-No9（知識點：媒體操作、構建表單）
這些HTML、CSS知識點，面試和平時開發都需要 No10-No11（知識點：表格操作、代碼編寫規則）
No5.文章段落
1.文字屬性
文字屬性包含font-*和text-*兩類。
2.基於font的屬性
（1）font-family：字體屬性，多個字體之前用逗號隔開。如果第一個字體沒找到，則依次找后面的字體。例如：
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
（2）font-size：字體大小，單位包括pixels, em units, percentages, points。
（3）font-style:字體樣式，包括normal, italic, oblique, and inherit。經常用到normal和italic（斜體）。
（4）font-variant: 大小寫轉換，包括:normal, small-caps, and inherit。一般都不會使用該屬性。
（5）font-weight: 設置字體權重，可以是關鍵字和數字，關鍵字包括normal, bold, bolder, lighter, and inherit。有效枚舉數字：100, 200, 300, 400, 500, 600, 700, 800, and 900 。normal 對應400，bold對應700。
（6）line-height： 設置兩行間距，值可以為百分比%、相對倍數em、以及像素數字px。例如可設置line-height:150%，line-height: 1.5em，line-height: 24px。一般都使用em相對於font-size設置。
（7）如何讓文本內容垂直居中顯示：可把line-height和height設置成同一值。例如：
.btn {
height: 22px;
line-height: 22px;
}
（8）font屬性縮寫方式：font:font-style, font-variant, font-weight, font-size, line-height, and font-family。font-size和line-height通過”/”分割，font-family通過“,”分割，其他屬性通過空格分割。例如：
html {
font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
3.基於text的屬性
（1）text屬性包括：decorate、indent、transform、space、align、shadow、transform等。
（2）text-align: 包含的值有left, right, center, justify、inherit。
（3）text-align和float區別：text-align設置元素中text的對齊方式，而float將設置整個元素的對齊方式。下面的div還是占一行空間，但文本內容居右顯示。
div{
background: red;
text-align:right;
}
下面的div不會占用一行，div按自身內容設置大小，整個div居右顯示。
div{
background: red;
float:right;
}
（4）text-decoraton: 設置文字裝飾，值包括none、underline、overline(上划線)、line-through（中划線）、inherit。
（5）text-shadow: 設置文本投影，包含4個值，text-shadow: 水平位移 垂直位移 文本模糊半徑 投影顏色。例如：
p {
text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
}
（6）box-shadow和text-shadow區別：box-shadow用於設置整個盒子的投影，包含5個值：inset/outset 水平距離 垂直距離 模半徑 顏色。例如：
div{
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
}
（7）text-transform: 文字大小寫轉換，包含的值有none、capitalize、uppercase、lowercase、inherit。capitalize將每個單詞首字母大寫，uppercase將所有單詞轉換為大寫，lowercase將所有單詞轉換為小寫。例如：
p {
text-transform: uppercase;
}
（8）letter-spacing：設置每個字母之間的間距，下面設置p元素下的每個字母之前間距為基於font-size的-0.5倍。
p {
letter-spacing: -.5em;
}
（9）word-spacing： 設置每個單詞之間的間距，和letter-spacing相似。
（10）text-indent：設置第一行左面間距。例如下面設置第一行的左面文字到左邊距的舉例為15px。
.intro{
text-indent: 15px;
}
4.自定義web字體
（1）定義語法：下面代碼定義了自定義字體，font-face設置字體參數，font-family為字體名稱，src設置字體的網絡路徑。
@font-face {
font-family: "Lobster";
src: local("Lobster"), url("lobster.woff") format("woff");
}
（2）使用：和其他字體使用一樣。例如下面代碼吧自定義的字體”Lobster”設置為首選字體。
body {
font-family: "Lobster", "Comic Sans", cursive;
}
（3）字體資源：google上面有很多新的字體可供下載，地址為：https://www.google.com/fonts。
No6.設置背景
1.background
（1）如何設置背景：背景可通過color、image、gradient漸變或者組合方法設置。
（2）background-color：顏色格式可以是十六進制或者rgb以及rgba。為了保證兼容性，有些瀏覽器不支持rgba，需要在設置rgba之前添加一個十六進制設置。如下：
div {
background-color: #b2b2b2;
background-color: rgba(0, 0, 0, .3);
}
（3）background-image:通過添加背景圖片來設置背景。例如：
div {
background-image: url("alert.png");
}
（4）background-repeat：設置圖片重復形式，包含的值有repeat, repeat-x, repeat-y, and no-repeat，repeat是默認值，表示水平和垂直都重復。
（5）background-position：把背景通過元素左上角的偏移位置定位背景顯示位子。包含兩個值，分別是水平和垂直的偏移值。下面的代表表示，元素的背景色從左上角開始向右偏移20個像素，向下偏移10個像素。
div {
background-image: url("alert.png");
background-position: 20px 10px;
background-repeat: no-repeat;
}
下面的代碼表示水平偏移20個像素，垂直為默認的50%。
div{
background-position: 20px；
}
（6）background-position關鍵字參數：參數可為top、right、bottom、left、center關鍵字, pixels, percentages或者任意長度單位。關鍵字和百分比很相似，例如：left top(0, 0)、right top(100%, 0)、left bottom(0， 100%)、right bottom(100%, 100%)。
（7）background縮寫：縮寫的屬性順序為background-color background-image background-position background-repeat。下面代碼表示背景色為#b2b2b2，背景圖片為url("alert.png")，position為水平偏移20像素、垂直偏移10像素，重復屬性值為no-repeat。
（8）多背景設置：多個背景圖片設置通過“，”分隔，最前面的圖片展示在最上面，最后的圖片展示在最下邊。如下代碼所示：
div {
background: url("foreground.png") 0 0 no-repeat, url("middle-ground.png") 0 0 no-repeat, url("background.png") 0 0 no-repeat;
}
2.線性漸變效果
（1）linear-gradient函數：默認從top到bottom漸變，可以添加多個顏色。如下代碼：
div {
background: #466368;
background: -webkit-linear-gradient(#648880, #293f50);
background: -moz-linear-gradient(#648880, #293f50);
background: linear-gradient(#648880, #293f50);
}
（2）兼容性：有些瀏覽器不支持漸變效果，一般都需要在最前頭添加一個單色的背景，例如上面代碼添加的background: #466368。
（3）改變漸變方向：linear-gradient的第一個參數可改變方向，參數使用：to 方向。例如下面的代碼讓漸變從左上角漸變到右下角。
div {
background: #466368;
background: linear-gradient(to right bottom, #648880, #293f50);
}
（4）添加多個漸變顏色：linear-gradient方法可添加多個漸變顏色。參考代碼如下：
linear-gradient(to right, #f6f1d3, #648880, #293f50);
（5）漸變占比：可以設置漸變顏色在整個漸變隧道的占比，例如下面代碼的第二個顏色占比85%。
div{
linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);
}
3.放射性漸變
（1）radial-gradient：radial-gradient提供了反射性漸變函數，參數可接收多個顏色。
（2）參數說明：第一個參數設置絕對中心位置的顏色，第二個參數設置最外層顏色，最終效果是從中心位置向外過度轉換。
4.CSS3 背景新屬性
background-size: 設置背景相對於元素的大小，包含width和height兩個值，值可以是數字或者關鍵字。例如下面設置元素的背景寬度自適應，高度占元素高度的75%。
div{
background-size: auto 75%;
}
No7.數據列表
1.無序列表Unordered List
無序列表用block-level元素ul(unordered list)表示，每個item單獨使用li(list)標記。如下代碼所示：
<ul> <li>Orange</li> <li>Green</li> <li>Blue</li> </ul>
2.有序列表Ordered List
（1）和無序區別：無序的每一項默認使用”.”表示，而有序的項通過數字表示。
（2）包含元素：有序列表是block-level級別，每個item單獨使用li標記。如下代碼所示：
<ol> <li>Head north on N Halsted St</li> <li>Turn right on W Diversey Pkwy</li> <li>Turn left on N Orchard St</li> </ol>
（3）start屬性：標記item開始的數字是從哪個值開始：<ol start="30">表示列表標記從30開始。
（4）reversed屬性：標記是否可以倒序，默認為false。如果設置<ol reversed>，原來是1,2,3,4，5現在變成5，4,3,2,1。
（5）value屬性：用在li上，標記li的序列，接下來的li都從這個標記數字往上加。例如：代碼<li value="9">Turn right on W Diversey Pkwy</li>后面的li標記都是9開始往上加。
3.嵌套列表
（1）使用元素：一般使用ul和ol嵌套使用。如下代碼所示：
<ol> <li>Walk the dog</li> <li>Fold laundry</li> <li> Go to the grocery and buy: <ul> <li>Milk</li> <li>Bread</li> <li>Cheese</li> </ul> </li> <li>Mow the lawn</li> <li>Make dinner</li> </ol>
（2）隨着嵌套關系，列表元素的標記會發生變化，例如默認ul的標記四“.”，現在變成小方塊。
4.列表樣式
（1）list-style-type：設置標記樣式，下面的代碼設置標記為一個正方形。
ul {
list-style-type: square;
}
（2）list-style-type包含的值具體如下：
“List Style Type Value” “Content”
none “No list item”
disc “A filled circle ”
circle “A hollow circle”
square “A filled square”
decimal “Decimal numbers”
decimal-leading-zero “Decimal numbers padded by initial zeros”
lower-roman “Lowercase roman numerals”
upper-roman “Uppercase roman numerals”
lower-greek “Lowercase classical Greek”
lower-alpha / lower-latin “Lowercase ASCII letters”
upper-alpha / upper-latin “Uppercase ASCII letters”
armenian “Traditional Armenian numbering”
georgian “Traditional Georgian numbering”
（3）自定義標記：使用自定義圖片設置marker，必須先設置list-style-type:none,然后設置li的background樣式。如下代碼設置標記為一個arrow圖標，圖標起始位置水平為0，垂直位置為元素li高度的50%處。
li {
background: url("arrow.png") 0 50% no-repeat;
list-style-type: none;
padding-left: 12px;
}
（4）list-style-position：設置標記的位置，包含值有outside、inside、inherit，默認為outside。
（5）list樣式簡寫：格式為list-style:list-style-type list-style-position，如下代碼所示：
ul {
list-style: circle inside;
}
ol {
list-style: lower-roman;
}
5.水平顯示列表方法
（1）設置display：通過設置li的display為inline或者inline-block，可水平顯示列表。同時列表的標記被移出。如下代碼所示：
HTML： <ul> <li>Orange</li> <li>Green</li> <li>Blue</li> </ul> CSS： li { display: inline-block; margin: 0 10px; }
（2）設置float：display沒有保留marker標記，通過float：left也可以水平顯示並且保留了marker。但是必須設置margin排列li。如下代碼設置float等於left，然后設置水平間距為20px。
li {
float: left;
margin: 0 20px;
}
6.設置列表展現導航效果
（1）一般導航我們可以給第一個和最后一個元素設置圓角，獲取第一個和最后一個元素可通過CSS:li:first-child、li:last-child。
（2）設置li的display：display: inline-block。
（3）設置normal和和mouseover樣式，如下代碼所示：
.navigation a{
background: #95870;
background: linear-gradient(#49708f, #293f50);
border:1px solid rgba(0, 0, 0, 0.3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}
.navigation a:hover{
background: #314b60;
text-shadow: 0 10px 1px rgba(0, 0, 0, .3);
}
(4）設置ul字體和間距：直接看參考代碼如下。
ul{
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
text-transform: uppercase;
}