——道阻且长，行则将至
1.什么是CSS?
2.CSS导入方式
#### 优先级：就近原则
-
行内样式
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可 多个以分号结尾-->
<h1 style="color: coral;">标签</h1> -
内部样式表
<!-- 内部样式表 -->
<style>
h1{
color: black;
}
</style> -
外部样式表
<!-- 外部样式表 -->
<!-- 链接式 -->
<link rel="stylesheet" href="css/style.css">
<!-- 导入式 一般不用 @import是 CSS2.1特有的-->
<style>
@import "css/style.css";
</style>
3.CSS选择器
1.基本选择器
优先级： id选择器>class选择器>标签选择器
-
标签选择器
<style>
/*标签选择器，会选择到页面上所有为这个标签的元素*/
h1{
color: #ffffff;
background: darkcyan;
border-radius: 10px;
}
p{
font-size: 80px;
}
</style> -
类选择器
<style>
/*类选择器的格式：.class的名称{}
好处：可以多个标签归类，相当于同一个class，可以复用
*/
.title1{
color: aqua;
}
.title2{
color: crimson;
}
.title3{
color: coral;
}
</style> -
id选择器
<style>
/*id选择器 id必须保证全局唯一
格式: #id名称{ }
*/
#title1{
color: coral;
}
.title1{
color: darkkhaki;
}
.title4{
color: darkcyan;
}
h1{
color: blueviolet;
}
</style>
2.层次选择器
-
后代选择器：在某个元素的后面（儿孙选择器）
/* 后代选择器 */
body p{
background: crimson;
} -
子选择器：只有一代（儿子选择器）
/* 子选择器 */ body>p{ background: blueviolet; } -
相邻兄弟选择器: 同辈 向下一个（一个弟弟选择器）
/* 相邻兄弟选择器 */ .active + p{ background: darkcyan; } -
通用选择器： 同辈 向下所有（所有弟弟选择器）
/* 通用选择器 */ .active~p{ background: cornflowerblue; }
3.结构伪类选择器
伪类： 条件
/*ul的第一个子元素*/
ul li:first-child{
background: cornflowerblue;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: darkcyan;
}
/* 选择p1:定位到父元素选择到当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
顺序
*/
p:nth-child(1) {
background: darkkhaki;
}
/* 选中父元素下的类型为p元素的第二个
类型
*/
p:nth-of-type(2){
background: crimson;
}
a:hover{
background: deeppink;
}
4.属性选择器（常用）
<!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: 30px;
background: cornflowerblue;
text-align: center;
text-decoration: none;
color: crimson;
margin-right: 10px;
font: bold 20px/50px Arial;
}
/* 选择存在id属性的元素
格式[属性名/属性名=属性值（可以是正则表达式）]{}
*/
/*a[id]{*/
/* background: yellow;*/
/*}*/
/*a[id=first]{*/
/* background: yellow;*/
/*}*/
/* 选择class中有links的元素
= :绝对等于
*= ：包含
^= : 以...开头
$= : 以...结尾
*/
/*a[class*="links"]{*/
/* background: yellow;*/
/*}*/
/* 选择href中以http开头的元素 */
/*a[href^=http]{*/
/* background: yellow;*/
/*}*/
/* 选择href中以pdf结尾的元素 */
a[href$=pdf]{
background: deeppink;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first" \>01</a>
<a href="http://www.baidu.com" class="links item active" target="_blank" title="test">02</a>
<a href="images/123.html" class="links item">03</a>
<a href="images/123.png" class="links item">04</a>
<a href="images/123.jpg" class="links item">05</a>
<a href="abc" class="links item">06</a>
<a href="/a.pdf" class="links item">07</a>
<a href="/abc.pdf" class="links item">08</a>
<a href="abc.doc" class="links item">09</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
4.美化网页元素
1.为什么要美化网页？
-
有效的传递页面信息
-
美化网页，吸引用户
-
凸显页面主题
-
提高用户体验
span标签：重点突出的字，使用span标签（本身没有效果，约定俗成）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="title1">CSS</span>
</body>
</html>
2.字体样式
/*font-family:字体
font-size：字体大小
font-weight:字体粗细
color：字体颜色
*/
body{
font-family: "Arial Black", 楷体;
color: cornflowerblue;
}
h1{
font-size: 70px;
}
.p1{
font-weight: bold;
}
.p2{
font-weight: lighter;
}
3.文本样式
-
颜色 color字体颜色 background背景颜色
-
文本对齐方式 text-align
-
首行缩进 text-indent
-
行高 line-height 行高和高度一致就可以上下居中
-
阴影 text-shadow
/*阴影 水平偏移 垂直偏移 阴影半径 阴影颜色*/ text-shadow: 10px 0px 20px dodgerblue;
-
装饰
/*下划线*/ .l1{ text-decoration: underline; } /*中划线*/ .l2{ text-decoration: line-through; } /*上划线*/ .l3{ text-decoration: overline; } /*去除下划线： text-decoration: none;*/ a{ text-decoration: none; } -
文本图片对齐：水平：vertical-align: center; 上下：vertical-align: middle
/*对齐：参照物 a,b*/ img,span{ /*水平*/ vertical-align: center; /*上下*/ vertical-align: middle; }
4.超链接伪类
/*默认的颜色*/
a{
text-decoration: none;
color: darkcyan;
}
/*未访问链接*/
a:link{
color: black;
}
/*鼠标悬浮时*/
a:hover{
color: orange;
background: darkcyan;
font-size: 25px;
}
/*鼠标点击未释放*/
a:active{
color: white;
}
/*已访问链接*/
a:visited{
color: khaki;
}
5.列表
/*ul li*/
/*list-style
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul li{
height: 25px;
list-style: none;
text-indent: 0em;
}
6.背景
背景颜色
background-color
背景图片
<style>
div{
width: 1000px;
height: 700px;
border: 2px solid red;
/* 默认全部平铺 repeat*/
background-image: url("images/1.png");
}
.div1{
/*水平*/
background-repeat: repeat-x;
}
.div2{
/*垂直*/
background-repeat: repeat-y;
}
.div3{
/*不平铺*/
background-repeat: no-repeat;
/*定位*/
background-position: 200px 2px;
}
</style>
综合写法
/* 颜色 图片 图片位置 平铺方式*/
background: #11aebc url("../images/down.png") 205px 7px no-repeat;
渐变
我的垃圾审美
<!-- 镜像渐变 ，圆形渐变 -->
<style>
body{
background-color: #08AEEA;
background-image: linear-gradient(45deg, #08AEEA 0%, #2AF598 100%);
}
7. 背景透明度
/*背景透明度*/ opacity: 0.5; filter: alpha(opacity=50);
5.盒子模型
1.什么是盒子？
margin：外边距
padding：内边距
border：边框
2.边框
-
边框的粗细
-
边框的样式
-
边框的颜色
<style> /*body总有一个默认的外边距,所以我们通常将他们初始化为0px*/ body{ margin: 0px; padding: 0px; } /*border:粗细，样式，颜色*/ #box{ width: 300px; border:1px solid #11aebc ; } h2{ font-size: 18px; color: white; line-height: 40px; background-color: #11aebc; } form{ background-color: #29bcc9; } div:nth-of-type(1)>input{ border: 2px solid #2AF598; } div:nth-of-type(2)>input{ border: 2px dashed orange; } </style>
3.内、外边距
margin: 0 auto; 居中
要求：块元素，块元素有固定的宽度
/*
margin:全部
margin:上下 左右
margin:上 右 下 左
padding如上
*/
#box{
width: 300px;
border:1px solid #11aebc ;
margin: 0 auto;
}
h2{
margin: 0 0 0 0;
}
div:nth-of-type(1){
border: 1px solid yellow;
padding: 10px;
}
4.盒子的长宽计算方式
margin+border+padding+内容宽度
5.圆角边框
<!--
border-radius: 四个角
border-radius: 左上和右下 右上和左下
border-radius: 左上 右上 右下 左下 顺时针方向
-->
<!--
圆圈：圆角值等于半径值
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #2AF598;
border-radius: 100px 0px 0 0;
}
</style>css
6.阴影
<!-- 边框阴影 x轴 y轴 阴影半径 阴影颜色 --> box-shadow: 0px 10px 10px red;
6. 浮动
1.标准文档流
块级元素：独占一行
h1~h6 p div 列表......
行内元素：不独占一行
span a img strong......
行内元素 可以被包含在 块级元素中，反之则不可以。
2.display
<!-—
block:块元素
inline:行内元素
inline-block：是块元素，但是可以内联 在一行！
none：
-->
<style>
div{
width: 100px;
height: 100px;
border: 2px solid #11aebc;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 2px solid #11aebc;
display: inline;
}
</style>
3.float
/*左浮*/ float:left;
4.父级边框塌陷的问题
clear：
/*左侧不允许有浮动*/ clear:left; /*左侧不允许有浮动*/ clear:right; /*两侧都不允许有浮动*/ clear:both; clear:none;
解决方案：
-
增加父级元素的高度
-
增加一个空的div清除浮动
<div class="clear"></div> <style> .clear{ clear:both; margin:0; padding:0; } </style> -
overflow
在父级元素中增加一个：overflow: hodden;
-
在父类添加一个伪类：after 推荐使用
#father:after{ content:''; display:block; clear:both; } -
5.对比
-
display
方向不可控制
-
float
浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题~
7.定位
1.相对定位
相对定位position：relative
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
body{
padding: 50px;
}
div{
margin: 10px;
padding: 5px;
font-size: 20px;
line-height: 30px;
}
#father{
border: 1px solid #11aebc;
padding: 0;
}
#first{
background-color: yellow;
border: 1px dashed red;
/*相对定位*/
position: relative;
top: -50px;
left: 50px;
}
#second{
background-color: cornflowerblue;
border: 1px dashed black;
}
#third{
background-color: aquamarine;
border: 1px dashed orange;
position: relative;
bottom: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
2. 绝对定位
定位：基于XXX定位，上下左右~
-
没有父级元素定位的前提下，相对于浏览器边框定位
-
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
-
在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body{
padding: 50px;
}
div{
margin: 10px;
padding: 5px;
font-size: 20px;
line-height: 30px;
}
#father {
border: 1px solid #11aebc;
padding: 0;
position: relative;
}
#father :after{
content: '';
display: block;
clear:both;
}
#first{
background-color: yellow;
border: 1px dashed red;
}
#second{
background-color: cornflowerblue;
border: 1px dashed black;
}
#third{
background-color: aquamarine;
border: 1px dashed orange;
position: absolute;
right: 30px;
}
#fourth{
background-color: red;
border: 1px dashed orange;
position: absolute;
right: 10px;
}
#firth{
color:white;
background-color: black;
border: 1px dashed orange;
position: absolute;
right: 60px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">
第三个盒子
<div id="fourth">第四个盒子</div>
<div id="firth">第五个盒子</div>
</div>
</div>
</body>
</body>
</html>
3. 固定定位fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body{
height: 1000px;
}
/*绝对定位相对于浏览器*/
div:nth-of-type(1){
width:100px;
height: 100px;
background-color: #2AF598;
position:absolute ;
right: 0;
bottom: 0;
}
/*固定定位*/
div:nth-of-type(2){
width:50px;
height: 50px;
background-color: orange;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
4. z-index
图层
z-index：默认是0，最高无限
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
#content{
width: 200px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 20px;
border: 2px solid #11aebc;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
/* 父级元素相对定位 */
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top: 125px;
}
.tipBg{
background-color: black;
/*背景透明度*/
opacity: 0.5;
filter: alpha(opacity=50);
}
.tipText{
color: white;
line-height: 25px;
z-index: 16;
}
</style>
</head>
<body>
<div id="content">
<ul>
<li><img src="images/2B.jpg" alt="" width="200px" height="150px"></li>
<li class="tipText">2B</li>
<li class="tipBg"></li>
<li class="time">时间：2099-01-01</li>
<li class="address">地点：火星</li>
</ul>
</div>
</body>
</html>
8. 动画
css3新特性