了解CSS

CSS是什么？

Cascading Style Sheets
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

    h1{
        color:white;
        font-size:14px;
    }

在页面中使用CSS

<!--外链-->
<link rel="stylesheet" href="/assets/style.css">

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

<!--内嵌-->
<p style="margin: lem 0;">Example Content</p>

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

CSS是如何工作的

选择器Selector

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

适配选择器

*为统配符号

<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选择器

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

伪类（pseudo-classes）

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

伪类选择器.gif

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

<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {
    color: red;
  }
  
  input.error {
    border-color: red;
  }
</style>

组合（Combinators）

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

选择器组

颜色-RGB

颜色-HSL

标准色卡

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

通用字体族



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

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title>CodePen - 青训营/CSS/通用字体族</title>
  
  
  
  
<style>
* {
  box-sizing: border-box;
}
body {
  font-size: 32px;
  margin: 0;
  background: #111;
  color: #eee;
}

ul {
  padding: 0;
}

li {
  display: block;
}

body > ul {
  display: flex;
  flex-wrap: wrap;
}

body > ul > li {
  width: 33.3%;
  padding: 2em 0.2em;
  text-align: center;
}

li li {
  font-size: 70%;
}
</style>

  
  
  
  

</head>

<body translate="no" >
  <ul>
  <li style="font-family:serif">
    Serif 衬线体
    <ul>
      <li><span style="font-family: Georgia">Georgia</span>、<span style="font-family:STSong">宋体</span></li>
    </ul>
  </li>
  <li style="font-family:Helvetica,sans-serif">
    Sans-Serif 无衬线体
    <ul>
      <li><span style="font-family:Arial">Arial</span>、<span style="font-family:Helvetica">Helvetica</span>、<span style="font-family:STXihei">黑体</span>、<span style="font-family:Microsoft Yahei">微软雅黑</span></li>
    </ul>
  </li>
  <li style="font-family:cursive, STKaiti">
    Cursive 手写体
    <ul>
      <li><span style="font-family:CaflischScript-Regular">Caflisch Script</span>、楷体</li>
    </ul>
  </li>
  <li style="font-family:fantasy">
    Fantasy
    <ul>
      <li><span style="font-family:ComicSansMS">Comic Sans MS</span>, <span style="font-family:Papyrus">Papyrus</span>, <span style="font-family:Zapfino">Zapfino</span></li>
    </ul>
  </li>
  <li style="font-family:monospace">
    Monospace 等宽字体
    <ul>
      <li><span style="font-family:Consolas, monospace">Consolas</span>、<span style="font-family:Courier">Courier</span>、中文字体</li>
    </ul>
  </li>
</ul>
  
  
  
  

</body>

</html>

font-family使用建议

字体列表最后写上通用字体族
英文字体放在中文字体前面

使用Web Fonts

Web开放字体格式（Web Open Font Format，简称WOFF）是一种网页所采用的字体格式标准。此字体格式发展于2009年，现在正由万维网联盟的Web字体工作小组标准化，以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小，并且不包含加密也不受DRM（数位著作权管理）限制。

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

font-size

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

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

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

调试CSS

右键点击页面，选择检查
使用快捷键
- crtl+shift+I（Windows）
- cmd+opt+I（Mac）

【第二届青训营-寒假前端场】- 了解CSS

了解CSS

CSS是什么？

在页面中使用CSS

CSS是如何工作的

选择器Selector

适配选择器

标签选择器

id选择器

类选择器

属性选择器

伪类（pseudo-classes）

组合（Combinators）

选择器组

颜色-RGB

颜色-HSL

标准色卡

字体font-family

通用字体族

font-family使用建议

使用Web Fonts

font-size

调试CSS