MDN文档的CSS学习笔记
1. 改变元素的默认行为
当对浏览器的默认样式不太满意时,可以选定那个元素,加一条CSS规则即可。
例如移除无序列表 <ul>
自带的项目符号:
li {
list-style-type: none;
}
list-style-type属性可以使用自定义字符串甚至emoji,或很多种预设语言,可以查表。
2. 根据状态确定样式
根据标签的状态确定样式。
例如使得没有被访问的链接颜色变为粉色、访问过的链接颜色变为绿色、鼠标悬停则移除下划线:
a:link {
color: pink;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
3. 如何构建 CSS
在 HTML 里应用 CSS
在文档中应用 CSS 有三种方法
外部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
...
</body>
</html>
<link>
元素的 href
属性需要引用你的文件系统中的一个文件。
内部样式表
将 CSS 直接写在 HTML 文件 <head>
标签里的 <style>
标签之中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
内联样式
存在于 HTML 元素的 style 属性之中。每个 CSS 表只影响一个元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
属性和值
函数
大多数值都是简单的关键字或数值,但也有一些可能的值以函数的形式出现。例如 calc() 函数、transform属性使用的 rotate() 函数。
规则
有些 @rules
规则很简单,有规则名和值。例如,要将额外的样式表导入主 CSS 样式表,可以使用 @import
:
@import 'styles2.css';
还有一个最常见的 @rules
之一是 @media,它允许使用媒体查询来应用 CSS,仅当某些条件成立(例如,当屏幕分辨率高于某一数量,或屏幕宽度大于某一宽度时)。
body {
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}
速记属性
一些常用的:
div {
padding: 10px 15px 15px 5px;
}
与这四行代码是等价的:
div {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
}
div {
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
}
与这五行代码是等价的:
div {
background-color: red;
background-image: url(bg-graphic,png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
}
4. CSS 如何运行
一个真实的 DOM 案例
现在通过一个 HTML 片段来了解 HTML 怎么转化成 DOM
<p>
Let's use:
<span>Cascading</span>
<span>Style</span>
<span>Sheets</span>
</p>
对应树形结构为:
P
├─ "Let's use:"
├─ SPAN
| └─ "Cascading"
├─ SPAN
| └─ "Style"
└─ SPAN
└─ "Sheets"
当浏览器遇到无法解析的 CSS 代码会发生什么
浏览器什么也不会做,继续解析下一个 CSS 样式。
相似的,当浏览器遇到无法解析的选择器的时候,他会直接忽略整个选择器规则,然后解析下一个 CSS 选择器。
因此,当为一个元素指定多个 CSS 样式的时候,浏览器会加载样式表中的最后的 CSS 代码进行渲染,正因为如此,可以为同一个元素指定多个 CSS 样式来解决有些浏览器不兼容新特性的问题。
5. 层叠与继承
冲突规则
层叠
当应用两条同级别的规则到一个元素的时候,写在后面的就是实际使用的规则。
优先级
内联 > id > class > tag
继承
一些设置在父元素上的 css 属性是可以被子元素继承的,有些则不能。
例如 color
会继承,但 width
不会继承。因为如果复元素的 width 是50%,后代继承 width,那 CSS 就会很难使用了!
控制继承
CSS 为控制继承提供了四个特殊的通用属性值。每个 css 属性都接收这些值。
inherit
:使该元素属性和父元素相同。即:开启继承。
initial
:设置为元素属性的初始默认值,默认值由官方 CSS 规范定义。如果没有默认值且该属性是自然继承的,那么会设置为 inherit
。
unset
:重置为自然值,即:如果属性是自然继承那么就是 inherit
,否则和 initial
一样。
revert
: 使该元素样式还原成样式表中定义的元素属性的默认值。若用户定义样式表中显式设置,则按此设置,否则,按浏览器定义样式表中的样式设置,否则,等价于 unset
。
通俗解释就是:
- 设置了
inherit
就是继承来自祖上的东西。- 设置了
initial
就是抛弃祖上的东西另起炉灶从默认值开始,如果没有默认值,就接着继承祖上的东西。- 设置了
unset
就是我不发表意见,本来是继承就继承,本来是默认就默认。- 设置了
revert
就是推翻一切,从默认样式表重新开始。
重设所有属性值
CSS 的 shorthand 属性 all
可以用于同时将这些继承值中的一个应用于(几乎)所有属性。它的值可以是其中任意一个(inherit
, initial
, unset
, or revert
)。这是一种撤销对样式所作更改的简便方法,以便回到之前已知的起点。
.fix-this {
all: unset;
}