一篇文章详解CSS的常用属性

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

颜色属性

 
  1. <div style="color:blueviolet">ppppp</div> //颜色少
 
  1. <div style="color:#ffee33">ppppp</div> //百度颜色代码可以查询更多
 
  1. <div style="color:rgb(255,0,0)">ppppp</div> //三原色 红绿蓝256级
 
  1. <div style="color:rgba(255,0,0,0.5)">ppppp</div> //比上一个 加了一个透明度

字体属性

 
  1. font-size: 20px/50%/larger; //大小
 
  1. font-style:oblique; //斜体
 
  1. font-family:"Time New Roman"; //字体格式
 
  1. font-weight: lighter/bold/border/; //字体粗细
 
  1. <h1 style="font-style: oblique">杨</h1>

背景属性

 
  1. background-color: cornflowerblue; //背景颜色
 
  1. background-image: url('1.jpg'); //背景图片
 
  1. background-repeat: no-repeat/repeat-x/repeat=t; //(默认铺满,不重复,x重复,y重复)
 
  1. background-size:600px 250px //大小
 
  1. background-position: right top(20px 20px);//(横向:left center right)(纵向:top center bottom) //简写:
 
  1. <body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
 
  1. <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

注意:

  • 如果将背景属性加在body上,要记得给body加上一个height,否则结果异常,这是因为body为空,无法撑起背景图片;
  • 另外,如果此时要设置一个width=100px,你也看不出效果,除非你设置出html。

文本属性

 
  1. font-size: 10px; text-align: center; //横向排列 center:居中
 
  1. line-height: 200px; //文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
 
  1. vertical-align:-4px; //设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效
 
  1. text-indent: 150px; //首行缩进
 
  1. letter-spacing: 10px; //字母间隙
 
  1. word-spacing: 20px; //单词间隙
 
  1. text-transform: capitalize; //单词大写

边框属性

 
  1. border-style: solid; border-color: chartreuse; border-width: 20px; //简写:
 
  1. border: 30px rebeccapurple solid;

列表属性

 
  1. ul,ol{ list-style: decimal-leading-zero; list-style: none; <br>
 
  1. list-style: circle; list-style: upper-alpha; list-style: disc; }

dispaly属性

 
  1. none //隐藏
 
  1. block //调整成块属性
 
  1. inline

display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决:

 
  1. #outer{ border: 3px dashed; word-spacing: -5px; }

外边距和内边

  • margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
  • padding: 用于控制内容与边框之间的距离;
  • Border(边框) 围绕在内边距和内容外的边框。
  • Content(内容) 盒子的内容,显示文本和图像。

元素的宽度和高度:

  • 重要: 当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。

     

     
    1. margin:10px 5px 15px 20px;-----------上 右 下 左
  •  
    1. margin:10px 5px 15px;----------------上 右左 下
  •  
    1. margin:10px 5px;---------------------上下 右左
  •  
    1. margin:10px; ---------------------上右下左
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值