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

随机推荐

ios 中使用SBJson拼接和解析json
1.ios解析json 使用开源json包,项目地址: http://stig.github.com/json-framework/ NSData * responseData = [res ...
关于开始学习Leetcode的第一帖
从明天开始,白天在实验室完成工作,晚上来图书馆换个环境去学习算法数据结构等计算机基础性的技能.在LeetCode这个平台上做题. 现在感觉自己在算法和数据机构这方面实在是太薄弱了,需要慢慢的捡起来来, ...
[备忘]Asp.net MVC 将服务端Model传递的对象转为客户端javascript对象
<script type="text/javascript"> var jsObject = @Html.Raw(Json.Encode(Model.Objects)) ...
php捕获网络页面
<?php $url = 'http://jwzx.cqupt.edu.cn/pubYxKebiao.php?type=zy&yx=06'; $html = file_get_conte ...
UEFI双硬盘安装win8.1和Ubuntu14.04
UEFI双硬盘安装win8.1和Ubuntu14.04 安装环境 UEFI启动模式双GPT硬盘一个ssd 一个hdd 笔记本已安装win8.1 硬盘启动顺序为: U盘 ssd hdd 光驱安装方 ...
一、IRIG-B 概念
参考:http://baike.baidu.com/view/3601618.htm http://wenku.baidu.com/view/7956cd29bd64783e09122bf1.html ...
一、JPEG文件格式-----压缩框架
JPEG文件格式 http://wenku.baidu.com/view/4856d31dc281e53a5802ff0d.html 标记名 FF E0 ...
11.2Daily Scrum
人员任务分配完成情况明天任务分配王皓南做文件的网页和数据库连接,任务编号771 实现视频上传的功能申开亮实现视频浏览的功能,任务编号772 实现视频浏览的功能王宇杰后台测试,任务编号7 ...
cnblogs体验
用博客园可以让我更好的关注我们班同学的情况,通过关注他们,浏览他们发布的博客,学习到了很多,比如不同的设计思想,良好的变成习惯,变量命名,缩进,注释等,而且自己不会的,可以帮助自己有一些想法,是自 ...
电梯调度--c++--软件工程
一.设计思路 (1)将乘客要去的楼层数存起来. (2)假设yi为乘客要爬楼层数之和,yi=n1*|(n1-ni)|+n2*|(n2-ni)|+..+n18*|(n18-ni)| (3)比较y1到y18 ...

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

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

随机推荐

热门专题