Common style attributes, background and shadow
Font and text properties
Margin and fill
border properties
list properties
background properties
background gradient
shadow properties
Font and text attributes
Font attributes
<style type="text/css">
font:设置字体是所有样式
font-family:设置字体类型
font-size:设置字体大小
font-weight:设置字体粗细
color:设置字体颜色
font-family 和 font-size都是font的子属性,一般常用字体属性的缩写形式,如: font:bold 12px 宋体 ;注意三个属性的顺序依次为字体粗细,大小,样式
</style>
Text attributes
<style type="text/css">
line-height:设置行高
常用属性值:3px,8px,设置 line-height 与 heigh值一直时,样式为垂直中
text-align:设置对齐方式,
常用属性值:left,right,center
letter-spacing:设置字符间距
常用属性值:3px,8px
text-decoration:设置文本修饰
常用属性值:none,underline,line-through
</style>
Margin and padding
Margin: the direct distance between elements on the page
<style type="text/css">
margin:
设置一个值:上、下、左、右边距
设置两个值:上下,左右边距
设置三个值:上,左右,下边距
设置四个值,上,右,下,左顺序分别对应边距
margin-bottom:下边距
margin-left:左边距
margin-right:右边距
margin-top:上边距
margin: 0 auto;局中
</style>
Fill: the distance between the element content and the border
<style type="text/css">
padding:
设置一个值:上、下、左、右边距
设置两个值:上下,左右边距
设置三个值:上,左右,下边距
设置四个值,上,右,下,左顺序分别对应边距
padding-bottom:下边距
padding-left:左边距
padding-right:右边距
padding-top:上边距
padding: 0 auto;局中
</style>
Border properties
border property
<style type="text/css">
border-style:边框样式
常用属性值:none,soild,dashed
border-width:边框宽度
常用属性值:1px ,5px
border-color:边框颜色
常用属性值:red,black
border:符合属性,用于设置边框宽度,样式,颜色
常用属性值:border:1px solid red ;
也可单独设置某个方向的值:
border-bottom:下边框
border-left:左边框
border-right:右边框
border-top:上边框
</style>
border-radius property: rounded border (the larger the radius of pixels, the more obvious the rounded corners)
<style type="text/css">
border-radius:
设置一个参数:四个角
设置两个参数:参数1:左上和右下角 ,参数2:右上和左下角
设置三个参数:参数1:左上角 ,参数2:左下和右上角,参数3:右下角
设置四个参数:顺序依次为:左上,右上,右下,左下
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
</style>
List attributes
<style type="text/css">
list-style-image:图片作为列表项的符号,其值为对象对应的url
list-style-type:设定列表项的符号
常用属性值:none(无),disc(实心圆),circle(空心圆) ,square(实心方块)
list-style-position:符号在列表项的位置
常用属性:inside(内),outside(外)
list-style:符合属性,顺序为:符号,位置,图片符号
list-style:circle inside url() ;
</style>
Background attributes
<style type="text/css">
background:符合属性
background-image:背景图片
常用属性值:background-image:url(图片名称) ;
background-repeat:背景图片重复方式
常用属性值:repeat:水平和垂直反向平铺
no-repeat:不平铺
repeat-x:只在水平方向上平铺
repeat-y:只在水垂直方向上平铺
background-position:背景图片位置
常用属性值:关键字:水平方向:left,center,right
垂直方向:top,center,bottom
百分比:水平方向:0%(左) 50%(中) 100%(右)
垂直方向:0%(上) 50%(中) 100%(下)
像素值: 水平方向:正数向右偏移,负数向左偏移
垂直方向:正数向下偏移,负数向上偏移
background-size:背景图片大小
background-color:背景图片颜色
</style>
Background gradient
Linear gradient
<style type="text/css">
background: linear-gradient(起点位置或方向,起始颜色,(过渡颜色),终止颜色);
向右,颜色红色过渡到白色在过渡到黑色:
background: linear-gradient(to right,red,white,black);
</style>
Radial gradient
<style type="text/css">
background: radial-gradient(形状,起点位置,起始颜色,(过渡颜色),终止颜色);
圆形渐变,以中心点为圆心默认大小,颜色红色过渡到白色在过渡到黑色:
background: radial-gradient(circle at center ,red,white,black)
</style>
Shadow attributes
Text-shadow
<style type="text/css">
text-shadow: h-shadow v-shadow blur color;
h-shadow:必须存在:阴影的水平距离
v-shadow:必须存在:阴影的垂直距离
blur:可有可无:阴影的模糊半径
color:可有可无:阴影的颜色
</style>
Box-shadow
<style type="text/css">
box-shadow: h-shadow v-shadow blur spread color;
h-shadow:必须存在:阴影的水平距离
v-shadow:必须存在:阴影的垂直距离
blur:可有可无:阴影的模糊半径
spread:可有可无:阴影的大小
color:可有可无:阴影的颜色
</style >
Box-shadow
<style type="text/css">
box-shadow: [投影方式] x-offset y-offset 阴影模糊半径 阴影扩展半径 阴影颜色
x-offset:阴影水平偏移量,正值在对象右边,负值,在对象左边
y-offset:阴影垂直偏移量,正值在对象底部,负值,在对象顶部
阴影模糊半径:正值,值为 0 时,没有模糊效果,值越大,边缘越模糊
阴影扩展半径:正值,阴影扩大,负值,阴影缩小
阴影颜色:不设定,浏览器会默认取色
</style >