选择器分为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; 文本居中对齐