码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记 CSS文本及字体及连接及列表(a标签使用及缩进) 案例 第七节 (原创)参考使用表

时间:2017-09-13 01:45:44      阅读:214      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!