这是我参与「第五届青训营 」笔记创作活动的第2天
一、重点内容介绍：
1、CSS基础知识（代码构成，使用方法，流程）
2、CSS进阶知识（选择器，继承，布局）
3、CSS进阶知识2（盒模型）
二、详细知识点：
1、CSS基础知识
什么是CSS？
- CSS，也叫层叠样式表，简称样式表。
- 样式就是对网页中的元素（字体、段落、图像等）属性的概括。
- 层叠，就是指当使用多个CSS文件时，如果样式发生冲突，将依据层次的先后来处理。
- CSS让内容和样式的分离，使得网页设计变得简洁，同时提高了复用率。
CSS的使用
- CSS使用的时候按照以下优先级先后顺序对页面的样式进行定义
- 内联样式
直接在元素属性上使用 - 内部样式表
使用<style>标签在文档头部定义。 - 外部样式表
使用<link>标签在文档头部链接到样式表
2、CSS进阶知识
CSS选择器：
- 元素选择器：h2 { color:#FF0000 }
- id 选择器：#red {color : red; }，
<p id="red"> - 类选择器：.center {text-align: center}
- 还有属性选择器，后代选择器等等
CSS具体语法：
字体设置
- font-family 设置字体
- font-style 设置字体风格
- font-size 设置字体的尺寸
文本设置
- p {text-indent: 30px}文本缩进
- p {text-align:center}水平对齐
- p{ word-spacing:20px}字间隔
- h1 {line-height :30px}行间隔
- h1 {color:#00ff00}文本颜色
- h1{text-decoration:underline;} 文本修饰
表格设置
- table, th, td { border: 1px solid blue; } 边框
- table { border-collapse:collapse; }折叠边框
- p {background-color: gray;}背景图像
- background-size 背景大小
CSS调试
- 浏览器开发者模式（F12）
4、CSS盒模型
组成结构
- 主要由内边距，边框以及外边距组成
CSS padding 属性
- 定义元素的内边距。
- 在标签元素中使用h1 {padding: 20px;}
- padding-top
- padding-right
- padding-bottom
- padding-left
CSS margin 属性
- 定义元素的外边距。
- 在标签元素中使用h1 {margin: 20px;}
- margin-top
- margin-right
- margin-bottom
- margin-left
CSS布局：
-
布局常用技术有三种，常规流、浮动、绝对定位。
-
常规流：不进行其他操作，页面内容采用默认的从上往下，从左到右来进行排列。
-
浮动：让指定的容器漂浮起来，可以覆盖块元素，但不会覆盖行内元素。
-
绝对定位：将子元素控制在父元素内的指定位置（相对于父元素的位置）
