前言

  1. 关于 HTML/CSS 的博客也写了几篇了。该系列博客主要介绍 HTML CSS 的基础,尚未过多的涉及 HTML5 CSS3 (即 HTML/CSS 进阶)的内容。这些博客是按照一定的顺序写的,尽管你可以选择性的只看其中的某篇,但是若你刚开始接触 HTML CSS,那么还是建议你浏览一下前面的文章。相信这样,你会更快理解并接受 HTML CSS。以下是该系列博客的顺序列表:

1. HTML5-01 简介

2. HTML5-02 元素

3. CSS3-01 简介

4. HTML5-03 页面布局

5. CSS3-02 样式 1

6. CSS3-03 样式 2

链接

  • 概述

    • 链接指定了资源的位置,具有不同的状态。点击链接可以访问相应的资源。
  • 链接的状态

    • selector:link:未访问的链接状态
    • selector:visited:已访问的链接状态
    • selector:hover:鼠标放在链接上的状态
    • selector:active:点击链接时的状态
  • 设置链接状态的顺序规则

    • hover 状态必须在 link 和 visited 状态之后
    • active 状态必须在 hover 状态之后
  • 示例

    • 代码

      • HTML 文档

        1. <!DOCTYPE html>
        2. <html lang="en">
        3. <head>
        4. <meta charset="UTF-8">
        5. <title>CSS3-04 样式 3</title>
        6. <link rel="stylesheet" href="mystyle.css">
        7. </head>
        8. <body>
        9. <div>
        10. <a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/" title="博客">世俗孤岛</a>
        11. </div>
        12. </body>
        13. </html>
      • CSS 文件

        1. div
        2. {
        3. margin: 100px 100px;
        4. width: 120px;
        5. height: 26px;
        6. text-align: center;
        7. font-size: 24px;
        8. background-color:lightpink;
        9. }
        10. a:link {text-decoration: none;}
        11. a:hover {text-decoration: underline;}
        12. a:active {text-decoration: overline;}
    • 效果图

列表

  • 概述

    • 在 HTML 中,我们可以使用列表标签(<ol>、<ul>)的 type 属性来设置列表的标记类型。在 CSS 中我们可以更加灵活的控制列表的标记。
  • 可控制的列表项标记样式

    |属性|含义|

    |list-style-type|列表项标记的类型|

    |list-style-image|设置列表项的标记为图片|

    |list-style-position|列表项标记的位置|

  • 示例

    • 代码

      • HTML 文档

        1. <!DOCTYPE html>
        2. <html lang="en">
        3. <head>
        4. <meta charset="UTF-8">
        5. <title>CSS3-04 样式 3</title>
        6. <link rel="stylesheet" href="mystyle.css">
        7. </head>
        8. <body>
        9. <ul id="normal">
        10. <li>First item</li>
        11. <li>Second item</li>
        12. <li>Third item</li>
        13. </ul>
        14. <ul id="image">
        15. <li>First item</li>
        16. <li>Second item</li>
        17. <li>Third item</li>
        18. </ul>
        19. </body>
        20. </html>
      • CSS 文档

        1. #normal
        2. {
        3. list-style-type: square;
        4. }
        5. #image
        6. {
        7. list-style-image: url("item_tag.png");
        8. }
    • 效果图

表格

  • 概述

    • CSS 赋予了表格更加多样的格式,使我们可以创造多种多样的表格。
  • 可控制的表格样式

    • “包装样式”

      • 边框(Border)

        • 语法:border: 1px solid blue;
        • 注意:表格默认情况下,单元格之间会有一个间距。所以,若你只设置了 border 属性,那么你看到的将是一个双边框的表格。需要使用 border-collapse 来控制是否取消单元格之间的边距,即显示单边框。
      • 填充(Padding)

        • 语法:padding: 5px;
      • 尺寸(width/height)

        • 语法: width: 5px; height: 5px;
    • 文本样式
      • 文本颜色(color)

        • 语法: color: orange;
      • 文本对齐(text-align)
        • 水平(text-align)

          • 语法:text-align: center;
        • 垂直(vertical-align)
          • 语法:vertical-align: bottom;
    • 标题
      • 语法:caption-side: bottom;
  • 示例

    • 代码

      • HTML 文档

        1. <!DOCTYPE html>
        2. <html lang="en">
        3. <head>
        4. <meta charset="UTF-8">
        5. <title>CSS3-04 样式 3</title>
        6. <link rel="stylesheet" href="mystyle.css">
        7. </head>
        8. <body>
        9. <table>
        10. <caption>Tabel 1-1</caption>
        11. <tr>
        12. <th>属性</th>
        13. <th>含义</th>
        14. <th>备注</th>
        15. </tr>
        16. <tr>
        17. <td>border</td>
        18. <td>边框</td>
        19. <td class="red">注意 border-collapse 属性</td>
        20. </tr>
        21. <tr>
        22. <td>padding</td>
        23. <td>填充</td>
        24. <td class="red">随便玩</td>
        25. </tr>
        26. </table>
        27. </body>
        28. </html>
      • CSS 文件

        1. table
        2. {
        3. width: 450px;
        4. height: 200px;
        5. }
        6. table,th,td
        7. {
        8. border: 2px solid pink;
        9. border-collapse: collapse;
        10. }
        11. th
        12. {
        13. background-color: lightgray;
        14. }
        15. td
        16. {
        17. padding-left: 30px;
        18. }
        19. .red
        20. {
        21. color: red;
        22. text-align: left;
        23. vertical-align: top;
        24. }
        25. caption
        26. {
        27. margin-top: 10px;
        28. caption-side: bottom;
        29. }
    • 效果图

导航栏

  • 概述

    • 说到导航栏,大家可能比较陌生;但是到目前为止,说到列表,大家应该很熟悉了。导航栏并不是 HTML 中的元素,它是设置了样式的 HTML 列表,其列表元素的内容为一个链接。
  • 导航栏的种类

    • 垂直导航栏

      • 垂直导航栏就是具备指定样式的 HTML 列表
    • 水平导航栏
      • 使用 内联 实现

        • 如:display:inline;
      • 使用 浮动 实现
        • 如:float:left;
  • 示例

    • 代码

      • HTML 文档

        1. <!DOCTYPE html>
        2. <html lang="en">
        3. <head>
        4. <meta charset="UTF-8">
        5. <title>CSS3-04 样式 3</title>
        6. <link rel="stylesheet" href="mystyle.css">
        7. </head>
        8. <body>
        9. <ul>
        10. <li><a href="#">客服管理</a></li>
        11. <li><a href="#">财务管理</a></li>
        12. <li><a href="#">产品管理</a></li>
        13. <li><a href="#">预约管理</a></li>
        14. </ul>
        15. </body>
        16. </html>
      • CSS 文件

        1. ul
        2. {
        3. /*取消 HTML 列表的样式*/
        4. list-style-type: none;
        5. margin: 0;
        6. padding: 0;
        7. /*设置 导航栏 的样式*/
        8. background-color: rgba(0,0,255,0.5);
        9. }
        10. li
        11. {
        12. /*使用 浮动 实现横向导航栏*/
        13. float: left;
        14. }
        15. a:link,a:visited
        16. {
        17. /*增加可点击区域*/
        18. display: block;
        19. width: 150;
        20. /*设置文本样式*/
        21. font-size: 20px;
        22. font-weight: bold;
        23. text-align: center;
        24. text-decoration: none;
        25. color: orange;
        26. /*设置 填充宽度*/
        27. padding: 7px;
        28. }
        29. a:hover,a:active
        30. {
        31. background-color: blue;
        32. }
    • 效果图

下拉菜单

  • 概述

    • 不知大家看到 “下拉菜单” 这四个字时,想到的是不是表单中的下拉菜单,是不是还苦思冥想了一小会儿:“这下拉菜单还能有什么样式?”。不满告诉你,我的第一反应就是这样。那么我现在告诉你,这里的下拉菜单就是一个包含多个条目的块级元素(<div>),紧跟在要展示下拉菜单的元素后边,需要注意的是 展示下拉菜单的元素 和 下拉惨淡的内容需要位域一个 <div>。下拉菜单默认情况下是隐藏,当鼠标移动到展示下拉菜单的元素上时,使下拉菜单显示出来即可。
  • 创建下拉菜单的方法

    • 创建元素

      • 创建最外侧 <div>,包含 展示下拉菜单的元素,和下拉菜单的内容
      • 创建展示下拉菜单的元素
      • 创建下拉菜单的内容
    • 设置元素属性

      • 隐藏下拉菜单内容
      • 设置在 展示下拉菜单的元素的 hover 状态下,展示下拉菜单的内容
  • 示例

    • 代码

      • HTML 文档

        1. <!DOCTYPE html>
        2. <html lang="en">
        3. <head>
        4. <meta charset="UTF-8">
        5. <title>CSS3-04 样式 3</title>
        6. <link rel="stylesheet" href="mystyle.css">
        7. </head>
        8. <body>
        9. <ul>
        10. <li><a href="#">客服管理</a></li>
        11. <li>
        12. <div class="dropdown">
        13. <a href="#" class="dropbtn">财务管理</a>
        14. <div class="dropdown-content">
        15. <a href="#">人员分支</a>
        16. <a href="#">产品类型</a>
        17. <a href="#">资金记录</a>
        18. </div>
        19. </div>
        20. </li>
        21. <li><a href="#">产品管理</a></li>
        22. <li><a href="#">预约管理</a></li>
        23. </ul>
        24. </body>
        25. </html>
      • CSS 文件

        1. ul
        2. {
        3. /*取消 HTML 列表的样式*/
        4. list-style-type: none;
        5. margin: 0;
        6. padding: 0;
        7. }
        8. li
        9. {
        10. /*使用 浮动 实现横向导航栏*/
        11. float: left;
        12. /*设置 导航栏 的样式*/
        13. background-color: rgba(0,0,255,0.5);
        14. }
        15. a:link,a:visited
        16. {
        17. /*增加可点击区域*/
        18. display: block;
        19. width: 150;
        20. /*设置文本样式*/
        21. font-size: 20px;
        22. font-weight: bold;
        23. text-align: center;
        24. text-decoration: none;
        25. color: orange;
        26. /*设置 填充宽度*/
        27. padding: 7px;
        28. }
        29. a:hover,a:active
        30. {
        31. background-color: blue;
        32. }
        33. /*默认隐藏下拉菜单*/
        34. .dropdown-content
        35. {
        36. display: none;
        37. background-color: lightgray;
        38. }
        39. /*显示下拉菜单*/
        40. .dropdown:hover .dropdown-content
        41. {
        42. display: block;
        43. }
    • 效果图

声明

  1. 关于 CSS 的介绍已经差不多了,但是总感觉还是很无力,还是不能随心所欲的控制 HTML 元素。是的,对于 HTML 元素的布局,我们还没涉及到,还不知道如何设置一个 HTML 元素的位置。还是不要着急的好,先回顾一下前几篇 Blog 中的知识,整理整理思路。在接下来的 Blog,我会介绍如何使用 CSS 布局 HTML 元素,敬请期待!Blog 中多有不足之处,望请大家多多指点。谢谢!

CSS3-04 样式 3的更多相关文章

  1. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  2. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  3. 炫酷的CSS3抖动样式:CSS Shake

    CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...

  4. css3-4 css3边框样式

    css3-4 css3边框样式 一.总结 一句话总结: 二.css3边框样式 1.相关知识 边框属性:1.border-width2.border-style3.border-color 边框方位:1 ...

  5. css3-3 css3背景样式

    css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

  6. 一些上流的CSS3图片样式

    直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们.不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器 ...

  7. css3常用样式集锦

    控制线显示0.5px .line:after{ content:""; display:block; position:absolute; width:200%; left:0; ...

  8. [CSS3] 学习笔记-CSS3盒子样式

    1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...

  9. css3的样式讲解-css学习之旅(3)

    css背景 属性:background-color:background-image:url("位置"):background-position:right等,px,百分数:bac ...

  10. CSS3水平翻转样式和background-size兼容问题

    一.水平翻转和垂直翻转:第一种:随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { ...

随机推荐

  1. 关于css中pointer-events属性的怪异行为

    在我的记忆中pointer-events就是用来进行事件穿透的,也就是说,如果给父元素设置了pointer-events:none,那么父元素不再监听鼠标事件事件(类似于touch,click这样的) ...

  2. 深入理解 OWIN 中的 Host 和 Server

    The Open Web Interface for .NET (OWIN),注意单词为大写,之前好像都写成了 Owin,但用于项目的时候,可以写成:Microsoft.Owin.*. OWIN 体系 ...

  3. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  4. java 连接数据库之一个完整的函数

    第一个参数要查询的列名第二个参数是连接的url第三个参数是用户名第四个参数密码第五个参数是执行的命令. 注意,url格式是 jdbc:mysql://localhost:3306/wechat jdb ...

  5. 微软的坑:Url重写竟然会引起IIS内核模式缓存不工作

    万万没有想到!当初为了解决使用负载均衡时记录客户端IP地址的问题,在IIS URL Rewrite Module中增加了一条URL重写规则(详见迁入阿里云后遇到的Request.UserHostAdd ...

  6. 【类库】私房干货.Net数据层方法的封装

    [类库]私房干货.Net数据层方法的封装 作者:白宁超 时间:2016年3月5日22:51:47 摘要:继上篇<Oracle手边常用70则脚本知识汇总>文章的发表,引起很多朋友关注.便促使 ...

  7. .NET Core New csproj 如何发布可执行文件

    一.前言 .NET工具链在最新的Preview3版本中,引入了新的MSBuild项目系统,项目文件又回归了.csproj的XML文件来管理,项目文件.包引用.程序集引用..NET Core工具集.发布 ...

  8. Hibernate框架中Criteria语句

    在Hibernate中有一种查询语句是Criteria查询(QBC查询),今天呢 我们就一个个的详细的跟大家一起探讨Criteria语句的相关知识点 案例前的准备 //插入测试数据,构建数据库 pub ...

  9. ubuntu 12.04 LTS 如何使用更快的更新源

    装好ubuntu系统后的第一见事就是替换自带的更新源,原因是系统自带的源有些在中国访问不了,可以访问的速度又特别慢.幸好国内的一些公司和大学提供了速度不错的更新源.下面介绍如何使用更快的更新源 方法/ ...

  10. WinFrom窗体始终置顶

    调用WindowsAPI使窗体始终保持置顶效果,不被其他窗体遮盖: [DllImport("user32.dll", CharSet = CharSet.Auto)] privat ...