>css樣式 ###1 css樣式屬性 ### #1.1 樣式重置（初始化樣式） ~~~ *{margin：0；padding：0；} ~~~ ####1.2 常用屬性 ~~~ color--文字的顏色 line-height--行高會文本在行高中垂直居中 background-color:設置背景顏色 text-align:設置文本的對齊方向 font-size:設置字體大小 h1{cursor: pointer;} 滑到位置有鼠標箭頭變成小手 ~~~ ####1.3 元素水平居中 ~~~ margin-left: auto; margin-right: auto; ~~~ ###2 常用的css樣式選擇器 ~~~ p{} 元素選擇器 慎重使用 .class{} 特點： 1.可以給多個標簽相同的class名 2.可以給一個標簽多個class名 #id{} 特點：每個id名都是唯一的 --寫樣式的時候不要用id選擇器 element:hover 如：h1:hover{}偽類選擇器 合并（h1:hover,h2:hover） （滑動效果是對h1整體的 如ul是對ul中所有的li，非單個li） ~~~ ###3 標簽 ####3.1img 圖片標簽 ~~~ 特殊：單標簽 src--標簽的屬性 功能:指定圖片所在的位置 alt--當圖片加載不出來,用來描述圖片的 圖片大小與容器大小一致，設置圖片寬度 ~~~ ####3.2 術語標簽 ~~~ <dl> -- 定義列表 <dt>HTML</dt> -- 定義的術語 <dd>負責網頁的結構</dd> -- 定義的描述 </dl> ~~~ >盒子模型 ###1.margin 改變元素位置 ###2.border 改變元素的 高度，寬度 ###3.padding 填充 改變元素 寬度，高度， - width+padding=實寬 ~~~ margin:0; //四個方向都改變 margin:0 10px; //top,bottom為0px;left,right為10px margin:0 10px 20px; //top 0;left,right 10px;bottom 20px; ~~~ >問題 ####1.背景圖片 ~~~ background-image: url(images/timg2.jpg) ~~~ ####2.邊框設置 ~~~ border: 1px solid skyblue; ~~~ ####3 樣式選擇及框架布局 - 盡量少用p{} 慎用id 多用class