CSS是什么？

css的英文全称：Cascading Style Sheets css的作用：

用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
- 设置背景
- 控制元素显隐

css的基本语法：

h1[选择器Selector] {
    color[选择器属性Property]:white[选择器属性值Value];
    font-size:14px;【声明Declaration】
}

在页面中使用css

使用css的三种方式

内嵌（嵌入）式：将css定义在style标签内部，style标签需放到head标签的最底部例如：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: white;
            font-size: 16px
        }
    </style>
</head>

外链式：通过链接引入css样式文件，可以达到多个页面复用同一个样式文件的目的，链接同样需放到head便签中例如：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

内联（行内）式：将css样式定义到具体的元素上，通过元素的style属性定义自己的样式例如：

<body>
    <h1 style="text-align:center;"></h1>
</body>

CSS是如何工作的

简单描述下：首先，浏览器获取到整个html页面，开始解析html，并生成dom树，当遇到外链css，浏览器会开启渲染线程，将css文件进行解析，并将样式挂载到dom树中，如果出现样式冲突，根据层叠等级和样式定义的位置等来判断哪个样式生效，最后展示页面。

选择器 Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置选择器大致可分为两大类：

基本选择器

通配符选择器：选中页面上的所有元素，一般用于清除浏览器默认样式

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }

元素(标签)选择器

h1{
    text-align:center;
 }

类选择器

.container-h1{
    text-align:center;
 }

id选择器

#container-h1{
    text-align:center;
 }

属性选择器

[href="/123"]{
    font-size: 5em;
 }

伪类选择器

//选中未访问的链接
a:link{
    font-size: 2em;
    color:#000;
 }

伪元素选择器

a::before{
    content:'';
    position:absolute;
    color:#000;
 }

复合选择器

相邻兄弟选择器

li.active+li{
    font-size: 2em;
    color:#000;
 }

子元素选择器

ul>li{
    font-size: 2em;
    color:#000;
 }

相邻选择器

li.active~li{
    font-size: 2em;
    color:#000;
 }

后代选择器

ul li{
    font-size: 2em;
    color:#000;
 }

组合选择器

li.active{
    font-size: 2em;
    color:#000;
 }

选择器组

h1,h2,h3,h4,h5,h6{
    font-size: 2em;
    font-weight:bold;
    color:#000;
 }

颜色 - RGB

颜色 - HSL

HSL的英文全称：Hue Saturation Lightness

alpha 透明度

有两种表示方式：

 {
     color: rgba(0,0,0,0.5);
     color: hsla(0,50%,100%,0.5);
 }

常用的css样式

字体 font-family

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

注意：font-family的分隔逗号是代表字体的优先程度，浏览器解析css时，首先会加载第一个字体，如果浏览器没有该字体会继续往下找可以加载的字体，一般字体的最后是浏览器通用字体，防止字体不能正常显示。通用字体族：

Serif 衬线体 Georgia、宋体
Sans-Serif 无衬线体 Arial、Helvetica、黑体、微软雅黑
Cursive 手写体 Caflisch Script、楷体
Fantasy Comic Sans MS,Papyrus，Zapfino
Monospace 等宽字体 Consolas、Courier、中文字体

使用建议：

字体列表最后写上通用字体族
英文字体放在中文字体前面

使用 Web Fonts

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

<style>
  @font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }

  @font-face {
    font-family: f2;
    src: url("//s3.ssl.qhimg.com/static/a59a90c9e8f21898.woff2") format("woff2");
  }

  @font-face {
    font-family: f3;
    src: url("//s2.ssl.qhimg.com/static/58324737c4cb53a5.woff2") format("woff2");
  }

  h1 {
    font-size: 50px;
  }
</style>

font-size

关键字
- small
- medium
- large
长度
- px 像素
- em 16px=1em
百分数
- 相对于父元素字体大小

line-height

<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }

  p {
    font-size: 20px;
    line-height: 1.6;
  }
</style>

font:style weight size/height family

text-align

text-align CSS 属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

start (实验属性)如果内容方向是左至右，则等于left，反之则为right。
end (实验属性)如果内容方向是左至右，则等于right，反之则为left。
left 行内内容向左侧边对齐。
center 行内内容居中。
right 行内内容向右侧边对齐。
justify 文字向两侧对齐，对最后一行无效。
justify-all (实验属性) 和 justify 一致，但是强制使最后一行两端对齐。
match-parent 和inherit类似，区别在于start和end的值根据父元素的direction确定，并被替换为恰当的left或right

spacing

letter-spacing 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。letter-spacing 的正值会导致字符分布得更远，而 letter-spacing 的负值会使字符更接近。
- normal 此间距是按照当前字体的正常间距确定的。和 0 不同的是，normal 会让用户代理调整文字之间空间来对齐文字。
- `指定文字间的间距以替代默认间距。可以是负值，但有可能会出现 implementation 限制。用户代理不会在此基础上进一步增加或缩减间距来对齐文字。
word-spacing 属性设置标签、单词之间的空格长度。
- normal正常的单词间距，由当前字体和/或浏览器定义。
- <length>通过指定具体的额外间距来增加字体的单词间距。查看 <length> 了解可用单位。
- <percentage>通过指定受影响字符的宽度的百分比的方式来增加的间距。无障碍考虑：必须根据具体情况确定合适的 word-spacing 值，因为不同的字体具有不同的字符宽度。没有一个值可以确保所有字体系列都自动保持其易读性。
border-spacing 属性指定相邻单元格边框之间的距离（只适用于边框分离模式）。相当于 HTML 中的 cellspacing 属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。 border-spacing 值也适用于表格的外层边框上，即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的（水平的或垂直的）边框间距（border-spacing）和相应的（上，右，下或左）内边距之和。该属性只适用于 border-collapse 值是 separate 的时候。
- <length>描述单元格之间的水平和垂直距离的一个 <length> 值。它只在单值语法下使用。
- horizontal描述相邻两列的单元格之间的水平距离的一个 <length> 值。它只在双值语法下使用。
- vertical描述相邻两行的单元格之间的垂直距离的一个 <length> 值。它只在双值语法下使用。
- inherit一个表示父元素的 border-spacing 的计算值的关键字，其父元素必须应用了 border-spacing 。

text-indent

text-indent属性能定义一个块元素首行文本内容之前的缩进量。

<length>使用固定的值来指定文本的缩进。允许使用负值。
<percentage>使用包含块宽度的百分比作为缩进。
each-line(实验)文本缩进会影响第一行，以及使用
强制断行后的第一行。
hanging(实验)该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。

text-decoration

简写 CSS 属性设置文本上的装饰性线条的外观。它是 text-decoration-color、text-decoration-line、text-decoration-style 和较新的 text-decoration-thickness 属性的缩写。

text-decoration-line 设置使用的装饰类型，例如 underline 或者 line-through。
text-decoration-color 设置装饰的颜色。
text-decoration-style 设置装饰的线条的颜色，例如 solid、wavy 或者 dashed。
text-decoration-thickness 设置用于装饰的线条粗细。

white-space

用来设置如何处理元素中的空白。这个属性表明了两件事:

空白字符是否以及如何它们该如何合并。
行是否采用软换行。

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

调试 CSS

右键点击页面，选择检查
使用快捷键
- Ctrl+Shift+I （Windows）
- Cmd+Opt+I （Mac）

理解CSS（上）