css常用格式

背景

背景                     border-radius:5px     圆角

background-color:#fff;               背景色

background-image:url(./img.jpg);       背景图(默认平铺)

背景平铺 repeat

 

background-size:

covor等比例放大图片有部分不能显示、

contain等比例缩放,只要一个方向满足平铺,就停止播放

缩写

Background:背景图片链接平铺  平铺设置 图片显示位置

     

background-repeat:repeat-x/no-repeat;  背景图平铺

background-attachment:scroll/fixed     随滚动条动固定

background-position:bottom/center/top 10px 10px;  背景图定位

backgroung:#fff url(img.jpg) no-repeat center;  颜色背景图平铺定位

opacity:0.4;/filter:alpha(opacity=40);               img透明度

缩写backgroung:(UR)no-repeat    l eft top;

文字

color:red;

text-align:left/center/right;   水平对齐  vertical-align:top; 垂直对齐

line-height:50px;           垂直居中行高:50px

text-decoration:underline/overline/linethrough/none; 下划线

text-indent:40px;           首行缩进(标签内部继承)

text-transform:uppercase/lowercase/capitalize;  大写小写首字母大写

text-shadow:10px 10px 10px red;  水平垂直模糊颜色文字阴影

letter-spacing:-1px;字符间距

字体

字体

font-family:'微软雅黑'     字体通用

font-size:12---14px   (一般常用)        字体大小通用   font-size:0;  子元素无间隔

font-weight:normal/bold;   加粗

font-style:normal/italic;    倾斜cursor:wait;鼠标放上光标等待

font:14px/20px '微软雅黑'  字体大小行高字体

列表

列表

list-style-type:circle/square/none;       无序列表标记

list-style-type:upper-roman/lower-alpha; 有序列表大写罗马小写英文

list-style-image:url('./a.jpg');           列表标记图

list-style:square url("sqpurple.gif");     形状  [图片]

边框

边框

box-sizing:border-box; 盒子尺寸不变

border-top-10px;  边框宽度

         color:red;    边框颜色

         style:solid/dashed/dotted;实线虚线点线

border-top:10px solid red;  宽线色   border-right/-bottom/-left:

border:10px solid red;       边框

border-radius:10px;         圆角边框

border-collapse:collapse;     合并表格边框

内间距

padding-top:10px;                    padding-right/-bottom/-left:     

padding: 上右下左上(左右)下  (上下)(左右)

外间距

margin-top:10px;                     margin-right/-bottom/-left:

margin:50px(上下) auto;(左右)50  左右居中

.clearfix before:{content:"";display:table}  清除m-top父标签塌陷

原文地址:https://www.cnblogs.com/1997WY/p/10218639.html