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

祁诩掘金
70 阅读2分钟

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

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

CSS

用来定义页面元素样式

  • 设置字体颜色
  • 位置和大小
  • 添加动画效果
h1{
    color:white;
    font-size:14px;
}

h1(选择器Selector) color(颜色):white(属性); font-size:14px;(声明)

在页面中使用

image.png

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

示例1

如何工作

image.png

解析渲染展示

选择器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;
      font-size: 24px;
    }
    p {
      color: gray;
      font-size: 14px;
      line-height: 1.8;
    }
  </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>

id唯一

类选择器

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

class 类

属性选择器

<label>用户名：</label>
<input value="zhao" disabled />

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

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

[disabled]中间可替换属性

伪类

  • 不基于标签和属性定位元素
  • 几种伪类
    • 状态伪类（访问过的链接/未访问过的链接 选中/未选中）
    • 结构性伪类(列表位置)

组合

名称语法说明示例
直接组合AB满足A同时满足Binput: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

示例2

颜色

  • rgb

rgb(,,)(红绿蓝) #（16进制）

  • hsl

色相 饱和度 亮度

  • 英文

  • 透明度 alpha

rgba hsla

字体 font-family

多个字体

serif衬线体 georhia、宋体 sans-serif无衬线体 Arial、Helvetica、黑体 cursive手写体 楷体、caflisch script

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

行高 line-height

调试CSS

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