Home > Article > Web Front-end > CSS3-04 样式 3_html/css_WEB-ITnose

CSS3-04 样式 3_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:18:511193browse

前言

关于 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 文档

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3-04 样式 3</title>    <link rel="stylesheet" href="mystyle.css"></head><body>    <div>        <a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/" title="博客">世俗孤岛</a>    </div></body></html>

CSS 文件

div{    margin: 100px 100px;    width: 120px;    height: 26px;    text-align: center;    font-size: 24px;    background-color:lightpink;}a:link {text-decoration: none;}a:hover {text-decoration: underline;}a:active {text-decoration: overline;}

效果图

列表

概述

在 HTML 中，我们可以使用列表标签（

、

）的 type 属性来设置列表的标记类型。在 CSS 中我们可以更加灵活的控制列表的标记。

可控制的列表项标记样式

示例

代码

HTML 文档

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3-04 样式 3</title>    <link rel="stylesheet" href="mystyle.css"></head><body>    <ul id="normal">        <li>First item</li>        <li>Second item</li>        <li>Third item</li>    </ul>    <ul id="image">        <li>First item</li>        <li>Second item</li>        <li>Third item</li>    </ul></body></html>

CSS 文档

#normal{    list-style-type: square;}#image{    list-style-image: url("item_tag.png");}

效果图

表格

概述

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 文档

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3-04 样式 3</title>    <link rel="stylesheet" href="mystyle.css"></head><body>    <table>        <caption>Tabel 1-1</caption>        <tr>            <th>属性</th>            <th>含义</th>            <th>备注</th>        </tr>        <tr>            <td>border</td>            <td>边框</td>            <td class="red">注意 border-collapse 属性</td>        </tr>        <tr>            <td>padding</td>            <td>填充</td>            <td class="red">随便玩</td>        </tr>    </table></body></html>

CSS 文件

table{    width: 450px;    height: 200px;}table,th,td{    border: 2px solid pink;    border-collapse: collapse;}th{    background-color: lightgray;}td{    padding-left: 30px;}.red {    color: red;    text-align: left;    vertical-align: top;}caption{    margin-top: 10px;    caption-side: bottom;}

效果图

导航栏

概述

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

导航栏的种类

垂直导航栏

垂直导航栏就是具备指定样式的 HTML 列表

水平导航栏

使用内联实现

如：display:inline;

使用浮动实现

如：float:left;

示例

代码

HTML 文档

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3-04 样式 3</title>    <link rel="stylesheet" href="mystyle.css"></head><body>    <ul>        <li><a href="#">客服管理</a></li>        <li><a href="#">财务管理</a></li>        <li><a href="#">产品管理</a></li>        <li><a href="#">预约管理</a></li>    </ul></body></html>

CSS 文件

ul    {        /*取消 HTML 列表的样式*/        list-style-type: none;        margin: 0;        padding: 0;        /*设置 导航栏 的样式*/        background-color: rgba(0,0,255,0.5);    }    li    {        /*使用 浮动 实现横向导航栏*/        float: left;    }    a:link,a:visited    {        /*增加可点击区域*/        display: block;        width: 150;        /*设置文本样式*/        font-size: 20px;        font-weight: bold;        text-align: center;        text-decoration: none;        color: orange;        /*设置 填充宽度*/        padding: 7px;    }    a:hover,a:active    {        background-color: blue;    }

效果图

下拉菜单

概述

不知大家看到 “下拉菜单” 这四个字时，想到的是不是表单中的下拉菜单，是不是还苦思冥想了一小会儿：“这下拉菜单还能有什么样式？”。不满告诉你，我的第一反应就是这样。那么我现在告诉你，这里的下拉菜单就是一个包含多个条目的块级元素（

），紧跟在要展示下拉菜单的元素后边，需要注意的是展示下拉菜单的元素和下拉惨淡的内容需要位域一个

。下拉菜单默认情况下是隐藏，当鼠标移动到展示下拉菜单的元素上时，使下拉菜单显示出来即可。

创建下拉菜单的方法

创建元素

创建最外侧

，包含展示下拉菜单的元素，和下拉菜单的内容

创建展示下拉菜单的元素

创建下拉菜单的内容

设置元素属性

隐藏下拉菜单内容

设置在展示下拉菜单的元素的 hover 状态下，展示下拉菜单的内容

示例

代码

HTML 文档

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3-04 样式 3</title>    <link rel="stylesheet" href="mystyle.css"></head><body>    <ul>        <li><a href="#">客服管理</a></li>        <li>            <div class="dropdown">                <a href="#" class="dropbtn">财务管理</a>                <div class="dropdown-content">                    <a href="#">人员分支</a>                    <a href="#">产品类型</a>                    <a href="#">资金记录</a>                </div>            </div>        </li>        <li><a href="#">产品管理</a></li>        <li><a href="#">预约管理</a></li>    </ul></body></html>

CSS 文件

ul{    /*取消 HTML 列表的样式*/    list-style-type: none;    margin: 0;    padding: 0;}li{    /*使用 浮动 实现横向导航栏*/    float: left;    /*设置 导航栏 的样式*/    background-color: rgba(0,0,255,0.5);}a:link,a:visited{    /*增加可点击区域*/    display: block;    width: 150;    /*设置文本样式*/    font-size: 20px;    font-weight: bold;    text-align: center;    text-decoration: none;    color: orange;    /*设置 填充宽度*/    padding: 7px;}a:hover,a:active{    background-color: blue;}/*默认隐藏下拉菜单*/.dropdown-content {    display: none;    background-color: lightgray;}/*显示下拉菜单*/.dropdown:hover .dropdown-content{    display: block;}

效果图

声明

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

CSS3-04 样式 3_html/css_WEB-ITnose

Related articles