理解CSS ｜ 青训营笔记

LookAtLL
83 阅读3分钟

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

一、重点内容回顾

  1. 介绍了CSS的相关概念和在页面中使用CSS的三种方式
  2. 介绍了CSS的工作原理
  3. 重点学习了CSS选择器
  4. 学习了对颜色、字体和文本的设置

二、理解CSS

2.1 CSS是什么？

  • Cascading Style Sheets
  • 用来定义页面元素的样式，如字体和颜色、位置和大小、添加动画效果
  • 一个选择器加上一对大括号称为一个规则 1673848797719.png

2.2 在页面中使用CSS

  1. 外链(推荐)：使用link标签引入单独的css文件
  2. 嵌入：写在style标签内
  3. 内联(不推荐)：写在标签的style属性内
  <!-- 外链 -->
  <link rel="stylesheet" href="/assets/style.css">

  <!-- 嵌入 -->
  <style>
    li { margin: 0; list-style: none; }
    p { margin: 0; lem 0;}
  </style>

  <!-- 内联 -->
  <p style="margin:lem 0">Example Contetnt</p>

2.3 CSS是如何工作的？

1673849319188.png

2.4 CSS选择器(Selector)

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

2.4.1. 通配选择器

  • 语法：* {属性名：属性值}

2.4.2. 标签选择器

  • 语法：标签名 {属性名：属性值}

2.4.3. id选择器

  • 语法：#id {属性名：属性值}
  • ID属性的值在页面中必须是唯一的

2.4.4. 类选择器

  • 语法：.类名 {属性名：属性值}
  • 同一类型可以设置相同的class属性

2.4.5. 属性选择器

  • 语法：[属性名] {}或[属性名="属性值"] {}

2.4.6. 伪类

  • 不基于标签和属性定位元素
  • 几种伪类
    • 状态伪类
      • a:link:未访问的链接
      • a:visited:已访问的链接
      • a:hover:鼠标移动到链接上
      • a:active:激活的链接，鼠标长按未松开
      • :focus:选中聚焦
    • 结构性伪类
      • nth-child:父元素中的第n个子元素
      • nth-last-child:与nth-child类似，但是是从最后一个子元素开始往前计数

2.4.7. 组合(Combinators)

1673851162212.png

2.5 颜色-RGB

2.5.1 RGB

  • RGB，指定红绿蓝中每一种颜色的比重来表示不同颜色，范围为0-255，如rgb(255,255,255)
  • 另一种表示方式为 ＃+六位字符 ，使用十六进制表示0-255，每两位表示一个颜色，如#ffffff

2.5.2 HSL

  • HSL，代表颜色的三个属性
    • 色相(H)：取值范围为0-360
    • 饱和度（S）：取值范围为0-100%，表示鲜艳程度，越高颜色越鲜艳
    • 亮度（L）：取值范围为0-100%，表示明亮程度，越高颜色越亮

2.5.3 指定颜色关键字（不推荐）

1673851742527.png

2.5.4 alpha透明度

  • 取值范围为0-1，值为1时完全不透明

2.6 字体

2.6.1通用字体族

  • 当所有指定字体都无法使用时，浏览器会从设备上找到一种字体去展示
<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>

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

1673852080487.png

  • font-family使用建议
    • 字体列表最后写上通用字体族
    • 英文字体放在中文字体前面

2.6.2 网络字体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>

2.6.3 font-size

  • 关键字
    • small、medium、large
  • 长度
    • px、em
  • 百分数
    • 相对于父元素大小
<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>

2.6.4 font-style

  • normal
  • italic:倾斜

2.6.5 font-weight

  • 范围为100-900
  • normal:400
  • bold(粗体):700

2.6.6 line-height

-行高：两行文字基准线的距离

1673875592389.png

2.6.7 font

1673875647817.png

2.7 文本

  • text-align：文本对齐方式，属性值left、center、right、justify
  • spacing
    • letter-spacing：调节字母之间的间距
    • word-spacing：：调节单词之间的间距
  • text-indent：规定文本块中首行文本的缩进
  • text-decoration：文字修饰，值none、underline、line-through、overline
  • white-space：处理元素中的空白，值normal、nowrap、pre、pre-wrap、pre-line

2.8 调试CSS

  • 右键点击页面，选择“检查”
  • 使用快捷键
    • Ctrl+Shift+I(Windows)
    • Cmd+Opt+I(Mac)

三、总结

CSS部分的知识点较多，我先总结了部分笔记，有关CSS继承、求值、布局的知识点后续将继续整理。

avatar
文章
阅读
粉丝