day05笔记

day05笔记

### 一、外部样式表

1、link标记，引入外部的css文件

2、语法:

<style>
	@import url(css/hello.css);
</style>

3、link和import方式区别

• 本质区别，link是html提供的方式，而import是css提供的方式

• 加载顺序，link可以让结构和样式同时加载，而import先加载结构再加载样式（根据代码顺序），不能同时加载

• 兼容问题，link没有兼容问题，而import一些老的版本的浏览器不支持的（低版本的IE）

• 控制DOM时的区别，link可以被DOM控制，而import不能 DOM（document object model — 文档对象模型）

• DOM是JS给咱们提供操作标记的一种方式（获取标记、给标记设置属性、创建标记、删除标记）

二、群组选择器

语法：

css：选择器1, 选择器2, 选择3…{}

p, b, em{color:red;}

说明：

可以一次性给不同类型的标记设置同样的样式

三、伪类选择器

语法：

• a:link{} 表示鼠标初始的状态

• a:visited 表示鼠标访问过后的状态

• a:hover 表示鼠标悬停时的状态，使用这个是最多的

• a:active 表示鼠标激活时的状态

<style>
	a:link{color:red;}
	a:visited{color:yellow;}
	a:hover{color:hotpink;}
	a:active{color:green;}
</style>

说明：

• 伪（假、半真半假），是选择器又和选择器有一定的区别
• 伪类选择描述的是某种状态
• 当鼠标访问过超链接后，浏览器为了记录那个链接被访问了会在历史记录里面进行缓存

四、文本节点标记

span标记

• 双标记
• 特点：横向排列的
• 作用：用于段落或者内容区域里面的某个文字或者几个字，没有默认的样式

结构示例代码

<p><span>今</span>天气很凉爽！适合敲代码</p>

样式代码

<style>
	p span{color:red;font-size:30px;}
</style>

五、小知识点

问题描述：当容器（父元素）没有设置高度的时候，如果给子元素设置了图片，这个时候图片会默认把容器底部撑大几像素（大概3px）

解决方案：给容器设置高度（后面还有其他方法）

属性补充：

font-weight:normal; 取消加粗

font-style:normal; 取消倾斜