CSS常用标签

选择器分为class选择器和id选择器  id选择器编写样式以#id名称,class选择器则为.class名称

插入样式表的方法有三种:

外部样式表(External style sheet)

 

<link rel="stylesheet" type="text/css" href="mystyle.css">

内部样式表(Internal style sheet)

<style>css样式</style>

内联样式(Inline style)

style=" css样式  "

CSS 属性定义背景效果:

background-color    背景色

background-image   背景图片

background-repeat   背景图片水平或者垂直平铺

background-attachment   定义背景图片随滚动轴的移动方式

background-position   定位图片位置

文本:

text-align文本对齐方式

 text-decoration  删除链接的下划线

uppercase 文本转换为大写

lowercase文本转换为小写

capitalize  首字母大写

text-indent   文本缩进

color : #999999; 文字颜色

font-family : 宋体,sans-serif; 文字字体

font-size : 9pt; 文字大小

font-style:itelic; 文字斜体

font-variant:small-caps; 小字体

letter-spacing : 1pt; 字间距离

line-height : 200%; 设置行高 

font-weight:bold; 文字粗体 

vertical-align:sub; 下标字

vertical-align:super; 上标字 

text-decoration:line-through; 加删除线

text-decoration:overline; 加顶线

text-decoration:underline; 加下划线 

text-decoration:none; 删除链接下划线

text-align:right; 文字右对齐

text-align:left; 文字左对齐

text-align:center; 文字居中对齐 

text-align:justify; 文字分散对齐 

vertical-align属性

vertical-align:top; 垂直向上对齐

vertical-align:bottom; 垂直向下对齐

vertical-align:middle; 垂直居中对齐

vertical-align:text-top; 文字垂直向上对齐 

vertical-align:text-bottom; 文字垂直向下对齐

链接

a              所有超链接 

a:link       超链接文字格式
 
a:visited   浏览过的链接文字格式 

a:active    按下链接的格式 

a:hover     鼠标转到链接

列表:

st-style-type属性

list-style-type:none; 不编号 

list-style-type:decimal; 阿拉伯数字 

list-style-type:lower-roman; 小写罗马数字 

list-style-type:upper-roman; 大写罗马数字 

list-style-type:lower-alpha; 小写英文字母 

list-style-type:upper-alpha; 大写英文字母 

list-style-type:disc; 实心圆形符号 

list-style-type:circle; 空心圆形符号 

list-style-type:square; 实心方形符号 

list-style-image:url(/dot.gif); 图片式符号 

list-style-position:outside; 凸排 

list-style-position:inside; 缩进

table属性:

text-align     表格文字对齐(水平)

vertical-align  表格文字垂直对齐

 border-collapse: collapse;       相邻边被合并 

  background-color: #fff;            设置表格背景色 

  border-top: 1px solid #fff;        设置表格上边框颜色 

  border-left: 1px solid #fff;        设置表格左边框颜色 

  border-right: 1px solid #fff;      设置表格右边框颜色 

  border-bottom: 1px solid #fff   设置表格下边框颜色 

盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。(上右下左)

 

Border(边框) - 围绕在内边距和内容外的边框。

 

Padding(内边距) - 清除内容周围的区域，内边距是透明的。(上右下左)

 

Content(内容) - 盒子的内容，显示文本和图像。

边框:

border-top : 1px solid #6699cc; 上框线 

border-bottom : 1px solid #6699cc; 下框线 

border-left : 1px solid #6699cc; 左框线 

border-right : 1px solid #6699cc; 右框线 

以上是建议书写方式,但也可以使用常规的方式 如下:

border-top-color : #369 设置上框线top颜色 

border-top-width :1px 设置上框线top宽度 

border-top-style : solid设置上框线top样式 

其他框线样式

solid 实线框 

dotted 虚线框 

double 双线框

 
groove 立体内凸框 

ridge 立体浮雕框 

inset 凹框 

outset 凸框 

隐藏元素:

隐藏元素 - display:none或visibility:hidden

改变一个元素显示 display:

display:inline   改为内联元素

display:block   改为块级元素

定位:

position: （配合着定位坐标来使用）定位坐标：left:10px 距左边， top距上边， right 距右边， bottom 距底边
static 静态，不定位

fixed 
固定， 脱离正常的文档流，比普通元素层级要高。相对于浏览器窗口进行定位。不会随页面的滚动而移动。

relative
相对定位。（相对于自己原来的位置，霸道的相对，定位之后任然霸占着原来的位置）

absolute
绝对定位，相对于最近的具有定位属性的元素进行定位。

浮动:

float:left    左浮动

float:right   右浮动

clear:both  清除浮动

对齐:

margin: auto;元素居中对齐

text-align: center;  文本居中对齐