html+css+js Web開發學習——4

創建頁面級樣式

在html的head標籤中添加如下示例：
<style type="text/css">
h1 { font-size:small; font-weight:bold; }
</style>

創建網站級樣式

將上面的style標籤中的內容保存至一個後綴爲.css 的文件中比如style.css，然後在需要使用的html文件中包含如下：
<link rel="stylesheet" href="style.css" type="text/css">

選擇器（超級常用）

1、任何標籤都可用作CSS選擇器。
	可將樣式同時用於多種元素：
	p,ol,ul {color:red;},
	等效於：
	p {color:red;}
	ol {color:red;}
	ul {color:red;}
2、上下文選擇器，可以設定嵌套在指定標籤中的某標籤的樣式。
	cite {color：green;}
	p cite {color:red;}
	div cite {color:blue;}
	默認的cite顏色爲綠色。若cite嵌套在p標籤中則顏色爲紅色，若cite嵌套在div中則顏色爲藍色。
	注：p和cite之間沒有逗號，如有則爲同時運用樣式了。
3、類和ID。及標籤的class和id屬性。
	.aaaaa {color:red;}：將aaaaa類的標籤顏色都設置爲紅色。
	div.aaaaa {color:red;}：如果div標籤屬於aaaaa類則顏色爲紅色。
	#bbb {color:red;}：ID爲bbb的標籤顏色爲紅色。

屬性選擇器

p[class="abc"] {font-size:12px;}：匹配屬性class的值爲abc的p元素，相當於p.abc
p[class] {font-size:12px;}：匹配所有設置了class屬性的p元素。
同理，其他屬性也可以這樣使用
=~：匹配以空格分隔的屬性值列表，p[class=~"aa"]就會匹配<p class="aa bb cc">
^=：與指定屬性以指定值打頭的元素匹配
*=：與指定屬性包含指定值的元素匹配
$=：匹配屬性值以特定字符串結尾的元素
|=：匹配以連字符分隔得屬性值列表。

爲什麼叫級聯樣式表

因爲樣式將從父元素傳遞到子元素。要覆蓋已通過級聯應用的樣式，只需使用更具體的選擇器設置同樣的屬性。

CSS的度量單位

單位	含義
em	字體高度
ex	字體中字符x的高度
px	像素
in	英寸
cm	釐米
mm	毫米
pt	磅
pc	皮卡
rem	根元素使用的字體高度
vh	視口高度的百分比
vw	視口寬度的百分比

盒子模型（對佈局很重要）

可以將任何元素看做包含在盒子內，可以給盒子加邊框，和邊框屬性。
border-style:dotted solid double dashed;
				上邊框是點狀
				右邊框是實線
				下邊框是雙線
				左邊框是虛線
等同於通過border-left-style等屬性來設置。
border-width:寬度
margin：通過此屬性可以設置外邊框的樣式（外邊距）。
padding：通過此屬性可以設置內邊框的樣式（內邊距）。
盒子模型非常有用，作爲新手，經常看到一個標籤外套了好多div，本來感覺很冗餘，後來發現就是利用盒子模型來進行佈局。

none	定義無邊框。
hidden	與 “none” 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
dotted	定義點狀邊框。在大多數瀏覽器中呈現爲實線。
dashed	定義虛線。在大多數瀏覽器中呈現爲實線。
solid	定義實線。
double	定義雙線。雙線的寬度等於 border-width 的值。
groove	定義 3D 凹槽邊框。其效果取決於 border-color 的值。
ridge	定義 3D 壟狀邊框。其效果取決於 border-color 的值。
inset	定義 3D inset 邊框。其效果取決於 border-color 的值。
outset	定義 3D outset 邊框。其效果取決於 border-color 的值。

內容盒子是什麼

內容盒子分兩種：
1、塊式盒子：塊級元素默認與包含他的容器一樣大，但可使用css修改其高度和寬度。並且前後都會換行。
2、內嵌盒子：內嵌元素的尺寸取決於其包含的內容及其外邊距、內邊距、邊框設置。
可以使用display修改默認行爲：
		block：塊級
		inline：內嵌
		none：將元素從頁面刪除

元素的width和height百分比是相對於什麼？

塊元素的width和height，如果使用百分比值來設置，其相對的是父元素的尺寸。

當內容太多溢出包含它的盒子時怎麼辦？

使用overflow屬性。取值如下：
visible：（默認），繼續顯示，和後續的內容發生重疊。
hidden：多出來的不顯示
scroll：添加滾動條，始終顯示滾動條
auto:添加滾動條，在需要時顯示滾動條

float和clear

float：可取值是left、right、none。設置某元素儘可能的靠某個方向顯示，其他元素圍繞它來顯示。
clear：可取值：left、right、none、both。可消除相應值的浮動影響。

僞類

有幾個僞類可用於將樣式應用於頁面上特定位置處的內容。
:first-letter：只選擇指定元素的第一個字母。可用於首字母下沉效果。
:first-line：指定元素中的第一行文本。
:hover：包含此僞類的選擇器在用戶將鼠標指向匹配元素時觸發。
:focus：包含此僞類的選擇器在匹配的元素獲得焦點時觸發。
:before和:after：結合content可動態的在元素前後添加內容。

瀏覽器支持的圖像格式

GIF、JPEG、PNG、SVG。這幾種格式是每款主流瀏覽器都支持的。

img——內嵌圖像

屬性有：
1、src：圖像的URL
2、alt：圖像的說明文字
用法：
<h2><img src="aaa.jpg">nihao</h2>，可以內嵌在文本中。
<a href="www.baidu.com"><img src="aaa.jpg"></a>,用圖像作爲鏈接。

圖像映射是什麼

可以將圖像的某一部分定義爲鏈接。
步驟是：
1、選擇圖像，
2、確定座標，可通過手動確定，或者使用mapedit等工具。
<map name="aaa">
<area shape="rect" coorde="41,50,101,32" ref="text1.html">
<area shape="rect" coorde="54,92,341,84" ref="text2.html">
<area shape="rect" coorde="74,61,74,64" ref="text3.html">
</map>.
其中<map>的name屬性用於關聯映射。
3、關聯映射：
<img src='image.gif" usemap="#mapname">

表格

表格使用標籤<table>
<tr>：行
<td>：列
<th>：表頭
<caption>：表說明文字
<colgroup>：給行編組，結合span屬性使用。
屬性：
cellpadding-可設置單元格之間的邊距。
text-align：設置內容的水平對齊方式left、right、center。
vertical-align：設置內容的垂直對齊方式top、middle。
rowspan和colspan：用於設置橫跨多行或多列。
表格居中設置：將margin-right和margin-left設置爲auto。而不是使用屬性float。

position——定位（對佈局很重要）

position屬性設置元素的定位方式。

static	默認，不影響文檔佈局	正常排列，從左到右，從上到下
relative	不影響文檔佈局，網頁會預留空間	相對於正常排列位置進行位移
absolute	不預留空間(他的理論位置會有其他元素)	相對於已經定位的祖先的位置進行位移，默認是正常排列的位置
fixed	不預留空間	相對於視口(瀏覽器顯示的畫面)的位置

z-index

用於控制元素的堆疊，值越小就越在下面。