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