前言
CSS（级联样式表）告诉浏览器如何显示你在 HTML 中写入的文本和其他内容。
你可以使用 CSS 控制 HTML 元素的颜色、字体、大小、间距等许多属性。
style color
<style> h2 { color: red; } </style> <!-- or --> <h2 style="color: red;">CatPhotoApp</h2> 复制代码
class
一个HTML元素可以有多个class
<style> .red-text { color: red; background-color: silver; } </style> <h2 class="red-text">CatPhotoApp</h2> 复制代码
font
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" /> <style> p { font-size: 16px; font-family: monospace; font-weight: 200; } h2 { font-family: Lobster, "Open Sans"; } </style> 复制代码
size border
<style> .smaller-image { width: 100px; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 10px; /* 50% */ } </style> <img class = "smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat." > 复制代码
id
一个HTML元素只能有一个id
<style> #cat-photo-form { background-color: green; } </style> <form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form"> <button type="submit">Submit</button> </form> 复制代码
padding margin border
每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距
padding、外边距margin、边框border。
padding用来控制着元素内容与border之间的空隙大小。
margin用来控制元素的边框与其他元素之间的border距离。
margin设置为负值，元素会变得占用更多空间。
.red-box { padding-top: 40px; padding-right: 20px; padding-bottom: 20px; padding-left: 40px; /* 顺时针指定 */ padding: 20px 40px 20px 40px; } .blue-box { margin-top: 40px; margin-right: 20px; margin-bottom: 20px; margin-left: 40px; margin: 20px 40px 20px 40px; } 复制代码
attribute selectors
/* [attr=value] */ [type='radio'] { margin-top: 10px; margin-bottom: 15px; } 复制代码
em rem
相对单位长度，它们的实际值会依赖其他长度的值而决定。
em相对于当前对象内文本的字体尺寸。
rem相对的只是HTML根元素。
.red-box { background-color: red; margin: 20px 40px 20px 40px; padding: 1.5em; } 复制代码
body class id important
可以从
body继承样式
<style> body { background-color: black; color: green; font-family: monospace; } </style> <h1>Hello World</h1> 复制代码
class 会覆盖
body的 CSS 样式。在
<style>标签里面声明的class顺序十分重要，之后的声明会覆盖之前的声明。 第二个声明的优先级始终高于第一个声明。
id选择器的优先级总是高于 class 选择器。内联样式的优先级高于 ID 选择器。
想保证你的 CSS 样式不受影响，你可以使用
!important。
<style> body { background-color: black; font-family: monospace; color: green; } .pink-text { color: pink !important; } .blue-text { color: blue; } #orange-text { color: orange; } </style> <h1 class="pink-text blue-text" id="orange-text" style="color: white;">Hello World!</h1> 复制代码
color hex
十六进制编码使用 6 个十六进制字符来表示颜色，两个字符为一组，分别代表红（R）、绿（G）、蓝（B）。
可以缩写成为三个数字分别代表着红（R）、绿（G）、蓝（B）三原色。
#FF0000和#F00是完全相同的颜色。
<style> .red-text { color: #FF0000; } .green-text { color: #0F0; } .blue-text { color: rgb(0, 0, 255); } </style> <h1 class="red-text">I am red!</h1> <h1 class="green-text">I am green!</h1> <h1 class="blue-text">I am blue!</h1> 复制代码
var
通过CSS变量一次更改多个值
--penguin-skin: gray; background: var(--penguin-skin); 复制代码
备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。 相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色。
background: var(--penguin-skin, black); 复制代码
browser fallbacks
提供浏览器降级方案来避免浏览器兼容性问题。
比如 IE 浏览器由于不支持 CSS 变量而会忽略背景色。
在声明之前提供另一个更宽泛的值，老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。
<style> :root { --red-color: red; } .red-box { background: red; background: var(--red-color); height: 200px; width:200px; } </style> <div class="red-box"></div> 复制代码
:root
CSS 变量是可继承的，和普通的属性一样。
当创建一个变量时，变量会在创建变量的选择器里可用。 同时，在这个选择器的后代选择器里也是可用的。
:root是一个伪类选择器，在:root里创建变量在全局都可用，即在任何选择器里都生效。如果在元素里创建相同的变量，会重写作用于整个页面的变量的值。
:root { --penguin-belly: pink; } .penguin { --penguin-belly: white; } 复制代码
@media
CSS 变量可以简化媒体查询的定义方式。
当屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。
:root { --penguin-size: 300px; --penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange; } @media (max-width: 350px) { :root { --penguin-size: 200px; --penguin-skin: black; } }
