这是我参与【第五届青训营】伴学笔记创作活动的第二天

前言

CSS(Cacading Style Sheets)被用来定义页面的样式，作为前端技术栈的关键一环，对页面元素及样式呈现起到了直接作用。本篇笔记是css入门级的一篇笔记

笔记主要内容

基础代码
CSS使用方法
CSS工作原理
选择器
伪类
组合
颜色属性
字体
- 字体族
- 字体大小
- 行高
css调试

主要知识点

基础代码

基础代码.png

CSS使用方法

css引入.png

CSS工作原理

工作原理.png

选择器

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

通配选择器
标签选择器
id选择器
类选择器
属性选择器

伪类

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

组合

组合.png

颜色属性

RGB：

HSL:

字体

五种字体族：

字体族.png

字体大小font-size

关键字
- small、medium、large
长度
- px、em
百分数
- 相对于父元素字体大小字体样式简写

字体简写.png

CSS调试

css调试.png

实践练习

通配选择器

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

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

标签选择器

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

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

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>

类选择器

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

属性选择器

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

状态伪类

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

结构伪类

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

字体：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>

web font使用：

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

字体其余属性

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

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

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

行高

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

结语

到这里便是一些基础css的了解，由于作者水平有限，文章写的比较冗长，大部分样式标签也没有列举，作者也正在不断学习中。谢谢理解

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

前言