CSS常见属性(背景、字体、文本、列表、盒子)总结

1.背景(5大属性)

  • 背景颜色:background-color
  • 将图像设置为背景:background-image:url();
  • 是否平铺:background-repeat:no-repeat 或 repeat-x 或repeat-y
  • 设置背景图片是否跟着滚动条一起移动:background-attachment:fixed;固定住。默认属性scroll
  • 设置背景图片在当前容器中的位置(原点在容器左上角):center top 或 
/* -108px(将图片相对容器左移108px,这意味着图片中部的108px内容将出现在容器中) */
		background-position: -108px 0px;

background:背景色 背景图片 平铺方式

 background: #00ff00 url('smiley.gif') no-repeat fixed center;

 background: #00ff00  no-repeat

2.字体(常用5大属性)

  • 是否斜体:font-style:italic或normal
  • 粗体:font-weight:bold
  • 字号:font-size
  • 行高:line-height  行高=盒子高则垂直居中,与字高一般都设为偶数
  • 字体:font-family:“幼圆”(第一个为默认字体),“黑体”(备用字体)

font:斜体 是否加粗(400是normal,700是bold) 字号/行高 字体(可写备用字体,逗号隔开);

font: 加粗 字号/行高 默认字体,备用字体

font:20px  字体

3.文本(常用属性)

  • 字体修饰:text-decoration:none 去掉下划线、underline下划线、line-through中划线、overline上划线
  • 字体颜色:color
  • 对齐方式:text-align

4.列表(3大属性)

  • 标记类型;list-style-type:none或disc等
  • 列表前置项设置为图片:list-style-image:url()或none ;
  • 列表标志项被放置的位置:list-style-position:inside或outside

list-style:类型 图片 位置 ; //可以只写一个

5.盒子

  • 宽度:width
  • 高度:height
  • 内外边距:margin:上右下左;上下 左右;上 左右 下;padding类似
  • 边框:border:1px solid red;//边框宽度 边框样式(dashed为虚线) 边框颜色(可省去,默认为黑色)

参考资料:背景属性   字体属性和文本属性  web前端

猜你喜欢

转载自blog.csdn.net/qq_34243694/article/details/94472828