首页 > 其他分享 >CSS中常用属性

CSS中常用属性

时间:2022-09-01 22:24:24浏览次数:47  
标签:常用 color text CSS background cls font red 属性

/*
*作者:呆萌老师
*☑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;  /*设置列表的样式为无(去掉默认的 .  )*/


  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;  

}

标签:常用,color,text,CSS,background,cls,font,red,属性
From: https://www.cnblogs.com/daimenglaoshi/p/16648010.html

相关文章

  • 简单的Css动画--文字填充效果
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metaname="viewport"c......
  • Java常用类之日期操作类
    日期操作类在Java中对日期的操作类常用的有以下4种:Date类Calendar类DateFormat类SimpleDateFormat类一起来了解一下各个类如何使用的吧!!! 一、Date类1、......
  • 2.Mybatis-常用sql
    1.Mybatis常用select语句<selectid="getRolesByParam"parameterType="java.util.HashMap"resultType="com.serlyf.system.entity.Role">SELECTsr.ROLE_IDAS......
  • 3.MySQL常用知识
    1,基础查询//1.groupby+聚合函数+HAVING条件过滤SELECTSEX,AVG(AGE)FROM`user`GROUPBYSEXHAVINGSEX='女'2,DCL语句1,创建用户,当前主机访问CREATEuser'ser......
  • 常用知识整理
    本文持续更新。裴蜀定理:若\(a,b\)为不全为\(0\)的整数,存在整数\(x,y\),使\(ax+by=\gcd(a,b)\)。推论1(多元):若\(a_1,a_2,...,a_m\)为不全为\(0\)的整数,存在整......
  • css3 弹性盒子
    /*使用弹性盒子布局*/display:flex;/*设置子元素在父元素排列方向*/flex-direction:row;/*子元素沿主轴对齐方式*//*justify-content:space-around;*//*......
  • absible笔记第一章 (ansibles基础与playbook常用模块)
    一、ansibles基础与playbook     1.优先级问题            ANSIBLE_CONFIG            ansible.cfg ......
  • 【Java基础】类的结构之一:属性(变量)
    1.成员变量与局部变量二者的区别成员变量局部变量声明的位置直接声明在类中方法形参或内部、代码块内、构造器内等修饰符private、public、static、fin......
  • 使用OpenMMLab系列的开源库时,常用的脚本合集。
    使用OpenMMLab系列的开源库时,常用的脚本合集。开源仓库:gy-7/mmlab_scripts脚本解释:anchor_visiual.py生成的锚框可视化aug_test.py自动数据增强,单文件可视化效果......
  • C++之常用的算法
    C++之常用的算法1函数对象重载函数调用运算符的类,其对象称为函数对象。一元仿函数/二元仿函数(根据参数个数判定)classMyPrint{public: voidoperator()(intn......