CSS 闲着无聊读一读，不知不觉学会CSS （一）

• 1.CSS相关介绍

• 2.CSS代码的书写方式

• • • • 1.嵌入式

• 2.外链式

• 3.行内式

• 4.总结

• 3.CSS的注释

• 4.选择器

• • • • 1.通用选择器

• 2.标签选择器

• 3.类选择器

• 4.id属性值

1.CSS相关介绍

======================================================================

CSS，全名：Cascading Style Sheets，翻译为“ 层叠样式表 ”。

主要作用是来给HTML网页来设置外观或者样式的。

注意：

**1.CSS代码由选择器和一对大括号组成的。

2.CSS的数值型值后面有px（像素）例如：14px。

3.在CSS中不能有html标签。**

2.CSS代码的书写方式

=========================================================================

CSS代码书写方式分为三种：嵌入式、外链式、行内式。

1.嵌入式

将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中

注意：< style >标签可以出现在HTML的任何位置，但是一般情况我们只会将它放置在head标签里面。

2.外链式

外链式是指单独写一个以.CSS为扩展名的文件。

然后在标签中使用标签，将这个CSS文件链接到HTML文件中。

下面是一个CSS文件：

标签的使用：

注意：CSS文件不能单独的运行，它必须依赖于HTML文件！！

查看CSS文件有没有link链接成功的小技巧：

一个HTML文件可以引入多个CSS文件！

3.行内式

将CSS代码书写在HTML标签的style属性中。

style是一个通用的属性，每一个标签里面都拥有这个属性！

格式：

<标签名 style = “属性:值;属性:值”></标签名>

4.总结

• 使用嵌入式的方式来书写CSS代码，它只能作用于当前的HTML文件。

• 使用外链式的方式来书写CSS代码，它可以作用于多个HTML文件。

• 使用行内式的方式来书写CSS代码，它可以作用于当前标签。

3.CSS的注释

=====================================================================

CSS的注释：/* 要注释的内容。 */

在sublime中，Ctrl+/ 快捷键来注释。

html的注释：<–! 要注释内容 -->。

不能和html的注释混淆！！！！

4.选择器

==================================================================

1.通用选择器

通用选择器来设置样式，格式：

*{

属性:value;

}

这样的设置能，将匹配HTML所有标签。不建议使用。

2.标签选择器

这个就简单了，指定匹配对应的HTML标签。

格式：

标签名{

属性:value;

}

3.类选择器

这里涉及到了一个class属性，直接看例子：

中国的四大名著

• 西游记
• 三国演义
• 红楼梦
• 水浒传

• 我要考托福，雅思！