首页 > Web开发 > 详细

html--前端css常用属性

时间:2019-11-15 01:11:43      阅读:111      评论:0      收藏:0      [点我收藏+]

1、颜色属性

  <div style="color:blueviolet">ppppp</div> 输入颜色英文单词

  <div style="color:#ffee33">ppppp</div> 16进制颜色样式

  <div style="color:rgb(255,0,0)">ppppp</div> 红绿蓝三原色按顺序

  <div style="color:rgba(255,0,0,0.5)">ppppp</div> a代指透明度

 2、字体属性:

  font-size: 20px/50%/larger 字体大小

  font-family:‘Lucida Bright‘ 字体样式

  font-weight: lighter/bold/border/ 字体粗细

  line-height:40px; 字体上下调到居中位置

  <h1 style="font-style: oblique">老男孩</h1> 斜体

3、背景属性 

   margin-bottom: 2px; padding: 0px; box-sizing: border-box; color: rgb(85, 84, 84); font-size: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(251, 249, 249);">  background-image: url(‘1.jpg‘);打开一个图片当做背景图片

  background-repeat: no-repeat;(repeat:平铺满)  不平铺

  background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom)  相当于扣一个洞拿到自己想要的图片位置

 简写方案如下:

<body style="background: 20px 20px no-repeat #ff4 url(‘1.jpg‘)">

<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url(‘1.jpg‘)">

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

4、文本属性

  font-size: 10px;

  text-align: center;横向排列

  line-height: 200px;文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

  p

  { width: 200px;

  height: 200px;

  text-align: center;

  line-height: 200px; }

  text-indent: 150px;  首行缩进,50%:基于父元素(weight)的百分比

  letter-spacing: 10px; 字体间距

  word-spacing: 20px; 

  direction: rtl;  #右边开始

  text-transform: capitalize; #字母

5   边框属性:

  border-style: solid;

  border-color: chartreuse;

  border-width: 20px;

简写:border: 30px rebeccapurple solid;

1     <!--border:有3个参数:线的粗细、线的样式(实线、点、虚线等)、线的颜色-->
2     <!--第一种:线的粗细为1像素,实线、红色-->
3     <div style="border:1px solid red;height:10px" ></div>
4     <!--第二种:线的粗细为1像素,点、蓝色-->
5     <div style="border:1px dotted blue;height:10px" ></div>
6     <!--第三种:线的粗细为1像素、虚线、紫色-->
7     <div style="border:1px dashed purple;height:10px" ></div>

6 、dispaly属性

  • none
  • block
  • inline
1     <!--display 为none将隐藏标签-->
2     <div style="display: none;">yusheng_liang</div>
3     <!--display 为inline会将块级别标签调为内联标签-->
4     <div style="background-color:red;display:inline">yusheng_liang</div>
5     <!--display 为block会将内联标签调为块级别标签-->
6     <a style="background-color:red;display:block">yusheng_liang</a>

7、列表属性

  ul,ol{ list-style: decimal-leading-zero;

           list-style: none;  #去掉前面符号

      list-style: circle; #列表样式

           list-style: upper-alpha; #列表样式

           list-style: disc; } #列表样式

8、盒子模型 

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

技术分享图片

技术分享图片

html--前端css常用属性

原文:https://www.cnblogs.com/june-L/p/11863564.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!