CSS中常用属性

浅浅的花香味﹌ 2024-04-07 11:56 9阅读 0赞

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

##  ##

## **颜色** ##

.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 代表完全不透明*/
    
       
    
    }

## **字体** ##

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指的是行高*/
    
    }

## **文本** ##

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;  /*设置列表的样式为无(去掉默认的 .  )*/

![bf6665464e3d4f129064972e6c8be15b.png][]

1.  **给li设置背景图片**

![1fcd30e29091462d8bc6f302e30b4ba0.png][]

.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;

[bf6665464e3d4f129064972e6c8be15b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b003246fb29b40fbb361cdac40a4dd80.png
[1fcd30e29091462d8bc6f302e30b4ba0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/69113088daf748fcb8caa445068011b0.png