CSS 基础与选择器学习笔记#

优先级#

行内样式 > 内部样式 ≈ 外部样式

Link 标签#

引入外部 CSS 文件或网页图标：

1
<link rel="stylesheet" href="styles.css">
2
<link rel="icon" href="baidu.com">

选择器#

1
.class {
2
    属性: 属性值;
3
}

后代元素选择器#

选择祖先元素的后代元素：

1
祖先 后代 {
2
    属性: 属性值;
3
}

示例（box 内所有 a）：

1
.box a {
2
    font-size: 10px;
3
}

1
.box > a {
2
    color: red;
3
}

兄弟选择器#

1
前一个兄弟 + 后一个兄弟 {
2
    属性: 属性值;
3
}

1
A ~ b {
2
    属性: 属性值;
3
}

并集选择器 & 交集选择器#

1
选择器1, 选择器2 {
2
    /* 样式 */
3
}

1
选择器1选择器2选择器3 {
2
    /* 样式 */
3
}

字体样式#

后代元素会继承父元素样式，自身有样式则不继承。

颜色表示方式#

• 英文单词：red、black
• RGB：rgb(0-255, 0-255, 0-255)
• 十六进制（最常用）：#aabbcc，可简写如 #fff
• RGBA：带透明度，rgba(r, g, b, 0-1)

文本设置#

背景样式#

1
background-image: url(地址);