好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

css属性简写集合_html/css_WEB-ITnose

作为一个前端攻城狮,CSS那绝对是基础,可是基础也有掌握不牢的时候。今天就来总结一下容易写错的CSS属性简写问题。

设置字体尺寸 :font-size 基本语法:font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger |smaller | length

设置文本的字体名称序列: font-family 基本语法:font-family : ncursive | fantasy | monospace | serif | sans-serif

其简写方式为 :font-style || font-variant || font-weight || font-size /line-height || font-family

例如:font:italic small-caps bold 12px/1.5em arial,verdana;

3、 margin & padding 以margin为例,padding相同

其简写方式为 :margin:margin-top margin-right margin-bottom margin-left;

例如:margin:1px 1px 1px 1px;

4、 border

边框宽度:border-weight 基本语法:border-width : medium | thin | thick | length

边框样式:border-style 基本语法:border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

边框颜色: border-color 基本语法:border-width :color

其简写方式为 :border : border-width || border-style || border-color

例如:border:1px solid #000;

5、 outline

outline类似border,不同的是border会影响盒模型,而outline不会。

其简写方式为 :outline : outline-width || outline-style || outline-color

例如:outline:1px solid red;

6、 border-radius

右上角半径:border-top-right-radius ,

右下角半径:border-bottom-right-radius ,

左下角半径:border-bottom-left-radius ,

左上角半径:border-top-left-radius

当各个圆角半径相同时其简写方式为: border-radius :border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius;

例如:border-radius:0 6px 6px 6px;一般简写为 border-radius:0 6px 6px;

当各个圆角半径不同时其简写方式为: border-radius : none | {1,4} [ / {1,4} ]?

例如:border-radius:0px 5px 10px 15px/20px 15px 10px 5px;按照上有下左的规律依次写出每个角的两条边的半径

7、 color 的简写就不说了,太简单了

不知道总结的好不好,若有错烦指出,谢谢!

查看更多关于css属性简写集合_html/css_WEB-ITnose的详细内容...

  阅读:37次