介绍
CSS（层叠样式表）是一门用来设计网页样式的语言，如网页的布局、字体、颜色搭配、视觉特效。作为WEB开发的基础技术之一，掌握CSS的语法和API对于我们构建丰富的网页是必须的。
基础语法
<style>
div {
border: 5px red;
}
p,span {
color: black;
}
.container {
border: 5px red;
}
</style>
- 语法由一个
选择器起头，它决定了将我们的样式添加到那些HTML元素上。接着是{}，在两个大括号中间可以定义多个属性:值;对，不同的属性有不同的合法值。
<div style="border: 5px red;"></div>
- 行内样式是指将
属性:值;写在HTML元素的style属性中的样式。
<link rel="stylesheet" href="styles.css">
- 通过
link标签，可以不必将CSS内容和HTML内容写在同一个文件中，而是存放到不同文件，这样不仅使代码更简洁，在需要的情况下我们可以将CSS拆分到不同的CSS文件中，在加载时按需加载。
选择器
在基础语法小节我们看到选择器是CSS规则的第一部分，它告诉浏览器哪个HTML元素应该被选中应用样式。选择器有很多种，它们可以单独使用也可以组合使用，还支持一定的表达式。
<html lang="en-US" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8"/>
<meta property="og:locale" content="zh-CN"/>
<title>CSS基础语法</title>
<style>
/* 类型选择器 */
div {
border: 2px black solid;
}
/* 分组选择器：div或span元素 */
div,span{
border: 2px black solid;
}
/* 类选择器 */
.container{
border: 2px red solid;
}
/* ID选择器 */
#key{
border: 2px yellow solid;
}
/* 标签属性选择器 */
div[align]{
border: 2px yellowgreen solid;
}
/* 标签属性值选择器 */
div[align=left]{
border: 2px darkorange solid;
}
</style>
</head>
<body>
<div>1.类型选择器</div>
<div class="container">2.类选择器</div>
<div id="key">3.ID选择器</div>
<div align="center">4.标签属性选择器</div>
<div align="left">5.标签属性值选择器</div>
</body>
</html>
- 代码片段展示了几种基础的选择器。
<html lang="en-US" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8"/>
<meta property="og:locale" content="zh-CN"/>
<title>CSS基础语法</title>
<style>
/* 后代选择器 */
div span {
color: red;
}
/* 子代选择器 */
div > span {
color: antiquewhite;
}
/* 相邻选择器 */
h1 + p {
color:aqua;
}
/* 同辈选择器 */
h2 ~ p {
color:brown;
}
/* 关系选择器（组合） */
div > article > h2 ~ p {
color:chartreuse;
}
</style>
</head>
<body>
<div>
<p>
<span>1.后代选择器</span>
</p>
</div>
<div>
<span>2.子代选择器</span>
</div>
<article>
<h1>滕王阁序</h1>
<p>3.豫章故郡，洪都新府。</p>
</article>
<article>
<h2>静夜思</h2>
<p>4.床前明月光，疑是地上霜。</p>
<p>4.举头望明月，抵扣思故乡。</p>
</article>
<div>
<article>
<h2>静夜思</h2>
<p>5.床前明月光，疑是地上霜。</p>
<p>5.举头望明月，抵扣思故乡。</p>
</article>
</div>
</body>
</html>
- 关系选择器提供了一种与文档位置相关的关联逻辑，通过这套逻辑可以按后代、子代、相邻、同辈等关系指定样式。
<html lang="en-US" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8"/>
<meta property="og:locale" content="zh-CN"/>
<title>CSS基础语法</title>
<style>
/* 组合1 */
div > article > h2 + p {
color:chartreuse;
}
/* 组合2 */
div > article > h2 ~ p[k] {
color:darkgreen;
}
/* 组合3 */
div > article > h2 ~ .css {
color:red;
}
</style>
</head>
<body>
<div>
<article>
<h2>滕王阁序</h2>
<p>1.豫章故郡，洪都新府。</p>
<p class="css">1.星分翼轸，地接衡庐。</p>
<p k="d">2.襟三江而带五湖，控蛮荆而引瓯越。</p>
</article>
</div>
</body>
</html>
- 各种选择器可以任意组合使用。
理解继承
像字体的样式我们在指定之后，不想每个后代元素都指定一边，而是希望他们与它的父元素保持一直，这种特性CSS是支持的。
理解继承
<html lang="en-US" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8"/>
<meta property="og:locale" content="zh-CN"/>
<title>理解继承</title>
<style>
#human{
color: red;
font-size: 10px;
}
.bjy{
color: yellowgreen;
}
</style>
</head>
<body>
<div id="human">
<p>李白</p>
<p class="bjy">白居易</p>
</div>
</body>
</html>
- “李白”显示红色，是因为
p元素的color元素继承自父容器div。 - “白居易”显示黄绿色，是因为类样式中的
color覆盖了从父容器那继承的属性值。 - 并不是所有属性都会被继承，例如width、margin、padding 和 border。
控制继承
为了控制继承行为CSS提供了5个特殊的属性值，所有的CSS属性都可以接收这些值。
inherit：设置属性值与父元素相同（开启继承）。initial：设置为属性的初始值。unset：如果属性有从父元素继承的值则设置为该值，否则重置为初始值。revert：类似与unset，不同的是将重置为浏览器的默认样式而不是改属性的默认值。revert-layer：重置为上一个级联层（@layer）中建立的值。
控制所有属性的继承
<html lang="en-US" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8"/>
<meta property="og:locale" content="zh-CN"/>
<title>理解继承</title>
<style>
div{
color: red;
font-size: 10px;
}
.name{
/* 当我们有很多属性并且它们的继承行为是一致的时候，可以使用all来简写这种行为 */
all: initial;
}
</style>
</head>
<body>
<div>
<p>李白</p>
<p class="name">白居易</p>
</div>
</body>
</html>
理解层叠
你是否会有疑惑，当不同的选择器针对某个HTML设置了不同的背景颜色，浏览器会以那个为准？在实际工作中有时你会发现明明书写了CSS规则但是HTML元素的样式就是不变。接下来我们来学习下浏览器是怎么解决CSS规则冲突的。
CSS是Cascading Style Sheets的简写，理解第一个词层叠（cascade）很重要。层叠可以理解成一个元素 p 的 color 属性值有多个来源进而发生冲突的现象，也可以理解是解决这种冲突的手段。有三个因素决定了浏览器应用那个CSS规则到元素上，将它们按重要性排序分别是：资源顺序、优先级、重要程度。
资源顺序
<html lang="en-US" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8"/>
<meta property="og:locale" content="zh-CN"/>
<title>理解继承</title>
<style>
p{
color: red;
}
p{
color: yellowgreen;
}
</style>
</head>
<body>
<div id="human">
<p>李白</p>
<p>白居易</p>
<p style="color: aqua;color:black;">王浩然</p>
</div>
</body>
</html>
- 当样式的优先级相同时，在后面的规则会覆盖前面的规则。
优先级
选择器的优先级有三部分组成 {id}.{类}.{元素}，每个部分都会计算出一个分值，这些分值就是选择器的权重。在比较权重时会先比较 {id} 部分，相等时比较 {类} 部分，还相等则比较 {元素} 部分。优先级的计算如下表所示：
| 选择器 | ID | 类 | 元素 | 优先级 |
|---|---|---|---|---|
h1{ 规则内容 } | 0 | 0 | 1 | 0-0-1 |
h1 + p::first-letter{ 规则内容 } | 0 | 0 | 3 | 0-0-3 |
li > a[href*="en-US"] > .inline-warning{ 规则内容 } | 0 | 2 | 2 | 0-2-2 |
#identifier{ 规则内容 } | 1 | 0 | 0 | 1-0-0 |
button:not(#mainBtn, .cta){ 规则内容 } | 1 | 0 | 1 | 1-0-1 |
<html lang="en-US" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8"/>
<meta property="og:locale" content="zh-CN"/>
<title>理解继承</title>
<style>
/* 2-0-0 */
#human #bjy{
color: red;
}
/* 1-0-0 */
#bjy{
color: yellowgreen;
}
/* 0-0-1 */
div{
color: blue;
}
/* 0-0-2 */
div span{
color: chartreuse;
}
/* 1-0-1 */
div #bjy2{
color:cadetblue;
}
</style>
</head>
<body>
<div id="human">
<p id="bjy">白居易</p>
</div>
<div>
<span>李白</span>
<span id="bjy2">白居易</span>
</div>
</body>
</html>
- 内联样式优先于所有普通样式，内联样式的权重分值可以理解是
1-0-0-0，即无论有多少ID选择器，内联样式的优先级都是最高的。
!important
关键词 !important 会忽略优先级强制生效。覆盖!important 的唯一办法就是有另一个更高优先级或者相同优先级且顺序靠后的!important 。
4· -<html lang="en-US" prefix="og: https://ogp.me/ns#"> <head>
<meta charset="utf-8"/>
<meta property="og:locale" content="zh-CN"/>
<title>!important</title>
<style>
/* 1-0-0 */
#lb,#bjy{
color: red;
}
/* 0-0-1 */
p{
color: yellowgreen !important;
}
</style>
</head>
<body>
<p id="lb">李白</p>
<p id="bjy" style="color: yellow !important;">白居易</p>
</body>
</html>
在编写我们的样式代码时最好不要使用!important，因为它改变了层叠的默认行为，会增加我们排查样式问题的难度。尤其是在大型样式表中（当你想覆盖UI框架样式时）。
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
