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

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

什么是CSS

Cascading Style Sheets

用来定义页面元素的样式

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

在页面中使用CSS

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

CSS如何工作

选择器

• 找出页面中的元素，以便给他们设置样式

• 使用多种方式选择元素

  • 按照标签名、类名或id
  • 按照属性
  • 按照DOM树中的位置

  通配选择器

  *{
      color:red;
  }
  //全局都是红色字体
  

  标签选择器

  .h1{
      color:orange;
  }
  

  id选择器

  #h2{
      color:blue;
  }
  

  类选择器

  <div class="box">
      html
  </div>
  <div class="box">
      css
  </div>
  <style>
      .box{
          color:yellow;
      }
  </style>
  

  属性选择器

  <label>username：</label>
  <input value="zhangsan" disabled>
  <style>
      [disabled]{
          background:#ccc;
      }
  </style>
  

  <p>
      <label>密码：</label>
      <input type="password" value="123">
  </p>
  <style>
      input[type="password"]{
          color；red;
      }
  </style>
  

  伪类

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

  • 几种伪类

    • 状态伪类
    • 结构性伪类

  //状态伪类
  <a href="http://example.com">
      example
  </a>
  <label>用户名
      <input type="text">
  </label>
  <style>
      a:link{
          color:red;
      }//默认状态
      a:visited{
          color:grey;
      }//访问过的链接的变化
      a:hover{
          color:blue;
      }//鼠标移动链接上的变化
      a:active{
          color:red;
      }//鼠标按下去后的变化
      :focus{
          outline:2px solid orange;
      }//输入框
  </style>
  

  <ol>
      <li>a</li>
      <li>b</li>
      <li>c</li>
  </ol>
  <style>
      li:first-child{
          color；red;
      }//父级的第一个子级的变化
      li:last-child{
          color:orange;
      }
  </style>
  

  

调试css

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

• 快捷键

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

Web Fonts

1. font-sizez

   • 关键字

     • small、medium、large

   • 长度

     • px、em

   • 百分数

     • 相对于父元素字体大小

2. line-height

   line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。

3. text-align

   text-align运用在块级元素中，使其中的文本对齐。

4. word-spacing

   设置英文单词之间的间距

5. text-indent

   首行缩进，一般缩进2个字符的间距

6. text-decoration

   用于设置文本的修饰线外观的（下划线、上划线等）

7. letter-space

   用于设置文本字符的间距