CSS语法
什么是CSS
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
CSS语法
CSS 语法由三部分构成：选择器、属性和值
selector {property: value}选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：body {color: blue}上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。
CSS实例
css规则有两个主要的部分构成：选择器，以及一条或多条声明：
选择器通常是需要改变样式的HTML元素
每条声明由一个属性和一个值组成
属性是你希望设置的样式属性，每个属性有一个值，属性和值被冒号分开
一、基础知识
1、层叠三大规则
①优先程度递减
样式表来源→选择器优先级→源码位置
②重要程度递增
用户代理样式(浏览器默认样式)→用户样式表(很少有)→作者样式表→作者样式表中的!important→用户样式表中的!important→用户代理样式表中的!important
2、选择器
基础：
- #id~ID选择器
- class~类选择器
- *~通用选择器
组合器：
- 子组合器(>)---匹配目标元素是其它元素的直接后代。
- 相邻兄弟组合器(+)---匹配的目标后元素紧跟在其它元素后面
- 通用兄弟组合器 (～)---匹配所有跟随在指定元素之后的兄弟元素
复合选择器---多个基础选择器可以连起来使用
属性选择器---通过约束属性值
伪类选择器---选中处于某个特定状态或相对于其父级或兄弟元素位置的元素
伪元素选择器---匹配在文档中没有直接对应HTML元素的特定部分或插入内容
3、选择器优先级
内联>id> class = attribute = psendo-class>type = psendo- element
4、继承
可以使用inherit关键字显示指定一个属性值从其父元素继承
5、盒子模型
margin|border|padding|content
- 控制盒子类型：display : block ，nine...
- 控制盒中内容流：overflow : auto , hidden..
- 是否可见: visiblity，vsible，hidden
二、布局
CSS3之前的布局
Normal Flow常规流Float浮动流Positioning定位流
CSS3之后的新增布局
Flex弹性盒子布局（一维）Grid网格布局（二维）Multicol多列布局
触发BFC，以下条件满足任何一个即可：
- display: flow-root| inline-block
- position: absolute|fixed
- float：不为 none
- overflow：不为visible
1.Grid
可以定义由行和列组成的二维布局，然后将元素放置到网格中，元素可以只占其中一个单元格，也可以占据多行或多列.
CSS是如何工作的？
加载HTML→解析HTML→创建DOM树→展示页面
↓ ↑添加样式到DOM节点
加载CSS→解析CSS
选择器selector
-
找出页面中的元素，以便给他们设置样式
-
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
组合：
- 直接组合（AB）满足A同时满足B
input:focus - 后代组合（AB）选中B，如果它是A的子孙
nav a - 亲子组合（A＞B）选中B.如果它是A的子元素
section>a
兄弟选择器（A～B）选中B如果它在A后且和A同级h2～p
相邻选择器（A＋B）选中B，如果它紧跟在A后面h2＋p
alpha透明度（0-1）
- #ff000078
- rgba(255,0,0,0.47）
- hsla10,100%,50%,(0.47)
字体：font-family
行高：line-height
粗细：font-weight
1、选择器优先级
- 选择器的特异度（Specificity）
- 比较id，（伪）类、标签的个数，多则大
2、继承：
和文字相关的属性能继承．和盒模型相关的不能继承
3、布局相关技术
- 常规流：行级、块级、表格布局、FlexBox、Grid布局
- overflow visible hidden scroll
谥出 (可见) (隐藏) (滚动条)
块级(disploy : block)∶不和其它盒子并列摆放 行级(disploy ：inline):盒模型的width和height不适用
