• CSS中常用属性


    1. /*
    2. *作者:呆萌老师
    3. *☑csdn认证讲师
    4. *☑51cto高级讲师
    5. *☑腾讯课堂认证讲师
    6. *☑网易云课堂认证讲师
    7. *☑华为开发者学堂认证讲师
    8. *☑爱奇艺千人名师计划成员
    9. *在这里给大家分享技术、知识和生活
    10. *各种干货,记得关注哦!
    11. *vx:it_daimeng
    12. */

    颜色

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

    字体

    1. body{
    2.    
    3.     font-size: 14px; /*设置字体大小 */
    4.     font-family: "黑体";
    5.     font-weight: bold; /*字体的粗细*/
    6.     font-weight: 500;
    7.     font-style: italic; /*字体样式  比如倾斜*/
    8.     line-height: 25px/*行高*/
    9. }
    10. /*如果对同一个html对象做相同的多个样式 则采用的就近原则 */
    11. .ul1{
    12.    
    13.      font: 14px/1.5 "宋体",Arial,"微软雅黑"; /*对字体做整体设置    1.5指的是行高,行高是字体大小的1.5倍*/
    14. }
    15. .ul2{
    16.    
    17.      font: 14px/25px "宋体",Arial,"微软雅黑"; /*对字体做整体设置    25指的是行高*/
    18. }

    文本

    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;  

    }

  • 相关阅读:
    【leetcode】【2022/9/16】850. 矩形面积 II
    redis缓存穿透、击穿、雪崩介绍
    http网站升级为https网站,证书、http-flv视频显示处理
    共同见证丨酷雷曼武汉运营中心成立2周年
    DSPE-PEG-Azide,DSPE-PEG-N3,磷脂-聚乙二醇-叠氮具有亲水和疏水性
    Python字典详解
    系分 - 系统分析
    Vue+Swiper实现轮播图效果
    HCIE-Cloud题库
    Ajax学习笔记第8天
  • 原文地址:https://blog.csdn.net/daimenglaoshi/article/details/126651373