HTML+CSS+JavaScript
结构+表现+交互
1.什么是CSS
1.什么是css
2.css怎么用（快速入门）
3.css选择器（重点+难点）
4.美化网页（文字，阴影，超链接，列表，渐变...）
5.盒子模型
6.浮动
7.定位
8.网页动画（特效效果）
1.1什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边框，高度，宽度，背景图片，网页定位，网页浮动....
1.2发展史
CSS1.0
CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画....浏览器兼容器
练习格式：
1.3快速入门
style
基本入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css的代码，每一个声明，最好用分号结尾
语法：
选择器{
声明1；
声明2；
声明3；
}
-->
<style>
h1{
color: aquamarine;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用这种规范
- 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>
<!--内部样式-->
<style>
h1{
color: blue;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则(no行内样式>内部样式>外部样式-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aquamarine">我是标签</h1>
</body>
</html>
拓展：CSS2.0
外部样式两种写法
-
链接式，
HTML
<!--外部样式--> <link rel="stylesheet" href="css/style.css"> -
导入式
@import是CSS2.1特有的
<!--导入式-->
<style>
@import url("css/style.css");
</style>
2.选择器
作用：选择页面上的某一个或某一类元素
2.1基本选择器
1.标签选择器：选择一类标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器，会选择页面上所有的这个标签的元素*/
h1{
color: #196ea8;
background: aliceblue;
border-radius: 24px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>你在干什么</h1>
<h1>看于海洋</h1>
<p>于海洋大傻逼</p>
</body>
</html>
2.类选择器class：选择所有class属性一致的标签，跨标签，类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}
好处：可以多个标签归类，相当于是同一个class，可以复用*/
.qinjiang{
color: lightpink;
}
.kuangshen{
color: forestgreen;
}
</style>
</head>
<body>
<h1 class="qinjiang">标题1</h1>
<h2 class="kuangshen">标题2</h2>
<h1 class="qinjiang">标题3</h1>
<p class="qinjiang">p标签</p>
</body>
</html>
3.id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器格式:id必须保证全局唯一
#id名称{}
不遵循就近原则，固定的
id选择器>class选择器>标签选择器
*/
#qinjiang{
color: red;
}
.style1{
color: #020202;
}
h1{
color: #be0479;
}
</style>
</head>
<body>
<h1 id="qinjiang">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
优先级：id选择器>class>标签
2.2层次选择器
1.后代选择器：在某个元素的后面
/*后代选择器*/
body p{
background: #f8d9e9;
}
2.子选择器
/*子代选择器*/
body>p{
background: #63a6d3;
}
3.相邻兄弟选择器(同辈)
/*相邻兄弟选择器:只有一个，相邻向下延申*/
.active+p{
background: #4fa84e;
}
4.通用选择器
/*通用选择器(当前选中的元素的向下的所有兄弟元素*/
.active~p{
background: #86a876;
}
2.3结构伪类选择器
/*ul第一个子元素*/
ul li:first-child{
background: #d9e2fa;
}
/*ul最后一个子元素*/
ul li:last-child{
background: #196ea8;
}
