妙味课堂——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视教第一部分 ...

随机推荐

swift学习初步（三）--控制流操作
在上一篇博客里面,我谈到了swift里面的一些基本类型以及相关的操作,相信你看了之后一定会觉得其实swift也不难嘛.好吧,这篇博客里面要谈的一些高级操作,可能会让你有点头疼了. 好了,废话不多说了, ...
条款7：为多态基类声明virtual析构函数
C++明确指出:当派生类对象是由一个基类指针释放的,而基类中的析构函数不是虚函数,那么结果是未定义的.其实我们执行时其结果就是:只调用最上层基类的析构函数,派生类及其中间基类的析构函数得不到调用. # ...
DebugViewHierarchy
DebugViewHierarchy(视图调试)是XCode6新出的一项功能,它可以让开发者在程序运行时,动态的查看当前界面的显示情况,包括视图的层次,控件的大小和位置,而且会以3D效果显示当前视图的 ...
WPF多窗口传参解决方案
在WPF中,我们的常常涉及到多个窗口之间传递参数的问题,那么该怎么传呢? 答:在窗口的构造函数中添加想要传递的参数.(我表达不好,请看下面代码.) 在主窗口中单机button打开一个新的子窗口. // ...
团队作业（NABC的分析）
我们的团队课题是游戏:躲避小球. 我认为它其中的一个优点是:丰富用户的短暂闲暇时间,使用户得到身心的放松下面我将从N,A,B,C四个方面简述理由 N(需求):现代社会逐渐步入快节奏时代,大众生活压力 ...
elasticsearch中的mapping映射配置与查询典型案例
elasticsearch中的mapping映射配置与查询典型案例 elasticsearch中的mapping映射配置示例比如要搭建个中文新闻信息的搜索引擎,新闻有"标题".&q ...
django Forgienkey字段在前台用js做处理
在我做的项目中有个选择省城市的选项,这两个字段的关系是一对多的关系class Province(models.Model): # 省会 name = models.CharField(max ...
django构建blog--建立数据库部分+admin部分（eclipse+pydev）
本文介绍的是在eclipse+pydev 平台下,利用django 搭建blog的第1部分:建立数据库+admin部分步骤一:创建myweb项目+blog应用 1. Eclipse下新建一个djan ...
在C#中创建word文档
在下面文档中首先引用word组件:Microsoft.Office.Interop.Word 在头文件中写上 using Word = Microsoft.Office.Interop.Word; ...
shell编程之数组和关联数组
一.数组类似c语言的数组 1.两种赋值方式可以整体定义数组:ARRAY_NAME=(value0 value1 value2 value3 ...) 此时数组的下标默认是从0开始的还可以单独定义数 ...

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

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

随机推荐

热门专题