html 在一個網(wǎng)頁中負責的事情是一個頁面的結構
css(層疊樣式表) 在一個網(wǎng)頁中主要負責了頁面的數(shù)據(jù)樣式劫谅。
編寫css代碼的方式：
第一種： 在style標簽中編寫css代碼垮庐。? 只能用于本頁面中梨撞，復用性不強沥邻。
格式 ：
<style type="text\css">編寫css代碼</style>
例子：
a{
color:#F00;
text-decoration:none;
}
第二種： 可以引入外部的css文件上陕。? 推薦使用墨吓。
方式1： 使用link標簽哮洽。? 推薦使用...
格式：<link href="css文件的路徑" rel=“stylesheet”>
例子：<link href="1.css" rel="stylesheet">
方式2：使用<style>引入
格式： <style type="text/css"> @import url("css的路徑")打却；</style>
例子：<style type="text/css" @import url("1.css");</style>
第三種方式：直接在html標簽使用style屬性編寫杉适。? ? 只能用于本標簽中，復用性較差柳击。 不推薦使用猿推。
例子：<a style=“color:#OFO”; text-decoration:none" href="#">新聞標題</a>
html的注釋：<!-- html的注釋-->
css /* css的注釋 ..*/
-------------------------------------------------------------------------------------------------
選擇器： 選擇器的作用就是找到對應的數(shù)據(jù)進行樣式化。
1.標簽選擇器： 就是找到所有指定的標簽進行樣式化捌肴。
格式：
標簽名{
樣式1蹬叭；樣式2....
}
例子：
div{
color:#F00;
font-size:24px;
}
2. 類選擇器: 使用類選擇器首先要給html標簽指定對應的class屬性值藕咏。
格式：
.class的屬性值{
樣式1；樣式2...
}
例子：
.two{
background-color:#0F0;
color:#F00;
font-size:24px;
}
類選擇器要注意的事項：
1. html元素的class屬性值一定不能以數(shù)字開頭.
2. 類選擇器的樣式是要優(yōu)先于標簽選擇器的樣式具垫。
3. ID選擇器： 使用ID選擇器首先要給html元素添加一個id的屬性值侈离。
ID選擇器的格式：
#id屬性值{
樣式1；樣式2...
}
id選擇器要注意的事項：
1. ID選擇器的樣式優(yōu)先級是最高的筝蚕，優(yōu)先于類選擇器與標簽選擇器卦碾。
2. ID的屬性值也是不能以數(shù)字開頭的。
3. ID的屬性值在一個html頁面中只能出現(xiàn)一次起宽。
4. 交集選擇器： 就是對選擇器1中的選擇器2里面的數(shù)據(jù)進行樣式化洲胖。
選擇器1 選擇器2{
樣式1，樣式2....
}
例子：
.two span{
background-color:#999;
font-size:24px;
}
5. 并集選擇器： 對指定的選擇器進行統(tǒng)一的樣式化坯沪。
格式：
選擇器1,選擇器2..{
樣式1绿映；樣式2...
}
span,a{
border-style:solid;
border-color:#F00;
}
6. 通過選擇器:
*{
樣式1；樣式2...
}
--------------------------------------------------------------------------------------
偽類選擇器：偽類選擇器就是對元素處于某種狀態(tài)下進行樣式的腐晾。
注意：
1. a:hover 必須被置于 a:link 和 a:visited 之后
2. a:active 必須被置于 a:hover 之后
*/
a:link{color:#F00} /* 沒有被點擊過---紅色 */
a:visited{color:#0F0} /*? 已經(jīng)被訪問過的樣式---綠色 */
a:hover{color:#00F;} /* 鼠標經(jīng)過的狀態(tài)---藍 */
a:active{color:#FF0;}
/*操作背景的屬性 */
body{
/*background-color:#CCC;? 設置背景顏色*/
background-image:url(2.jpg);
background-repeat:no-repeat;? /*? 設置背圖片是否要重復 */
background-position:370px 100px; /* 設置背景圖片的位置叉弦， 第一個參數(shù)是左上角的左邊距， 第二個參數(shù)是左上角的上邊距 */
}
常用的CSS樣式
/* 操作文本的樣式 */
div{
color:#F00;
font-size:16px;
line-height:40px;
letter-spacing:10px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
// 設置表格的屬性
table{
/*border-collapse:collapse; 合并表格的邊框*/
border-spacing:20px; /* 設置單元格的邊框與表格的邊框距離*/
table-layout:fixed;
}
div默認是沒有邊框呃藻糖。
div{
width:100px;
height:100px;
border-style:dotted solid double ; /* 設置邊框的樣式? 上 右 下 左*/
border-color:#F00;
border-bottom-color:#0FF;
border-top-width:100px;
}
盒子模型
盒子模型: 盒子模型就是把一個html邊框比作成了一個盒子的邊框淹冰，盒子模型要做用于操作數(shù)據(jù)與邊框之間的距離或者 是邊框與邊框之間的距離。
盒子模型主要是用于操作內(nèi)邊距(padding)與外邊距（margin）
*/
div{
border-style:solid;
width:100px;
height:100px;
/* 內(nèi)邊距 */
padding-left:10px;
padding-top:20px;
}
.one{
margin-bottom:30px;
}
.two{
margin-left:700px;
}
------------------------------定位-----------------------------
css的定位：
相對定位： 相對定位是相對于元素原本的位置進行移動的巨柒。
使用方式： position:relative;
絕對定位： 絕對定位是相對于整個頁面而言樱拴。
position:absolute;
top:200px;
left:380px;
固定定位：
position:fixed; /* 固定定位: 固定定位是相對于整個瀏覽器而已的。
top:380px;
left:1000px;
*/
div{
border-style:solid;
width:100px;
height:100px;
}
.one{
background-color:#F00;
}
.two{
background-color:#0F0;
position:relative; /* 相對定位,對于當前位置 */
top:10px;
left:10px;
}
.three{
background-color:#00F;
}
#ad{
width:400px;
height:200px;
border-style:solid;
font-size:24px;
color:#F00;
position:absolute; /* 絕對定位,相對于一個頁面 的左上角而言的洋满。 */
top:200px;
left:380px;
}
#ad2{
position:fixed; /* 固定定位: 固定定位是相對于整個瀏覽器而已的晶乔。 */
top:380px;
left:1000px;
}
