三 CSS基础入门

CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS语法

CSS实例

每个CSS样式由两个组成部分：选择器和声明（属性和属性值），每个声明之后用分号结束。

CSS的几种引入方式

行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red; font-size: 20px">Hello world.</p>

内部样式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
            color: #4cae4c;
            font-size: 20px;
        }
    </style>
</head>
<body>
<p >Hello world.</p>
</body>
</html>

外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>
rel:指定引入样式表；href:指定了CSS样式表位置。

导入外部样式文件

在内部样式表<style>标记中，使用@import导入一个外部样式表，具体格式：@import“CSS样式表”；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*导入外部CSS样式表*/
       @import "../06lianxi/05-mi.com/css/mi.css";
    </style>
</head>
<body>

</body>
</html>

选择器的优先级

CSS优先性

注：内联样式即为行内样式！

!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认属性值

!import方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!import会使样式文件混乱不易维护。

万不得已可以使用!import

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a1 {
            color: red;
        }
        .a2 {
            color: green!important;
        }
    </style>
</head>
<body>
<P id="a1" class="a2" style="color: black">!important优先性最高</P>
<P ></P>
</body>
</html>

CSS继承性

继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代；

例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {
  color: red;
}

此时页面上所有标签都会继承body的字体颜色。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {
  color: green;
}

继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。

在CSS中以text-、font-、line-开头的属性以及color属性都可以继承

但有一些属性不能被继承，如：<a>标签颜色，必须对<a>标签本身设置、<h>标签字体不能继承，必须对<h>标签本身进行设置、

border、margin、padding、background等。