06 - CSS 属性

Last updated 5 months ago

06 - CSS 属性

★CSS 颜色

为我们的网站增添色彩

Color Properties

html {
  background-color: red;
}
h1 {
  color: blue;
}

Named Colors

★字体属性

改变文本的外观

Font Properties

h1 {
  color: blue;
  font-weight: bold;/* 字体粗细 */
  font-size: 20px;/* 字体大小 */
  font-family: sans-serif;/* 字体系列 */
}

Font Size
- h1 { font-size: 20px;/* 字体大小 */ }
- 意味什么
  - 1 px（Pixel 像素）: 1/96th inch (0.26mm✖️0.26mm)
  - 1 pt（Point 磅点）: 1/72nd inch(0.35mm✖️0.35mm) 【word文档的字体用pt】
  - 1 em（）: 100% of parent 【相对于HTML元素的父级；文本的动态尺寸，相对于标准的 16px = 1em】
  - 1 rem（）: 100% of root 【文本的动态尺寸，相对于根元素；优先用于文本】
Font Weight
- h1 { font-weight: bold;/* 字体粗细 */ }
- 一些方法来改变字体粗细
  - Keywords（关键字）：normal/bold/...
  - Relative to Parent（相对于父级）：lighter/bolder
  - number：100-900（-100light or +100bold）

Font Family

h1 {
  font-family: Helvetica, sans-serif;/* 字体系列 */
}

h2 {
  font-family: "Times New Roman", serif;
}

（寻找免费字体）

<head>
  <!-- .... -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
</head>

 /* Link: https://fonts.google.com/specimen/Caveat */
    h1 {
      font-family: 'Caveat', cursive;
    }

Text Align

h1 {
  text-align: center;/* 文本对齐 left right start end */
}

★检查 CSS

使用 CSS 概览功能

Chrome开发者工具：在其所做的任何更改（暂时的，供你观察和尝试）不会影响到你的原始文件
- 打开
  - More Tools -> Developer Tools
  - 快捷键：command+option+i （windows）：control+shift+i （功能键）F12
  - 右键 -> Inspect
- 选择元素
- 元素（Element）选项卡的子部分
  - 样式（Styles）部分：显示应用于元素的样式
    单击style.css，显示其源码
    更改CSS工具 eg. 选择h1，单击“添加”，就可以为这个h1添加样式
    当自己的规则覆盖其他现有的规则
  - 如何知道实际应用到你的CSS元素上的内容呢？计算后的样式（Computerd）部分：用于查看 HTML 元素最终计算样式的部分
- CSS Overview：显示一堆有的东西（颜色、字体...）

★CSS 盒子模型 - 边距、填充和边框

Margin（外边距）、Padding（内边距）和 Border（边框）

盒子模型：有宽度和高度形成的

height width
Border

border: 10px solid black;/* 1边框的厚度 2边框的样式 Dashed 3边框的颜色*/
/* 注意：html元素的盒子盒子（height width）没有改变 */

Padding
Margin
检查器的Box Model
Padding/Margin/Border-width设值

人造盒子：将不同的内容的内容组合在一起，以便对其设置样式 <div></div>（content division Element 内容划分元素）
- 将一组HTML元素组合成一个盒子
- 对于组织和划分网页内容非常有用

★[项目] 励志海报网站

制作自己的表情包

<!-- 
  TODO: 创建一个励志风格的网页。
  可以根据自己的喜好进行样式设计。
  可以参考目标图片进行灵感设计。
  但网页必须包含以下功能：
1. 主标题 h1 文本应使用 Google Fonts 中的 Regular Libre Baskerville 字体：
  https://fonts.google.com/specimen/Libre+Baskerville
2. 文本应为白色，背景为黑色。
3. 在 assets 文件夹内的 images 文件夹中添加一张自己的图片。图片需有 5px 的白色边框。
4. 文本应居中对齐。
5. 创建一个 div 容器来包含 h1、p 和 img 元素。调整边距，使图片和文本在页面上居中显示。
  提示：可以通过设置 div 宽度为 50%，并设置 margin-left 为 25% 来水平居中 div。
  提示：将图片的宽度设置为 100%，以便图片填满 div 容器。
6. 在 MDN 文档上了解 text-transform 属性，使用 CSS 将 h1 文本转换为大写：
  https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform 
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Motivation Meme</title>
  <link rel="stylesheet" href="./solution.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
</head>

<body>

  <div class="poster">
    <img class="motivation-img" src="./assets/images/daenerys.jpeg" src="daenerys with egg" />
    <h1>That Special Moment</h1>
    <p>When you find the perfect avocado at the supermarket</p>
  </div>
</body>

</html>

/* 为整个页面设置黑色背景 */
body {
  background-color: black;
}

/* 将 h1 标题转换为大写字母并设置较大的字体大小 */
h1 {
  text-transform: uppercase;
  font-size: 3rem;
}

/* .poster 类用于包含整个海报内容 */
.poster {
  /* 设置海报宽度为页面的一半 */
  width: 50%;
  /* 将海报居中显示 */
  margin-left: 25%;
  /* 为海报与顶部之间留出空间 */
  margin-top: 100px;
  /* 设置文本颜色为白色 */
  color: white;
  /* 使用 Google 字体 Libre Baskerville */
  font-family: "Libre Baskerville", serif;
  /* 将海报内的文本居中对齐 */
  text-align: center;
}

/* 为图片添加白色边框并调整图片大小 */
.motivation-img {
  /* 添加 5px 的白色边框 */
  border: 5px solid white;
  /* 图片宽度调整为容器的 100% */
  width: 100%;
}

Previous05 - CSS 简介 Next07 – 中级 CSS

Last updated 5 months ago