css课后一节的总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>css的一些属性</title>
<style = "text/css">
table{
border:1px solid green;
width:200px;
height:200px;
border-collapse:collapse;
font-family:黑体;
font-style:Oblique;
}
center>table{
border:2px,dashed red;
width:100px;
height:300px;
font-style:Italic;
}
</style>
</head>
<body>
<p>1.内嵌的css style样式可以放在任意的html元素中</p>
<div style="font-width:bold;font-size:30px;">看效果</div>
<a href="" style="font-width:bold;font-size:40px;">连接加css后的效果</a><br>
<span style="font-width:bold;font-size:20px;">加在span标签中的效果</span><br><br>
<p>2.font的属性:(1)font-size:(large,px,pt,cm)(2)font-style:(Italic,oblique)(3)font-varient:(small-caps)(4)text-decoration:(underline,overline,line-through)(5)text-transform:(uppercase,capitalize,lowercase)(6)line-height:(px...)(7)letter-spacing:(px...)(8)word-spacing:(px...)(9)text-indent:(px...)(10)text-align:(center,right,left,justify)(11)Direction:(ltr,rtl,down,inhert)(12)marquee:(Direction: behavior: scrollamount: scrolldelay:)
</p>
<p>(1)font-size</p>
<div style="font-size:10px;">10px大小</div><br>
<div style="font-size:10pt;">10pt大小</div><br>
<div style="font-size:2cm;">2cm大小</div><br>
<div style="font-size:large;">large大小</div><br>
<p>(2)font-style</p>
<div style="font-style:Italic;">斜体</div><br>
<div style="font-style:oblique;">与斜体相近</div><br>
<p>(3)font-varient:</p>
<div style="font-varient:small-caps">1234567890</div><br>
<p>(4)text-decoration:</p>
<div style="text-decoration:underline;">下划线</div><br>
<div style="text-decoration:overline;">上划线</div><br>
<div style="text-decoration:line-through;">划线</div><br>
<p>(5)text-transform</p>
<div style="text-transform:uppercase;">字母全部变大写abcdefg</div><br>
<div style="text-transform:lowercase;">字母全部变小写ABCDEF</div><br>
<div style="text-transform:capitalize;">字母保持原样abABcdCD</div><br>
<p>(6)line-height:</p>
<div style="line-height:20px">上划线</div><br>
<p>(7)letter-spacing:</p>
<div style="letter-spacing:30px">每个字母相隔间距abcdefg</div><br>
<p>(8)word-spacing:</p>
<div style="word-spacing:10px">每个单词的相隔间距 today is a good day</div><br>
<p>(9)text-indent:</p>
<div style="text-indent:20px">设置文本的开始间距</div><br>
<p>(10)text-align:</p>
<div style="text-align:center;">文本布局在中间</div><br>
<div style="text-align:right;">文本布局在右边</div><br>
<div style="text-align:left;">文本布局在左边</div><br>
<div style="text-align:justify;">文本布局左边????</div><br>
<p>(11)Direction</p>
<div style="Direction:ltr;">做到右靠齐</div><br>
<div style="Direction:rtl;">右靠齐</div><br>
<div style="Direction:down;">向下靠齐</div><br>
<div style="Direction:inhert;">????</div><br>
<p>(12)marquee</p>
<marquee Direction="left" behavior="scroll" scrollamount="10";scrolldelay="10">文字滚动</marquee><br><br>
<p>3.背景属性：(1)backgroud-color; (2)background-image:url(图片相对地址);
(3)background-repeat:(norepeat,repeat-x,repeat-y)(4)background-position</p><br>
<p>(1)背景颜色background-color</p>
<div style="background-color:green">背景颜色绿色</div><br>
<p>(2)背景图片:background-image:</p>
<div style="background-image:url(images/1.gif)">默认背景图片是平铺的</div>
<div style="background-image:url(images/1.gif);norepeat" >背景图片只有一个</div><br>
<div style="background-image:url(images/1.gif);repeat-x;">背景图片平铺x轴</div><br>
<div style="background-image:url(images/1.gif);repeat-y;">背景图片平铺y轴</div><br>
<div style="background-image:url(images/2.jpg);background-position:50% 50%;"></div>对于大的背景图片，取相对像素位置</div><br>
<p>4.表格设置内联css,参见head内部表格标签table的css设置，子标签设置css，参看head中</p>
<p>（1）设置表格在中间</p>
<center>
<table border="2" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</center>
<p>一般的表格</p>
<table border="2" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<p>5.边框的设置:(double,groove,inset,ridge,window-inset,outset)</p>
<div style="border:12px red double;">双实线边框</div><br>
<div style="border:10px blue groove;"></div><br>
<div style="border:13px yellow inset;"></div><br>
<div style="border:13px yellow ridge;"></div><br>
<div style="border:9px yellow window-inset;"></div><br>
<div style="border:7px yellow outset;"></div><br>
</body>
</html>