day2（乱）

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