内容概述

一. 认识CSS

• css作用

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 目前还没有真正意义上的CSS 3

• css的历史

• css官方文档连接

  • https://www.w3.org/standards/techs/css
  • https://www.w3.org/TR/CSS22/
  • https://www.w3.org/TR/CSS22/propidx.html
  • https://developer.mozilla.org/zh-CN/docs/Web/CSS

• 按照CSS属性的具体用途，大致可以分类为

  1. 文本：color、direction、letter-spacing、word-spacing、line-height、text-align、text-indent、text-transform、text-decoration、white-space
  2. 字体：font、font-family、font-style、font-size、font-variant、font-weight
  3. 背景：background、background-color、background-image、background-repeat、background-attachment、background-position
  4. 盒子模型：width、height、border、margin、padding
  5. 列表：list-style
  6. 表格：border-collapse
  7. 显示：display、visibility、overflow、opacity、filter
  8. 定位： vertical-align、position、left、top、right、bottom、float、clear

后面会逐渐学习到这些CSS属性，目前没必要每一个都去查询了解，用多了自然就记住了（CSS属性名都是小写）

二. CSS的引入方式(提问)

• 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

  • selector {property: value}
  • CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;

• 在很多国内外资料中，“CSS样式”与“ CSS属性”是同义词
  • 样式名 -> 属性名
  • 样式值 -> 属性值

CSS提供了3种方法，可以将CSS样式应用到元素上

• 内联样式（inline style）
  • 将样式直接写在元素的style属性上

• 文档样式表（document style sheet）内嵌样式表（embed style sheet）
  • 将样式写在head元素的style元素中
  • <style>元素的type属性值默认是text/css

• 外部样式表（external style sheet）
  • 将样式写在单独的CSS文件中，然后在当前网页的head元素中用link元素引用
  • <link rel="stylesheet">元素的type属性值默认是text/css
  • 在CSS文件中使用@charset指定文件编码，一般都是UTF-8
  • @import
    • 可以在style元素或者CSS文件中使用@import导入其他的CSS文件
    • 不建议使用@import导入CSS文件，它的效率比link元素低

三. CSS基础选择器

• 选择器的种类:
  • 通用选择器（universal selector）
  • 元素选择器（type selectors）
  • 类选择器（class selectors）
  • id选择器（id selectors）
  • 属性选择器（attribute - selectors）
  • 组合（combinators）
  • 伪类（pseudo-classes）
  • 伪元素（pseudo-elements）

• 统配选择器: *

  • 一般用来给所有元素作一些通用性的设置
  • 比如内边距、外边距
  • 效率比较低，尽量不要使用

• 元素选择器

  • 或者叫做“标签选择器”

• 类选择器(用得最多)

  • 一个元素可以有多个class值，每个class之间用空格隔开
  • class值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
  • 最好不要用标签名作为class值

• id选择器

  • 一个HTML文档里面的id值是唯一的，不能重复
  • id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
  • 最好不要用标签名作为id值

四. CSS常见的属性(提问)

• color：前景色（文字颜色）

  • 包括文字、装饰线、边框、外轮廓等的颜色

• background-color：背景色

• font-size：文字大小

  • em、rem

• width ：宽度；height：高度

  • div要有内容才能撑开
  • 行内元素没有宽高

调试技巧

div {
    outline: 2px solid red !important;
}

附. 颜色空间RGB

• 单词关键字
• rgb/rgba
• #ffffff

RGB颜色
十进制：rgb(red, green, blue)
十六进制：#rrggbb、#rgb

RGBA颜色：rgba(red, green, blue, alpha)

rgb:

255 => 2x100 + 5x10 + 5

ff => 15x16 +15x1 =

• red: 0~255 -> 0~ff
• green: 0~255 -> 0~ff
• blue: 0~255 -> 0~ff
• 1byte -> 8bit -> 1111 1111 -> 255

橘色(橙色):

• 红色: 0
• 绿色: 0
• 蓝色: 0

rgba:

• red:
• green:
• blue:
• alpha: 0~1
  • 1不透明
  • 0透明

• 进制

  • 十进制

  • 二进制

  • 十六进制

    • 0~f

    • 10 在十六进制中标识是16

八. 作业

作业一: 将课堂代码必须写完

作业二: 星球展示

快捷键补充

一次选中多个内容:

• alt + 鼠标点击
• alt + shift + 鼠标拖动

单词

query: 查询

Status: 状态

selector: 选择器

驼峰标识

• 小驼峰: 第一个单词的首字母小写, 后面遇到一个单词首字母就大小
  • html class小驼峰 中划线
  • js 函数名字
• 大驼峰: 所有的单词首字母都大小
  • js中定义类的名字

sumNum

接口文档

baseURL: http://123.207.32.32:8000

访问某一个资源 /home/multidata

• 参数:
  • page: 当前要访问的页面
  • type: 访问数据的类型
    • pop
    • new
    • sell