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

沈点心
105 阅读5分钟

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

重点内容

  • CSS 代码构成
  • CSS 使用方法
  • CSS 流程之选择器组、文本渲染
  • 调试 CSS

了解CSS

一、CSS是什么

  • CSS全称为Cascading Style Sheets，可以用来定义页面元素的样式。
    包括设置字体和颜色、设置位置和大小以及添加动画效果等等
  • 示例代码
    • h1为选择器Selector
    • color为选择器Property
    • white为属性值Value
h1 { 
    color: white;
    font-size: 14px; /*声明Declaration*/
}

二、在页面中使用CSS

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

1. 外链

  • 将CSS样式单独放在一个文件里，在页面中使用link标签引入
  • 示例代码
<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

2. 嵌入

  • 将样式代码嵌入到HTML的style标签里
  • 示例代码
<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none; }
  p { margin: lem 0; }
</style>

3. 内联

  • 将样式代码写到标签的style属性里
  • 示例代码
<!-- 内联 -->
<p style="margin: lem 0">Example Content</p>

三、CSS是如何工作的

image.png

四、选择器Selector

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

1. 通配选择器

  • 用 * 号表示匹配所有
  • 示例代码
<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
  color: red;
  font-size: 20px;
}
</style>
  • 运行效果

image.png

2. 标签选择器

  • 使用标签设置样式
  • 示例代码
<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>
  • 运行效果

image.png

3. 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>
  • 运行效果

image.png

4. 类选择器

  • 如果标签包含class属性，可以通过 .class值 设置样式
  • 注意 ：class值可不唯一
<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

5. 属性选择器

  • 如果标签包含某一属性，可以通过 [属性名] or 标签名[属性名="属性值"] 设置样式
  • 示例代码一
<label>用户名：</label>
<input value="zhao" disabled />

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

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>
  • 运行效果

image.png

  • 示例代码二
<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>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] { /* "^=" 表示href属性值以"#"开头 */
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] { /* "$=" 表示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

6. 伪类（pseudo-classes）

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

（1）状态伪类

  • 当标签处于某种状态下，可以通过状态伪类设置样式
  • 链接
    • a:link ：处于默认状态
    • a:visited ：链接已被点击过
    • a:hover ：鼠标移动至链接上
    • a:active ：鼠标点击链接
  • 输入框
    • :focus ：鼠标点击输入框（聚焦）
  • 示例代码
<a href="http://example.com">
  example.com
</a>

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

<style>
a:link { /* a标签处于默认状态时 */
  color: black;
}

a:visited { /* a标签中的链接已被点击过时 */
  color: gray;
}

a:hover {  /* 鼠标移动至链接上时 */
  color: orange;
}

a:active {   /* 鼠标点击链接时 */
  color: red;
}

:focus {  /* 鼠标点击输入框（聚焦）时 */
  outline: 2px solid orange;
}
</style>

（2）结构性伪类

  • 列表
    • li:first-child ：li父元素的第一个子元素
    • li:last-child ：li父元素的最后一个子元素
  • 示例代码
<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>

（3）组合（Combinators）

image.png

  • 示例代码一
<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>

（4）选择器组

  • 示例代码
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属性

一、 颜色

1. RGB

image.png

2. HSL

  • 通过色相、饱和度和亮度进行调节

image.png

image.png

3. 颜色关键字

image.png

4. alpha 透明度

image.png

二、 字体

  • 使用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>

1. 通用字体族

image.png

2. 使用Web Fonts

  • 在 style 标签中使用 @font-face 设置字体
    • font-family ：字体名称
    • src 中的 url ：字体下载路径
  • 示例代码
<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>

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>

4. font-style

  • 使用font-style设置字体样式，比如斜体 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>

5. font-weight

  • 使用font-weight设置字重，即字的粗细
  • 数值从 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>

6. line-height

  • 使用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>

三、 文字

1. 文字对齐

2. 文字间距

  • 使用spacing调整文字间距
    • letter-spacing ：单个单词间字母间距
    • word-spacing ：单词间距
  • cdpn.io/webzhao/deb… image.png

3. 首行缩进

image.png

4. 文字修饰

image.png

5. 处理元素间的空白

  • 使用white-space处理元素间的空白

image.png

调试 CSS

  • 右键点击页面，选择检查
  • 使用快捷键
    • Ctrl+Shift+I （Windows）
    • Cmd+Opt+I（Mac）
avatar
文章
阅读
粉丝