HTML+CSS+JavaScript
结构+表现+交互

1，如何学习

1，CSS 是什么
2，CSS 怎么使用（快速入门）
3，CSS 选择器（重点+难点）
4，美化网页（文字，阴影，超链接，列表，渐变。。。）
5，盒子模型
6，浮动
7，定位
8，网页动画（特效）

1.1 CSS 是什么

Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动。。。
//TODO 网页调试界面截图

1.2 CSS 发展史

CSS 1.0
CSS 2.0 DIV + CSS，HTML与CSS结构分离思想，网页变得更简单，SEO
CSS 2.1 浮动+定位
CSS 3.0 圆角，阴影，动画。。。浏览器兼容问题

1.3 快速入门

style
基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 规范：<style> 可以编写CSS 代码，每个声明，最好以；结尾
    语法：选择器{
            声明1;
            声明2;
            ..
            }
    -->
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

建议使用这种规范
//TODO HMTL+CSS 结构分离图

CSS的优势

1，内容与结构分离
2，网页结构表现统一，可以实现复用
3，样式十分丰富
4，建议使用独立于 html 的 css 文件
5，利用SEO，容易被搜索引擎收录

1.4 CSS的 3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入外部样式 -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 内部样式 -->
    <style>
        h1{
            color: cadetblue;
        }
    </style>
</head>
<body>
<!-- 优先级：就近原则 -->
<!-- 行内样式：在标签元素中，编写一个style 属性，编写样式即可 -->
<h1 style="color: aqua;">我是标题</h1>
</body>
</html>

扩展：外部样式两种写法

链接式 link（html）

<!-- 引入外部样式 -->
<link rel="stylesheet" href="css/style.css">

导入式 import（CSS 2.1 特有的）

<!-- 外部样式 导入式 -->
<style>
  @import url("css/style.css");
</style>

2，选择器

作用：选择页面上的某一个或者某一类元素

2.1 基本选择器

标签选择器
1. 选择一类标签格式：标签{} ```html <!DOCTYPE html>

我是标题1

我是标题2

haha

2. 类选择器 
   1. 选择所有class属性一致的标签，可跨标签，格式：.class名称{}

html <!DOCTYPE html>

标题1

标题2

标题3

p标签

3. ID 选择器
   1. 全局唯一，格式：#id名称{}

html <!DOCTYPE html>

标题1

标题2

标题3

标题4

标题5

**优先级：id > class > 标签 选择器**<br />**
<a name="QV3ry"></a>
### 2.2 层次选择器

1. 后代选择器：在某个元素后面的所有元素

html / 后代选择器 / body p { background: aquamarine; } 2. 子选择器：子一代元素html / 子选择器 / body > p { background: burlywood; } 3. 相邻兄弟选择器：同辈，向下一个元素html / 相邻兄弟选择器：只有一个，相邻（向下） / .active + p { background: cadetblue; } 4. 通用选择器：同辈，向下所有兄弟元素html / 通用选择器：当前选中元素向下的所有兄弟元素 / .active ~ p { background: burlywood; }

![层次选择器-效果.png](https://cdn.nlark.com/yuque/0/2020/png/1145950/1606661131866-40b1076f-67db-40a0-a78e-ef023df35daa.png#align=left&display=inline&height=293&margin=%5Bobject%20Object%5D&name=%E5%B1%82%E6%AC%A1%E9%80%89%E6%8B%A9%E5%99%A8-%E6%95%88%E6%9E%9C.png&originHeight=293&originWidth=515&size=2848&status=done&style=none&width=515)
<a name="LD8HP"></a>
### 2.3 结构伪类选择器
**伪类选择器**：给某些元素 添加特殊效果<br />**结构伪类选择器**：跟结构相关，定位元素 添加效果

html / ul li 选择第一个元素 / ul li:first-child { background: burlywood; } / ul li 选择最后一个元素 / ul li:last-child { background: red; } / 选中 p1 : 定位到父元素，再选中父元素下的第一个元素选择当前 p 元素的父级元素，选中父级元素的第一个，并且是当前元素才生效[顺序] / p:nth-child(1) { background: burlywood; } / 选中父级元素下 p 元素的第一个[类型]/ p:nth-of-type(2) { background: aquamarine; }

h1

![结构伪类选择器-效果.png](https://cdn.nlark.com/yuque/0/2020/png/1145950/1606661118901-1dc7e478-1ba9-4535-8b9f-6d7c33bcab09.png#align=left&display=inline&height=299&margin=%5Bobject%20Object%5D&name=%E7%BB%93%E6%9E%84%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8-%E6%95%88%E6%9E%9C.png&originHeight=299&originWidth=388&size=2432&status=done&style=none&width=388)
<a name="QfMTE"></a>
### 2.4 属性选择器（常用）
id + class 结合使用

html <!DOCTYPE html>

1 2 3 4 5 6 7 8 9 10


1. =：绝对等于
1. *=：包含
1. ^=：以什么开头
1. $=：以什么结尾
![属性选择器-效果.png](https://cdn.nlark.com/yuque/0/2020/png/1145950/1606661028434-f5ecdc68-9da8-4c9c-8852-d3352dc3b752.png#align=left&display=inline&height=115&margin=%5Bobject%20Object%5D&name=%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8-%E6%95%88%E6%9E%9C.png&originHeight=115&originWidth=793&size=3528&status=done&style=none&width=793)
<a name="rEZil"></a>
## 3，美化网页元素
<a name="HIk4d"></a>
### 3.1 为什么要美化网页
1，有效的传递页面信息；<br />2，美化网页，页面漂亮，才能吸引用户；<br />3，凸显页面的主题；<br />4，提高用户的体验；
span标签：重点要突出的字，使用span 标签套起来
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习 <span id="title1">Java</span>
</body>
</html>

3.2 字体样式

<!--
font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色
-->
<style>
body{
  font-family: "Arial Black" , 楷体;
}
h1{
  font-size: 50px;
}
.p1{
  font-weight: bolder;
  color: gray;
}
</style>

IT_LearningWay

CSS基础学习

1，如何学习

1.1 CSS 是什么

1.2 CSS 发展史

1.3 快速入门

CSS的优势

1.4 CSS的 3种导入方式

2，选择器

2.1 基本选择器

我是标题1

我是标题2

标题1

标题2

标题3

标题1

标题2

标题3

标题4

标题5

h1

3.2 字体样式