返回

CSS中常用属性

发布时间:2022-09-07 09:39:40 265
# 前端# css# html# 技术
/*
*作者:呆萌老师
*☑csdn认证讲师
*☑51cto高级讲师
*☑腾讯课堂认证讲师
*☑网易云课堂认证讲师
*☑华为开发者学堂认证讲师
*☑爱奇艺千人名师计划成员
*在这里给大家分享技术、知识和生活
*各种干货,记得关注哦!
*/

颜色

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

CSS中常用属性_前端_02

字体

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

CSS中常用属性_CSS_03

文本

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

CSS中常用属性_CSS_04

CSS中常用属性_CSS_05

CSS中常用属性_CSS_06

  1.   给li设置背景图片

CSS中常用属性_前端_07

CSS中常用属性_CSS_08

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

}

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像
精选文章
thumb 中国研究员首次曝光美国国安局顶级后门—“方程式组织”
thumb 俄乌线上战争,网络攻击弥漫着数字硝烟
thumb 从网络安全角度了解俄罗斯入侵乌克兰的相关事件时间线
下一篇
java之基本类型包装类精选 2022-09-07 08:54:38