标签:ext active 定义 upper cas ado css geo har
<!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标签使用及缩进) 案例 第七节 (原创)参考使用表
标签:ext active 定义 upper cas ado css geo har
原文地址:http://www.cnblogs.com/ttzzyy/p/7512990.html