标签：
行内排版
<p style="text-align:center;color:red;font-weight:blod;background:green">qqqq</p>
span 可以分别设置占文字的长度
<span style="color:red;background:#666">php</span>
<span style="color:blue;background:#555">php</span>
<span style="color:green;background:#ccc">php</span>
div占一整行
<div style="color:red;background:#666">php</div>
<div style="color:blue;background:#555">php</div>
<div style="color:green;background:#ccc">php</div>
内嵌式排版样本
必须在head之间 必须在style之间可以改变所有的对象
如果遇到行内 行内的优先级高
<style type="text/css">
p{
color:red;
}
</style>
</head>
<p style="color:green;">PHP</p>
<p>PHP</p>
<p>PHP</p>
class定义格式 可以让所有对象中的一部分改变
p{
color:red;
font-size:20px;
font-weight:blod;
}
.abc{
color:green;
}
</style>
</head>
<p class="abc">PHP</p>
<p class="abc" style="color:blue;">PHP</p>
<p>PHP</p>
<p>PHP</p>
<p>PHP</p>
<p>PHP</p>
id定义型
优先级高于class
#def{
color:orange;
}
</style>
</head>
<p class="abc">PHP</p>
<p class="abc" id="def">PHP</p>
分组
.abc,.def{
color:green;
}
.abc{
text-align:center;
}
.def{
text-align:right;
}
</style>
</head>
<p class="abc">PHP</p>
<p class="def">PHP</p>
外部排版样式的定义
p{
color:red;
font-size:50px;
font-weight:blod;
}
导入css链接
<style type="text/css"；>
@import"p.css";
</style>
外部链接方式
<link rel="stylesheet" type="text/css" href="13.css"/>
css中长度与颜色
长度单位：px 像素
颜色单位：十六进制最常用color：#ff0000 颜色名称color：red
css的文字属性：
倾斜
font-style:italic;
normal 改默认倾斜
font-variant:small-caps; 将小写字母改成同宽的大写字母
font-weight:bold;加粗
font-size:12px;字体大小
font-family宋体;
简化写法(不建议使用)
p{
font:blod 50px 楷体——GB2312;
}
css的文本属性
color:red;字体颜色
letter-spacing:1px;文本间隔
word-spacing:15px; 单词间隔
white-space:pre跟代码一样空格
white-nowrap不换行
text-align=center;文本位置
text-decoration:none;去掉下划线
text-decoration:underline;加下划线
line-throw删除线
overline顶线
text-indent:24px;首行缩进
line-height：100% 行高
text-transform:capitalize;大写首字母
vertical-align:middle;对其
0px默认在图片底部
背景颜色
body{
background-color:red;
}
p{
background-color:green;
}
背景图片
background-image:url(1.jpg);
background-image:none;去掉父类的背景;
background-attachment:fixed;背景图片不随滚动条滚动而滚动
background-repeat:repeat-x;将背景图案按水平方向填满
background-repeat:repeat-y;将背景图案按垂直方向填满
background-repeat:no-repeat;不填满
background-position:bottom,right;背景位置
简化形式：(多用)
background:red url("1.jpg") no-repeat center;
css中列表的使用
list-style-type:none;去除符号
disc实心 square实心方块 decimal 数字 lower-alpha字母
list-style-position:inside;符号位置
简化方式：
list-style：none;
css边框的使用
border-style:solid;默认为无边线 dotted点状线 double双边线
border-color:red green blue yellow;上右下左
border-width:10px 20px 30px 40px;边线宽度；上右下左
简化方案：
border: 1px dashed green;
CSS边界的使用:
padding:20px;内边距四周向里挤出20个像素
padding-top:20px上边距向下挤出20个像素
区块 占了一整行
<p> <div>是区块
width height
min-height:80ox max-height 自适应增长区块高度
min-width max-width
float:left 浮动
clear:both 清除浮动
css中定位的使用(不会破坏布局，)
position:relative;以本来的自己的位置为基准 absolute 以网页的左上角为基准点 绝对定位 会浮在空中覆盖下层
top:8px
left:8px
z-index:1数字越大越往上层
overflow：auto必要的时候用滚动条 hide 不显示超出尺寸的内容 scroll 总是使用滚动条 over-flow-x（y）
scrollbar 滚动条
链接
color
text-decoration:none 没有下划线
background
border:1px dashed black边框
超链接伪属性
a:link 表示超链接文字尚未被点选
a:visited 表示超链接文字已被点选过
a:active 表示超链接文字正在被点选未被放开
a:hover 表示当鼠标停留在文字上
一般情况：
a{先将4个都做成没有下划线红色
color:red;
text-decoration:none
}
a:hover{重写
color:blue;
text-decoration:underline
}
css光标的使用
span{
cursor:hand/pointer手型 url("光标.ani")
}
dhtml
behavior:url(font.htc);
css中缩放的使用
zoom：0.75缩放到75%
css滤镜
filter:alpha(opacity=100)亮度
style=2样式
背景使用滤镜j需要高度
blur（strength=15）模糊
direction=275角度
add=false抽象
flip flipv水平翻转
dropshadow(color=red,offx=5,offy=5);投影
positive建立透明
filter:xray gray invert
shadom（color=red,direction=125,strength=5;）阴影
选择器
id
#title{
color:red
}
<p id="title"> id只可以用于一个
id与选择器结合
h2#title{
color:blue;
}
<h2 id="title">2222</h2> 只允许h2的标记使用ID title
<p id="title">2222</p>
当一个以上的地方需要使用同一css规则时不应该使用id
层叠 越晚些的优先级越高同级情况下
重写
h1,h2,h3,h4{
color:red;
font-size:20px
}
h1{要放在下面
font-family:Arial Black;
}
<h1>PHOEEWW </h1>
<h2>PHOEEWW </h2>
<h3>PHOEEWW </h3>
<h4>PHOEEWW </h4>
继承
<h1>PHOEEWW <i>很靠谱</i>丁文琪</h1>
h1下的i
h1{
color:red;
}
h1 i{
color:maroon;
font-styel:normal;
text-decoration:underline;
}
<h1>PHOEEWW<i>很靠谱</i>丁文琪</h1>
子类选择器
div.box{
color:red;
}
div.box1{
font-weight:bold;
}
div.box2{
font-style:italic;
}
<div class="box">PPPPP</div>
<div class="box box1">PPPPP</div>
<div class="box box2">PPPPP</div>
通用选择器
*{代表所有的标记
margin:0;
}
相邻选择器
strong[title]{
color:red;
background:orange;
}
<strong title="vrvree">php</strong>
<strong>feef</strong>
子选择器与div的嵌套
#contion{
background:orange;
border: 1px solid black;
padding:20px;
}
.box{
border:1px solid black;
margin:10px;
padding:10px;
}
#contion > p{
color:blue;
}
.box p{
color:green;
}
</style>
</head>
<body>
</div>
</div>
</div>
margin-left：auto
margin-right:200px
左边自动扩展 右边扩展200px
左右都auto 会居中
margin:0 auto 0 auto剧中
使用span更好的控制区域中的文本
display:block 转换为区块
display:inline 转换为内联
display：none不占位隐藏
背景图像渐变的制作
background:#FF4242 url(bg.jpg) repeat-x;
给标题加图标
h5{
background:url(arrow.gif) no-repeat left center;
font-size:80px
}
<h5>php</h5>
table col.col1{
backgroud:wheat;
}
<colgroup>
<col class="col1"/>
<col class="col2"/>
<col class="col3"/>
<col class="col4"/>
</colgroup>
<form>
标签用于为用户输入创建 HTML 表单。
</form>
css
标签：
原文地址：http://www.cnblogs.com/songwenyi/p/5701099.html
