css的简写规范
2015-12-15 10:52
585 查看
css简写有这么几个好处,第一个也是最大的好处就是减少了代码的数量。第二个就是方便自己的编写吧。
下面来介绍几个常见的css属性简写规则。
font-variant:设置字体变化。其值有normal,small-caps(显示小型大些字幕的字体),inherit。
font-weight:设置字体的粗细。其值有normal,bold(加粗),bolder(更粗),lighter(更细),100~900,inherit。
font-size:设置字体的尺寸。
line-height:设置字体的行高,normal,number(这个数字会与当前字体尺寸相乘),length(固定的行间距),%(基于当前字体尺寸的百分比),inherit。
font-family:规定字体的样式,family-name(字体名称),inherit。
font : font-style | font-variant | font-weight | font-size/line-height | font-family
需要注意的是font-size和line-height只能通过“/”组成一个值。并且只有在同时指定了font-size和font-family属性时简写才起作用。
background-image:设置背景图片。url,none,inherit。
background-repeat:设置背景重复方式。repeat,repeat-x,repeat-y,no-repeat,inherit。
background-attachment:设置背景图片是否固定。scroll(图像随页面滚动而滚动),fixed(图像位置固定,不随页面而滚动),inherit。
background-position:设置背景图像的位置。x% y%,x px y px,位置关键词。
background : background-color | background-image | background-repeat | background-attachment | background-position
background属性的简写并没有硬性要求,但一般还是按上述顺序简写。
padding : padding-top | padding-right | padding-bottom | padding-left
border-style:设置边框样式。
border-color:设置边框颜色。
border : border-width | border-style | border-color
list-style-position:设置在何处放置列表项标记。inside(在文本以内),outside(在文本以外),inherit。
list-style-image:设置图像来代替标志。url,none,inherit。
list-style : list-style-type | list-style-position | list-style-image
下面来介绍几个常见的css属性简写规则。
一、字体(font)
font-style:设置字体的样式。其值有normal(默认字体),italic(斜体),oblique(倾斜),inherit(继承父元素字体)。font-variant:设置字体变化。其值有normal,small-caps(显示小型大些字幕的字体),inherit。
font-weight:设置字体的粗细。其值有normal,bold(加粗),bolder(更粗),lighter(更细),100~900,inherit。
font-size:设置字体的尺寸。
line-height:设置字体的行高,normal,number(这个数字会与当前字体尺寸相乘),length(固定的行间距),%(基于当前字体尺寸的百分比),inherit。
font-family:规定字体的样式,family-name(字体名称),inherit。
font : font-style | font-variant | font-weight | font-size/line-height | font-family
需要注意的是font-size和line-height只能通过“/”组成一个值。并且只有在同时指定了font-size和font-family属性时简写才起作用。
二、背景(background)
background-color:设置背景颜色。background-image:设置背景图片。url,none,inherit。
background-repeat:设置背景重复方式。repeat,repeat-x,repeat-y,no-repeat,inherit。
background-attachment:设置背景图片是否固定。scroll(图像随页面滚动而滚动),fixed(图像位置固定,不随页面而滚动),inherit。
background-position:设置背景图像的位置。x% y%,x px y px,位置关键词。
background : background-color | background-image | background-repeat | background-attachment | background-position
background属性的简写并没有硬性要求,但一般还是按上述顺序简写。
三、margin & padding
margin : margin-top | margin-right | margin-bottom | margin-leftpadding : padding-top | padding-right | padding-bottom | padding-left
四、border
border-width:设置边框宽度。thin(细边框),medium(默认),thick(粗边框),length(自定义边框的宽度),inherit。border-style:设置边框样式。
border-color:设置边框颜色。
border : border-width | border-style | border-color
五、list-style
list-style-type:设置列表标志的类型。list-style-position:设置在何处放置列表项标记。inside(在文本以内),outside(在文本以外),inherit。
list-style-image:设置图像来代替标志。url,none,inherit。
list-style : list-style-type | list-style-position | list-style-image
相关文章推荐
- css样式优先级
- CSS高级选择器:nth-child()应用大全
- CSS字符编码引起乱码
- CSS3 Box-shadow
- CSS布局奇淫技巧之-高度自适应
- 如何将ToolBar 样式设置Title文字水平居中
- CSS背景铺满全屏
- 前端--关于CSS盒模型
- CSS的选择器
- 用图片解释程序猿疯狂的人生
- 写 CSS 时要避免的几个地方
- DIV+CSS如何让文字垂直居中?
- 通过style样式实现动态显示与隐藏
- CSS动画之硬件加速
- 修改WordPress中文章编辑器的样式的方法详解
- css3点击涟漪效果
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
- css常用简写
- 带滑动条的导航栏(上)---CSS实现样式
- CSS3阴影 box-shadow的使用和技巧总结