CSS中常用属性

?

1 2 3 4 5 6 7 8 9 10 11 12

/* *作者：呆萌老师 *☑csdn认证讲师 *☑51cto高级讲师 *☑腾讯课堂认证讲师 *☑网易云课堂认证讲师 *☑华为开发者学堂认证讲师 *☑爱奇艺千人名师计划成员 *在这里给大家分享技术、知识和生活 *各种干货，记得关注哦！ *vx：it_daimeng */

　　

颜色

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

.cls_div1{        color: red;    }     .cls_div2{       color: #FF4300; /*rgb值的16进制方法  0--FF  r:red  g:green  b:blue*/   }     .cls_div3{            color: rgb(17,119,255);/*rgb值的10进制方法  0--255  r:red  g:green  b:blue*/   }       .cls_div4{       color:rgba(17,119,255,0.5); /*设置透明度  0--1 之间  0代表全透明  1 代表完全不透明*/          }

　　

 

字体

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

body{              font-size: 14px; /*设置字体大小 */       font-family: "黑体";       font-weight: bold; /*字体的粗细*/       font-weight: 500;       font-style: italic; /*字体样式  比如倾斜*/       line-height: 25px;  /*行高*/   }       /*如果对同一个html对象做相同的多个样式 则采用的就近原则 */   .ul1{               font: 14px/1.5 "宋体",Arial,"微软雅黑"; /*对字体做整体设置    1.5指的是行高，行高是字体大小的1.5倍*/   }       .ul2{               font: 14px/25px "宋体",Arial,"微软雅黑"; /*对字体做整体设置    25指的是行高*/   }

　　

 

文本

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

a{       text-decoration:none; /*文本装饰  none 去掉下划线 */   }   a:hover{       text-decoration: underline;/*下划线*/   }   .price{              text-decoration: line-through; /*删除线*/   }   .info p{              text-indent: 30px;  /*首行缩进*/   }   .list li{              width: 150px;              border: 1px solid red;              white-space: nowrap ; /*强制在一行内显示*/              overflow: hidden;  /*溢出的部分 隐藏*/              text-overflow: ellipsis; /*溢出的文本部分 显示为 ...*/          }   .div_center{               text-align: center; /*文本对齐方式*/   }

　　

列表

  列表样式的处理

​​​​​​​        去掉list-style

 

ist-style: none;  /*设置列表的样式为无(去掉默认的 .  )*/

​

1.   给li设置背景图片

 .list2 li{

    /*

    background-image: url(../img/arrow.gif);

    background-repeat: no-repeat;

    background-position: left center; */

    background: url(../img/arrow.gif) no-repeat left center;

   

    border: 1px solid red;

   

    padding-left: 10px;  

}

​