这是我参与「第四届青训营 」笔记创作活动的第2天。
什么是CSS
CSS，全称Cascading Style Sheets，层叠样式表，用来定义页面元素的样式，比如：
- 设置字体和颜色
- 设置位置和大小
- 设置动画效果
如何使用
在页面中使用CSS主要有三种方式：
<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">
<!-- 嵌入 -->
<style>
li { margin: 0; list-style: none; }
p { margin: 1em 0; }
</style>
<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>
CSS选择器
常见选择器
-
通配选择器（*），给所有元素添加选择器内样式
*{ color:red; font-size:20px; } -
标签选择器，使用标签进行选择，为同标签元素添加样式
h1{ color:orange; } p{ color:gray; font-size:20px; } -
ID选择器（id要保持唯一性），为拥有指定id的元素添加样式
#logo{ font-size:60px; font-weight:200; } -
类选择器（class）,为拥有指定类元素添加样式
.done{ color:gray; text-decoration:line-through; } -
属性选择器，为拥有指定属性的元素添加样式
[disabled]{ background:#eee; color:#999; }
伪类（pseudo-classes）
CSS伪类是用来添加一些选择器的效果，不基于标签和属性定位元素。
状态伪类
这里以<a>举例：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
还有一些状态伪类，比如：：focus，表示元素获得焦点，可以伪元素添加样式。
结构性伪类
p:first-line:{color:white}; /* 每个<p>元素的第一个行 */
p:first-child:{color:black}; /* 属于任意元素的第一个子元素的<p>元素 */
p:first-letter:{color:blue}; /* 选择每个<p>元素的第一个字母 */
组合选择器
常见的组合方式：
选择器组：
body, h1, h2, h3, h4, h5, h6, ul, ol, li {
margin: 0;
padding: 0;
}
[type="text"], [type="radio"] {
box-sizing: border-box;
padding: 0;
}
CSS颜色
RGB表示方式
通过设置三种颜色的数值（red，green，blue），来决定最终的颜色
rgb(red,green,blue);
比如：rgb(0,0,0)表示黑色，rgb(255,255,255)表示白色
rgb颜色表示方法用可以用#xxxxxx的方式表示，将三种颜色转化为16进制数，#后面每两位表示一个颜色的数值，比如：#000000表示黑色，#0000ff表示蓝色
HSL表示方式
通过设置色相（Hue）、鲜艳度（Saturation）、饱和度（Light）来决定最终的颜色
hsl(hue,saturation,light);
透明度（alpha）
透明度是颜色的另一维度，数值处在0~1之间，以上两种颜色表示方式都可以添加透明度属性，分别使用rgba和hsla来表示
rgba(red,green,blue,alpha);
hsla(hue,saturation,light,alpha)
CSS字体
font属性
font-family: Megrim, Cursive;
font-size: 20px;
font-weight: 100;
- font-family：字体族，比如：Megrim，宋体等等，英文字体一般放在中文字体前面。
- font-size：字体大小，常见的关键字有small、medium等等，也可使用长度（px、em）、百分数等等。
- font-weight：字体粗细，normal（正常）数值为400，bold（粗体）数值为700，并不是所有的字体都支持全部的自重。
文本样式
-
line-height属性，设置行高
-
text-align属性，设置对齐方式
-
spacing属性，单词之间的间距
-
text-decoration属性，文本装饰，设置下划线、上划线以及删除线
-
white-space属性，设置是否省略空格和换行。
