《CSS+DIV》页面样式总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Mabanana/article/details/85192875

1.文字效果

• 文字样式
  • 文字
  • 文字大小
  • 文字颜色
  • 文字粗细
  • 斜体
  • 下划线、顶划线、删除线

#font{
    font-family : 微软雅黑,宋体;       /*字体类型*/
    font-size : 1em;                 /*字体大小*/   
    color : #f00;                    /*字体颜色*/
    font-weight:100;                 /*字体粗细*/
    text-decoration:underline;       /*下划线*/         
    text-decoration:overline;        /*顶划线*/
    text-decoration:line-through;    /*删除线*/
    text-decoration:blink;           /*闪烁*/
}

• 段落文字
  • 段落水平对齐方式
  • 段落垂直对齐方式
  • 行间距、字间距
  • 首字放大

---

2.图片

• 图片样式
  • 图片边框
  • 图片缩放
• 图片对齐
  • 横向对齐
  • 纵向对齐
• 图文混排
  • 文字环绕
  • 设置图片与文字的间距

img.test{
    
    /*图片边框*/
    border-style:dashed;    /*虚线*/
    border-color:blue;      /*边框颜色*/
    border-width:2px;       /*边框粗细*/
    
    /*图片缩放*/
    width:50px;             /*绝对宽度*/
    height:40%;             /*相对高度*/
    
    /*对齐方式*/
    text-align:left;        /*左对齐*/
    text-align:center;      /*居中对齐*/
    text-align:right;       /*右对齐*/

    /*图文混排*/
    float:left;             /*文字环绕图片*/
    margin-right:50px;      /*右侧距离*/
    margin-bottom:25px;     /*下侧距离*/

}

---

4.页面背景

• 背景颜色
  • 页面背景色
  • 用背景色给页面分块
• 背景图片
  • 页面的背景图
  • 背景图片的重复
  • 背景图片的位置
  • 固定背景图片

body{
    
    /*背景颜色*/
    background-color:red;                    /*设置页面背景颜色*/
    color:blue;                              /*设置页面文字颜色*/
    
    /*背景图片*/
    background-image:url(02.jpg);            /*页面背景图片*/
    background-repeat:repeat-y;              /*垂直方向上重复*/
    background-position:bottom right;        /*背景位置，右下*/

}

.topbanner{
    background-color:yellow;                  /*顶端banner的背景色*/
}

---

 5.Cluuuuuuuuuu.