CSS学习笔记－－基础（二）

来源：互联网发布：论文数据造假有人查吗编辑：程序博客网时间：2024/04/29 19:20

在CSS学习笔记－－基础（一）中我们认识了什么是CSS，以及CSS样式设置的一些基本操作和概念，下面我们继续学习CSS的相关的基础知识和概念。

CSS的继承

CSS的某些样式是具有继承性的。CSS的继承是一种规则，它允许样式不仅应用于某个特定的html标签，而且应用于其后代标签及元素。比如以下的代码：

<!DOCTYPE html><html><head><title>CSS的继承</title><meta charset="utf-8"><style type="text/css">p{color: red;}</style></head><body><p>CSS的某些样式是<span>具有继承性的</span>。CSS的继承是一种规则，它允许样式不仅应用于某个特定的html标签，而且应用于其后代标签及元素。</p></body></html>

样式如下：

通过以上效果，我们可以看到，将红色应用于p标签时，这个颜色不仅应用于p标签，还应用于它的子元素文本，即这里的span元素标签。

需要注意的是：不是所有的CSS样式都是具有继承性的，如border: 1px solid red; 就不具有继承性

如下代码及效果：

<!DOCTYPE html><html><head><title>CSS的继承</title><meta charset="utf-8"><style type="text/css">p{border: 1px solid red;}</style></head><body><p>CSS的某些样式是<span>具有继承性的</span>。CSS的继承是一种规则，它允许样式不仅应用于某个特定的html标签，而且应用于其后代标签及元素。</p></body></html>

如上图所示， p标签具有的红色边框，在被span标记的某些文字中，则不会表现出边框的样式，因此它不具有继承性。

CSS样式的权值

有的时候我们为同一个元素设置了不用的CSS样式代码，元素会启用哪个CSS样式呢？浏览器会根据权值来判断使用哪种CSS样式，权值高的就会被优先使用。下面是权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

下面简单看看权值的计算方法：

注意：继承也是有权值的，但是它比较特殊，权值很低，有的文献提出它只有0.1的权限，所以可以直接理解为继承的权值最低。

层叠

我们说了CSS样式是有权值的，浏览器会根据权值的高低选择显示CSS样式，那么如果我们遇到CSS样式的权值相同时，但它们又作用于同一个元素时，怎么办呢？层叠可以解决这个问题。

层叠就是在html文件中对于同一个元素可以有多个CSS样式存在，当有相通权重的样式存在时，会根据这些CSS样式的前后顺序来决定使用哪个CSS样式，处于最后面的CSS样式会被应用（覆盖前面的样式）。

如下代码：

<!DOCTYPE html><html><head><title>CSS的继承</title><meta charset="utf-8"><style type="text/css">p{color: red;}p{color: green;}</style></head><body><p>CSS的某些样式是<span>具有继承性的</span>。CSS的继承是一种规则，它允许样式不仅应用于某个特定的html标签，而且应用于其后代标签及元素。</p></body></html>

上面我们设置了两个CSS样式，一个是红色，一个是绿色，绿色的CSS样式设置在红色之后，所以最后应用了后面绿色的CSS样式。

从上面，我们不难总结出CSS样式优先级：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

就上面的例子，我们需要显示的是绿色，但是由于需要，我们必须显示为红色的CSS样式怎么办呢？这时使用important来解决。

如下代码：

<!DOCTYPE html><html><head><title>CSS的继承</title><meta charset="utf-8"><style type="text/css">p{color: red !important;}p{color: green;}</style></head><body><p>CSS的某些样式是<span>具有继承性的</span>。CSS的继承是一种规则，它允许样式不仅应用于某个特定的html标签，而且应用于其后代标签及元素。</p></body></html>

这时显示的就是红色的文本。

注意： !important 要写在分号之前，也不要忘记写叹号（!）. 另外需要注意的是：当网页制作者不设置CSS样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式。当我们设置样式时，我们需要注意样式的一个优先级顺序：浏览器默认样式 < 网页制作者样式 < 用户自己设置的样式，但 !important是个例外，权值高于用户自己设置的样式。

文字排版－字体

我们可以使用CSS样式为网页中的文字设置字体、字号、颜色等样式属性。如下代码，设置网页中文字的字体：

body{font-family:"宋体";}

注意：设置字体时，不要设置不常用的字体，如果用户本地电脑上没有安装设置的不常用字体，会显示为浏览器默认的字体。一般网页喜欢设置微软雅黑的字体，代码如下：

body{font-family:"微软雅黑";}

或者

body{font-family:"Microsoft Yahei";}

注意：一般情形下，我们使用第二种方法，因为第二种方法设置比第一种方法设置兼容性更好。

文字排版－字号和颜色

没什么可说的，直接上代码：

body{font-size:12px;color:red;}

文字排版－粗体

可以通过设置CSS样式，使文字显示粗体、斜体、下划线、删除线等。下面我们看看粗体的设置，代码如下：

body span{font-weight:bold;}

文字排版－斜体

p a{font-style:italic;}

文字排版－下划线

有时需要从视觉上强调文章的某段或某几段文字，可以使用下划线。

p a{text-decoration:underline;}

文字排版－删除线

经常浏览电商网站时，看见原价灰色标示，并使用删除线从中间划过。代码如下：

.oldPrice{ text-decroation:line-through;}

段落排版－缩进

中文文字的段落前都有空两格文字的习惯，这个特殊的样式可以使用text-indent属性来显示

p{text-indent:2em;}

注意： 2em的意思是文字的2倍大小。

段落排版－行间距（行高）

一段文字，我们希望它文字与文字的上下间的距离隔的远一点，则可以设置它的行间距来实现

p{line-height:1.5em}

段落排版－中文文字间距、字母间距

中文文字间隔、字母间隔，都是指单个字或字母之间的间距，使用letter-spacing实现

h1{letter-spacing:30px;}

单词间距：完整单词之间的间距

h1{word-spacing:30px;}

段落排版－对齐方式

为块状元素的文本、图片设置居中、巨左、居右的样式。

居中显示：

h1{text-align:center;}

居左设置：

h1{text-align:left;}

居右设置：

h1{text-align:right;}

0 0