常用CSS属性总结

CSS背景属性(background)

属性描述可能值
background在一个声明中设置所有背景属性
background-attachment设置背景图像是否随着页面的其余部分滚动scroll(默认值);fixed;inherit
background-color设置元素背景色yellow;#00ff00;rgb(255, 0, 255)
background-image设置元素背景图像none(默认值);url(‘1.jpg’);inherit
background-position设置背景图像开始的位置top left;x% y%;xpos ypos;
background-repeat设置背景图像如何重复显示repeat(默认值);repeat-x;repeat-y;no-repeat;inherit
background-clip规定背景的绘制区域border-box(默认值);padding-box;content-box
background-origin规定背景图片相对什么来定位padding-box(默认值);border-box;content-box
background-size设置背景图片的尺寸100px;50%;cover;contain

注:

  • background:在一个声明中设置所有背景属性,可以设置如下属性:
    • background-color
    • background-position
    • background-size
    • background-repeat
    • background-origin
    • background-clip
    • background-attachment
    • background-image
  • background-attachment:
    • fixed:背景图像相对于窗体固定
    • scroll:背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动
  • background-clip:
    • border-box:背景绘制到边框
    • padding-box:背景绘制到内边距
    • content-box:背景绘制到内容域
    • 如,css代码:

      div{
      padding: 25px;
      border: 10px dotted #000000;
      background-color: yellow;
      background-clip: border-box;/*border-box|padding-box|content-box*/
      }

      border-box显示效果如下:
      这里写图片描述
      padding-box显示效果如下:
      这里写图片描述
      content-box显示效果如下:
      这里写图片描述
  • background-origin:
    • 与background-clip的三个属性取值类似,如,css代码:

      div{
      padding:25px;
      border:10px dotted #000000;
      background-image:url('/i/eg_smile.gif');
      background-origin:content-box;
      background-repeat:no-repeat;
      }

      border-box显示效果如下:
      这里写图片描述
      padding-box显示效果如下:
      这里写图片描述
      content-box显示效果如下:
      这里写图片描述
  • background-size:
    • cover属性:把背景图片扩展足够大,使背景图片完全覆盖背景区域
    • contain属性:把背景图片扩展至最大尺寸,以使其宽度和高度完全适应内容区域

CSS边框属性(border)

属性描述可能值
border在一个声明中设置所有的边框属性medium double red
border-color设置四条边框的颜色red;#ff0000;rgb(255, 0, 0)
border-style设置四条边框的样式none(默认值);hidden;dotted;dashed;solid
border-width设置四条边框的宽度medium(默认值);thin, thick, 50px, inherit
border-image在一个声明中设置边框图像属性none 100% 1 0 stretch(默认值)
border-radius设置边框四个圆角属性2em 4em, 50% 50%
border-shadow设置边框阴影h-shadow, v-shadow
border-top在一个声明中设置所有的上边框属性medium double red
border-top-color设置上边框的颜色red;#ff0000;rgb(255, 0, 0)
border-top-style设置上边框的样式none(默认值);hidden;dotted;dashed;solid
border-top-width设置上边框的宽度medium(默认值);thin, thick, 50px, inherit

注:

  • border:在一个声明中设置边框属性,可以按顺序设置如下属性:
    • border-width
    • border-style
    • border-color
  • border-image:在一个声明中设置边框图像属性,可以按顺序设置如下属性:
  • border-image-source:用于设置边框图片的路径,url('1.jpg')
  • border-image-slice:设置图片边框向内偏移
  • border-image-width:设置图片边框宽度
  • border-image-outset:设置图片超出边框的量
  • border-image-repeat:设置图片边框是平铺repeated,铺满rounded或拉伸streched
  • border-width:
    • 四个边框宽度是不同的值:border-width: thin medium thick 10px;即上边框thin,右边框medium,下边框thick,左边框10px
    • 上下边框不同,左右边框相同:border-width: thin medium thick;即上边框thin,右左边框medium,下边看thick
    • 上下边框相同,左右边框相同:border-width: thin medium;即上下边框thin,左右边框medium
    • 上下左右边框相同:border-width: thin;即上下左右边框全为thin
  • border-radius:
    • 提供了四个参数值,将按上左、上右、下右、下左顺序作用于四个角
    • 提供了一个参数值,将用于四个角
    • 提供了两个参数值,第一个用于上左、下右,第二个用于上右、下左
    • 提供了三个参数值,第一个用于上左,第二个用于上右、下左,第三个用于下右

CSS文本属性

属性描述可能值
color设置文本的颜色red, rgb(255, 0, 0), #fff000
direction设置文本的方向ltr(默认), rtl, inherit
letter-spacing设置字符间距normal(默认), 4px, inherit
line-height设置行高normal(默认), 4px, inherit
text-align设置文本水平对齐方式left, right, center, justify, inherit
text-decoration设置文本的装饰效果none, overline, underline, blink
text-indent设置文本块首行的缩进10px, 10%, ecah-line
text-shadow设置文本的阴影效果h-shadow, v-shadow
text-transform控制文本的大小写uppercase, lowercase, captitalize
white-spacing规定如何处理元素中的空白normal, nowrap, pre-line, pre, pre-wrap
word-spacing设置单词间距normal, 10px, inherit
text-justify规定text-align为justify时的对其方法auto, none, inter-word
word-break设置文本的换行规则normal, break-all, keep-all
word-wrap允许对唱的不可分割的单词进行分割并换行到下一行normal, break-word

注:

  • white-space
    • normal:默认处理方式
    • nowrap:合并多余空格,强制不换行,直到碰到<br>
    • pre-line:合并多余空格,碰到边框自动换行
    • pre:不合并多余空格,碰到边界不换行
    • pre-wrap:不合并多余空格,碰到边界换行
  • word-wrap
    • normal:允许内容顶开或溢出指定容器的边界
    • break-word:内容将在边界内换行,如果需要,单词内部允许断行

CSS字体属性(font)

属性描述可能值
font在一个声明中设置字体属性italic bold 12px/20px arial,sans-serif;
font-family规定字体系列Times New Roman等
font-size设置字体的尺寸6px, 20%, inherit, smaller, larger
font-weight设置字体的粗细normal, bold, bolder, lighter, 100
font-style设置字体的样式normal, italic, oblique, inherit

CSS外边距属性(Margin)

属性描述可能值
margin在一个声明中设置所有外边距1-4个值
margin-bottom设置元素的下外边距auto, 10px, 5%, inherit
margin-top设置元素的上外边距auto, 10px, 5%, inherit
margin-left设置元素的左外边距auto, 10px, 5%, inherit
margin-right设置元素的右外边距auto, 10px, 5%, inherit

CSS内边距属性(Padding)

属性描述可能值
padding在一个声明中设置所有内边距1-4个值
padding-bottom设置元素的下内边距auto, 10px, 5%, inherit
padding-top设置元素的上内边距auto, 10px, 5%, inherit
padding-left设置元素的左内边距auto, 10px, 5%, inherit
padding-right设置元素的右内边距auto, 10px, 5%, inherit

CSS尺寸属性(Dimension)

属性描述可能值
height设置元素的高度auto, 10px, 5%, inherit
width设置元素的宽度auto, 10px, 5%, inherit
max-width设置元素最大宽度auto, 10px, 5%, inherit
min-width设置元素最小宽度auto, 10px, 5%, inherit
max-height设置元素最大高度auto, 10px, 5%, inherit
min-height设置元素最小高度auto, 10px, 5%, inherit

CSS定位属性(Position)

属性描述可能值
clear规定元素的哪一侧不允许其他浮动元素none, left, right, both
float规定元素的浮动方式none, left, right
cursor规定显示的光标形状auto, pointer, help
position规定元素的定位类型absolute, fixed, relative, static, inherit
display规定元素的显示类型none, block, inline, inline-block, table…
visibility规定元素是否可见visible, hidden
vertical-align设置元素垂直对齐top, middle, bottom, baseline…

参考链接

CSS参考手册

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值