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

最新推荐文章于 2024-07-31 14:26:34 发布

搬砖程序员

最新推荐文章于 2024-07-31 14:26:34 发布

阅读量727

点赞数

分类专栏： HTML笔记 CSS笔记文章标签： css html 继承文字排版权值

本文链接：https://blog.csdn.net/svendson/article/details/52054613

版权

HTML笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS笔记

5 篇文章 0 订阅

订阅专栏

在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;
}