<!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标签使用及缩进) 案例 第七节 （原创）参考使用表的更多相关文章

  1. HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. amazeui学习笔记--css（常用组件5）--评论列表Comment

    amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...

  3. HTML 学习笔记 CSS样式（字体）

    css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...

  4. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  5. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  6. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  7. amazeui学习笔记--css（常用组件6）--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  8. amazeui学习笔记--css（常用组件4）--关闭按钮Close

    amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...

  9. amazeui学习笔记--css（常用组件1）--小徽章Badge

    amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...

随机推荐

  1. Qt全局宏和变量

    1.  Qt 全局宏定义 Qt版本号: QT_VERSION :  (major << 16) + (minor << 8) + patch 检测版本号: QT_VERSION ...

  2. hdu1251字典树递归算法

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others) Total Subm ...

  3. OWLQN算法

    一.BFGS算法 算法思想如下: Step1   取初始点,初始正定矩阵,允许误差,令: Step2   计算: Step3   计算,使得 : Step4    令: Step5    如果,则取为 ...

  4. Java高级工程师进阶路线

    第一部分:宏观方面 一. JAVA.要想成为JAVA(高级)工程师肯定要学习JAVA.一般的程序员或许只需知道一些JAVA的语法结构就可以应付了.但要成为JAVA(高级) 工程师,您要对JAVA做比较 ...

  5. Linux vi 退出&保存/不保存

    无论是否退出 vi,均可保存所做的工作.按 ESC 键,确定 vi 是否处于命令模式. 操作   键入 保存,但不退出vi                          :w 保存并退出vi    ...

  6. 原生JS实现音乐播放器！

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  7. 在 Tomcat 8 部署多端口项目

    一般的部署途径 Tomcat 的部署途径很多,一般有如下几种: 直接将 War 包拷贝到 webapps 目录中,然后启动 Tomcat. 登陆 Tomcat 管理控制台http://localhos ...

  8. AVPlayer缓存实现

    没有任何工具能适用于所有的场景,在使用AVPlayer的过程中,我们会发现它有很多局限性,比如播放网络音乐时,往往不能控制其内部播放逻辑,比如我们会发现播放时seek会失败,数据加载完毕后不能获取到数 ...

  9. string使用

    一.list和string转化 List转字符串,用逗号隔开 List<string> list = new List<string>();list.Add("a&q ...

  10. 张高兴的 Xamarin.Android 学习笔记：（一）环境配置

    最近在自学 Xamarin 和 Android ,同时发现国内在做 Xamarin 的不多.我在自学中间遇到了很多问题,而且百度到的很多教程也有些过时,现在打算写点东西稍微总结下,顺便帮后人指指路了. ...