日期:2014-05-17  浏览次数:20675 次

css 3小时从入门到略通
①css基础
样式表:
内联式样式表 #使用标签的style属性(行内样式)
嵌入式样式表 #(植入样式)
外联样式表#(链接样式)
输入样式表 #使用@import url(style/test.css)


选择器:
html选择器
class 选择器
id 选择器
关联选择器(td.classA)#<td class="classA">
组合选择器(空格隔开)
伪元素选择器:(一个标签的不同状态)
a:link
a:hover
a:visited
布局:
属性:
margin (外边距)
margin-left,margin-right,margin-top,margin-bottom
padding (内边距)
padding-left,padding-right,padding-top,padding-bottom
float (区域漂浮对齐) :right,left,none
clear (清除指定的浮动空间)
none | left | right | both
clear:left;#不允许元素的左边有漂浮元素
示例:
body{
margin:0px;
text-align:center;
background:#ffffcc
}
//清除与浏览器的边距,文本居中,网页背景色设置

#container{
width:800px;
height:1000px;
background:yellow;
margin:auto 0px;
}
//网页主题部分居中,定宽,设置主题背景

#header{
float:left;
width:800px;
height:100px;
margin:auto 0px;
background:red;
clear:both;
}
//头部在container中,为整个网页的头部,左右无其他元素

#logo{
float:left;
width:25px;
height:90px;
background:green;
clear:right;
margin:0px;
}
//logo在header的内部,居左

#banner{
float:right;
width:530px;
height:90px;
marigin:0px;
clear:left;
background:blue;
}
//banner在header中,居右

#menu{
width:800px;
height:35px;
margin:auto 0px;
clear:both;
background:#ff00ff;
}
//menu在container中,横式

.nav{
margin:auto 0px;
width:800px;
height:10px;
float:left;
clear:both;
background:#ffffff;
line-height:10px;
}
//空格条位于container中

#footer{
width:800px;
height:100px;
background:red;
margin:auto 0px;
}
//footer位于网页底部,在container中

#menu ul{
float:left;
list-style:none;
margin:0px;
}

#menu il li{
float:left;
display:block;
line-height:35px;
margin :0px 10px;
}

.menuDiv{
width:1px;
heigt:35px;
background:green;
}
//菜单栏中的竖线分隔符

#menu ul li a:link,#menu ul a:visited{
font-weight:bold;
color:blue;
}
#menu ul li a:hover{
font-weight:800;
color:red;
}
//菜单栏中的链接


样式表的执行顺序:
Inline styles (行内样式)
Embedded styles (植入样式)
Linked styles (链接样式)
Imported styles (输入样式)
Default browser styles(缺省浏览器样式)
浏览器将按照上述顺序执行样式表的指令。


②css文字处理

font-size单位:
point: pt
ems: em
pixels: px
other: cm mm in pc ex
font-size的关键字类型:
xx-small
x-small
small
medium
large
x-large
xx-large
font-size比例尺寸:
300%
font-style:设置斜体
italic(oblique) normal
font-weight:字重
blod
text-transform:字体变形
uppercase 使所有字母大写显示,
lowercase使所有字母小写显示,
capitalize 使每个单词的第1个字母大写显示
none 使所有继承的文字变形参数被忽略,文字将以正常形式显示。
text-decoration:文字修饰
underline 给文字下划线
overline给文字上划线.
line-through给文字划出删除线
blink是你在恶梦中常常看到的--文字在闪烁
none使得上述效果都不会发生。
font:一次性定义字体属性

③文字定位/段落排版
word-spacing:字间距
单位:
in (英寸)
cm (厘米)
mm (毫米)
pt (点数)
pc (打字机字间距)
em (ems)
ex (x-height)
px (象素)
letter-spacing:字母间距
line-heigh