谷哥的小弟学前端(05)——CSS基础知识（3）

来源：互联网发布：SQL group by 1 2 3 编辑：程序博客网时间：2024/05/11 03:52

探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础
Android多分辨率适配框架（2）— 原理剖析
Android多分辨率适配框架（3）— 使用指南

自定义View系列教程00–推翻自己和过往，重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

通过前面的几篇文章，我们已经对HTML和CSS有了直观的认识和简单的了解；比如HTML标签的使用，CSS样式的设置，CSS选择器的使用。在此基础之上我们来进一步地认识它们的特性从而更好地学习和掌握相关开发技能。

HTML标签的分类

在之前的文章中，我们提到：按照标签是否有结束标签可以将HTML标签分为单标签和双标签。在此，我们按照标签显示方式的不同将HTML标签分为：块级标签，行内标签，行内块标签；现对其分别介绍。

块级标签
典型的块级标签有：<p></p>，<div></div>，<h1></h1>，<form></form>，<ul></ul>
它们具有如下特点：
- 块级标签独占一行显示(不论其实际宽度是否有屏幕那么宽)
- 块级标签的高度、宽度、行高以及顶和底边距都可设置
- 当块级标签发生嵌套时候如果子标签未设置宽度，那么该子标签的宽度为其父标签的宽度
行内标签
典型的行内标签有：<span></span>，<strong></strong>，<label></label>，<a></a>，<br>
它们具有如下特点：
- 行内标签不会独占一行显示，会和其他标签在同一行显示
- 不能直接设置行内标签的高度、宽度、行高以及顶和底边距
- 行内标签的宽度就是它包含的文字或图片的宽度
行内块标签
典型的行内标签有：<img>，<input>
它们具有如下特点：
- 行内块标签在同一行显示
- 可以设置行内块标签的高度、宽度

在某些需求下，我们可以利用display实现块级标签、行内标签、行内块标签的相互转换。请看如下示例：

将行内标签转换为块级标签

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>标签的转换</title>        <style type="text/css">            a{                width: 300px;                height: 300px;                font-size: 30px;                font-family: 宋体;                color: red;                background-color: pink;                display: block;             }        </style>    </head>    <body>        <a href="http://blog.csdn.net/lfdfhl">谷哥的小弟</a>        <div>这是我的博客</div>    </body></html>

运行后效果，请参见下图

这里写图片描述

在此，在标签选择器a中利用了display: block将标签<a></a>从行内标签转换成了块级标签。所以，点击整个粉红色区域都可以实现超链接。换句话说：原本的<a></a>标签是不能指定其宽高的，但是在此通过display: block就将其转换成了块级标签从而扩大了超链接的点击区域。

将行内标签转换为行内块标签

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>标签的转换</title>        <style type="text/css">            a{                width: 300px;                height: 300px;                font-size: 30px;                font-family: 宋体;                color: red;                background-color: pink;                display: inline-block;              }        </style>    </head>    <body>        <a href="http://blog.csdn.net/lfdfhl">谷哥的小弟</a>        <a href="http://blog.csdn.net/lfdfhl">这是我的博客</a>        <div>欢迎大家的访问</div>    </body></html>

运行后效果，请参见下图

这里写图片描述

在此，在标签选择器a中利用了display: inline-block将标签<a></a>从行内标签转换成了行内块标签。既然是行内块标签，那么就可以为其设置宽高了，并且可以将它们放在同一行显示了。所以，点击整个粉红色区域都可以实现超链接。

将块级标签转换为行内标签

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>标签的转换</title>        <style type="text/css">            div{                width: 300px;                height: 300px;                font-size: 30px;                font-family: 宋体;                color: red;                background-color: pink;                display: inline;            }        </style>    </head>    <body>         <div>谷哥的小弟 </div>         <div>http://blog.csdn.net/lfdfhl</div>    </body></html>

运行后效果，请参见下图

这里写图片描述

在此，在标签选择器div中利用了display: inline将标签<div></div>从块级标签转换成了行内标签。既然是行内标签那么就可以将两个<div></div>放到同一行显示了，与此同时为其设置的宽和高也就无效了。

CSS的特性

在看完HTML标签的分类之后，我们来继续介绍CSS的特性

CSS的层叠性

CSS层叠性指的是多种CSS样式的叠加。例如，当使用内嵌式CSS样式定义<div></div>字体大小为12px，又在<div></div>内使用style设置了颜色为红色，那么这个标签中的文本最终将显示为12px红色，即这两种样式产生了叠加。
如果两个不同的选择器中指定了同一个属性，也就是说属性的设置发生了冲突；那么在标签中同时使用这两个选择器时会有什么效果呢？

请看如下示例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>CSS特性</title>        <style type="text/css">            .firstcss{                font-size: 40px;                color: red;            }            .secondcss{                font-size: 50px;                color: yellow;            }        </style>    </head>    <body>         <p class="secondcss firstcss">谷哥的小弟 </p>         <p>http://blog.csdn.net/lfdfhl</p>    </body></html>

在这段代码中，我们为<p></p>标签同时设置了两个类选择器secondcss和firstcss；程序运行后我们可以发现：secondcss起作用而firstcss没有起作用。

这是为什么呢？

在这两个类选择器重定义了相同的属性font-size和color并且它们作用于同一个<p></p>标签；此时这些属性发生了重叠。在这种情况下系统会采用后定义的属性而忽略了先定义的属性。

小结如下：

CSS的样式层叠性与样式的调用顺序没有关系，而与样式的定义顺序有关。

CSS的继承性

CSS样式的继承性指的是当标签存在嵌套关系时子标签会继承父标签的某些样式，比如文本颜色和字号

请看如下示例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>CSS特性</title>        <style type="text/css">            div{                font-size: 50px;                color: pink;            }        </style>    </head>    <body>         <div>            <p>谷哥的小弟</p>         </div>         <p>http://blog.csdn.net/lfdfhl</p>    </body></html>

在这段代码中，我们利用div标签选择器设置了字体大小和颜色；在<div></div>中嵌套了<p></p>程序运行后我们可以发现：<p></p>中的文本字体大小为50px且颜色为pink。这就是CSS样式的继承性。

关于CSS样式的继承性有两个特殊的地方需要注意：

由于浏览器的默认设置<a></a>不能继承父元素中的文字颜色
由于浏览器的默认设置<h1></h1>不能继承父元素中的文字大小

CSS的优先级

在定义CSS样式时常出现两个或更多规则应用在同一标签上，此时应该注意它们的优先级，详列如下：

系统默认样式 < 标签选择器 < 类选择器< ID选择器 < 行内样式 < !important

其中，系统默认样式的优先级最低而!important的优先级最高。

请看如下示例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>CSS的优先级</title>        <style type="text/css">            .firstcss{                font-size: 50px;                color: pink;            }            #secondcss{                font-size: 60px;                color: red;            }        </style>    </head>    <body>        <p class="firstcss" id="secondcss">谷哥的小弟</p>        <p>http://blog.csdn.net/lfdfhl</p>    </body></html>

在该示例中定义了类选择器firstcss和ID选择器secondcss，这两个选择器内均设置了font-size和color属性；并且在<p></p>标签中同时使用这两个选择器。但是，最后其作用的是secondcss；这就是ID选择器的优先级高于类选择器的具体体现。

CSS的伪类

CSS伪类用于向某些选择器添加特殊的效果。在此介绍与<a></a>超链接有关的伪类。

请看如下示例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>CSS的伪类</title>        <style type="text/css">            a:link{                 color: red;                 text-decoration: none;               }              a:visited{                color: pink;             }             a:hover{                 color: green;                 text-decoration: underline;                }            a:active{                 color: black;            }        </style>    </head>    <body>        <a href="http://blog.csdn.net/lfdfhl">谷哥的小弟</a>    </body></html>

代码详解如下：

利用a:link{}设置了超链接的颜色，它的作用等同于a{}选择器；但是某些浏览器不支持a:link{}的写法导致其设置失效
利用a:visited{}设置超链接访问过后的样式
利用a:hover{}设置鼠标放到超链接上时的样式
利用a:active{}设置超链接被点击瞬间的样式

在此请注意：请按照先后顺序实现a:visited{}和a:hover{}以及a:active{}从而确保浏览器显示预计的效果

2 0