CSS基础教程之常用属性

WEB前端 CSS样式 2015年9月9日

CSS在Web前端开发中，占有很重要的地位。CSS可以很好的解决内容和变现分离的问题，极大方便后期的维护。CSS样式引入的方式主要有外部样式表、内部样式表、内联样式三种。下面雷雪松详细的介绍在web开发中css常用的属性。

一、CSS样式引入的方式
1.外部样式表
[cc lang=”html” escaped=”true”]<link type=”text/css” rel=”stylesheet” href=”./css.css” />[/cc]
2.内部样式表
[cc lang=”html” escaped=”true”]<style type=”text/css”></style>[/cc]
3.内联样式
[cc lang=”html” escaped=”true”]<div style=”属性名:属性值;属性名:属性值;”></div>[/cc]

二、布局常用样式属性和盒子原理（margin/padding）
border:1px solid red; 边框的样式值：solid实线，dashed虚线，dotted虚线。可以分别控制top:上，right右, bottom下，left左四条边。
width: 300px;height: 100px;background-color: yellow;background-image:url();
display: block(块级化)|none（隐藏）|inline（内联）|inline-block（块级并且在同一行）|table-cell(呈现表格特征)
margin 外边距
margin:10px;四边10px的缩写
margin:10px 15px 20px 5px;上右下左
margin:10px 15px; 上下10px 左右15px
margin-top|margin-right|margin-bottom|margin-left
margin:5px auto; 自动居中，一般情况下，元素必须有固定宽度。
padding:内边距，用法和margin一样

三、文字属性(默认继承父元素的样式)
font-size:60px;大小
color:red;颜色
font-weight:bold; 100-900中间的任何一个整百数值，400代表正常粗细，没有单位
font-style: italic;字体样式
line-height: 60px;行高
font-family: 黑体,Arial;字体
text-align: right|left|center;水平对齐方式
text-indent: 10px;首行文本的缩进
text-decoration: underline|overline|line-through|none;装饰效果
letter-spacing: 20px;字符间距
break-word:文本断开换行属性
word-break:break-all | keep-all 单词换行属性
vertical-align:sub|super|;文本垂直对齐，M的平方
layout-flow:vertical-ideographic;文本垂直排列
cursor:pointer;鼠标指针形状
list-style: none|armenian(圆点)|circle(空心圆点)|decimal(数字，最大值999，多于999行以后，会自动变成001)|lower-alpha(英文小写字母)|url(图片地址);

四、背景background属性
background-image: url(./images/leixuesong.jpg);背景图片
background-color: #FFCC00;背景颜色
background-repeat: no-repeat|repeat-x|repeat-y;如何重复背景图片
background-position: -50px -50px; left|right|center|top|bottom背景图片位置
background: url(./images/002.png) no-repeat -100px -150px;background所有属性的缩写

五、浮动与定位
float:left|right;一般情况下需要设置元素的宽度
clear:left|right|both(两端);清除浮动一般配合float使用，both一般单独使用
overflow:hidden|auto|scroll;可以根据标签大小自动显示滚动条，水平或者垂直方向，防止元素内容溢出
position: absolute|static|fixed|relative;
z-index: 100;
left: 100px;
top: 100px;
position: relative;父元素
position: absolute;子元素

块级元素一个最重要的特点就是，独占一行，非块级元素（内联元素）最重要的特点，都在同一行。display,清除浮动,overflow这些属性，可以有效地防止部分浏览器样式不兼容现象

来源：CSS基础教程之常用属性