如何学习
1.css是什么
2.css怎么用（快速入门）
3.css选择器（难点+重点）
4.美化网页（文字，阴影，超链接，列表，渐变...）
5.盒子模型
6.浮动
7.定位
8.网页动画（特效效果）
1.1什么是css
cascading style sheep 层叠级联样式表
css：表现（美化网页）
字体 颜色 边距 高度 图片 背景 定位
1.2 发展史
css1.0
css2.0 DIV块 +css，HTML与css结构分离的思想 利于SEO（搜索引擎优化）
css2.1 浮动 定位
css3.0 圆角吧 阴影 动画.... 浏览器兼容性
1.3快速入门
style（风格）
2.网页结构表现单一，可以实现重复利用
3.样式丰富
4.建议使用独立于html的css文件
5.利于SEO，容易被搜索引擎收录！
1.4css3中导入方式
<body>
<h1 style="color:red">周佳宜牛逼</h1>
</body>
行内样式：在标签元素中，编写一个style属性，编写样式即可
优先级：就近原则，行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
h1{
color:green;
}
</style>
<link rel="stylesheet" href="css/style01.css">
<h1>周佳宜牛逼</h1>
</body>
</html>
拓展：外部样式两种写法
实现网页跳转 meta 使这行代码不可见
<meta http-equiv="refresh" content="3 ; url=http://www.baidu.com"/>
-
链接式：
<link rel="stylesheet" href="css/style01.css">
-
导入式
css2.1特有的
<style>
@import url("css/style01.css")
</style>
网页元素特别多的情况下，会先显示网页结构，然后渲染，链接式直接渲染
2.选择器
作用：选择页面上的某一个或者某一类元素
2.1基本选择器
1.标签选择器：选择一类标签
2.类选择器 class：选择所有的class属性一致的标签，跨标签.class{}
3.Id选择器：选择唯一的id属性的标签 #id{}
-
类选择器
格式：.class的名称{}
好处：可以将多个标签归类，是同一个class，可以复用
<style>
.jiayi{
color:yellow;
font-size: 40px;
background: green;
border-radius: 40px;
}
.zhanglei{
font-family: 黑体;
font-size: 40px;
}
</style>
</head>
<body>
<h1 class="zhanglei">张磊3</h1>
<h1 class="zhou">张磊2</h1>
<h1 class="jiayi">张磊1</h1>
</body>
-
id选择器
格式：#id的名称{}；
id选择器：id必须保持全局唯一
<style>
#zhanglei{
color: yellow;
}
</style>
</head>
<body>
<h1 id="zhanglei">标题1</h1>
<body>
-
基本选择器优先级
id选择器>class选择器>标签选择器
2.2层次选择器
1.后代选择器：在某个元素后面 祖爷爷 爷爷 爸爸 我 结构：类 标签
body p{
background: aqua;
}
2.子代选择器:只选择body后面p标签的 结构：类>标签
body>p{
backgound : yeelow;
}
3.相邻兄弟选择器：只选择相邻向下选择的 且只有一个 类： 类+标签
#zzz + p {
background:#ca2727;
color:red;
}
4.通用选择器：向下所有的同级选择
#zzz~p{
color: yellow;
}
2.3结构伪类选择器
ul li:last-child{
color: aqua;
text-align: center;
}
ul li:first-child{
color: aqua;
text-align: center;
}
/* <!--选中p1：定位到当前元素的父元素，然后选择第一个元素 利用
:nth-child（定位元素在第几个）
如果定位的不是当前元素，则不显示{ }-->*/
p:nth-child(2){
color: aqua;
text-align: center;
}
/*所有父元素下面的第二个p元素*/
p:nth-of-type(2){
color: red;
}
光标变色
/*伪类选择器*/
<style>
<!-- a:hover{
backgound:break
}
</style>
<body>
<a helf="">跳转超链接</a>
<body>-->*/
2.4属性选择器（常用）
标签+[判断元素]{ }
class+id结合
=绝对等于
*=包含
^=
$=最后含有
3.美化网页元素
3.1为什么要美化网页
1.有效传递页面信息
2.美化网页，页面好看才能吸引用户
3.凸显页面的主题
4.提高用户体验
span标签：重点要突出的字，使用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.qiangdiao{
font-size: 24px;
font-family: 黑体;
}
</style>
</head>
<body>
欢迎学习<span class="qiangdiao">java</span>
</body>
</html>
3.2字体样式
color: red;<;
/*颜色*/
/*font:; 可以直接设置字体大小粗细*/
font-family: "Arial Narrow",楷体;
/*字体设置,可以中英文一起设置 逗号隔开*/
font-size: 24px;
/*字体大小*/
font-weight: lighter;
/*字体粗细*/
font: oblique lighter 12px 楷体 ;
/*字体风格*/
3.3文本样式
1.颜色：
单词
RGB：0-F ff0000(红色) 00ff00（绿色） 0000ff（蓝色）
RGBA： A：0-1（透明度）
2.文本的对齐方式
text align：排版
text align：center
3.首行缩进
text-indent：2em 首行缩进2字符
4.行高
height：200px（字体）
line-height：200px（行高）
当字体等于行高的时候，上下居中对齐
5.装饰text-decartion
3.4阴影
3.5超链接伪类
3.6列表
3.7背景
背景颜色：backgound color
北京图片 backgound-image
3.7.1渐变颜色
渐变网站：http;//www.grabient.com/
渐变代码：
deg清晰度
background:linear-gradient(100deg, #21D4FD 0%,#B721FF 100%)
4.盒子模型
4.1什么是盒子模型
margin：外边距
padding：内边距
border：边框
4.2边框
边框的粗细
边框的颜色
边框的大小
4.3内外边距
margin:0 auto 可以设置外边距居中 顺序 上右下左
要求：块元素，且块元素有固定的宽度
两个参数代表上右 下左 顺时针旋转
盒子的计算方式：
你这个元素到底多大：
margin+border+padding+内容宽度=元素大小
4.4圆角边框
顺时针顺序 四个边角就是一个 顺序是左上 右上 右下 左下
border-radius: 5px 5px ;
4.5阴影
盒子阴影
box-shadow
background-shadow 背景阴影
5.浮动
5.1标准文档流
块级元素：独占一行
h1-h6 div p li
行内元素：不独占一行
span a img strong...
行内元素可以被包含在块级元素之间，反之不可以。
5.2display
block：改变块元素
inline：改变成行内元素
none：取消
实现行内元素排列的方式，但是我们很多情况都使用float
<style>
div{
width: 100px;
height: 50px;
border:1px solid black;
display: inline-block;
}
span{
width: 150px;
height: 50px;
border:1px solid black;
display: inline-block;
margin: 0;
}
</style>
5.3float
左右浮动：
float：left
float：right
5.4父级边框塌陷问题
clear：right右侧不允许有浮动元素，如果有自动排列到下一行
chear：left左侧不允许又浮动元素
chear：both两侧都不允许有浮动元素
解决方案：
1.增加父级元素的高度
2.增加一个父级的空div标签清除浮动，然后css文件；
.clear{
clear：both;
margin：0；
padding：0；
}
3.overflow
在父级元素中增加一个overflow：hidden 隐藏
overflow:scroll添加滚动条
4.父类添加一个伪类：
#father:after{
centent:"";
display:block;
chear:both;
}
小结：浮动元素后面加一个空的div，简单
弊端：空的div是不好的，尽量避免
设置父元素的高度，假设有了固定的高度，就会被限制
3.overflow：
简单，下拉的一些场景避免使用
4..在父类添加伪类
写法复杂，添加一个空内容，但是没有副作用，推荐使用。
