妙味课堂——HTML+CSS(第三课)

常见标签我已经在上一篇文章中提及，我们做前端设计时，主要也是用这些标签(最常用的)。

然而有一个问题，就是有的标签都有自己的默认样式。试通过如下代码来说明：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <a href="#">a标签（链接、下载、锚点）</a>

    <img src="1.png" alt="" />

    <a href="#"><img src="1.png" alt="" /></a>

    <span>区分样式</span>

    <strong>强调(粗体)</strong>

    <em>强调(斜体)</em>

    <p>段落</p>

    <div>块</div>

    <h1>标题1</h1>

    <h6>标题6</h6>

    <ol>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

    </ol>

    <ul>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

    </ul>

    <dl>

        <dt>定义列表标题</dt>

        <dd>定义列表项</dd>

        <dd>定义列表项</dd>

        <dd>定义列表项</dd>

    </dl>

</body>

</html>

我们在chrome浏览器中运行时，可以通过开发者工具(快捷键Ctrl+Shift+I)来一个个审查元素，来看看它们的默认样式：

<body></body>

发现<body>标签的margin为8px。

<p>段落</p>

发现<p>标签的上下外边距为16px。相反，<div>块</div>没有margin或padding。

<h1>标题1</h1>

发现<h1>标签的上下外边距为21.440px。

<h6>标题6</h6>

发现<h6>标签的上下外边距为27.960px。

<ol></ol>

发现<ol>标签的上下外边距为16px，左内边距为40px。

<ul></ul>

同上，发现<ul>标签的上下外边距也为16px，左内边距也为40px。

<dl></dl>

发现<dl>标签的上下外边距为16px。

<dd>定义列表项</dd>

发现<dd>标签的左外边距为40px。

至此所有有默认样式的标签，我们已分析完了。注意一点：上下外边距会叠压。

那么为了兼容性，凡是浏览默认的样式，都不要使用，所以重置默认样式，引出——默认样式重置(css reset)。css reset后的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*默认样式重置(css reset)*/

        body,p,h1,h2,h3,h4,h5,h6,dl,dd{

            margin: 0;

            font-size: 12px; /* 中文字体大小的最小值 */

            /* font-family: xx; 也可以设置字体 */

        }

        ol,ul {

            list-style: none; /* 去除列表样式 */

            padding: 0;

            margin: 0;

        }

        a {

            text-decoration: none;

        }

        img {

            border: none; /* 在IE6中<a>标签包裹的<img>标签显示时有边框，故清除 */

        }

        /*

        *代表所有页面中的标签，也可以如下重置默认样式，但一般不这样做，

        依然一个一个标签重置

        * {

            margin: 0;

            padding: 0;

        }

        */

    </style>

</head>

<body>

    <a href="#">a标签（链接、下载、锚点）</a>

    <img src="1.png" alt="" />

    <a href="#"><img src="1.png" alt="" /></a>

    <span>区分样式</span>

    <strong>强调(粗体)</strong>

    <em>强调(斜体)</em>

    <p>段落</p>

    <div>块</div>

    <h1>标题1</h1>

    <h6>标题6</h6>

    <ol>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

    </ol>

    <ul>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

    </ul>

    <dl>

        <dt>定义列表标题</dt>

        <dd>定义列表项</dd>

        <dd>定义列表项</dd>

        <dd>定义列表项</dd>

    </dl>

</body>

</html>

块元素和内嵌元素

内嵌，又叫内联、行内属性标签。常用的一般有以下几种：

<a>
<span>
<strong>
<em>

内嵌元素的特性：

默认同行可以继续跟同类型标签
内容撑开宽度
不支持宽高
不支持上下的margin和padding
代码换行被解析

块属性标签。常用的一般有以下几种：

<p>
<div>
<h1>~<h6>
<ol>-<li>
<ul>-<li>
<dl>-<dt>-<dd>

块元素的特性：

默认独占一行显示
没有宽度时，默认撑满一排
支持所有css命令

例，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*默认样式重置(css reset)*/

        body,p,h1,h2,h3,h4,h5,h6,dl,dd{

            margin: 0;

            font-size: 12px;

            /*font-family: xx;*/

        }

        ol,ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        a {

            text-decoration: none;

        }

        img {

            border: none;

        }

        span,div {

            background: blue;

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

    <span>区分样式</span>

    <span>区分样式</span>

    <span>区分样式</span>

    <div>块</div>

    <div>块</div>

    <div>块</div>

</body>

</html>

图示：

接下来验证内嵌元素不支持上下的margin和padding！！！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*默认样式重置(css reset)*/

        body,p,h1,h2,h3,h4,h5,h6,dl,dd{

            margin: 0;

            font-size: 12px;

            /*font-family: xx;*/

        }

        ol,ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        a {

            text-decoration: none;

        }

        img {

            border: none;

        }

        span,div {

            background: blue;

            width: 100px;

            height: 100px;

        }

        span {

            margin: 100px;

        }

    </style>

</head>

<body>

    <span>区分样式</span>

    <span>区分样式</span>

    <span>区分样式</span>

    <div>块</div>

    <div>块</div>

    <div>块</div>

</body>

</html>

从上图明显可见内嵌元素是不支持margin的上下边距的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*默认样式重置(css reset)*/

        body,p,h1,h2,h3,h4,h5,h6,dl,dd{

            margin: 0;

            font-size: 12px;

            /*font-family: xx;*/

        }

        ol,ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        a {

            text-decoration: none;

        }

        img {

            border: none;

        }

        span,div {

            background: blue;

            width: 100px;

            height: 100px;

        }

        span {

            padding: 100px;

            background: none;

        }

    </style>

</head>

<body>

    <span>区分样式</span>

    <span>区分样式</span>

    <span>区分样式</span>

    <div>块</div>

    <div>块</div>

    <div>块</div>

</body>

</html>

从上图明显可见内嵌元素是不支持padding的上下边距的。

最后验证内嵌元素代码换行被解析！！！注意：页面中空格(间隙)的大小为页面中文字大小的一半。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*默认样式重置(css reset)*/

        body,p,h1,h2,h3,h4,h5,h6,dl,dd{

            margin: 0;

            font-size: 12px;

            /*font-family: xx;*/

        }

        ol,ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        a {

            text-decoration: none;

        }

        img {

            border: none;

        }

        span,div {

            background: blue;

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

    <span>区分样式</span><!-- 换行 -->

    <span>区分样式</span>

    <span>区分样式</span>

    <div>块</div>

    <!-- 换行 -->

    <div>块</div><!-- 换行 -->

    <div>块</div>

</body>

</html>

块和内嵌的转换

使内联元素具备块属性标签的特性

display：block        显示为块

　使行块属性标签具备内联元素的特性

display：inline        显示为内嵌

例，块和内嵌的转换用的不是特别多。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*默认样式重置(css reset)*/

        body,p,h1,h2,h3,h4,h5,h6,dl,dd{

            margin: 0;

            font-size: 12px;

            /*font-family: xx;*/

        }

        ol,ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        a {

            text-decoration: none;

        }

        img {

            border: none;

        }

        span,div {

            background: blue;

            width: 100px;

            height: 100px;

        }

        /*

        用的不是特别多！！！

        display: block; 显示为块

        display: inline; 显示为内嵌

        */

        span {

            display: block;

        }

        div {

            display: inline;

        }

    </style>

</head>

<body>

    <span>区分样式</span>

    <span>区分样式</span>

    <span>区分样式</span>

    <div>块</div>

    <div>块</div>

    <div>块</div>

</body>

</html>

<img>标签非常特殊，要单独拿出来说，它既不是内嵌，也不是块，它是一行内的块(inline-block)。

例，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*默认样式重置(css reset)*/

        body,p,h1,h2,h3,h4,h5,h6,dl,dd{

            margin: 0;

            font-size: 12px;

            /*font-family: xx;*/

        }

        ol,ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        a {

            text-decoration: none;

        }

        img {

            border: none;

        }

    </style>

</head>

<body>

    <!--

    inline-block

    一行内的块

     -->

    <img src="1.png" alt="" />

    <img src="1.png" alt="" />

</body>

</html>

可见，<img>标签有内嵌的特性：同排可以继续跟同类的标签。

例，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*默认样式重置(css reset)*/

        body,p,h1,h2,h3,h4,h5,h6,dl,dd{

            margin: 0;

            font-size: 12px;

            /*font-family: xx;*/

        }

        ol,ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        a {

            text-decoration: none;

        }

        img {

            border: none;

        }

        img {

            width: 60px;

            height: 200px;

        }

    </style>

</head>

<body>

    <!--

    inline-block

    一行内的块

     -->

    <img src="1.png" alt="" />

    <img src="1.png" alt="" />

</body>

</html>

从上图可见，它又支持宽和高，即块的特性：支持所有css命令。

inline-block的特点：

块在一行显示
行内属性标签支持宽高
没有宽度的时候内容撑开宽度

例，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*默认样式重置(css reset)*/

        body,p,h1,h2,h3,h4,h5,h6,dl,dd{

            margin: 0;

            font-size: 12px;

            /*font-family: xx;*/

        }

        ol,ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        a {

            text-decoration: none;

        }

        img {

            border: none;

        }

        span,div {

            background: blue;

            width: 100px;

            height: 100px;

            display: inline-block;

        }

    </style>

</head>

<body>

    <span>区分样式</span><!-- 页面中空格(间隙)的大小为页面中文字大小的一半 -->

    <span>区分样式</span>

    <span>区分样式</span>

    <div>块</div>

    <div>块</div>

    <div>块</div>

</body>

</html>

练习：做出如下图所示的效果。

分析：

分析结构（div 包一排a）
a标签支持宽高，并且在一排显示
有hover效果
当前状态不能点！

代码如下：(有关line-height的深入知识请移步我的《CSS深入理解之line-height》)

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*默认样式重置(css reset)*/

        body,p,h1,h2,h3,h4,h5,h6,dl,dd{

            margin: 0;

            font-size: 12px;

        }

        ol,ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        a {

            text-decoration: none;

        }

        img {

            border: none;

        }

        .pages {

            width: 600px;

            height: 60px;

            background: #e8e8e8;

            margin: 90px auto;

            text-align: center;

        }

        .pages a {

            background: #fff;

            border: 1px solid #cdcdcd;

            color: #333333;

            padding: 0 8px 0 9px;

            /*height: 28px;*/

            line-height: 28px;/* line-height的值跟height的值一样，字体就会垂直居中 */

            display: inline-block;

        }

        .pages a:hover {

            border-color: red;

            color: red;

        }

        .pages .activied {

            font-weight: bold;

            background: #fcf9ea;

            cursor: text;

        }

        .pages .activied:hover {

            border-color: #cdcdcd;

            color: #333333;

        }

    </style>

</head>

<body>

    <div class="pages">

        <a href="#">上一页</a>

        <a href="#" class="activied">1</a>

        <a href="#">2</a>

        <a href="#">3</a>

        <a href="#">4</a>

        <a href="#">5</a>

        <a href="#">6</a>

        <a href="#">7</a>

        <a href="#">8</a>

        <a href="#">9</a>

        <a href="#">10</a>

        <a href="#">...87</a>

        <a href="#">下一页</a>

    </div>

</body>

</html>

height与line-height在一起时，其实是多余的，尽管line-height的值跟height的值一样，字体就会垂直居中。

cursor：指针样式（规定要显示的光标的类型）

cursor：pointer(默认类型) | text | move ……

cursor:url(hand.cur),pointer;(如果图片不存在，则光标使用默认类型)，例：

body {

    height: 1500px;

    cursor: url(hand.cur),pointer;

}

一道雅虎面试题：

这么一段HTML，请挑毛病：

<P>&nbsp;&nbsp;哥写的不是HTML，是寂寞。<br><br>&nbsp;&nbsp;我说：<br>不要迷恋哥，哥只是一个传说

答：

标准：

<p>哥写的不是HTML，是寂寞。</p>

<p>我说：<br/>不要迷恋哥，哥只是一个传说</p>

最佳：

<p>哥写的不是<abbr title="Hypertext Markup Language">HTML</abbr>，是寂寞。</p>

<p><cite>我</cite>说：<br/><q>不要迷恋哥，哥只是一个传说</q></p>

<abbr>：定义缩写。

title：元素的额外信息，可用于任何标签上。

<q>：定义短的引用。

<cite>：定义引用(citation)。详情请参看http://www.w3school.com.cn/tags/index.asp。

前端规范：

所有书写均在英文半角状态下的小写
id、class必须以字母开头
所有标签必须闭合
html标签用tab键缩进
属性值必须带引号
/* css注释 */
ul/li，ol/li，dl/dt/dd拥有父子级关系的标签
p，dt，h标签里面不能嵌套块属性标签
a标签不能嵌套a
内联元素不能嵌套块

妙味课堂——HTML+CSS(第三课)的更多相关文章

妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
妙味课堂——HTML+CSS(第四课)(一)
这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示使内嵌支持宽高换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...
妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
妙味课堂——HTML+CSS(第二课)
常见标签——img标签 <img src="图片地址" alt="图片名"/> alt属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...
妙味课堂:JavaScript初级--第12课：json与数组
1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...

随机推荐

linux命令行下使用R语言绘图
系统:centos 6.4 64bit 环境安装参考:http://hi.baidu.com/solohac/item/4a18e78f1bef9b5825ebd99c 在R语言中可以使用png()等 ...
verilog简易实现CPU的Cache设计
verilog简易实现CPU的Cache设计该文是基于博主之前一篇博客http://www.cnblogs.com/wsine/p/4661147.html所增加的Cache,相同的内容就不重复写了 ...
Webservice初接触
公司用到了Powerbuilder+Webserice的技术,能将数据窗口中对数据库的请求,以SQL语句的形式,发到Webservice中,然后由Webservice完成对数据库的请求,并将结果返回给 ...
【AFNetworking】AFNetworking源码阅读（一）
1. 前言 2. iOS Example代码结构 3.AFNetworkActivityIndicatorManager 4. UIRefreshControl+AFNetworking 5. AFN ...
WIN7笔记本利用命令AP热点
第一步:以管理员身份运行命令提示符:开始”---搜索栏输入“cmd----右键以“管理员身份运行”自己随便命名,第二步:运行命令:netsh wlan set hostednetwork mode=a ...
转载：centos上yum安装apache+php+mysql等
1. 更新系统内核到最新. [root@linuxfei ~]#yum -y update 系统更新后,如果yum安装时提示错误信息,请执行以下命令修复. [root@linuxfei ~]#rpm ...
Asp.net将图片转为Base64编码
protected void Page_Load(object sender, EventArgs e) { Image img = new Bitmap(Server.MapPath("/ ...
Careercup - Google面试题 - 4847954317803520
2014-05-08 21:33 题目链接原题: largest number that an int variable can fit given a memory of certain size ...
低功耗（LPS）VLSI 电路设计中的一些注意事项
1. Non-Retention RAM/Register: 如果使用的RAM/Register本身在Power-Down状态下不可以保存自身的状态,那么一定要保证它们在power-up的时候会进行r ...
用PHP对数据库数据进行删除
显示页面: <body> <table width="100%" border="1" cellpadding="0" c ...

妙味课堂——HTML+CSS(第三课)

妙味课堂——HTML+CSS(第三课)的更多相关文章

随机推荐

热门专题