1.字体
font h1{ font-family:times,courter; font-size:150% font-style:italic; font-variant:normal; font-weight:normal; } h2{ font-family:serif,times; font-size:1cm; font-style:normal; font-variant:small-caps; font-weight:900; } p{ font:oblique small-caps bold 1cm sans-serif; }this is header one
this is header two
this is a paragraph
运行结果:
2.文本
text h1{ letter-spacing:-3px; text-align:right; text-decoration:overline; } h2{ letter-spacing:0.5cm; text-align:center; text-decoration:line-through; } p{ text-align:left; text-decoration:underline; text-indent:1cm; text-transform:lowercase; } a{ /*去掉链接下划线*/ text-decoration:none; text-indent:0.8cm; text-transform:uppercase; }this is header one
this is header two
this is a paragraph
baidu
运行结果:
3.背景
由于博主懒的去找背景的素材,所以运行之后,丑的不堪入目,不过重点没有错误嘛,大家关注代码所对应的效果就好了。
background body{ background-color:yellow; background-image:url(a.png); background-repeat:repeat; background-attachment:fixed; } h1{ background-color:green; background-image:url(bb.png); background-repeat:repeat-x; background-position:bottom; } h2{ background-color:blue; } p{ background-image:url(bb.png); background-repeat:no-repeat; height:100px; background-position:center; } a{ background:red url(bb.png) no-repeat left center; padding:10px; }bthis is header one
this is header two
this is a paragraph
aaaaaaaaaaaaaaaaa
运行结果:
这张截图有点,看起来乱七八糟的,但是根据代码来找效果,也是很快的。很容易搞明白,每一句代码的意思。url就是自己随便哦添加的路径,大家不必在意。
4.边框(PS:加几句关于鼠标指针的代码)
border div{ width:80px; height:25px; border-style:solid dotted; cursor:move; } h1{ border-style:solid double dashed inset; border-top-style:solid; border-right-style:double; border-bottom-style:dashed; border-left-style:inset; border-width:1px 2px 3px 4px; /* 设置边框第二种方式: border-top-width:1px; border-right-width:2px; border-bottom-width:3px; border-left-width:4px; */ border-color:red yellow green blue; cursor:wait; } h2{ border:3px solid green; /*会覆盖上面的border设置*/ border:1px dashed red; cursor:pointer; }aaaaaa
查看更多关于CSS常用属性和值_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did105344