CSS
HTML+CSS+javaScript
结构+表现+交互
1.1什么是css
Cascading Style Sheet 层叠级联样式表
CSS: 表现（美化网页）
css的优势：
1.内容和表现分离
2.网页结构表现统一，可以实现复用
3.样式十分的丰富
4.建议使用独立于html的css文件
5.利用SEO，容易被搜索引擎收录!
1.2 CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<style>
h1{
color: aqua;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red"> 我是标题</h1>
</body>
</html>
<!--覆盖原则 从上到下 也可以是就近原则，离标签越近，就执行谁 -->2.选择器
作用：选择页面上的某一个或者某一类元素
2.1基本选择器
1.标签选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 标签选择器，会选择到这个页面上的所有标签 -->
<style>
h1{
color: aqua;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学javaa</h1>
<p>听狂神说 </p>
</body>2.类选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 类选择器的格式： .class的名称{}
好处：可以多个标签归类，是同一个class，可以复用,跨标签-->
<style>
.wo{
color: red ;
}
.ni{
color: darkblue;
}
</style>
</head>
<body>
<h1 class="wo">标题1</h1>
<h2 class="ni">标题2</h2>
<h3 class="wo">标题3</h3>
</body>3.id选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- id保证全局唯一 id选择器格式： #id名称{}
不遵循就近原则 ，是固定的 id选择器>class选择器>标签选择器-->
<style>
#qiannan{
color: chocolate;
}
</style>
</head>
<body>
<h1 id="qiannan">标题1</h1>
<h1> 标题2</h1>
</body>2.2层次选择器
1.后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你
<style>
body+空格+p
body p{
background: red;
}
</style>2.子选择器 ： 只有一代
<style>
body>p{
background: aqua;
}
</style>3.相邻兄弟选择器 同辈 相邻一个（下面的那一个）
<style>
.nnn+p{
background: aquamarine;
}
</style>
</head>
<body>
<p class="nnn">p1</p>
<p>p2</p> //p2生效了
<p>p3</p>
4.通用兄弟选择器 选择所有向下的兄弟元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nnn~p{
background: aquamarine;
}
</style>
</head>
<body>
<p class="nnn">p1</p>
<p>p2</p> //p2生效
<p>p3</p>//p3生效2.3结构伪类选择器(带：)
<style>
ul li:first-child{
<!--ul下面li的第一个子元素-->
background: red;
}
ul li:last-child{
background: darkblue;
}
</style>
/*选中父元素 下面p类型元素的 第一个*/
p:nth-of-type(1){
background: chartreuse;
}
/* 选中父级元素的第三个子元素 但必须式p元素才生效*/
p:nth-child(3){
background: black;
}
2.4属性选择器（常用）
标签名[属性名=属性值]{} =绝对等于
*=包含多个全部选中
^=以这个开头
$=以这个结尾
3.美化网页元素
span标签，重点要突出的字，用span套起来
3.1字体样式
<!--font-size: 50px; 字体大小
font-family:"Agency FB";字体
font-weight: bolder; 字体粗细
color：颜色
-->3.2文本样式
<!--
1. 文本对齐的方式：text-align: center; 排版，居中
2. text-indent: 2em;; 段落首行缩进
3.行高，和 块的高度一致，单行文字就可以上下居中
height:300px;
line-height: 300px;
4. img,span{
vertical-align: middle;
} 文本图片水平对齐
5.装饰： text-decoration: underline; 下划线
6.超链接去下划线：text-decoration:none -->3.3超链接伪类补充
/*去下划线，加默认的颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮的状态 需记住*/
a:hover{
color: chocolate;
font-size: 100px;
}
/*鼠标按住未释放的状态*/
a:active{
color: chartreuse;
}4.背景
4.1背景图片
<style>
div{
width: 1000px;
height: 700px;
border:1px solid red;
background-image: url("image2'/1.jpg");
/* 默认是全部平铺*/
}
.div1{
background-repeat: no-repeat;
}
</style>4.2列表应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h2 class="title1"> 全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#"> 家居</a></li>
<li><a href="#">电脑</a> <a href="#">家用电器</a> <a href="#"> 办公</a></li>
<li><a href="#">钟表</a> <a href="#">旅行</a> <a href="#"> 手机</a></li>
</ul>
</div>
</body>
</html>
#nav{
width: 500px;
background: dimgray;
}
.title1{
color: blue;
font-size: 30px;
line-height: 30px;
background: red;
background: red url("images/d.png" ) 400px 2px no-repeat;
}
ul{
background: dimgray;
}
ul li{
height: 50px;
list-style: none;
text-indent: 1em;
background-image: url("images/2.png");
background-repeat: no-repeat;
background-position: 350px 2px;
}
a{
text-decoration: none;
font-size:14px;
color:black;
}
a:hover{
color: coral;
text-decoration: underline;
}5.盒子模型
margin： 外边距
padding： 内边距
border： 边框
5.1边框
border: 3px solid black; 粗细 样式 颜色
5.2内外边距
margin: 0 auto; /* margin: 0 auto; 外边距的作用 可以居中*/
5.3圆角边框
5.4浮动
5.4.1display
块级元素： 独占一行
h1~h6 p div 列表
行内元素：不独占一行
span a img strong
display: block; block 变成块级元素 inline 变成行内元素 inline-block 既是行内元素，但也拥有块级元素的属性
5.4.2float
5.4.3父级边框塌陷问题
clear:right; 右侧不允许有浮动 clear:left; 左侧不允许有浮动 clear：both； 两侧不允许有浮动
解决方案：
1.增加父级元素的高度
2增加一个空的div标签，清除浮动
<div class="clear1"></div>
.clear1{
clear:both;
margin:0;
padding:0;
}
3.在父级元素中增加一个 overflow：hidden；
4.父类添加一个伪类：after
#father:after{
content:'';
display:block;
clear:both;
}
6.定位
6.1相对定位relative
仍然在标准文档流中，原来的位置会被保留
#first{
background-color: #ed64b2;
border :1px solid fuchsia;
position: relative;
top: -20px;
/* 相对定位来说，负号表示向设定的方向移动，正号表示向相反的方向移动 */
}6.2绝对定位absolute
1.没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.绝对定位默认位置在父级元素内，绝对定位，不在标准文档流中，原来的位置不被保留
6.3固定定位fixed
6.4 z-index
图层的概念 z-index
opacity:0..5 背景透明度