<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>文本及字体及连接及列表</title> ???<link rel="stylesheet" href="tzy.css" type="text/css"></head><body><p style="color: brown;text-align: center">hello tzy</p><!--颜色 居中--><h1>静夜思</h1><p>床前明月光</p><p>疑是地上霜</p><p>床前明月光</p><p>疑是地上霜</p><p id="p1">this is web page</p><p id="p2">This is wEb pAge</p><p id="p3">tHis is wEb page</p><p id="p4">this is web page</p><p class="p5">测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p class="p5">this is web pagethis is web pagethis is web pagethis is web pagethis is web pagethis is web page</p><p style="font-family: fantasy;font-size: 40px">拉拉</p><a href="http://www.baidu.com">测试a标签百度</a><p>看一看效果</p><ul> ???<li>苹果</li> ???<li>苹果</li> ???<li>苹果</li> ???<li>苹果</li> ???<li>苹果</li></ul><p>看一看效果</p><ul class="ul1"> ???<li>苹果</li> ???<li>苹果</li> ???<li>苹果</li> ???<li>苹果</li> ???<li>苹果</li></ul><p>看一看效果</p><ul clas="ul2"> ???<li>苹果</li> ???<li>苹果</li> ???<li>苹果</li> ???<li>苹果</li> ???<li>苹果</li></ul></body></html>
h1 { ???text-indent: -2em; ???/*首行退进2字符*/ ???padding: 2em; ???/*首行缩进2字符*/}p { ???padding: 2em;}#p1 { ???text-transform: capitalize; ???/*首字母大写*/}#p2 { ???text-transform: lowercase; ???/*全部小写*/}#p3 { ???text-transform: uppercase; ???/*全部大写*/}#p4 { ???/*阴影效果 ?居左 ?居上 ?清晰度小清 颜色*/ ???text-shadow: 20px 20px 0px #FF00FF;}.p5 { ???width: 40px; ???text-wrap: normal; ???/*自动换行 不会拆分英文*/}/*@font-face {*//*font-family: myfont;*//*src: url(字体地址);*//*}*//*div{*//*font-family: myfont;*//*引用自己的下载的字体,用户可以直接使用，安全性还需改进*//*}*/a:link{ ???color: red; ???/*未被点击*/ ???text-decoration: none; ???/*取消下划线*/}a:visited{ ???color: blue; ???/*已被点击*/}a:hover{ ???color: darkgreen; ???/*鼠标划过*/}a:active{ ???/*正在点击*/ ???color: aqua; ???font-size:80px; ???/* 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 ???提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。*/}ul li{ ???/*list-style-type: georgian;*/ ???/*//修改li前的标记图片*/ ???list-style-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504976310558&di=4a7378a8e142317c61a6e16bb2f02ee7&imgtype=0&src=http%3A%2F%2Fimg.90sjimg.com%2Finspiration%2F03%2F98%2F74%2F62%2F70%2Fs_236_cl3486OMaFk6pRgdPO43.gif"); ???/*设置li图片*/}.ul1{ ???list-style-position: inside; ???/*离屏幕左边远一点*/}.ul2{ ???list-style-position: outside; ???/*离左边屏幕近一些*/}HTML学习笔记 CSS文本及字体及连接及列表(a标签使用及缩进) 案例 第七节 （原创）参考使用表
原文地址：http://www.cnblogs.com/ttzzyy/p/7512990.html