标签：背景图片 市场 ppt htm 菜鸟 难点 header 科技 十分
HTML + CSS + JavaScript
结构 + 表现 + 交互
1、CSS是什么
2、CSS怎么用(快速入门)
3、CSS选择器【重点+难点】
4、美化网页(文字，阴影，超链接，列表，渐变...)
5、盒子模型
6、浮动
7、定位
8、网页动画(特效，推荐网站：W3Cshcool 菜鸟教程 )
Cascading Style Sheet 层叠级联样式表
CSS：表现层---》美化网页
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动
CSS1.0
CSS2.0：div【块】+css HTML与CSS结构分离的思想，网页变得简单SEO【搜索引擎】
CSS2.1：浮动、定位
CSS3.0：圆角，阴影，动画...【浏览器兼容性问题~】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范 可以编写css代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范 可以编写css代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
style.css
h1{
color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<style>
h1{
color: green;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：【就近原则】-->
<!--行内样式 在标签元素中 编写一个style属性 编写样式即可 多个用分号分隔-->
<h1 style="color:red;">我是标题</h1>
</body>
</html>
拓展：外部样式两种写法
link 链接式
html
<link rel="stylesheet" href="css/style.css">
导入式 @import
@import 是CSS2.1特有的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入式 CSS2.1 弊端：网页比较大的时候先展示结构 再去渲染-->
<style>
@import url("css/style.css");
</style>
</head>
<body>
<h1>summer</h1>
</body>
</html>
作用：选择页面上的某一个或者某一类元素
标签：背景图片 市场 ppt htm 菜鸟 难点 header 科技 十分
原文地址：https://www.cnblogs.com/ls-summer/p/14166059.html
