HTML+CSS学习笔记

CSS和HTML结合的四种方式

参考 毕向东 html 视频教程

1. Style 属性

利用标签中style属性来改变每个标签的显示样式

适用于单个标签的样式修改。不灵活

<p style="background-color:#000; color:#FFF">
	this is p tag
</p>

2. style标签形式

（内嵌形式），可用于同类标签的样式统一修改

依然不够灵活

<style type="text/css">
	table { color:#906; }
</style>

表示后面的所有table中的文字默认颜色如我所设置。

3. 导入方式

前提是已经存在一个定义好的css文件，网页的一部分样式需要用到，那么可以采用这种方式。

比如现在同目录下新建一个test.css

内容为

@charset "utf-8";
/* CSS Document */
body {
	background-color:#F00;
}

然后在HTML文件的style标签中加入

<style type="text/css">
	/*table { color:#906; } */
@import url(test.css);
</style>

注意style标签中的注释为/*note*/ import语句不能和定义table的那行样式共存，否则import语句失效

而且在css文件中可以import其他css文件

4. 链接方式

通过head标签中的link标签实现，前提也是要有一个已定义好的css文件

<link rel="stylesheet" type="text/css" href="test.css" media="screen"/>

CSS选择器（三种）：

• html选择器。使用的就是html的标签名
• class选择器。使用的是标签中的class属性
• id选择器。使用的是标签中的id属性

每个标签都可以定义class属性和id属性，用于对标签进行标示，方便对标签进行操作。多个标签的class属性可以相同，而id值要唯一。

class选择器

通过 标签名.class名 对该标签进行样式设置

不加标签名时表示对具有相同class值的标签进行统一定义。

CSS扩展选择器

• 关联选择器
• 组合选择器
• 伪元素选择器
• 伪元素选择器（此略）

关联选择器 。设置不同标签中的相同标签。用空格

如要设置span中的b，而非div中的b

组合选择器。多个标签公用一个样式，用逗号

.haha,#kk,p,b {

background-color:#F00;

}