CSS样式操作大全——基本语法篇

---

样式设置方法

.class   #id  HTML标签{    //写样式  }     //三种样式选择器

1、文字font操作系列

============

.text{

color:black ;//字体颜色

font-size: 15px; //字体大小

font-style: italic; //样式oblique（偏斜体）、italic(斜体)、normal(正常)

line-height: 2px; //行高px、pd、em

font-weight: bold; //粗细：bold黑体、lighter细体、normal正常

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

text-decoration: underline; //字体修饰underline下划线、overline上划线、line-through删除线、blink闪烁、none删除超链接下划线

font-family: ‘Courier New’, Courier, monospace; //字体，常用字体"Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana,“Microsoft YaHei”,微软雅黑,“MicrosoftJhengHei”,华文细黑,STHeiti,MingLiu;

text-align:right;//文字对齐：right右对齐、left左对齐、center居中、justify分散对齐、

vertical-align：top;//垂直对齐：top垂直上对齐、bottom垂直下对齐、middle垂直中对齐、text-top文字垂直向上对齐、text-bottom文字垂直向下对齐

letter-spacing:5px;//字符间距

text-indent:5px ; //字符缩进

}

2、背景background操作系列

==================

背景色background-color:#FFFFFF;

背景图片background-image:url(image/bg.gif);

重复background-repeat:no-repeat;  //repeat-x在X轴重复排列；/repeat-y在y轴重复排列；

滚动background-attachment:fixed；固定；scroll滚动

位置background-position:left；左对齐；top向上对齐；bottom向下对齐；right右对齐；center居中对齐

3、框线、边框、位置操作系列

==============

边框线 border:1px solid #FFFFFF;  //宽度，线样式（实线），线颜色

• border-top：上边框，其他同理

• 线样式border-style：solid实线、dotted虚线、double双实线、groove立体内凸框、ridge立体浮雕框、inset凹框、outset凸框

margin:0px;  //外边距，上右下左；auto居中；0 auto左右居中；auto  0上下居中

padding:0px; //内边距，上右下左

4、ul或者ol标签里的li标签

================

li-style-type:none;//列样式：none不编号；decimal数字；lower-alpha小写英文；upper-alpha大写英文；disc实心圆；squar实心                     方形

li-style-image：url(/dot.gif)  ；列样式图片

5、鼠标样式

======

cursor:hand；//手指

• crosshair：十字

• move:十字箭头

• help：加个问号

• w-resize：箭头朝左

• s-resize：箭头朝下

• n-resize：箭头朝上

• ne-resize：箭头朝右上

• nw-resize：箭头左上

• text：I型文字

• wait：漏斗

6、图文混排

======

float:文字环绕在元素四周none/left/right

clear:定义某边是否有环绕文字none/left/right

7、超链接

前端面试题汇总

JavaScript

性能

linux

前端资料汇总