>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