内容概述

一. 认识CSS

css作用
- CSS 指层叠样式表 (Cascading Style Sheets)
- 目前还没有真正意义上的CSS 3
css的历史
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

[note] CSS 引入|基础选择器|常见属性|颜色空间