CSS学习--css基础

css基础

外部引入样式

<link rel="stylesheet" href="styles/style.css">

媒体查询

使用 媒体查询 来应用CSS，仅当某些条件成立(例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)，常用于响应式布局定义一些特殊分辨率设备的样式。

body {
	background-color: pink;
}
@media (min-width: 30em) {
	body {
		background-color: blue;
	}
}

all

将应用于元素或元素父元素的所有属性更改为 父类的值 | 初始值：

all: inherit | initial | unset;继承父类 | 默认值 | 重置

冲突规则

层叠

Stylesheets cascade（样式表层叠） — 简单的说，css规则的顺序很重要；
当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

优先级

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。

• 内联样式 > 外部样式表

• 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

继承

继承也需要在上下文中去理解 —— 一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。