CSS20230512
# 什么是Css
如何学习
1.CSS是什么
2.CSS怎么用 (快速入门)
3.CSS 选择器(重点 + 难点)
4.美化网页 (文字,阴影,超链接,列表,渐变....)
5.盒子模型
6.浮动
7.定位
8.网页动画 (特效效果)
## 一、什么是CSS
### 1.1、CSS是什么
#### cascading style sheet 层叠级联样式表
html:内容层
css:表现层 美化网页
### 1.2、发展史
- CSS1.0
- CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO
- CSS2.1 浮动,定位
- CSS3.0 圆角,阴影,动画.I.浏览器兼容性
### 1.3 css的优势:
#### 1、内容和表现分离
#### 2、网页结构表现统一,可以实现复用
#### 3、样式十分的丰富
#### 4、建议使用独立于html的css文件
#### 5、利用SEO,容易被搜索引擎收录! Vue
#### 6、样式表示例,style标签与css文件
## 二、CSS怎么用-四种导入方式
CSS的四种导入方式
#### 层叠样式表(CSS)可以通过三种方式与 HTML 文档进行关联:
#### 1.内部样式。
在 HTML 的head标签中使用 <style> 标签,将 CSS 样式直接嵌入到 HTML 文件中。
#### 2.外部样式。
在 HTML 的head标签中中使用 <link> 标签,将 CSS 文件与 HTML 文件进行链接。
#### 3.行内样式。
在 HTML的body标签中使用style属性,直接在标签内部添加 CSS 样式。
#### 5、外部样式的第二种import导入方法
外部样式
外部样式的两种写法
1head 标签内写link
2 @import方式导入
## 三、CSS选择器
选择器:选择页面上的某一种/个/类的元素 ,指定样式该应用到哪个元素上而已。
### 1.1、三种基本选择器
#### 1、标签选择器
#### 2、类选择器 class
#### 3、ld 选择器
#### 4、优先级id>class>标签
最小原则,id只能作用于一个元素,class是一组,标签是全部
不同优先级的选择器,是覆盖 。
同一优先级,选择器的组合使用示例:
后代选择器:选择所有嵌套在 div 元素内部的 p 元素,并将它们的颜色设置为橘色。
### 1.2层次选择器
#### 1、后代选择器
#### 2、子选择器
#### 3 、向下弟弟
#### 4、通用选择器
### 1.3结构伪类选择器
### 1.4属性选择器(常用)
## 如何学习
## 1.CSS是什么
## 2.CSS怎么用(快速入门)
## 3.CSS选择器(重点+难点)
## 4.美化网页(文字,阴影,超链接,列表,渐变....)
## 5.盒子模型
## 6.浮动
## 7.定位
## 8.网页动画(特效效果)