CSS基础教程之常用属性_html/css_WEB-ITnose

分类：WEB前端时间： 2015年9月9日

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

一、CSS样式引入的方式

1.外部样式表

2.内部样式表

3.内联样式

二、布局常用样式属性和盒子原理（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这些属性，可以有效地防止部分浏览器样式不兼容现象