HTML+CSS+JavaScript
结构+表现+交互
什么是CSS
- 如何学习
- CSS是什么
- CSS怎么用（快速入门）
- CSS选择器（重点加难点）
- 美化网页（文字，阴影，超链接，列表，渐变...）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效效果）（菜鸟教程）（W3Cschool）
什么是CSS
Cascading Style Sheet层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，图片定位，网页浮动。。。
1.2发展史
CSS1.0
CSS2.0 DIV(块)+CSS， HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画...浏览器兼容性~
1.3快速入门
style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范 <style>可以编写css的代码 ，每一个声明，最好用分号结尾
语法：
选择器{
声明1；
声明1；
声明1；
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建义使用这种规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范<style>可以编写CSS的代码 每一个声明
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
CSS
h1{
color: red;
}
CSS的优势：
1.内容的表现分离
2.网页结构表现统一，可以实现复用
3.样式十分丰富
4.建议使用独立于html的css文件
5.利用SEO ，容易被搜索引擎收录！
Vue 不容易被搜索引擎收录
1.4 CSS的3种导入方试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- style里是要写CSS代码-->
<!-- 内部样式-->
<style>
h1{
color: green;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->
<!--优先级：行内样式>内部样式>外部样式-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red;">我是标题</h1>
</body>
</html>
CSS
/*外部样式*/
h1{
color: yellow;
}
拓展：外部样式两种写法
1.链接试 html
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
2.导入试 @import是css2.1特有的
<!--导入式-->
<style>
@import "css/style.css";
</style>