走进前端技术栈 - CSS | 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第2天，今天学习的是css

基础

什么是css

在页面中使用css

css是如何工作的

选择器

选择器的作用

选择器的作用就是找出页面中的元素，以便给他们设置样式。

选择器使用多种方式选择元素：

• 按照标签名、类名或ID
• 按照属性；
• 按照在DOM树中的位置。

选择器类型

通配选择器

匹配所有的HTML元素

*{
  color: red;
  font-size: 20px;
}

标签选择器

匹配所有元素名相同的元素

h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}

类选择器

匹配所有类名相同的元素

.className{
  width: 100px;
}
例：
.done {
  color: gray;
  text-decoration: line-through;
}

id选择器

匹配对应ID的元素

#idName{
  width: 100px;
}
例：
#logo {
    font-size: 60px;
    font-weight: 200;
  }

属性选择器

disabled 禁用

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
/* 存在 href 属性并且属性值以"#"开头的<a> 元素 */
a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 /* 存在 href 属性并且属性值结尾是".jpg"的<a> 元素 */
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

伪类选择器

不基于标签和属性定义元素

用于定义元素的特殊状态分为两种，分别为状态伪类和结构类伪类。

状态伪类：元素在特定的状态下被选中

• 链接：link、visited、hover、active、focus（获得焦点的元素）
• 输入框：checked（被选中的）、disabled、enabled（被启用的）、focus、invalid（输入内容无效）；

<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

结构类伪类：元素在DOM树中的位置相关，如：first-child、last-child等。

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

选择器组合方式

名称	语法	说明	示例
直接组合	AB	同时满足A和B	input:focus
后代组合	A B	选中B，如果他是A的子孙	nav a
亲子组合	A>B	选中B，如果他是A的子元素	section > p
兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2~p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2+p

直接组合

<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {
    color: red;
  }
  
  input.error {
    border-color: red;
  }
</style>

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }
</style>

选择器组

将相同样式的选择器组合在一起，利用逗号分隔。

body, h1, h2, h3, h4, h5, h6, ul, ol, li{
  margin: 0;
  padding: 0;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

颜色

在CSS中颜色使用三种方式：RGB模型、HSL模型、关键字。

RGB模型：#000000或rgb(0,0,0)

HSL模型：hsl(200,30%,50%)

Hue -- 色相，取值为0-360；

Saturation -- 饱和度，色彩的鲜艳程度，取值范围为0-100%，越高越鲜艳；

Lightness -- 亮度，颜色的明亮程度，取值为0-100%，越高越亮；

关键字：red

透明度alpha：取值为0-1，越高越不透明。

使用方式：#ff0000ff、rgba(255,0,0,0.43)、hsla(0,100%,50%,0.43)

字体与段落格式

字体族

示例：font-family: Optima, Georgia, serif;

一般来说字体族需要设置多个，这是为了设备的兼容性问题，其匹配规则按照从前往后的方式进行匹配。需要注意的是要在最后设置通用字体族。

通用字体族分为五种，分别为：

• Serif 衬线体；
• Sans-Serif 无衬线体；
• Cursive 手写体；
• Fantasy：梦幻字体族；
• Monospace：等宽字体。

字体族使用建议：

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

使用web fonds：

<h1>Web fonts are awesome!</h1>

<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>

<h1 style="font-family: f1, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f2, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f3, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>

需要注意的是使用 web font 会增加系统的开销，因此中文字体最好使用裁贴工具。

字体大小:font-size,其取值有三种方式,分别为关键字(small medium large)、长度单位(px、em)、百分比。 需要注意的是,当字体使用百分比时是相对父元素字体大小的。

字体样式:font-style,取值分为三种,分别为normal(默认)、italic(斜体)、oblique(倾斜体,若当前字体 不存在倾斜体就会用斜体代替)。

字体粗细:font-weight,可以取数字值(100-900),也可以使用关键字normal (400)、bold(700)。需要 注意的是,不是所有的字体粗细都存在数字表示的。

行高:line-height,表示两行文字之间baseline的距离,取值为四种,分别为normal(默认)、不带单位的数字 (与当前设置的字体尺寸相乘得到行高)、带单位的数字(固定定行间距)、百分数(基于当前字体尺寸得到行高)。

建议使用font来进行简写,使用公式如下:font:font-style font-weight font-size/line-height font-family 至少要指定字体大小和字体族

对齐方式：text-align，取值分为四种：left、right、center、justify

间距：分为两种间距，分比为letter-spacing（字符间距）和word-spacing（单词间距）。

首行缩进：text-indent，取值可以为带单位数值，也可以为百分比（百分比是相对于块宽度的）。

文本装饰：text-decoration，取值为none（默认）、underline、line-through(删除线)、overline(上)。

空白：white-space 多个空格合并成一个 强制不换行

一行显示不下自动换行 多个空格合并成一个 一行显示不下自动换行

调试css

进阶

选择器的优先级

样式的优先级一般为：!import > style > id > class > 元素,记住这个原则，相信在判断简单的样式优先级时就没有问题了。然而在实际使用中，我们常常遇到多类选择器判断优先级的问题，那么遇到这个问题该如何解决呢？

优先级由A、B、C、D四个值进行判断，其中对应值计算规则如下：

• 如果存在内联样式则A为1，否则为0；
• B为ID选择器出现的个数；
• C为类选择器、属性选择器、伪类选择器出现的个数；
• D为标签选择器和伪元素选择器出现的个数

将ABCD进行按顺序进行组合，组合数字最大的，优先级更高，当优先级相同时，遵循后面的优先级更高的原则。

样式属性的覆盖与冲突

覆盖：当样式属性相同的情况下，遵循优先级高的覆盖优先级低的，后面的覆盖前面的这个原则。

继承：某些属性会自动继承其父元素的计算值,除非显式指定一个值

初始值

• CSS中,每个属性都有一个初始值
  • background-color的初始值为 transparent
  • margin-left的初始值为0
• 可以使用initial关键字显式重置为初始值
  • background-color: initial

css求值过程

布局

CSS中布局的相关技术分为三种：分别为文档流、浮动和绝对定位。

盒模型

content

• width

  • 指定contentbox宽度
  • 取值为长度、百分数、auto
  • 百分数相对于容器的contentbox宽度
  • auto由浏览器根据其它属性确定

• height

  • 指定contentbox高度
  • 取值为长度、百分数、auto
  • auto取值由内容计算得来
  • 百分数相对于容器的contentbox高度
  • 容器有指定的高度时,百分数才生效

padding

border

border:指定容器边框样式、粗细和颜色 border-style 属性指定要显示的边框类型。

允许以下值：

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框
• groove - 定义 3D 坡口边框。效果取决于 border-color 值
• ridge - 定义 3D 脊线边框。效果取决于 border-color 值
• inset - 定义 3D inset 边框。效果取决于 border-color 值
• outset - 定义 3D outset 边框。效果取决于 border-color 值
• none - 定义无边框
• hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

• name - 指定颜色名，比如 "red"
• HEX - 指定十六进制值，比如 "#ff0000"
• RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
• HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
• transparent

当四条边框颜色不同时

margin

• 指定元素四个方向的外边距
• 取值可以是长度、百分数、auto
• 百分数相对于容器宽度

使用margin:auto水平居中

<div></div>
<style>
  div {
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto;
    margin-right: auto;
  }
</style>

box-sizing

盒模型一共有两种，分别为content-box 和 border-box，上图就是一个border-box盒模型。

这两种盒子模型都是由content + padding + border + margin组成，但是不同的是，他们的width和height的计算方式不同。

在content-box盒中，width和height只包含content；

在border-box盒中，width和height由content + padding + border组成。

需要注意的是，当width和height的值设为百分比时，其基数取决于父元素的对应属性，而当padding、margin、border取百分比的时候则基数都取决于父元素的width。

盒模型的转换可以使用box-sizing属性进行转换，对应值分别为content-box和border-box。

over-flow

over-flow: 溢出，取值为四种，分别为visible、hidden、scroll、auto。

块级盒子和行级盒子的比较

display属性

• block 块级盒子
• inline 行级盒子
• inline-block本身是行级,可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
• none 排版时完全被忽略

常规流

行级排版上下文IFC

<div>
  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
  <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
  And <em>Inline Block</em>
</div>

<style>
  div {
    width: 10em;
    //overflow-wrap: break-word;
    background: #411;
  }

  em {
    display: inline-block;
    width: 3em;
    background: #33c;
  }
</style>

块级排版上下文BFC

<span>
  This is a text and
  <div>block</div>
  and other text.
</span>

<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }

  div {
    line-height: 1.5;
    background: lime;
  }
</style>

Flex Box

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
    border: 2px solid #966;
  }

  .a, .b, .c {
    text-align: center;
    padding: 1em;
  }

  .a {
    background: #fcc;
  }

  .b {
    background: #cfc;
  }

  .c {
    background: #ccf;
  }
</style>

对于flex弹性布局，可参阅Flex 布局教程进行学习。

也建议通过这个链接在PC端进行学习：flexboxfroggy.com/

Grid布局

同样贴上学习链接，grid布局

在这里讲解一下grid布局的基本思想，即先画表格，再按照表格将元素填入其中

浮动

由于弹性布局的存在，建议将浮动回归至原本的图文排版中。

position

relative：在常规流里面布局，相对于自己本应该在的位置进行偏移，使用top、left、bottom、right设置偏移长度，流内其它元素当它没有偏移一样布局

absolute：脱离文档流，相对于最近的非static祖先定位，不会对流内元素布局造成影响。

fixed：脱离文档流，位置总是相对于视口固定。

sticky：粘性布局，元素首先会被相对定位，直到在视口中遇到给定的偏移值为止，之后固定在适合的位置。