三、CSS基礎知識
1、CSS基礎javascript
CSS：即Cascading Style Sheet（層疊樣式表），是用來控制網頁的表現的一門技術，使用css能讓單調的html網頁更富表現力，css使html文檔的表現形式與結構分離開來。css
CSS語法：html
CSS規則有兩個主要部分組成：選擇器，以及一條或多條聲明。以下前端
1 p{ 2 color:red; 3 text-indent:2em; 4 }
選擇器就是須要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成，屬性是設置的樣式屬性（style attribute），每一個屬性都有一個值，屬性和值用冒號分隔。CSS 聲明老是以分號 ; 結束，聲明組以大括號 {...} 括起來。爲了讓 CSS 可讀性更強，能夠每行只描述一個屬性。java
CSS 註釋是用來解釋代碼，而且能夠隨意編輯，瀏覽器會忽略它。CSS註釋以 "/*" 開始，以 "*/" 結束。以下：算法
1 p{ 2 color:red; 3 text-indent:2em; /* 段落縮進2個字，即段落開頭空2個漢字的位置。 */ 4 }
一、css的四種引用方式：外部樣式表，內部樣式表，內聯樣式表，導入外部樣式表api
（1）外部樣式表瀏覽器
外部樣式表是最理想的css引用方式。所謂的「外部樣式表」就是把css代碼和html代碼單獨放在不一樣的文件中，而後在html文檔中使用link標籤來引用css樣式。框架
1 <head> 2 <link rel="stylesheet" type="text/css" href="css/style.css"> 3 </head>
注意：<link> 標籤中 rel="stylesheet" type="text/css" 是固定代碼格式，不可更改。外部樣式表能夠在任何文本編輯器中進行編輯，樣式文件不能包含任何的 HTML 標籤，樣式表以 .css 擴展名進行保存。編輯器
（2）內部樣式表：就是把html代碼和css代碼放在同一個文件中，其中css代碼放在<style></style>標籤對內，而且<style></style>標籤對是放在head標籤對內。
1 <head> 2 <style> 3 p{ 4 color:blue; 5 font-size:14px; 6 } 7 </style> 8 </head>
（3）內聯樣式表：也是把html代碼和css代碼放在同一個文件中，可是跟內部樣式表不一樣的是內聯樣式不是在<style></style>標籤對內定義，而是在標籤的style屬性中定義：
<div style="width:200px;height:100px;border:1px solid black;"></div>
因爲要將表現和內容混雜在一塊兒，內聯樣式會損失掉樣式表的許多優點。所以須要慎用這種方法，例如當樣式僅須要在一個元素上應用一次時，可使用內聯樣式。要使用內聯樣式，須要在相關的標籤內使用樣式屬性定義，style 屬性能夠包含任何 CSS 屬性。
（4）導入外部樣式文件（通常不推薦使用該方式）
語法：#import "樣式文件" 或者 @import url(「樣式文件」)
@import語句也是放在<style></style>標籤內
四種引用方式的優先級：
內聯 > 內部 > import > link
2、CSS選擇器
一、元素的id和class：是html元素中最基本的兩個公共屬性、
id屬性被賦予了表示頁面元素的惟一身份。若是一個頁面出現了多個相同的id屬性取值，css選擇器或者javascript就沒法分辨要控制的元素。
有了class屬性，咱們能夠爲同一個頁面的相同元素或不一樣元素設置相同的class，而後使得相同的class元素具備相同的css樣式。
對於元素的id和class，須要注意如下兩點：
a、一個標籤能夠同時定義多個class
b、id也能夠想成name，區別在於name是html中額標準，而id是xhtml中的標準。如今網頁的標準都是使用id。
二、選擇器：就是一種選擇原始的方式。
語法：
選擇器｛
樣式屬性1：屬性值1；
樣式屬性2：屬性值2；
}
3.id和class選擇器
（1）id選擇器：能夠爲標有特定id的HTML元素指定特定的樣式，id屬性和身份證同樣具備惟一性。HTML元素以id屬性來設置id選擇器，css中id選擇器以「#」來定義。（id屬性不能以數值開頭）
<head> <style> #heading{ color:red; text-align:center; } </style> </head> <body> <h1 id="heading">CSS 選擇器</h1> </body>
（2）class選擇器：用於描述一組元素的樣式，也叫作類選擇器，class選擇器有別於id選擇器，class能夠在多個元素中使用，而且一個元素也能夠指定多個類名。class選擇器在HTML中以class屬性表示，在CSS中，類選擇器以一個「.」號來定義。能夠設置全部帶指定class的HTML元素，也能夠指定特定的HTML元素使用class。（class的第一個字符也能使用數字）。
<head> <style> .center{ text-align:center; } .col{ color:red; } .font{ font-size:18px; font-family:"Microsoft YaHei"; } </style> </head> <body> <h1 class="center">class 選擇器</h1> <p class="center col">我是一個段落。</p> <p class="center font">我是另外一個段落。</p> </body>
(3)、ID 選擇器和類（class）選擇器的區別
相同點：能夠應用於任何元素。
不一樣點：
①、ID 選擇器只能在文檔中使用一次。與類選擇器不一樣，在一個 HTML 文檔中，ID 選擇器只能使用一次，並且僅一次。而類選擇器可使用屢次。
②、可使用類選擇器爲一個元素同時設置多個樣式。在一個 HTML 文檔中，能夠爲一個元素同時設置多個樣式，但只能夠用類選擇器的方法實現，ID 選擇器是不能夠的，即一個元素能夠指定多個類名，如 <span class="one two three">文本</span>，而 ID 只能指定一個。
四、元素選擇器
最多見的css選擇器就是元素選擇器，即標籤選擇器。即HTML的元素就是最基本的選擇器。
語法：元素｛屬性1：屬性值1；屬性2：屬性值2｝
h1{
color:red;
text-align:center;
}
五、子選擇器
就是指選中某個元素或某一類元素下的子元素，而後對該子選擇器設置css樣式。（選擇器嵌套的一種）
語法：#father #p1｛color：red；｝（父選擇器#father和子選擇器#p1之間用一個空格隔開）
六、相鄰選擇器
指選擇該元素的下一個兄弟元素。其操做的對象是該元素的同級元素。
語法：#lv+div｛color：red；｝
七、羣組選擇器
指同時對幾個選擇器進行相同的操做
語法：h3,div,p,span{color:blue;}
對於羣組選擇器，兩個選擇器之間必須用逗號隔開
3、字體樣式
一、css字體樣式屬性
font-family:字體類型
font-family：用於設置文本的字體系列。應該始終爲font-family屬性設置多個字體名稱做爲一種後備機制。
注意事項：若是字體系列的名稱超過一個字，他必須用引號，如font-family：「黑體」，「Microssoft YaHei」，中文也是須要加引號的。
font-family:Arial,"Microsoft YaHei","黑體","宋體",sans-serif; font-family:Helvetica,'Microsoft Yahei','微軟雅黑',Arial,sans-serif;
font-size:字體大小
字體大小能夠是絕對或相對大小：
絕對大小：a、指定文字大小。b、不容許用戶在全部瀏覽器中改變文字大小。c、肯定了輸出的物理尺寸時，絕對大小頗有用。
相對大小：a、相對於周圍的元素來設置大小。b、容許用戶在瀏覽器中改變文字大小。
字體的大小可使用px、em、%組合來設置。
px：經過像素設置文本大小，能夠對字體進行徹底控制，雖然能夠經過瀏覽器的縮放工具調整文本大小，可是，這種調整是整個頁面，而不只僅是文本。
em：em是W3C推薦使用的尺寸單位，可使用em代替px。1em等於當前字體尺寸，在瀏覽器中默認的文字大小是16px，所以，1em的默認大小是16px。能夠經過公式：px/16=em，將像素轉換爲em。
<head> <style> .p1{ font-size:2.5em; /* 40px/16=2.5em */ } .p2{ font-size:1.25em; /* 20px/16=1.25em */ } .p3{ font-size:0.875em; /* 14px/16=0.875em */ } </style> </head> <body> <p class="p1">我是第一個段落</p> <p class="p2">我是第二個段落</p> <p class="p3">我是最後一個段落</p> </p> </body>
若是不指定一個字體的大小，那麼默認大小和普通文本段落同樣，是 16 像素，即 1個漢字 = 16px = 1em。
使用%和em組合設置字體大小：在全部瀏覽器的解決方案中，設置<body>元素的默認字體大小是100%，能夠顯示相同的文本大小，並容許全部瀏覽器縮放文本的大小。
<head> <style> body{ font-size:100%; } .p1{ font-size:2.5em; /* 40px/16=2.5em */ } .p2{ font-size:1.25em; /* 20px/16=1.25em */ } .p3{ font-size:0.875em; /* 14px/16=0.875em */ } </style> </head> <body> <p class="p1">我是第一個段落</p> <p class="p2">我是第二個段落</p> <p class="p3">我是最後一個段落</p> </p> </body>
font-weight:字體加粗
有四個屬性值：normal：標準字體 bold：粗體字體 bolder：更粗的字體 lighter：更細的字體
或者使用數值指定：從100-900定義由細到粗的字體。
font-style:字體斜體
有三個屬性值：normal：默認值，正常顯示文本 italic：斜體，瀏覽器斜體的字體樣式 oblique：定義斜的文字，和斜體很是相似。
italic和oblique的區別：
這兩個值均可以設置文本向右傾斜顯示。一種字體有粗體、斜體、劃線等多種字體屬性，可是一些字體，或許只有正常體，並無斜體，這時候就能夠用 oblique 定義，他可讓沒有斜體屬性的文字傾斜，從 CSS 規範中就能夠看出，italic 定義的是斜體，而 oblique 定義的是傾斜的文字，注意是傾斜的文字，而不是斜體字，這就是他們的區別。那麼，若是一種字庫中沒有提供斜體字，當使用 italic 時，瀏覽器其實是按 oblique 顯示的。
color: 字體顏色
font-variant：字體變形,設置以小型大寫字體(small-caps)或者正常字體顯示文本(normal)。
<head> <style> .p1{ font-variant:normal; } .p2{ font-variant:small-caps; } </style> </head> <body> <p class="p1">Why are you so diao ?</p> <p class="p2">Why are you so diao ?</p> <p>Why are you so diao ?</p> </body>
4、文本樣式
字體樣式主要涉及字體自己的形體效果，而文本樣式主要涉及多個文字的排版效果，即整個段落的排版效果。字體樣式注重個體，文本樣式注重總體。因此css在命名時，特地使用了font和text前綴來區分兩類不一樣的性質。
一、文本水平對對齊方式：text-align（包括居中center、left、right、justify（兩端對齊）四個取值，默認值爲left）
當 text-align 屬性的值設置爲 justify 時，則表示文本兩端對齊，每一行將被展開爲寬度相等，左、右外邊距對齊，就像雜誌和報紙那樣，常應用於書刊雜誌排版。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上，而後，調整單詞和字母間的間隔，使各行的長度剛好相等。那就是說對於英文這樣定義是能夠的，可是對於中文兩端對齊支持並非很好。解決辦法就是再定義 text-justify 屬性，將其值設置爲 inter-ideograph，用表意文原本對齊內容，他增長或減小表意字和詞間的空格。表意字顧名思義，就是字形有必定表達意思性的文字，漢字屬於表意文字，他是文字萌芽時期的產物，是漢語造成歷史中最先的一種文字。該屬性值的默認值爲 auto，讓瀏覽器決定兩端對齊算法。
<head> <style> .part{ color:red; text-align:justify; text-justify:inter-ideograph; } .p1{ width:300px; } .p2{ width:300px; } .p3{ width:400px; } .p4{ width:300px; } </style> </head> <body> <h1>text-align 實例</h1> <p class="part p1">當 text-align 屬性的值設置爲 justify 時，每一行將被展開爲寬度相等，左、右外邊距是對齊的，即文本兩端對齊，如雜誌和報紙那樣。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。而後，調整單詞和字母間的間隔，使各行的長度剛好相等。也就是說對於英文這樣定義就能夠了，可是對於中文這樣定義是不行的。解決辦法就是使用 text-justify 屬性。</p> <p class="part p2">當 text-align 屬性的值設置爲 justify 時,每一行將被展開爲寬度相等,左,右外邊距是對齊的,即文本兩端對齊,如雜誌和報紙那樣.在兩端對齊文本中,文本行的左右兩端都放在父元素的內邊界上.而後,調整單詞和字母間的間隔,使各行的長度剛好相等.也就是說對於英文這樣定義就能夠了,可是對於中文這樣定義是不行的.解決辦法就是使用 text-justify 屬性.</p> <p class="part p3">當 text-align 屬性的值設置爲 justify 時，每一行將被展開爲寬度相等，左、右外邊距是對齊的，即文本兩端對齊，如雜誌和報紙那樣。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。而後，調整單詞和字母間的間隔，使各行的長度剛好相等。也就是說對於英文這樣定義就能夠了，可是對於中文這樣定義是不行的。解決辦法就是使用 text-justify 屬性。</p> <p class="part p4">當屬性的值設置爲時，每一行將被展開爲寬度相等，左、右外邊距是對齊的，即文本兩端對齊，如雜誌和報紙那樣。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。而後，調整單詞和字母間的間隔，使各行的長度剛好相等。也就是說對於英文這樣定義就能夠了，可是對於中文這樣定義是不行的。解決辦法就是使用屬性。</p> </body>
綜上所述，若是文本是中文，文本兩端的對齊效果十分理想。若是文本是中英文混合的，經過適當的調整寬度，文本兩端對齊效果相對來講比較理想，但對於寬度的調整可能會影響到總體佈局，其實不調整寬度，顯示效果也無傷大雅。若是文本的標點符號使用半角，或者半角和全角混合使用，那麼文本兩端對齊效果則至關糟糕。
text-justify 屬性是 CSS3 版本中定義的屬性，用於規定當 text-align 被設置爲 justify 時的齊行方法，該屬性指定如何對齊文本以及對齊間距，目前只有 IE 支持該屬性，其餘主流瀏覽器都不支持，若是不設置該屬性，在 IE 中兩端對齊則無效果，可是對於其餘瀏覽器則無影響。該屬性有多個值，除了上面提到的2個值以外，還有 none 禁用齊行。inter-word 經過增長/減小單詞間的間隔對齊文本。inter-cluster 只對不包含內部單詞間隔的內容進行排齊，好比亞洲語系。distribute 相似報紙版面，除了在東亞語系中最後一行是不齊行的。kashida 經過拉伸字符來排齊內容。
二、文本修飾：text-decoration，用來設置或刪除文本的修飾。從設計角度來說該屬性主要是用來刪除超連接的下劃線，以下：
<head> <style> .a1{ text-decoration:none; } </style> </head> <body> <a href="#" target="_blank">默認帶有下劃線的超連接</a><br/><br/> <a class="a1" href="#" target="_blank">text-decoration:none; 刪除超連接下劃線</a> </body>
也可使用其餘值來設置文本的修飾，text-decoration:overline; 設置文本上劃線。text-decoration:line-through; 設置文本中間劃線。text-decoration:underline; 設置文本下劃線。
3.文本格式：text-indent（文本縮進）、line-height（行高）、letter-spacing/word-spancing（字間距）、white-space（文本空白處理）
（1）文本縮進：text-indent屬性是用來指定文本的首行縮進，容許爲負值，若是爲負數，第一行向左縮進。
語法：text-indent:2em；
（2）行高：line-height屬性用於設置行高，不容許爲負值。
（3）字間距：letter-spacing和word-spacing這兩個屬性均可用來增減或減小文本間的空白，即字間距。不一樣的是：letter-spacing屬性設置字符間距，而word-spacing屬性設置單詞間距。注意:word-spacing屬性對中文無效，所以在設置中文的字間距時請使用letter-spacing屬性。
須要注意：letter-spacing 和 text-align:justify 是兩個衝突的屬性，不能同時使用。
（4）文本空白處理：white-space屬性指定元素內的空白如何處理，默認值爲normal，空白會被瀏覽器忽略。
其餘屬性值有：
nowrap：禁止換行，文本不會換行，文本會在同一行上繼續，知道遇到<br/>標籤爲止。
pre：文本空白會被瀏覽器保留，這種方式相似HTML中的<pre>標籤，用於定義預格式文本。
pre-wrap：指定保留空白符序列，可是正常地進行換行。
pre-line：指定合併空白符序列，但保留換行符，並容許自動換行。
<head> <style> .p1{ white-space:nowrap; } .p2{ white-space:pre; } .p3{ white-space:pre-wrap; } </style> </head> <body> <p class="p1">white-space:nowrap 指定文本不換行，直到遇到 <br> 標籤。。<mark>1——</mark> 指定文本不換行，直到遇到 <br> 標籤。。<mark>2——</mark> 指定文本不換行，直到遇到 <br> 標籤。。<mark>3——</mark> 指定文本不換行，直到遇到 <br> 標籤。。<mark>4——</mark> 指定文本不換行，直到遇到 <br> 標籤。。<br/><mark>5——</mark> 指定文本不換行，直到遇到 <br> 標籤。。 </p> <p class="p2"> white-space:pre 空白會被瀏覽器保留，該方式相似 HTML 中的 <pre> 標籤。 white-space:pre 空白會被瀏覽器保留，該方式 相似 HTML 中的 <pre> 標籤。 </p> <p class="p3"> white-space:pre-wrap 保留空白符序列，可是正常地進行換行。<mark>1——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 進 行 換 行。<mark>2——</mark> 保留 空白 符序列，可是 正常地 進行換行。<mark>3——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 進行換行。 </p> </body>
四、文本轉換：text-transform屬性控制文本中間的字母。文本轉換屬性是用來指定在一個文本中的大寫和小寫字母，可用於將全部字母變成大寫或小寫字母，或每一個單詞的首字母大寫。
屬性值有：capitalize---文本中每一個單詞首字母大寫
uppercase---文本中每一個單詞中的字母都大寫
lowercase---文本中每一個單詞中的字母都小寫
<head> <style> .p1{ text-transform:capitalize; } .p2{ text-transform:uppercase; } .p3{ text-transform:lowercase; } </style> </head> <body> <p class="p1">this is some text. 單詞以大寫字母開頭。</p> <p class="p2">this is some text. 僅有大寫字母。</p> <p class="p3">This IS SOme Text. 僅有小寫字母。</p> </body>
5、邊框樣式
任何一個元素均可以設置邊框屬性。要定義一個元素的邊框必需要設置如下三個方面：
邊框寬度：border-width：像素值；
邊框外觀：border-style ：（none | hidden | solid | dashed | dotted | double）；
none：無樣式
hidden：與none相同，不過應用於表除外，對於表hidden用於解決邊框衝突
solid：實線
dashed：虛線
dotted：點線
double：雙線（寬度等於border-width）
另外，border-style還有一些3D屬性值：inset：內凹，outset：外凸，ridge：脊線，growe：槽線
經常使用的屬性值主要是solid和dashed
邊框顏色：border-color ：顏色值；
img{ border-width:1px; border-style:solid; border-color:red; }
border屬性的簡潔方法：border：1px solid red;
局部邊框樣式：上邊框：border-top：1px solid red；
6、背景樣式
background屬性用於定義HTML元素的背景。 定義元素的背景效果的css屬性有如下五種：
a、background-color
b、background-image
c、background-repeat
d、background-position
e、background-attachment
一、background-color：背景顏色
background-color屬性定義了元素的背景顏色。頁面的背景顏色可使用body元素選擇器進行定義：
1 body{ 2 background-color:gray; 3 }
css中定義顏色值一般使用如下方式定義：
a、十六進制，如：#ff0000，相似這樣的形式，能夠縮寫爲#f00
b、RGB，如：rgb（255，0，0）
c、關鍵字：如red
二、background-image：背景圖像
background-image屬性描述了元素的背景圖像，默認背景下，背景圖像進行平鋪重複顯示，以覆蓋整個元素實體，頁面背景圖片設置以下：
1 body{ 2 background-image:url('images/wallpaper.jpg'); 3 }
三、background-repeat：背景圖像設置水平或垂直平鋪或不平鋪
默認狀況下，background-image 屬性會在頁面的水平或者垂直方向平鋪。一些圖像若是在水平方向與垂直方向平鋪，這樣看起來很不協調，若是圖像只在水平方向平鋪 (repeat-x), 頁面背景會更好些：background-repeat:repeat-x，定義垂直方向平鋪語法：background-repeat:repeat-y。
在使用背景圖像時，默認會平鋪重複顯示，這樣不只不具備美感，還會影響文本的排版。若是不想讓圖像平鋪，而且只顯示一次，那麼就這樣定義：background-repeat:no-repeat。
1 <head> 2 <style> 3 body{ 4 background-image:url('images/wallpaper.jpg'); 5 background-repeat:no-repeat; 6 } 7 </style> 8 </head> 9 <body> 10 <h1 class="center col">class 選擇器</h1> 11 <p class="center col">我是一個段落。</p> 12 <p class="center col font">我是另外一個段落。</p> 13 <h2 class="center">h2 標題</h2> 14 </body>
四、background-position：背景圖像設置定位
在上面的例子中，背景圖像與文本顯示在同一個位置，這樣不利於文本的閱讀，爲了讓頁面排版更加合理，能夠利用 background-position 屬性改變圖像在背景中的位置：
1 body{ 2 background-image:url('images/wallpaper.jpg'); 3 background-repeat:no-repeat; 4 background-position:right top; 5 }
此時，背景圖像會顯示在頁面的右上角。background-position 屬性設置背景圖像的位置，若是背景圖像要重複，也將從這一點開始。
background-position 屬性值可使用關鍵字表示：left | right | center，若是僅指定一個關鍵字，其餘值將會是 "center"。該方法可能的值的有：left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom。
background-position 屬性值也可使用百分比表示：x％y％，默認值爲：0％0％，第一個值是水平位置，第二個值是垂直位置。左上角是 0％0％，右下角是 100％100％。若是僅指定了一個值，其餘值將是 50％。
background-position 屬性值還可使用長度單位精確表示，單位能夠是像素或任何其餘 CSS 單位，一般都使用像素。第一個值是水平位置，第二個值是垂直位置，左上角是 0 0，兩個數值之間用空格隔開，例如：background-position:12px 24px; 表示背景圖片距離該元素左上角的水平方向位置是 12px，垂直方向位置是 24px。該屬性就是圖像左上角相對於元素左上角的位置偏移，若是取負值，則向上向左偏移。該方法在製做 CSS 雪碧圖（即 CSS Sprite，也叫作 CSS 精靈）時，將十分重要。
五、background-attachment：背景圖像設置固定或滾動
background-attachment 屬性設置背景圖像是否固定或者隨着頁面的其他部分滾動，默認值是 scroll，背景圖片隨頁面的其他部分滾動。若是須要設置圖像不隨着頁面的其餘部分滾動，那麼屬性值則使用 fixed，定義背景圖像是固定的，以下：
1 <head> 2 <style> 3 body{ 4 height:2000px; 5 background-image:url('images/fix.gif'); 6 background-repeat:no-repeat; 7 background-attachment:fixed; 8 } 9 </style> 10 </head> 11 <body> 12 <p>我是一個段落,我是一個段落</p> 13 <p>我是一個段落,我是一個段落</p> 14 <p>我是一個段落,我是一個段落</p> 15 <p>我是一個段落,我是一個段落</p> 16 <p>我是一個段落,我是一個段落</p> 17 <p>我是一個段落,我是一個段落</p> 18 <p>我是一個段落,我是一個段落</p> 19 <p>我是一個段落,我是一個段落</p> 20 <p>我是一個段落,我是一個段落</p> 21 <p>我是一個段落,我是一個段落</p> 22 <p>我是一個段落,我是一個段落</p> 23 <p>我是一個段落,我是一個段落</p> 24 <p>我是一個段落,我是一個段落</p> 25 <p>我是一個段落,我是一個段落</p> 26 <p>我是一個段落,我是一個段落</p> 27 <p>我是一個段落,我是一個段落</p> 28 <p>我是一個段落,我是一個段落</p> 29 <p>我是一個段落,我是一個段落</p> 30 <p>我是一個段落,我是一個段落</p> 31 <p>我是一個段落,我是一個段落</p> 32 <p>我是一個段落,我是一個段落</p> 33 </body>
六、背景屬性的縮寫
在上面實例中，設置頁面的背景效果時，經過不少的單個屬性來進行定義，這樣代碼就顯得很繁瑣，爲了簡化這些屬性的代碼，能夠將這些屬性合併在同一個屬性中，以下：
1 body{ 2 background:green url('images/fix.gif') no-repeat fixed 12px 24px; 3 }
background 屬於複合屬性，也叫快捷屬性，他能夠簡化代碼，提升頁面的運行效率，可是在使用 JS 時卻不能使用複合屬性來獲取元素的樣式，須要使用單個屬性精確獲取，若是一個元素定義了多個背景樣式，那麼使用複合屬性獲取，瀏覽器並不知道你到底須要哪一個樣式，就出錯了。相似這樣的複合屬性還有：font、border、padding 和 margin 等。
當使用簡寫屬性時，屬性值的順序依次爲：
background-color --> background-image --> background-repeat --> background-attachment --> background-position
以上屬性無需所有使用，能夠按照頁面的實際須要使用，好比只定義背景顏色，就能夠這樣設置：background:#90C;
7、超連接樣式
不一樣的連接能夠設置不一樣的樣式，設置連接樣式能夠用任何 CSS 屬性（如 color，background，font 等），連接的特殊性在於可以根據它們所處的狀態來設置它們的樣式。
在全部瀏覽器中，連接的默認外觀以下：
①：未被訪問的連接帶有下劃線並且是藍色的。
②：已被訪問的連接帶有下劃線並且是紫色的。
③：活動連接帶有下劃線並且是紅色的。
文本修飾屬性 text-decoration:none 可用於刪除連接中的下劃線。
連接的四種狀態是：
①：a:link - 正常，未訪問過的連接。
②：a:visited - 已訪問過的連接。
③：a:hover - 當鼠標滑動到連接上時。
④：a:active - 連接被點擊的那一刻。
當爲連接的不一樣狀態設置樣式時，必須遵循如下順序規則：
①：a:hover 必須跟在 a:link 和 a:visited 後面。
②：a:active 必須跟在 a:hover後面。
在這四種狀態中，最常被應用到的狀態是 a:hover，:hvoer 是一個 CSS 僞類，在鼠標移動到元素上時添加的特殊樣式，可用於全部元素，不僅是連接，常被用來作鼠標滑過動畫。當應用到連接上時，可使用列表佈局導航欄菜單，也叫選項卡，當鼠標移動到連接菜單上時，能夠顯示特殊的樣式。
1 <head> 2 <style> 3 *{padding:0;margin:0;font:bold 18px '微軟雅黑';} 4 a{ 5 color:black; 6 background-color:green; 7 text-decoration:none;//取消鏈接下劃線 8 display:block; 9 width:120px; 10 padding:10px; 11 margin:20px; 12 text-align:center; 13 } 14 a:hover{ 15 color:white; 16 background-color:lightgray; 17 text-shadow:0 0 4px red;//文字陰影 18 } 19 </style> 20 </head> 21 <body> 22 <a href="#" >CSS 基礎知識</a> 23 </body>
8、圖片樣式
一、圖片大小：在css中，對圖片的大小，咱們也是用width和height這兩個屬性來定義。
二、圖片邊框：在css中，設置圖片邊框，也是使用border屬性來設置
三、圖片水平到齊：在css中，設置圖片水平對齊，也是使用text-align屬性來設置
四、圖片垂直對齊：在css中，使用vertical-align屬性來定義圖片的垂直對齊方式
語法：vertical-align：屬性值；
屬性值的取值有：top：頂部對齊； middle：中部對齊； baseline：基線對齊； bottom：底部對齊；
W3C對vertical-align屬性的定義是：vertical-align屬性定義行內元素相對於該元素的垂直對齊方式。
9、列表樣式
從某種意義上講，不是描述性的文本的任何內容均可以認爲是列表，好比家譜、人口普查、太陽系，甚至你的全部朋友均可以表示爲一個列表或者是列表的列表。
因爲列表如此多樣，這使得列表至關重要，在 HTML 中，有兩種類型的列表：①：無序列表 - 列表項標記用特殊圖形，默認以小黑點樣式顯示。②：有序列表 - 列表項的標記默認以數字樣式顯示。
CSS 列表屬性做用以下：①：設置不一樣的列表項標記。②：設置列表項標記爲圖像。
經過CSS，能夠列出進一步的樣式，並可用圖像做列表項標記。修改列表項標記使用list-style-type，使用圖像做爲標記能夠利用list-style-image 屬性完成。
一、無序列表項標記
無序列表可被用來作導航欄菜單，一般都須要隱藏無序列表項的標記，那麼就使用list-style-type:none，表示無標記。list-style-type 屬性的默認值爲disc 實心圓，即小黑點。
1 <head> 2 <style> 3 ul{ 4 list-style-type:none; 5 } 6 </style> 7 </head> 8 <body> 9 <ul> 10 <li>HTML 超文本標記語言</li> 11 <li>CSS 層疊樣式表</li> 12 <li>JavaScript 賦予 HTML 動態交互</li> 13 <li>jQuery 最好用的JS庫</li> 14 <li>Bootstrap 前端開發框架</li> 15 </ul> 16 </body>
無序列表除了能夠無標記以外，還能夠修改標記類型，如circle 空心圓，square 實心方塊。實例：
1 <head> 2 <style> 3 .ul1{ 4 list-style-type:circle; 5 } 6 .ul2{ 7 list-style-type:square; 8 } 9 </style> 10 </head> 11 <body> 12 <ul class="ul1"> 13 <li>HTML 超文本標記語言</li> 14 <li>CSS 層疊樣式表</li> 15 <li>JavaScript 賦予 HTML 動態交互</li> 16 </ul> 17 <ul class="ul2"> 18 <li>jQuery 最好用的JS庫</li> 19 <li>Zepto 兼容 jQuery 語法的移動端JS庫</li> 20 <li>Bootstrap 前端開發框架</li> 21 </ul> 22 </body>
二、有序列表
有序列表項標記默認使用數字樣式顯示，即 list-style-type:decimal，也能夠將標記項修改成其餘類型，cjk-ideographic 則指定漢語數字(表意數字)做爲標記。decimal-leading-zero 指定以0開頭的數字做爲標記，如 01, 02, 03, 等。lower-roman 指定以小寫羅馬數字做爲標記，如 i, ii, iii, iv, v, 等。upper-roman 指定以大寫羅馬數字做爲標記，如 I, II, III, IV, V, 等。lower-alpha 指定以小寫英文字母做爲標記。upper-alpha 指定以大寫英文字母做爲標記。
三、圖像做爲列表項標記
要指定列表項標記的圖像，可使用 list-style-image 屬性，只須要簡單地設置一個 url() 值，就能夠將圖像做爲標記類型。
1 <head> 2 <style> 3 ul{ 4 list-style-image:url('images/ul-icon.jpg'); 5 } 6 </style> 7 </head> 8 <body> 9 <ul> 10 <li>HTML 超文本標記語言</li> 11 <li>CSS 層疊樣式表</li> 12 <li>JavaScript 賦予 HTML 動態交互</li> 13 <li>jQuery 最好用的JS庫</li> 14 <li>Bootstrap 前端開發框架</li> 15 </ul> 16 </body>
四、列表項標記的位置
list-style-position 屬性能夠設置列表中列表項標記的位置。默認值爲 outside 保持標記位於文本的左側，列表項標記放置在文本之外，且環繞文本不根據標記對齊。inside 則指定列表項目標記放置在文本之內，且環繞文本根據標記對齊。以下：
1 <head> 2 <style> 3 .ul1{ 4 list-style-position:outside; 5 } 6 .ul2{ 7 list-style-position:inside; 8 } 9 li{ 10 margin:5px; 11 border:2px solid red; 12 } 13 </style> 14 </head> 15 <body> 16 <ul class="ul1"> 17 <li>HTML 超文本標記語言</li> 18 <li>CSS 層疊樣式表</li> 19 <li>JavaScript 賦予 HTML 動態交互</li> 20 <li>jQuery 最好用的JS庫</li> 21 <li>Bootstrap 前端開發框架</li> 22 </ul> 23 <ul class="ul2"> 24 <li>HTML 超文本標記語言</li> 25 <li>CSS 層疊樣式表</li> 26 <li>JavaScript 賦予 HTML 動態交互</li> 27 <li>jQuery 最好用的JS庫</li> 28 <li>Bootstrap 前端開發框架</li> 29 </ul> 30 </body>
在上面例子中，使用了2個無序列表，第一個列表項標記位置爲默認，第二個列表項標記被放置在文本之內，爲了加強演示效果，給每一個列表項都設置外邊距和邊框，在瀏覽器中能夠很直觀的看到兩者的不一樣，默認值的標記在邊框外，而inside則在邊框內，還有一點須要注意：在Chrome 和Firefox 中這兩個值的標記位置與列表項之間的空白都是相等的，而在IE中能夠很明顯的看到，使用inside值後，標記位置與列表項之間的空白比默認值寬。
五、列表屬性簡寫
在單個屬性中能夠指定全部的列表屬性，能夠將以上 3 個列表樣式屬性合併爲一個方便的屬性：list-style。
當使用簡寫屬性時，屬性值的順序依次爲：
list-style-type --> list-style-position --> list-style-image
能夠不設置其中的某個值，好比 list-style:square inside 也是容許的，未設置的屬性將使用默認值。
無序列表項的標記在隱藏時，使用簡寫屬性，且考慮到瀏覽器的兼容性，能夠定義爲：list-style:none outside none; 或者不設置第三個值也好。
10、表格樣式
使用css能夠大大提升HTML表格的外觀。
一、表格表框
給表格設置邊框，可使用 CSS 的 border 屬性定義，也可使用表格標籤的 border 屬性定義。以下：
1 <head> 2 <style> 3 table,th,td{ 4 border:1px solid black; 5 } 6 </style> 7 </head> 8 <body> 9 <table> 10 <tr> 11 <th>粗糧</th> 12 <th>蔬菜</th> 13 <th>水果</th> 14 </tr> 15 <tr> 16 <td>大豆</td> 17 <td>黃瓜</td> 18 <td>香蕉</td> 19 </tr> 20 <tr> 21 <td>高粱</td> 22 <td>菠菜</td> 23 <td>檸檬</td> 24 </tr> 25 </table> 26 </body>
注意，這樣設置的表格具備雙線條邊框，這是因爲 table、th 以及 td 元素都有獨立的邊框。爲了顯示一個單線條邊框的表格，就使用 border-collapse 屬性。
二、摺疊邊框
border-collapse 屬性設置是否將表格邊框合併爲單一線條的邊框。該屬性的默認值爲 separate 邊框會分開顯示，不會忽略 border-spacing 和 empty-cells 屬性。collapse 若是可能，邊框會合併爲一個單一的邊框，該值會忽略 border-spacing 和 empty-cells 屬性，即設置這兩個屬性無效。以下：
1 <head> 2 <style> 3 table{ 4 border-collapse:collapse; 5 } 6 table,th,td{ 7 border:1px solid black; 8 } 9 </style> 10 </head> 11 <body> 12 <table> 13 <tr> 14 <th>粗糧</th> 15 <th>蔬菜</th> 16 <th>水果</th> 17 </tr> 18 <tr> 19 <td>大豆</td> 20 <td>黃瓜</td> 21 <td>香蕉</td> 22 </tr> 23 <tr> 24 <td>高粱</td> 25 <td>菠菜</td> 26 <td>檸檬</td> 27 </tr> 28 </table> 29 </body>
border-spacing 屬性用於設置相鄰單元格的邊框間的距離，僅用於邊框分離模式，即雙線條邊框表格。使用 px、cm 等單位指定距離，不容許使用負值。若是定義一個參數，那麼定義的是水平和垂直間距。若是定義兩個參數，那麼第一個設置水平間距，而第二個設置垂直間距。
empty-cells 屬性設置是否顯示錶格中的空單元格，僅用於邊框分離模式，即雙線條邊框表格。該屬性用於定義不包含任何內容的表格單元格如何顯示，若是顯示，就會繪製出單元格的邊框和背景。該屬性的默認值爲 show 在單元格周圍繪製邊框，hide 不在單元格周圍繪製邊框。
除非表格的邊框顯示爲雙線條邊框，不然這兩個屬性都無效。
1 <head> 2 <style> 3 .tab1{ 4 empty-cells:hide; 5 border-spacing:10px; 6 } 7 .tab2{ 8 border-spacing:20px 50px; 9 margin-top:20px; 10 } 11 </style> 12 </head> 13 <body> 14 <table border="1" class="tab1"> 15 <tr> 16 <th>粗糧</th> 17 <th>蔬菜</th> 18 <th>水果</th> 19 </tr> 20 <tr> 21 <td></td> 22 <td>黃瓜</td> 23 <td></td> 24 </tr> 25 <tr> 26 <td>高粱</td> 27 <td></td> 28 <td>檸檬</td> 29 </tr> 30 </table> 31 <table border="1" class="tab2"> 32 <tr> 33 <th>粗糧</th> 34 <th>蔬菜</th> 35 <th>水果</th> 36 </tr> 37 <tr> 38 <td></td> 39 <td>黃瓜</td> 40 <td></td> 41 </tr> 42 <tr> 43 <td>高粱</td> 44 <td></td> 45 <td>檸檬</td> 46 </tr> 47 </table> 48 </body>
三、表格寬度和高度
width 和 height 屬性定義表格的寬度和高度。
四、表格對齊
text-align 和 vertical-align 屬性用於設置表格中文本的對齊方式。
①、text-align 屬性設置水平對齊方式，好比左對齊，右對齊和居中。
②、vertical-align屬性設置垂直對齊方式，好比頂部對齊，底部對齊或中間對齊。
vertical-align:top; 頂部對齊。vertical-align:middle; 中間對齊。vertical-align:bottom; 底部對齊。
caption-side 屬性能夠設置表格標題的位置，默認值爲 top 將標題定位在表格之上，bottom 能夠把表格標題定位在表格之下。
五、表格內邊距
若是須要控制表格中內容與邊框的距離，就應該增長內容的內邊距，即爲 td 和 th 元素設置 padding 屬性。
六、表格顏色
能夠爲表格的邊框指定邊顏色，也能夠爲表頭以及單元格指定背景顏色，還能夠設置文本的顏色。
綜合實例：
1 <head> 2 <style> 3 #tab{ 4 width:50%; 5 font-family:"微軟雅黑"; 6 border-collapse:collapse; 7 } 8 #tab th,#tab td{ 9 border:1px solid #7AC942; 10 padding:5px 10px; 11 } 12 #tab th{ 13 color:white; 14 background-color:#9C3; 15 font-size:1.125em; 16 text-align:left; 17 padding-top:4px; 18 padding-bottom:8px; 19 } 20 #tab .list td{ 21 color:#000; 22 background-color:#FFC; 23 } 24 caption{ 25 margin-bottom:10px; 26 font-weight:bold; 27 font-size:1.5em; 28 } 29 </style> 30 </head> 31 <body> 32 <table id="tab"> 33 <caption>食物類別</caption> 34 <thead> 35 <tr class="list"> 36 <th>粗糧</th> 37 <th>蔬菜</th> 38 <th>水果</th> 39 </tr> 40 </thead> 41 <tbody> 42 <tr> 43 <td>大豆</td> 44 <td>黃瓜</td> 45 <td>香蕉</td> 46 </tr> 47 <tr class="list"> 48 <td>高粱</td> 49 <td>菠菜</td> 50 <td>檸檬</td> 51 </tr> 52 <tr> 53 <td>玉米</td> 54 <td>辣椒</td> 55 <td>芒果</td> 56 </tr> 57 <tr class="list"> 58 <td>燕麥片</td> 59 <td>白菜</td> 60 <td>西瓜</td> 61 </tr> 62 </tbody> 63 </table> 64 </body>
11、CSS盒子模型
一、css盒子模型
在css盒子模型中，頁面內的全部元素均可以當作盒子，而且佔據着必定的頁面空間。
一個頁面由不少這樣的盒子組成，這些盒子之間會互相影響，所以掌握盒子模型能夠從兩方面來理解：一個理解單獨盒子的內部結構，二是理解多個盒子之間的相互關係。
每一個元素都當作一個盒子，盒子模型由content（內容），padding（內邊距），border（邊框），margin（外邊距）這四個屬性組成。此外，在盒子模型中，還有寬度width和高度height兩大輔助性屬性。
（一個盒子的寬度或高度是由content+padding+border+margin組成，頁面中的全部元素均可以看做一個盒子）
（1）content（內容區）：是盒子模型的中心，它呈現了盒子的主要信息內容，這些內容能夠是文本、圖片等多種類型。內容區是盒子模型必備的組成部分，其餘的三部分都是可選的。
內容區有三個屬性：width、height和overflow
width、height兩個屬性是針對內容區而言，並不包括padding部分。
當內容信息太多，超出了內容區所佔的範圍時，可使用overflow溢出來指定處理方法。
overflow屬性的取值：hidden（溢出隱藏） auto（自適應加滾動條） scroll（不管溢出與否都加滾動條）
（2）padding（內邊距）：指的是內容和邊框之間的空間，能夠看做是內容區的背景區域。
關於內邊距的屬性有5中，即padding-top、padding-bottom、padding-left、padding-right以及綜合了以上四個方向的簡潔內邊距屬性padding。
語法：
padding：20px；四個方向的padding值都是20px
padding：20px 40px；上下爲20px，左右爲40px
padding：10px 20px 30px 40px；順序是上右下左。
（3）border（邊框）：在css盒子模型中，邊框跟咱們以前學的邊框是同樣的。
（4）margin（外邊距）：指的是兩個盒子之間的距離，他多是子元素與父元素之間的距離，也多是兄弟元素之間的距離。
外邊距使得元素之間沒必要緊湊的鏈接在一塊兒，是css佈局的一個重要手段。
語法：
margin：20px；
margin：20px 40px；
margin：10px 20px 30px 40px;順序與padding設置順序一致。
12、浮動佈局
一、HTML文檔流
（1）正常文檔流
html文檔流：就是元素在頁面出現的前後順序。
正常文檔流，將窗體自上而下分紅一行一行，塊元素獨佔一行，相鄰行內元素在每行中按從左到右依次排列元素。
（2）脫離正常文檔流
相對於正常文檔流而言，正常文檔流就是咱們沒有用css樣式去控制的html文檔結構，你寫的界面的順序就是網頁展現的順序。
所謂脫離正常文檔流就是指它所顯示的位置和文檔代碼順序不一致。
在css佈局中，咱們可使用浮動或者定位這兩種技術來實現「脫離正常文檔流」，從而爲所欲爲地控制頁面的佈局。
二、浮動float（不徹底脫離文檔流）
浮動屬性float是css佈局的最佳利器，咱們能夠經過不一樣的浮動屬性值靈活地定位div元素，以達到佈局網頁的目的。
我i麼能夠說經過css的屬性float使元素向左或向右浮動。
在css中，任何元素均可以浮動。
浮動元素會生成一個塊級框，而不論它自己是何種元素。
語法：float：取值；（取值包括left和right）
若是子元素是浮動的。則撐不開父元素的高度，（解決辦法是給父元素田間一個overflow：hidden）
三、清除浮動clear
在css中，清除浮動都是在定義了浮動的元素以後設置的。
語法：clear：取值；（取值主要包括：left取消左浮動，right清除右浮動，both左右浮動一塊兒清除）
十3、定位佈局position
定位佈局使得用戶精準定位頁面中的任意元素成爲可能，頁面佈局操做變的更加爲所欲爲。
定位佈局共有四種：固定定位、相對定位、絕對定位、靜態定位
（1）固定定位fixed
當元素的position屬性設置爲fixed時，這個元素就被固定了，被固定的元素不會隨着滾動條的拖動而改變位置。
在視野中，固定定位的元素位置是不會改變的。即它是指定元素相對於可視區域的位置，原來位置消失，不能與float連用。
語法：position：fixed；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
left和top的優先級高於right和bottom。
（2）相對定位relative
採用相對定位的元素，其位置是相對於它原始位置計算而來的。
語法：position：relative；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
（3）絕對定位absolute
使用最爲普遍，可以將元素移動到你想要的位置。
一個元素變成了絕對定位元素，這個元素就徹底脫離了正常文檔流了，絕對定位的前面或後面的元素會認爲這個元素並不存在，即這個元素浮於其餘元素上方，它是獨立出來的。
語法：position：absolute；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
（4）靜態定位static
若是沒有指定元素的position屬性值，也就是默認狀況下：元素是靜態定位。只要是支持position屬性的html對象都是默認的static，static是position屬性的默認值，他表示塊保留在應該在的位置，不會從新定位。
（5）z-index屬性用於調整定位時重疊塊的上下位置，當塊設置了position屬性時，該值即可以設置各項的重疊高低關係，默認值爲0；
- 1. css基礎知識
- 2. CSS基礎知識
- 3. CSS基礎知識(2 css)
- 4. 基礎知識三
- 5. CSS基礎知識整理
- 6. CSS 基礎知識（下）
- 7. CSS基礎知識概括
- 8. css的基礎知識
- 9. HTML+CSS+JS基礎知識
- 10. CSS基礎知識小結
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • ☆基於Java Instrument的Agent實現
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. css基礎知識
- 2. CSS基礎知識
- 3. CSS基礎知識(2 css)
- 4. 基礎知識三
- 5. CSS基礎知識整理
- 6. CSS 基礎知識（下）
- 7. CSS基礎知識概括
- 8. css的基礎知識
- 9. HTML+CSS+JS基礎知識
- 10. CSS基礎知識小結