下载高清图：css常用属性和值（思维导图总结）
1.字体
<html> <head> <title>font</title> <style> 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; } </style> </head> <body> <h1>this is header one</h1> <h2>this is header two</h2> <p>this is a paragraph </p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </body></html>2.文本
<html> <head> <title>text</title> <style> 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; } </style> </head> <body> <h1>this is header one</h1> <h2>this is header two</h2> <p>this is a paragraph </p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <a href="http://www.baidu.com">baidu</a> </body></html>3.背景
由于博主懒的去找背景的素材，所以运行之后，丑的不堪入目，不过重点没有错误嘛，大家关注代码所对应的效果就好了。
<html> <head> <title>background</title> <style> 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; }b </style> </head> <body> <h1>this is header one</h1> <h2>this is header two</h2> <p>this is a paragraph </p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <a href="http://www.baidu.com">aaaaaaaaaaaaaaaaa</a> </body></html>这张截图有点，看起来乱七八糟的，但是根据代码来找效果，也是很快的。很容易搞明白，每一句代码的意思。url就是自己随便哦添加的路径，大家不必在意。
4.边框（PS:加几句关于鼠标指针的代码）
<html> <head> <title>border</title> <style> 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; } </style> </head> <body> <div> aaaaaa </div> <h1>this is header one</h1> <h2>this is header two</h2> </body></html>当鼠标移到三个边框上时，鼠标指针会发生相应变化：分别变成移动，等待，还有小手的状态。具体参考
5.列表
<html> <head> <title>list</title> <style> </style> </head> <body> <ul style="list-style-type:none; list-style-image:url(bb.png)"> <li>aaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaa</li> </ul> <ol style="list-style-type:upper-roman"> <li>aaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaa</li> </ol> </body></html>
运行结果：
截图中所显示的两个列表分别是一个无序列表和一个有序列表。
但是在以后的开发中，我们基本不会使用默认的图像，都是自定义列表前面的图像。style="list-style-type:none.这句代码就是将列表前的符号风格设置为空，然后我们就可以自行添加自己需要的图像了。
document.body.oncopy=function(){
event.returnValue=false;
var t=document.selection.createRange().text;
l4ever = parent.document.location;
var s=”本文来源: 李硕的专栏”;
var y=”原文地址:” + http://blog.csdn.net/wzqnls + ” “;
clipboardData.setData(’Text’,”+t+’\r\n’+s+’\r\n’+y+”);
}
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
868
收藏
