CSS基础入门

1.1 什么是CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现[HTML](https://baike.baidu.com/item/HTML)（[标准通用标记语言](https://baike.baidu.com/item/标准通用标记语言/6805073)的一个应用）或[XML](https://baike.baidu.com/item/XML)（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 

1.2 语法

选择器+样式

案例：

• 选择器用来指定cHTML标签的样式
• 属性和属性值以键值对的形式出现
• 属性和属性值用：分割
• 属性值以；结尾

1.3 代码风格

1. 样式的格式书写
   1. 紧凑型 h {color : red;}
   2. 展开格式
2. 样式大小写
3. 空格规范
   1. 属性的：后面保留一个空格
   2. 选择器和大括号之间保留空格

CSS基础选择器

2.1 CSS选择器的作用

根据需求把不同的标签选出来，这就是选择器的作用。

1. 找到指定的标签
2. 更改指定的样式

2.2 基础选择器

• 标签选择器
  • 优势：能够快速的把同一类标签选取出来
  • 缺点：不能够差异化的处理样式
• 类选择器
  • 优势：可以实现差异化的选额一个或多个标签
• id选择器
• 通配符选择器

2.3 类选择器

多类名开发中使用的场景

1. 可以把一些标签元素相同的样式放到一个类里面
2. 这些标签都可以调用这个公共的类，然后调用自己独有的类
3. 节省css代码，统一修改比较方便

2.4 id选择器

#定义，只能调用一次

一般用于页面唯一的元素

2.5 通配符选择器

在CSS中，使用*定义，可以选取所有的标签

2.6 font-family定义字体系列

• 每个字体需要使用英文逗号隔开
• 如果出现某个字体有多个单词构成 使用空格分割和引号包裹
• 尽量使用系统中自带的字体

2.7 font-size字体大小

• px常用的单位
• 可以给body设置默认的文字大小

2.8 font-weight字体粗细

属性值：bold或者700(加粗)

属性值：normal或者400(不加粗)

2.9 font-style文字样式

• normal 标准样式
• italic 浏览器会显示倾斜字体

3.1 字体的复合属性

把字体的属性写在一起，减少代码量

font：font-style font-weight font-size/line-height font-family

• 不能更换以上属性的顺序
• 不需要的属性值可以省略，注意font-size和font-family不能省略！！！

3.2 CSS的文本属性

文字颜色

• red、green、blue属于预定义颜色
• #ff00EE 十六进制
• rgb(255,0,0)

对齐文本

text-align 设置文本内容水平对齐方式

• left
• center
• right

装饰文本

text-decoration 给文本添加下划线、删除线、上划线

• none 默认 无
• underline 下划线
• overline 上划线 不常用
• line-through 删除线 不常用

文本缩进

text-indent 通常用段落的首行缩进

• ?px

行间距

line-height 控制文字行与行之间的距离

行间距=上下间距+文本高度

如果存在多行，可以使用上一行文字的底部为起点到下一行文字的底部测量得出行间距。

3.3 CSS的引入方式

1. 行内样式表(行内式)
2. 内部样式表(嵌入式)
3. 外部样式表(链接式)

3.3.1 内部样式表

写在html页面内部，把css代码抽取出来，放到style标签内

• style标签可以放在html页面的任何位置，一般放在标签中

3.3.2 行内样式表

直接在标签内部写上style标签，适合修改比较简单的样式。

• style本身就是属性
• 属性值使用双引号包裹
• 只能控制当前的标签
• 没有体现结构和样式分离，不常用！！！

3.3.3 外部样式表

实际开发多用于外部样式表，用于样式比较多的情况，核心是将样式单独写到CSS文件中，之后引入到html文件中。

• 新建一个CSS文件，把所有CSS代码都当如此文件中

3.3.4 引入方式总结

引入方式	优势	缺点	控制
行内样式表	书写简单，适用于简单的样式	结构和样式混写	单个标签
内部样式表	部分结构和样式分离	没有实现完全分离	单个页面
外部样式表	完全实现结构和样式的分离	需要引入	多个页面

CSS day02

1. Emmet语法

该语法的前身是Zen Coding，使用缩写，来提高html/css的编写速度

• 生成标签，直接输入标签名+tab键即可

• 如果想生成多个标签，加上就可以了，例如div3

• 如果存在父子级标签，使用> 比如ul > li 就可以了

• 如果存在兄弟关系的标签，用 + 就可以了比如div + p

• 如果生成带有类名或者id名的，直接使用.demo 或 #two tab