CSS 基本使用方法与语法

CSS 是一种描述 HTML 文档样式的语言。下面是样式属性，分了类以方便记忆:星号(*)表示此处有 0 个或多个字符

#	类别	说明
1	background*	元素背景相关
2	font*, text*	文字外观相关
3	border*	元素边框相关
4	margin*	元素外边距
5	padding*	元素内边距
6	list*	设置<li>标签的外观
7	其它	color、 line-height position、left/right/top/bottom、width/height、z-index display、visibility float、clear、overflow、cursor

 

1.1 background*

以background开头的这一组样式属性主要说明元素的背景。例：

代码	说明
background-color : red;	背景为红色，支持多种颜色表示法, 如RGB表示法:#FF0000或#F00
background-image : url(“bg.jpg”);	设置背景图片为bg.jpg（相对路径表示） 设置了背景图，背景色就看不到了，除非背景图片失效
background-repeat : repeat-x;	背景图只在X方向（水平方向）上重复，还有其它值 ( repeat-y, no-repeat )，请自行实验
background-attachment : fixed;	背景图固定，不随滚动条滚动
background-position : 5px 10px;	设置背景图相对于元素左上角向右偏移5px, 向下偏移10px。可取负值。 注意善用此属性，可有意外惊喜!

可以把上面的代码简写为： background : red url('bg.jpg') repeat-x fixed 5px 10px;

​

1.2 font*、text*、color、line-height

这一组属性均是说明文字的呈现形式，因此就一起举例说明了：

代码	说明
font-size : 12px;	设置文字大小为12像素 (请查阅其它资料了解其它单位)
font-family : 宋体;	设置文字字体为”宋体”。应避免使用非主流字体
font-weight : bold;	文字加粗
text-align : center;	文字水平居中
text-decoration : underline;	文字加下划线
text-indent : 24px;	首行缩进24像素
color : red;	文字为红色，支持多种颜色表示法, 如RGB表示法:#FF0000或#F00
line-height : 24px;	每行文字的行高为24像素

​

1.3 border*

以 border 开头的这一组修饰元素的边框。边框分上、右、下、左四个方向，每个方向的边框可分别修饰”型”、”色”、”宽”。

看例子 (对于边框宽度须同时说明”型”、”色”、”宽”才有效)

代码	说明
border-left-color: red; border-left-style: solid; border-left-width:2px;	设置元素左边框为2px宽的红色, 实线边框
border-left : 2px solid red;	设置元素左边框为2像素宽的红色实线边 (上例的简写形式)
border : 1px dotted red;	设置元素四周边框为1px宽的红色虚线边
border : 1px solid red; border-width : 2px 5px 10px 15px;	四周边框均为红色实线边，上、右、下、左边框宽度分别为2px、5px、10px、15px 小结： (1) 第2行的代码覆盖了第1行中关于宽度的说明 (2) 四个方向的边框可属性可一起简写说明，中间以空格分隔，顺序为从”上”开始顺时针方向一周
border : 1px solid red; border-width : 5px 10px;	四周边框均为红色实线边，上下边为5px宽，左右边为10px.
border : 1px solid red; border-width : 5px 10px 15px;	等同于 border-width : 5px 10px 15px 10px;

​

1.4 margin*、padding*

margin指的是元素边框之外的空白，而padding则指元素边框之内与内容之间的空白。

1.5其它样式属性

这一组相对零散，下面配合例子说明：

代码	说明
width:50px; height:100px;	定义元素宽50px，高100px
color: red;	设置元素中文字为红色，支持RGB表示的颜色，如:#FF00AB
line-height:24px;	设置元素中文字行高24px
cursor: pointer;	鼠标处于元素上方时显示为手指形状，类似处于超链接上方的效果
display: none;	隐藏元素。 注意下面2行代码的作用： display: block; 设置元素以块标签方式显示 display: inline; 元素以行内标签方式显示 还记得本文开头那两位同学的对话吗? 实验一下： <p style="display:inline">段落文字1</p> <p style="display:inline">段落文字2</p> 现在P标记不再是换行的作用了吧……
visibility: hidden;	隐藏元素。 与display: none的区别在于： 使用visibility: hidden隐藏元素后元素原来占据的空间仍然保留，相邻元素并不侵占若原有空间。 而display: none将元素隐藏后，原来占据的空间不再保留（试试就知道了）
position: absolute;	设置元素的定位方式为绝对定位。 关于position属性的几个取值及作用相对复杂，本文作为精简入门不再赘述，请参阅其它资料。
left:50px;	设置元素左外边距边界与其父容器左边界之间的偏移为50px left、top、right、bottom 4个属性的效果与position属性的取值有很大关系
z-index:999;	设置元素的叠放层次，z-index值越大，就越靠上层。
float:left;	元素向左浮动, 参阅 CSS入门精要（二）
clear:both;	清除浮动效果, 参阅 CSS入门精要（二）
overflow:scroll;	若元素中的内容超出了元素本身的大小，则显示滚动条。 关于此属性的几个取值有一些让人很迷惑的效果和用途，读者可先实验，再上网搜索别的文档看看。

好了，至此我们已经初步了解了CSS的基本语法，以及常用样式属性的用途。

​