CSS层叠样式
大纲：
1、CSS基本使用
CSS是什么？
CSS全称Cascading Style Sheets，翻译过来就是层叠样式表，如果说HTML是网页的结构，那么CSS就是网页化妆师。
CSS怎么学？
多敲多练多思考
CSS写在哪里？
CSS有三种写法
1、直接写在标签内（内联样式）
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式</title>
</head>
<body>
<!--定义div大盒子-->
<!--内联样式 写在标签里面-->
<div style="background-color: darkorchid;width: 300px;height: 100px;">幸福是一种方法，不是一样东西。是一种才能，不是一个目标。</div>
</body>
</html>
实现效果：
2、写在style标签内（内部样式）
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<!--内部样式-->
<style>
div{
background-color: aqua;
width: 100px;
height: 150px;
}
</style>
</head>
<body>
<!--定义div大盒子-->
<div>幸福是一种方法，不是一样东西。是一种才能，不是一个目标。</div>
</body>
</html>
实现效果：
3、使用外部.css文件（外部样式）
html文件代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<!--link 引入样式-->
<link rel="stylesheet" href="test.css">
<!--rel="stylesheet" 样式文件 href="test.css" 链接到css文件-->
</head>
<body>
<!--定义div大盒子-->
<div>幸福是一种方法，不是一样东西。是一种才能，不是一个目标。</div>
</body>
</html>
css文件代码示例：
/*样式设置*/
div{
background-color: blue;
width: 500px;
height: 50px;
显示效果：
优先级：内联样式 > 内部样式（练习时用） > 外部样式（做项目常用）
2、选择器
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<!--使用内部样式装饰-->
<!--适用于：一个页面多个div盒子-->
<style>
/*标签选择器*/
div{
background-color: burlywood;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div>我是一个div盒子</div>
<div>我是第二个div盒子</div>
</body>
</html>
展示效果：
class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<!--使用内部样式装饰-->
<!--适用于：一个页面多个div盒子，且有选择的进行装饰-->
<style>
/*class选择器*/
/*定义 box 类*/
.box{
background-color: chartreuse;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div>我是一个div盒子</div>
<div class="box">我是第二个div盒子</div>
<!--class="box"创建对象，调用属性-->
</body>
</html>
展示效果：
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<!--使用内部样式装饰-->
<!--适用于：一个页面多个div盒子，且有选择的进行装饰-->
<style>
/*id选择器*/
/*定义 box 类*/
#box{
background-color: chartreuse;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>我是一个div盒子</div>
<div id="box">我是第二个div盒子</div>
<!--id是唯一的，只能对一个对象进行装饰-->
<!--id选择器具有唯一性-->
</body>
</html>
展示效果：
群组选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
div,p{
background-color: burlywood;
height: 100px;
}
/*不同类型的标签都用了同一个样式*/
</style>
</head>
<body>
<div>我是一个div盒子</div>
<p>我是一个p标签</p>
</body>
</html>
效果展示：
兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟选择器</title>
<!--兄弟选择器-->
<style>
div~p{
background-color: aqua;
height: 40px;
}
</style>
<!--只给p标签设置样式-->
</head>
<body>
<div>我是第一个div大盒子</div>
<div>
<span>我是第一个span小盒子</span>
</div>
<p>我是第一个p标签</p>
<p>我是第二个p标签</p>
<p>我是第三个p标签</p>
</body>
</html>
展示效果：
相邻选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻选择器</title>
<style>
/*相邻选择器*/
.div2+p{
background-color: darkorchid;
height: 30px;
}
</style>
</head>
<body>
<div class="div1">我是第一个div大盒子</div>
<div class="div2">
<span>我是第一个span小盒子</span>
</div>
<p>我是第一个p标签</p>
<p>我是第二个p标签</p>
<p>我是第三个p标签</p>
</body>
</html>
展示效果：
子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
/*子代选择器*/
div>span{
/*盒子背景颜色*/
background-color: chocolate;
/*字体颜色*/
color: aliceblue;
}
</style>
</head>
<body>
<div>我是第一个div大盒子</div>
<div>
<span>我是第一个span小盒子</span>
<!--span小盒子是行内标签，不能设置宽高-->
</div>
<p>我是第一个p标签</p>
<p>我是第二个p标签</p>
<p>我是第三个p标签</p>
</body>
</html>
展示效果：
后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/*后代选择器*/
div p{
background-color: chartreuse;
height: 50px;
}
/*只要是后代都可设置样式*/
</style>
</head>
<body>
<div>我是第一个div大盒子</div>
<div>
<span>我是第一个span小盒子</span>
<div>
<p>我是内嵌的p标签</p>
<span>
<p>我也是内嵌的p标签</p>
</span>
</div>
</div>
<p>我是第一个p标签</p>
<p>我是第二个p标签</p>
<p>我是第三个p标签</p>
</body>
</html>
展示效果：
class相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class相同</title>
<style>
/*当class相同时，有选择性的设置样式*/
/*翻译：首先必须是span,其次class为box*/
span.box{
background-color: chartreuse;
height: 30px;
}
</style>
</head>
<body>
<div class="box">我是第一个div大盒子</div>
<span class="box">我是一个span小盒子</span>
<p class="box">我是一个p标签</p>
</body>
</html>
展示效果：
并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style>
/*第一种设置*/
/*空格是后代选择器*/
/*多个不同标签设置样式*/
div,p,ul li{
/*字体颜色设置*/
color: blue;
}
/*第二种设置*/
div,p,.li li{
background-color: aqua;
}
</style>
</head>
<body>
<div>王后</div>
<p>白雪公主</p>
<ul class="li">
<!--无序列表-->
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ul>
</body>
</html>
展示效果：
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*第一种：未被点击的时候触发*/
a:link{
background-color: chocolate;
color: antiquewhite;
}
/*第二种：已被点击的链接*/
a:visited{
background-color: blue;
color: aliceblue;
}
/*第三种:鼠标悬停的样式*/
a:hover{
background-color: cornflowerblue;
color: darkturquoise;
}
/*第四种：鼠标点击未释放*/
a:active{
background-color: aliceblue;
color: brown;
}
/*如果这四个选择器都要设置，必须要按这个顺序：link>visited>hover>active*/
</style>
</head>
<body>
<a href="">百度一下</a>
</body>
</html>
展示效果：
focus伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>focus伪类选择器</title>
<style>
/*focus伪类选择器针对表单*/
input:focus{
background-color: darkturquoise;
}
</style>
</head>
<body>
<!--表单标签-->
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
展示效果：
3、CSS字体/文本
字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style>
/*字体*/
/*浏览器默认字体是微软雅黑*/
#box1{
font-family: "Arial","宋体";
}
/*字体大小*/
/*字体大小的符号：% rem em*/
/*浏览器默认一个字为 1 em 或 16 px */
#box2{
font-size: 28px;
}
/*字体样式：斜体*/
#box3{
font-style: italic;
/*另一种斜体 font-style: oblique;*/
/*改回正常字体 font-style: normal;*/
}
/*字体颜色*/
/*颜色：预定义颜色 十六进制颜色#fff rgb(255,0,255)*/
</style>
</head>
<body>
<div id="box1">这是第一个div盒子</div>
<div id="box2">这是第一个div盒子</div>
<div id="box3">这是第一个div盒子</div>
<div id="box4">这是第一个div盒子</div>
<div id="box5">这是第一个div盒子</div>
<div id="box6">这是第一个div盒子</div>
<div id="box7">这是第一个div盒子</div>
<div id="box8">这是第一个div盒子</div>
<div id="box9">这是第一个div盒子</div>
<div id="box10">这是第一个div盒子</div>
<div id="box11">这是第一个div盒子</div>
</body>
</html>
展示效果：
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style>
/*1、文本对齐方式 left right center*/
#p1{
text-align: center;
}
/*2、文字缩进 一个字符占16px 或2em */
#p2{
text-indent: 32px;
}
/*3、单词间距*/
#p3{
word-spacing: 20px;
}
/*4、文字间距*/
#p4{
letter-spacing: 20px;
}
/*5、线条*/
/*下划线*/
#div1{
text-decoration: underline;
}
/*上线*/
#div2{
text-decoration: overline;
}
/*中间线*/
#div3{
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="p1">龙吟虎啸，屋瓦齐鸣。</p>
<p id="p2">龙吟虎啸，屋瓦齐鸣。</p>
<p id="p3">I'm the queen in the world.</p>
<p id="p4">龙吟虎啸，屋瓦齐鸣。nice</p>
<div id="div1">龙吟虎啸，屋瓦齐鸣。</div>
<div id="div2">龙吟虎啸，屋瓦齐鸣。</div>
<div id="div3">龙吟虎啸，屋瓦齐鸣。</div>
</body>
</html>
效果展示：
文字内容超出省略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字内容超出省略</title>
<style>
div{
width: 100px;
height: 30px;
background-color: darkturquoise;
/*文本一行显示*/
white-space: nowrap;
/*超出盒子部分的内容设置隐藏*/
overflow: hidden;
/*省略号显示*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>龙吟虎啸，屋瓦齐鸣。龙吟虎啸，屋瓦齐鸣。龙吟虎啸，屋瓦齐鸣。
龙吟虎啸，屋瓦齐鸣。龙吟虎啸，屋瓦齐鸣。龙吟虎啸，屋瓦齐鸣。
龙吟虎啸，屋瓦齐鸣。龙吟虎啸，屋瓦齐鸣。</div>
</body>
</html>
效果展示：
-
块级元素
-
块级标签（一个标签占一行）
-
特点：可进行宽高设置
-
种类
-
h1~h6标签
-
div标签
-
p标签
-
ol标签
-
ul标签
-
li标签
-
-
-
-
行内元素
-
行内标签（一行有多个标签）
-
特点
-
宽高设置无效，默认宽度是本身内容的高度
-
行内元素只能放文本或者其他的行内元素
-
-
种类
-
span标签
-
a标签
- a标签可以放块级标签
-
em标签
-
del标签
-
ins标签
-
···
-
-
-
-
行内块元素
-
特点
-
有块级元素特点
-
也有行内元素特点
-
-
种类
-
img
-
input
-
td
-
-
显示形式转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示形式转换</title>
<style>
/*将a标签 行内元素转换成块级元素*/
a{
width: 100px;
height: 50px;
/*设置角色类型 转换块级元素*/
display: block;
background-color: darkturquoise;
}
/*将div标签 块级元素转换成行内元素*/
div{
width: 100px;
height: 50px;
background-color: chocolate;
/*由块级元素转换成行内元素*/
display: inline;
}
/*将span标签 行内元素转换成行内块元素*/
span{
width: 100px;
height: 50px;
background-color: cornflowerblue;
/*行内元素转换成行内块元素*/
display: inline-block;
}
</style>
</head>
<body>
<a href="#">我是a标签，是行内元素</a>
<div>我是块级元素</div>
<span>我是行内元素</span>
</body>
</html>
展示效果:
背景图片
设置背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置背景图片</title>
<style>
div{
width: 1000px;
height: 1000px;
/*设置背景图片 默认铺满整个屏幕*/
background-image: url("https://picnew12.photophoto.cn/20180914/chongwugou-30192267_1.jpg");
/*不平铺*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
设置背景图片的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景的位置</title>
<style>
div{
width: 1000px;
height: 1000px;
/*设置背景图片 默认铺满整个屏幕*/
background-image: url("https://picnew12.photophoto.cn/20180914/chongwugou-30192267_1.jpg");
/*不平铺*/
background-repeat: no-repeat;
/*背景颜色*/
background-color: cyan;
/*精确图片位置，盒子从左上角开始*/
/*background-position: 20px 50px;*/
/*图片在中间顶端*/
background-position: center top;
/*图片往左上角对齐*/
/*background-position: left top;*/
/*background-position: bottom;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
固定背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定背景</title>
<style>
div {
width: 1000px;
height: 1000px;
/*设置背景图片 默认铺满整个屏幕*/
background-image: url("https://picnew12.photophoto.cn/20180914/chongwugou-30192267_1.jpg");
/*不平铺*/
background-repeat: no-repeat;
/*背景固定 默认滚动状态scroll*/
background-attachment: fixed;
}
</style>
</head>
<body>
<div>
<p>投我以桃，报之以李。</p>
<p>投我以桃，报之以李。</p>
<p>投我以桃，报之以李。</p>
<p>投我以桃，报之以李。</p>
</div>
</body>
</html>
背景复合写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景复合写法</title>
<style>
div {
/*背景固定，背景不平铺，背景图片*/
width: 1000px;
height: 1000px;
/*设置背景图片 默认铺满整个屏幕*/
/*background-image: url("https://picnew12.photophoto.cn/20180914/chongwugou-30192267_1.jpg");*/
/*不平铺*/
/*background-repeat: no-repeat;*/
/*背景固定 默认滚动状态scroll*/
/*background-attachment: fixed;*/
/*复合写法*/
background: url("https://picnew12.photophoto.cn/20180914/chongwugou-30192267_1.jpg") no-repeat fixed;
}
</style>
</head>
<body>
<div>
<p>投我以桃，报之以李。</p>
<p>投我以桃，报之以李。</p>
<p>投我以桃，报之以李。</p>
<p>投我以桃，报之以李。</p>
<p>投我以桃，报之以李。</p>
<p>投我以桃，报之以李。</p>
<p>投我以桃，报之以李。</p>
<p>投我以桃，报之以李。</p>
</div>
</body>
</html>
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
div{
width: 100px;
height: 100px;
background-color: cyan;
/*边框复合写法*/
/*border: 2px solid chocolate;*/
/*边框拆分*/
/*边框宽度 上5 右7 下10 左15*/
border-width: 5px 7px 10px 15px;
border-color: brown;
border-style: solid;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style>
div{
width: 300px;
height: 300px;
background-color: cyan;
/*内边距会撑开盒子*/
/*padding: 10px;*/
/*下内边距*/
padding-bottom: 10px;
/*边框*/
border-bottom: 10px solid salmon;
}
</style>
</head>
<body>
<div>我是世界上最美丽的女人</div>
</body>
</html>
外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style>
div{
width: 200px;
height: 200px;
/*如果外边距只有一个值，则表示四个方向的值一样，上右下左，顺时针*/
/*margin: 100px;*/
/*如果外边距有两个值，则表示上下100px，左右居中*/
/*margin: 100px auto;*/
/*如果外边距是三个值，表示上100px 左右200px 下400px*/
margin: 100px 200px 400px;
background-color: brown;
/*转换成行内块*/
display: inline-block;
/*设置外边距，即两个盒子都往右移动了40px*/
/*margin-left: 40px;*/
}
.box{
height: 300px;
width: 300px;
background-color: cyan;
}
</style>
</head>
<body>
<div></div>
<div class="box"></div>
</body>
</html>
外边距塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距塌陷问题</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: cyan;
/*解决外边距塌陷问题 超出部分隐藏*/
overflow: hidden;
}
.box div{
width: 500px;
height: 200px;
background-color: purple;
/*外边距*/
margin: 50px;
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>
小结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>总结</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: cyan;
/*加边框*/
border: 10px solid red;
}
</style>
</head>
<body>
<div>
盒子宽=样式宽(width)+内边距(padding)+外边距(margin)+边框（border）
盒子高=样式宽(height)+内边距(padding)+外边距(margin)+边框（border）
</div>
</body>
</html>
