前言

关于 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 中多有不足之处，望请大家多多指点。谢谢！

转载于:https://www.cnblogs.com/theDesertIslandOutOfTheWorld/p/5466460.html

CSS3-04 样式 3相关推荐

css3-3 css3背景样式
css3-3 css3背景样式一.总结一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...
一些上流的CSS3图片样式
译自:CSS3 Image Styles 中文:CSS3图片样式请尊重版权,转载请注明来源,多谢-- 直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radiu ...
CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
『总结』CSS/CSS3常用样式与web移动端资源
css/css3常用样式强制文本显示单行显示语法:white-space:nowrap; 让一段文字在固定宽度在一行显示,最后一个字符为省略标记(...),css样式如下 div{white-sp ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
6种纯css3徽章样式
下载地址 6种纯css3徽章样式 dd:
CSS3 属性样式总结记录（图文）
CSS3 属性样式总结记录 1 .边框-背景 border-image 设置所有边框图像的速记属性. 3 border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3 box-s ...
educoder实训平台----CSS3背景样式
educoder实训平台----CSS3背景样式第1关:CSS背景相关的概念 DACAD 第2关:CSS-背景色的设置 <!DOCTYPE html> <html> < ...
可以自动撑起的html样式,好好玩：CSS3抖动样式CSS Shake让你的网页酷炫起来
之前在一些网站发现了一个好玩的样式,就是鼠标移到网站LOGO上,logo会自动抖动起来,显得非常炫酷.我也是十分感兴趣.自从本站新添加了一个视觉设计的分类之后,我也是想起来有个抖动CSS样式CSS S ...
CSS3字体样式及高级特效
CSS3字体体现在内部样式<style></style> @font-face { font-family: 必需.规定字体的名称 src: 必需.定义字体文件所在路径 fo ...

CSS3-04 样式 3

前言

链接

列表

表格

导航栏

下拉菜单

声明

CSS3-04 样式 3相关推荐

最新文章

热门文章