认识CSS
什么是CSS？
如何css
1.css是什么
2.css怎么用（快速入门）
3.CSS选择器（重点+难点）
4.美化网页（文字美化，阴影，超链接，列表，渐变...）
5.盒子模型
6.浮动
7.定位
8.网页动画（特效）wccc 菜鸟教程
1.1 什么是CSS？
CSS(Cascading Style Sheet) 层叠样式表
CSS ：表现层 （美化网页）
字体 ，颜色，边距，高度，宽度，背景图片，网页定义和浮动...
1.2 CSS发展史
CSS1.0
CSS2.0 CSS和HTML分离
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画，浏览器兼容性
举例
此时css和html 写在了一起，一般建议html 和css分离
<!--规范，<style> 可以编写CSS的代码
语法：
选择器{
声明1; <!--每一个声明最好使用分号结尾-->
声明2;
声明3;
...
}
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="狂神说Java,西部开源">
<meta name="description" content="来这个地方可以学习Java">
<title>我的第一个网页</title>
<style>
h1{
color : blue;
}
</style>
</head>
<body>
<h1>Hello World !</h1>
<style>
h1{
color : red;
}
</style>
</body>
</html>
建议html 和 css 分离
link标签 将分离的html 和css 联系起来
css的优势：
内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利于SEO，容易被搜索引擎收录！ （VUe 不容易被收录）
CSS的三种导入方式 和起作用优先级
1.行内样式
2.内部样式表
3.外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
<!--内部样式-->
<style>
/*这里面是要写css 不是html的注释方法 css注释方法为/**/ */
h1{
color:green;
}
</style>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<!--不符合 结构与表现分离的思想-->
<h1 style="color:red">我是标题~~</h1>
<!--<h1 style="color:red; ..."> 多个的话，分号隔开-->
三种样式优先级高到低（就近原则 （谁离这个代码近，谁优先级高））：行内样式> 外部样式表 ？ 内部样式表
<hr>
新版本有变化 ：三种样式优先级高到低：行内样式> 外部样式 > 内部样式
</body>
</html>
/*外部样式*/
h1{
color:pink;
}
优先级：三种样式优先级高到低（就近原则 （谁离这个代码近，谁优先级高））：
行内样式> 外部样式表 ？ 内部样式表
新版本有变化 ：三种样式优先级高到低：行内样式> 外部样式 > 内部样式
外部样式拓展：（两种写法）
一 ：链接式：link标签
html
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
二：导入式：@import url("");
@import url(""); 是 css2.1特有的 ，一般不用这个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import url("css/style.css");
</style>
</head>
<body>
<h1>123456</h1>
</body>
</html>
