CSS详解
【狂神说Java】CSS3最新教程快速入门通俗易懂：https://www.bilibili.com/video/BV1YJ411a7dy/
HTML+CSS+JavaScript
框架+表现+交互
1 什么是CSS
如何学习
- CSS是什么
- CSS怎么用（快速入门）
- CSS选择器（重点+难点）
- 美化网页（文字、阴影、超链接、列表、渐变……）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效效果）
1.1 什么是CSS
Cascading Style Sheets层叠样式表
CSS：表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动……
1.2 CSS的发展史
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;
声明2;
声明3;
}
-->
<style>
h1{
color:red;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3 style="color:blue">标题3</h3>
<h4>标题4</h4>
</body>
</html>
h2{
color:green;
}
CSS优势：
1.内容和表现分离
2.网页结构表现统一，可以复用
3.样式十分丰富
4.建议使用独立于html的css文件
5.利用SEO，容易被搜素引擎收录
1.4 四种引入方式
1.行内样式
2.内部样式
外包样式
优先级，就近原则
拓展：外部样式两种写法
3.连接式link
4.导入式@import，CSS2.1，慢慢被淘汰
<style>
@import url("css/style.css");
</style>
2 选择器（重点+难点）
作用：选择页面上的某一个或者某一类元素
2.1 基本选择器（重点）
标签选择器，选择一类标签 标签{}
类选择器：选择所有class一致的标签，可以跨标签 .class名{}
Id选择器，全局唯一 #id名{}
【标签选择器】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--标签选择器，会选择到页面上所有的这个标签的元素-->
<style>
h1{
color:red;
background: yellow;
}
p{
font-size:50px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学Python</h1>
<p>b站看视频</p>
</body>
</html>
【类选择器】.class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--类选择器的格式.class的名称{}
好处，可以多个标签归类，同一个class可以复用
-->
<style>
.one{
color:red;
}
.two{
color:#a24fff;
}
</style>
</head>
<body>
<h1 class="one">标题1</h1>
<h1 class="two">标题2</h1>
<h1>标题3</h1>
<p class="one">段落1</p>
</body>
</html>
【Id选择器】#id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--id选择器，id保证全局唯一
#id名称{}
-->
<style>
#one{
color:red;
}
#two{
color:green;
}
</style>
</head>
<body>
<h1 id="one">标题1</h1>
<h1 id="two">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
优先级：不遵循就近原则，id选择器》class选择器》标签选择器
【以下是高级选择器】
2.2 层次选择器
1、后代选择器，在某个元素的后面，子子孙孙
/*后代选择器*/
body p{
background:green;
}
2、子选择器，一代，子
/*子选择器*/
body > p{
background:blue;
}
3、相邻兄弟选择器，同辈 兄弟姐妹，相邻向下的一个
/*相邻兄弟选择器*/
.active + p{
background:orange;
}
4、通用兄弟选择器，当前选中元素的向下的所有兄弟元素
/*通用选择器*/
.active ~ p{
background:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
<p>p9</p>
</body>
</html>
2.3 结构伪类选择器
伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*避免使用class和id选择器*/
/*ul的第一个子元素*/
ul li:first-child{
background:red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background:green;
}
/*选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
*/
p:nth-child(1){
background:blue;
}
/*选中父元素，下的p元素的第二个*/
p:nth-of-type(2){
background:orange;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4 属性选择器（常用）
id+class结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float:left;
display:block;
height:50px;
width:50px;
border-radius:10px;
background:blue;
text-align:center;
color:red;
text-decoration:none;
margin-right:10px;
font:bold 20px/50px Arial:
}
/*存在id属性的元素*/
/*属性*/
/*a[id]{
background:yellow;
}*/
/*属性=属性值（正则匹配）*/
/*a[id=first]{
background:yellow;
}*/
/*正则=完全匹配*/
/*a[class="links item first"]{
background:yellow;
}*/
/*正则*=包含*/
/*a[class *= "item"]{
background:yellow;
}*/
/*正则^=开头*/
/*a[href ^= abc]{
background:yellow;
}*/
/*正则$=结尾*/
a[href $= pdf]{
background:yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="image/123.html" class="links item">3</a>
<a href="image/123.png" class="links item">4</a>
<a href="image/123.jpg" class="links item">5</a>
<a href="abc">6</a>
<a href="/a.pdf">7</a>
<a href="/abc.pdf">8</a>
<a href="abc.doc">9</a>
<a href="abcd.doc" class="links item last" id="last">10</a>
</p>
</body>
</html>
3 美化网页
字体：color、font-siza
排版网页：
超链接伪类：
列表样式：
背景样式：
4 盒子模型
5 浮动
6 定位
7 动画
8 CSS小结
