CSS3-04 样式 3

前言

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

    |属性|含义|
    |list-style-type|列表项标记的类型|
    |list-style-image|设置列表项的标记为图片|
    |list-style-position|列表项标记的位置|

  • 示例

    • 代码

      • 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;
        	}
        
    • 效果图

下拉菜单

  • 概述

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

    • 创建元素

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

      • 隐藏下拉菜单内容
      • 设置在 展示下拉菜单的元素的 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 中多有不足之处,望请大家多多指点。谢谢!
posted @ 2016-05-07 08:59  世俗孤岛  阅读(713)  评论(0编辑  收藏  举报