CSS基础教程快速入门

一、css介绍

1、介绍：

CSS 是一门语言，用于控制网页表现。也有一个专业的名字：Cascading Style Sheet（层叠样式表）。

2、作用：

2.1 用于美化页面，修饰标签。

二、css三种引用模式

1、内联式：在标签内部使用style属性，属性值是css属性键值。此方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复 用性太差。

代码示例：<div style="color:red">hello world!</div>

2、内部式：一般在head标签里面定义一个style标签写css代码，通过模块名（即你想定义的html标签名）或者定义class：xxx或者定义id来引用css样式。

代码示例：<style>

div{

color:red;

}

</style>

3、外部样式:通过新建一个css文件引用进html文件,在css文件中通过引用html的模块名或者定义class：xxx或者定义id来引用css样式。(注：id不能定义重复；引用的模块名是按数量少的生效。上面内部式也是一样)

代码示例：

html文件中：<link rel="stylesheet" herf="xxx.css">

css文件中（xxx.css）：div{

color:red;

}

三、css选择器

1、元素选择器（格式 : 元素名称{color：red} ）

代码示例： div{color:red}

注：元素名称就是标签名例如div、span、p等

2、#id选择器（格式 : #id属性值{color:red}）

代码示例：#name{color:red} <div id="name">hello word</div>

注：id要唯一

3、class类选择器（格式：.class属性值{color:red})

代码示例：.cls{color:red} <div class="cls">hello world</div>

注：类选择器的名字可以不唯一。

具体代码演示：

注：由于都用的div元素进行演示，这里有个小tips，元素选择器直接用的div设置css文本样式是红色，那么为什么其他id、类选择器的css样式都是遵循自己的设置呢？因为是按谁的设定范围小谁就生效。这里的div是一个大范围，可以有多个div；而id或类选择器是针对某一个设置的css样式属于小范围。

四、css属性：

css属性有很多，由于这里是属于css最基础的教程，但真正想要精通css还要继续深入学习，本教程只是带你领进门，大概了解css。可以查看这个教程CSS 参考手册 (w3school.com.cn)。