了解CSS | 青训营笔记

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

JavaScript (行为)

CSS (样式)

HTML (内容)

CSS 是什么？

• Cascading Style Sheets

• 用来定义页面元素的样式

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

在页面中使用CSS

推荐使用第一种外链的写法

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">
​
<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none; }
  p { margin: 1em 0; }
</style>
​
<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>

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属性的元素设置为：-->
    [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)

• 不基于标签和属性定位元素

• 几种伪类

  • 状态伪类
  • 结构性伪类

• 例1：鼠标放在页面的链接上（下例中的example.com）不同操作（如鼠标单纯防止、鼠标点击等情况有不同反应）

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

• 例2：

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

多种选择器组合

• 标签放前面，属性或Class放后面

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

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

组合 (Combinators)

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A > B	选中B，如果它是A的子元素	section > p
兄弟选择器	A ~ B	选中B，如果它在A后且和A同级	h2 ~ p
相邻选择器	A + B	选中B，如果它紧跟在A后面	h2 + p

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {  <!-- article下的三个p标签都会被选中-->
    color: black;
  }

  article > p { <!-- 只有article下的直接的一个p标签才会被选中-->
    color: blue;
  }

  h2 + p {  <!-- h2后紧跟的p标签会被选中-->
    color: red; 
  }
</style>

选择器组

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

颜色

RGB

• #000000与rgb(0, 0, 0)，每个数取值为0~255

HSL

• Hue：色相(H)是色彩的基本属性, 如红色、黄色等; 取值范围是0-360。
• Saturation：饱和度(S)是指色彩的鲜艳程度，越高约鲜艳；取值范围0-100%。
• Lightness：亮度(L)指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

alpha 透明度

• alpha=1是不透明的
• 用法：#ff000094或rgba(255, 0, 0, 0.58)或hsla(0, 100%, 50%, 0.58)（rgba也可写作rgb）

字体 font-family

使用本地字体

• 用font-family字体族而非单个字体，目的是适配不同设备提供的字体不同
• 字体列表最后写上通用字体族（serif或sans-serif）
• 推荐英文字体写在中文字体之前（否则英文字符可能用中文字体展示）

<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的一座国家公园，位于新墨西哥州东南部。</p>

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

使用网络字体

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

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

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字体的2倍
  }

  section .note {
    font-size: 80%; //section字体的80%
    color: orange;
  }
</style>

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

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>

行高 line-height

• line-height: 45px;或line-height: 1.6

font属性（合并在一起写）

• `font: style weight size/height family

h1 {
  /* 斜体 粗细 大小/行高 字体族 */
  font: bold 14px/1.7 Helvetica, sans-serif;
}

p {
  font: 14px serif;
}

文字对齐 text-align

• left、center、right、justify

文字间隔 spacing

• letter-spacing、word-spacing

首行缩进 text-indent

• text-indent

文字修饰 text-decoration

• none、underline、line-through、overline

空格 white-space

• 属性：

  • normal：只保留一个空格
  • nowrap：强制不换行
  • pre：完全保留初始空格
  • pre-wrap：保留空格和换行
  • pre-line：合并空格，保留换行

调试 CSS

• 右键点击页面，选择「检查」

• 使用 快捷键

  • Ctrl+Shift+I (Windows)
  • Cmd+Opt+I (Mac)