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

RMX08
59 阅读7分钟

欢迎来到 RMX08 的 金元宝集合箱！！

这是我参与「第五届青训营」伴学笔记创作活动的 第2天 ，作为一个前端微小白，希望能在接下来的一个月中收获满满的 金元宝 。

CSS是什么？

含义

Cascading Style Sheets，简称 CSS 。用来定义页面元素的样式，如 设置字体和颜色 、设置位置和大小 、添加动画效果 。

基础代码模板

image.png

image.png

  • h1 为 选择器 （Selector） ，用来选中页面中所有标签为 h1 的进行样式渲染。
  • color 、font-size 为 属性 （Property），样式的具体方面。
  • white 、14px 为 属性值 （Value）
  • color: white； 为 声明 （Declaration）
  • 多条声明用分号隔开，并用大括号组合起来成为一个 声明块*

在页面中使用CSS

在页面中使用CSS一般有三种方法： 外链 、嵌入 、内联 。

  • 外链 —— 将所有需要用到的 CSS 的定义放在一个 单独的文件 中，并使用 link 标签将其引入到页面中
  • 嵌入 —— 利用 <style> 标签直接将 CSS 样式嵌入到 <html> 标签中
  • 内联 —— 将标签的样式直接写在标签的 style 样式中，无需选择器

image.png

一般，更注重样式与内容的分离，功能上的分工即使用 外链 的形式， html 负责内容， CSS 负责样式。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Blog</title>
  <style>
    h1 {
      color: orange;
      font-size: 24px;
    }
    p {
      color: gray;
      font-size: 14px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <h1>Web框架的架构模式探讨</h1>
  <p>在写干货之前，我想先探讨两个问题，
  模式的局限性？模式有什么用？</p>
</body>
</html>

image.png

CSS是如何工作的

当我们打开一个页面后，浏览器会对 HTML 代码进行 加载 与 解析，从而形成 DOM树，在解析的过程中，通过对外链的样式进行 加载 与 解析，计算出每一个节点的样式是什么样的，从而得到一个渲染树，将样式添加到DOM的每个节点位置中，最终展示一个完整的页面。

即 HTML 与 CSS 单独进行解析，通过DOM树，将解析出来的 CSS 附加到 DOM 树上形成一个渲染树，并展示页面。

下图仅为一个简化后的过程图，实际过程则要复杂得多，后续会陆续讲到。

image.png

选择器 Selector

  • 找出页面中的元素，以便给他们设置样式
  • 可使用多种方式选择元素
    • 按照标签名、类名或 id
    • 按照属性
    • 按照DOM中的位置

通配选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
  color: red;
  font-size: 20px;
}
</style>

* 统指所有标签，如上代码，使用通配选择器后，h1 、p字体颜色都变为红色，大小都为 20px

image.png

标签选择器

即使用标签来选择样式。

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>

image.png

id选择器

若有多个相同的标签，但每个标签样式并不相同，可为需设置样式的标签，设置 id 属性值。在设置样式时，便可采用 # + id 属性值作为选择器。id值需唯一 ！！！

<h1 id="logo">
  <img src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
  HTML5 文档
<h1>

<style>
  #logo {
    font-size: 60px;
    font-weight: 200;
  }
</style>

类选择器

当标签数量很多时，不可能每个标签都定义一个 id 属性，即可在样式相同标签中，设置 class 属性值，并在设置样式时，便可采用 . + class 属性值作为选择器。class 属性值可多次出现，因此相较于 id 属性较为常用。

<h2>Todo List</h2>
<ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>
<style>
.done {
  color: gray;
  text-decoration: line-through;
}
</style>

image.png

属性选择器

通过标签的 某一个属性 或 某些属性 去选中标。

使用 [ 属性名 ] 。

  • 单个属性

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

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

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

    image.png

  • 多个属性

    同时包含 某些属性 的标签。

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

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

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

    image.png

  • 属性和值选择器

    若有多个 type 属性，可通过不同属性值选中。

    使用 标签 + [ 属性名 = "属性值" ] 。

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

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

    image.png

    以某个指定属性值 开头 。

    使用 标签 + [ 属性名 ^= "属性值" ]。

    <p><a href="#top">回到顶部</a></p>

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
<style>

    image.png

    以某个指定的属性值 结尾 。

    使用 标签 + [ 属性名 $= "属性值" ]。

    <p><a href="a.jpg">查看图片</a></p>

<style>
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

![image.png](p9-juejin.byteimg.com/tos-cn-i-k3…

更多属性选择器详情见 ⇨ CSS 属性选择器 | 菜鸟教程 (runoob.com)

伪类 pseudo - classes

  • 不基于标签和属性定位元素
  • 伪类种类
    • 状态伪类
    • 结构性伪类

状态伪类

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

状态伪类选中的元素，并非指某个具体的元素，而是当某个元素处于某种状态之下，才会被选中。

使用 : + 状态。

某个比标签多个状态，使用 标签 + : + 状态。

如上述代码中，链接 <a> 可分为四个状态：未被选中（link） 、访问过 （visited）、鼠标移上去后 （hover） 、点击时（active）。因此，可通过伪类选择器，改变不同状态下的链接样式。

文本框在被点击聚焦时，为 focus 状态.

结构性伪类

根据 DOM 节点在夫级中的位置设置样式。

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

image.png

  • first-child 为第一个子节点。
  • last-child 为最后一个子节点。

选择器的组合

各类选择器中，可以进行两两组合 ↓ ↓ ↓

image.png 如下代码 ↓ ↓ ↓

<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>
  • article p 选中的是 <article> 标签下的所有 <p> 标签。
  • article > p 选中的是 <article> 标签下直属的 <p> 标签。
  • h2 + p 选中的是 <h2> 紧跟着的 <p> 标签。

image.png

选择器组

用 , 将要设置样式的标签分隔开。

body, h1, h2, h3, h4, h5{
  margin: 0;
  padding: 0;
}

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

基本样式

颜色

RGB

三原色 红 、绿 、蓝，每个颜色数值从 0 ~ 255

rgb（0 ~ 255，0 ~ 255，0 ~ 255）

RGB 调色板CodePen - 青训营/CSS/RGB (cdpn.io)

HSL

Hue Saturation Lightness，简称HSL。

hsl（0 ~ 360，0 ~ 100%，0 ~ 100%） image.png

HSL 调色板CodePen - 青训营/CSS/HSL (cdpn.io)

指定颜色的值

image.png

透明度 alpha

数值从 0 ~ 1，0 是完全透明，1 是完全不透明。直接跟在原模式后面。

若以红色为不透明底色

  • #ff000078
  • hsla（0，100%，50%，0.47）/ hsl（0，100%，50%，0.47）
  • rgba (255，0，0，0.47）/ rgb (255，0，0，0.47）

alpha 调色板CodePen - 青训营/CSS/alpha (cdpn.io)

字体族 font-family

网页可能多个浏览器访问，不同的浏览器兼容不同的字体，因此，从前往后按顺序使用能够兼容的字体。

<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴深处。</p>

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

其中 serif 并非特定的字体，而是一个通用的字体族，一种分类 ↓ ↓ ↓

image.png

  • 在字体列表最后一定加上通用字体族
  • 英文字体放在中文字体前

Web Fonts

当没有浏览器所需的字体，可通过Web Fonts先下载该字体文件，再使用。

英文字体

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

image.png

中文字体

由于中文字体包比较大，因此在使用时，要先对文件进行一个裁切，留下用得到的文字。

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

image.png

字体大小 font-size

image.png

<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>

<style>
  section {
    font-size: 20px;
  }

  section h1 {
    font-size: 2em;
  }

  section .note {
    font-size: 80%;
    color: orange;
  }
</style>

image.png

由上述代码，<h1> 字体大小为 20 * 2，<p> 字体大小为 20 * 80%。

字体样式 font-style

默认为 normal，斜体为 italic 等。

<p class="normal">Normal Text</p>
<p class="italic">Italic Text</p>

<style>
  p {
    font-size: 36px;
    font-family: "Helvetica Neue", sans-serif;
  }

  .normal {
    font-style: normal;
  }

  .italic {
    font-style: italic
  }
</style>

image.png

字体粗细 font-weight

数值为 100 ~ 900。 normal 为 400，bold 为700.

！！！字重设计首先需要改字体支持 100 ~ 900 这么多种字重。

<ul>
  <li class="w1">锦瑟无端五十弦（100）</li>
  <li class="w2">锦瑟无端五十弦（200）</li>
  <li class="w3">锦瑟无端五十弦（300）</li>
  <li class="w4">锦瑟无端五十弦（400-normal）</li>
  <li class="w5">锦瑟无端五十弦（500）</li>
  <li class="w6">锦瑟无端五十弦（600）</li>
  <li class="w7">锦瑟无端五十弦（700-bold）</li>
  <li class="w8">锦瑟无端五十弦（800）</li>
  <li class="w9">锦瑟无端五十弦（900）</li>
</ul>

<style>
  .w1 { font-weight: 100 }
  .w2 { font-weight: 200 }
  .w3 { font-weight: 300 }
  .w4 { font-weight: 400 }
  .w5 { font-weight: 500 }
  .w6 { font-weight: 600 }
  .w7 { font-weight: 700 }
  .w8 { font-weight: 800 }
  .w9 { font-weight: 900 }
</style>

image.png

行高 line-height

两行文字基准线之间的距离。

image.png

<section>
  <h1>Font families recap</h1>
  <p>As we looked at in fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. </p>
</section>

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

  p {
    font-size: 20px;
    line-height: 1.6;//表示自身字体大小的多少倍
  }
</style>

image.png

组合 font

可以将之前讲到的有关字体的样式，缩略成一个属性。

image.png

对齐样式 text-align

  • left

    image.png

  • center

    image.png

  • right

    image.png

  • justify

    类似于 Word 文档中的分散对齐，不同于 left ，但对最后一行不生效。

    image.png

间距 spacing

  • 字符间距 letter-spacing
  • 单词间距 word-spacing

image.png

间距调节器 ⇨ CodePen - 青训营/CSS/spacing (cdpn.io)

首行缩进 text-indent

image.png

首行缩进调节器 ⇨ CodePen - 青训营/CSS/indent (cdpn.io)

文本装饰 text-decoration

  • none 无装饰

    image.png

  • underline 下划线

    image.png

  • line-through 删除线

    image.png

  • overline 上划线

    image.png

空白符 white-space

通过 white-space 控制多个空格、换行等。

image.png

  • normal 默认行为

    image.png

  • nowrap 强制不换行

    image.png

  • pre 保留所有空白符

    当遇到框的宽度有限制时，并不会自动换行，除非文本中本身有换行或者有 <br>。

    image.png

  • pre-wrap 保留空格符并换行

    遇到宽度限制时会自动换行。

    image.png

  • pre-line 保留换行删去空格

    image.png

如何调试CSS

image.png

avatar
文章
阅读
粉丝