CSS 语法

建议学习时长： 45分钟
学习方式：深入

学习目标

CSS 由选择器和声明两部分组成。声明由属性和值组成。

选择器用来指定设置外观的HTML元素。声明用来设置选择器指定元素的外观的具体内容。
看下面的代码：

.intro{
    width: 100px;
    height: 200px;
    color: red;
    background-color:green;
}

其中

上面的代码，将所有类名中有 intro 的元素设置这样的外观：宽 100像素，高 200像素，字体颜色是红色，背景色是绿色。

页面中写样式有3种方式。

方式1: 写在一个单独的文件里
写在一个文件里的样式叫做外部样式表。
这样的文件的后缀名为css。
例如,mystle.css文件中的内容

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

页面中用外部样式表要用link标签，例如

<link rel="stylesheet" type="text/css" href="path/to/mystyle.css" />

href。
link标签要放在head标签中。否则页面可能会闪烁。

方式2:写在style标签内
写在style标签内的样式称为内部样式表。例如

<style>
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>

方式3:写在标签的style属性里
写在标签的style属性里的样式称为，称为内联样式。例如

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

内联样式是针对的当前元素，所有也不用写选择器。

外部样式表，内部样式表，内联样式各自各的使用场景。
在通常情况下，推荐使用外部样式表。不建议使用内部样式表和内联样式。

原因：
外部样式表