web前端开发的点点滴滴---3.CSS介绍

CSS介绍

CSS即层叠样式表（Cascading Style Sheets），HTML中使用它进行页面排版、字体、颜色设置等。

CSS分为3种类，分别为外联样式、内联样式、行内样式。

外联样式

外联样式是将样式写在另外后缀名为css的单独文件中的样式，通过CSS选择器对HTML页面中特定的元素集合赋予样式。

外联样式通过以下代码在HTML页面中引用：

<link rel="stylesheet" type="text/css" href="demo.css" />

或者另外一种不常用的方法(这种方法会先把页面加载好，所以样式还没加载好时页面的布局会被破坏)：

<style type="text/css">
@import url(demo.css) 
</style>

demo.css文件内容:

body { /*CSS标签选择器，选择body标签*/

 /*设置页面默认字体为18px*/
    font-size:18px;

 /*设置页面默认字体颜色为灰色*/
    color: #666;
}

内联样式

内联样式是将样式写在HTML页面中的style标签里的样式，如下：

<style type="text/css">
body { /*CSS标签选择器，选择body标签*/

 /*设置页面默认字体为18px*/
    font-size:18px;

 /*设置页面默认字体颜色为灰色*/
    color: #666;
}
</style>

行内样式

行内样式是将样式写在普通的html标签的style属性里样式，如下：

<!-- 设置此div中的文字大小为18px，颜色为红色 -->
<div style="font-size:18px;color:red;">测试测试</div>