这篇博客主要复习了CSS的重要概念，包括字体和文本样式的基础与应用，元素显示模式的介绍及实践，深入探讨了CSS的三大特性，并详细解析了盒子模型的构成和作用。此外，还重点讲解了网页布局中的浮动布局和定位技术，通过案例帮助读者理解和掌握这些核心知识点。
CSS复习之样式，元素显示模式，CSS三大特性，盒子模型，网页布局
CSS样式
(1)字体样式
(2)文本样式
(3)背景样式
字体样式
基础介绍
(1)字体风格：
font-style
(2)字体粗细：
font-weight
(3)字体大小：
font-size
(4)字体系列：
font-family
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
字体样式：
(1)字体风格：
font-style
(2)字体粗细：
font-weight
(3)字体大小：
font-size
(4)字体系列：
font-family
*/
/* 标签选择器 */
p {
/* 字体风格 */
/* font-style: normal; */
/* 字体粗细 400->normal 700->bold */
/* font-weight: 700; */
/* 字体大小 px：像素 */
/* font-size: 20px; */
/* 字体系列 使用常见字体 */
/* font-family: '楷体'; */
/* 复合属性：注意顺序 */
/* font: normal 500 25px '楷体'; */
font: 25px '楷体';
}
</style>
</head>
<body>
<p>天道酬勤</p>
</body>
</html>
文本样式(重点)
基础介绍
(1)文本颜色：
color
(2)文本水平对齐方式：
text-align
(3)文本装饰：
text-decoration
(4)文本段落首行缩进：
text-indent
(5)行高：
line-height
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
文本样式：
(1)文本颜色：
color
(2)文本水平对齐方式：
text-align
(3)文本装饰：
text-decoration
(4)文本段落首行缩进：
text-indent
(5)行高：
line-height
*/
p{
/* 文本颜色：颜色名、十六进制颜色值 */
color: #7FFFD4;
/* 文本水平对齐方式 center left right */
text-align: center;
/* 文本装饰 overline underline line-through none */
text-decoration: none;
/* 文本段落首行缩进 em：相对单位 */
/* text-indent: 2em; */
/* 高度 */
height: 100px;
/* 行高：高度和行高一致，让元素垂直方向居中 */
line-height: 100px;
}
</style>
</head>
<body>
<p>有志者，事竟成</p>
<div>破釜沉舟</div>
</body>
</html>
综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
需求：
模拟"淘宝网"上的"百货"
初始样式：
黑色
不带下划线
鼠标移动链接时：
红色
带下划线
*/
/* 初始样式 */
a {
/* 黑色 */
color: #000000;
/* 不带下划线->给超链接去除下划线 */
text-decoration: none;
}
/* 鼠标移动链接时 */
a:hover {
/* 红色 */
color: red;
/* 带下划线 */
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#">百货</a>
</body>
</html>
背景样式
基础介绍
(1)背景颜色：
background-color
(2)背景图片：
background-image
(3)背景图片平铺：
background-repeat
(4)背景图片固定：
background-attachment
(5)背景图片位置：
background-position
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
/* 宽度 */
width: 500px;
/* 高度 */
height: 300px;
/* 边框 */
/* 边框粗细、边框样式、边框颜色 */
border: 1px solid black;
/* 背景颜色 */
/* background-color: #7FFFD4; */
/* 背景图片 */
/* background-image: url(img/result.png); */
/* 背景图片平铺方式 no-repeat、repeat、repeat-x、repeat-y */
/* background-repeat: no-repeat; */
/* 背景图片位置 */
/* background-position: right top; */
/* 背景图片固定 fixed、scroll */
/* background-attachment: scroll; */
/* 复合写法 */
/* background: pink url(img/result.png) no-repeat fixed left top; */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
元素显示模式
基础介绍
(1)了解元素的显示模式->页面布局
(2)显示模式分类：
块元素：
div、p等
特征：
独占一行、宽高内外边距可以设置、宽度默认是父元素宽度的100%、包含块元素|行内元素
行内元素：
span、a等
特征：
可以和其他元素共占一行、直接设置宽高无效、默认宽度是本身内容的宽度、只能文本|行内元素
行内块元素：
img、input等
具备行内元素和块元素的特征
特征：
行内元素特征->和其他元素共占一行
块元素特征->直接设置宽高有效
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
元素默认显示方式：
(1)了解元素的显示模式->页面布局
(2)显示模式分类：
块元素：div、p等
特征：
独占一行
宽高内外边距可以设置
宽度默认是父元素宽度的100%
包含块元素|行内元素
行内元素：
span、a等
特征：
可以和其他元素共占一行
直接设置宽高无效
默认宽度是本身内容的宽度
只能文本|行内元素
行内块元素：
img、input等
具备行内元素和块元素的特征
特征：
行内元素特征->和其他元素共占一行
块元素特征->直接设置宽高有效
display：
可以修改元素的默认显示方式：
block：块
inline：行
inline-block：行内块
none：隐藏元素，元素不占据页面空间
*/
span {
width: 100px;
height: 100px;
border: 1px solid black;
/* 块元素 */
/* display: block; */
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
/* 行内元素 */
/* display: inline; */
/* 行内块元素 */
/* display: inline-block; */
/* 隐藏元素，不占据页面空间 */
/* display: none; */
/* 设置元素透明度：0~1 设置为0，元素占据页面空间 */
/* opacity: 0.5; */
}
img {
width: 30%;
}
input[type]{
width: 200px;
}
</style>
</head>
<body>
<p>行内元素</p>
<span>甄嬛传</span>
<span>琅琊榜</span>
<span>伪装者</span>
<p>块元素</p>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<!--
注意：
文字类的元素内不能使用块级元素：p嵌套div，不要使用
超链接不再嵌套超链接
-->
<p>
<div>div123</div>
</p>
<a href="http://www.baidu.com">
<a href="http://www.taobao.com">淘宝</a>
</a>
<p>行内块元素</p>
<img src="img/result.png" >
<img src="img/result.png" >
<br>
<input type="text">
<input type="password">
</body>
</html>
CSS三大特性(重点)
基础介绍
(1)层叠性、继承性、优先级
(2)细节如下：
层叠性：
使用相同选择器，给元素设置相同的样式
样式冲突问题->就近原则
继承性：
子标签会继承父标签的样式->文本颜色、字号等 text-xx | font-xx | line-height
优势：
简化代码
优先级：
使用不同选择器，给元素设置样式
优先级 | 权重 4组数字组成
继承 | * 0,0,0,0 0
元素 0,0,0,1 1
类|伪类 0,0,1,0 10
ID 0,1,0,0 100
行内样式 1,0,0,0 1000
!imporant 无穷大
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
CSS三大特性：
层叠性、继承性、优先级
层叠性：
使用相同选择器，给元素设置相同的样式
样式冲突问题->就近原则
继承性：
子标签会继承父标签的样式：
文本颜色、字号等 text-xx | font-xx | line-height
优势：
简化代码
优先级：
使用不同选择器，给元素设置样式
优先级 | 权重 4组数字组成
继承 | * 0,0,0,0
元素 0,0,0,1
类|伪类 0,0,1,0
ID 0,1,0,0
行内样式 1,0,0,0
!imporant 无穷大
*/
/* 使用相同选择器，给元素设置相同的样式->层叠性->就近原则 */
/* p {
color: aquamarine;
}
p {
color: #FF0000;
} */
/* 子标签会继承父标签的样式 */
/* line-height：xxpx | 1.5(倍数) */
/* 1.5：子元素行高->子元素文字大小的1.5倍 */
/* div {
color: #0000FF;
font-size: 20px;
line-height: 1.5;
} */
/* 使用不同选择器，给元素设置样式->优先级 */
.priority {
color: red;
}
/* #priority {
color: yellow;
} */
p {
/* 无穷大 */
color: green !important;
}
</style>
</head>
<body>
<p>层叠性</p>
<div>
div内容
<p>继承性</p>
</div>
<p class="priority " id="priority">优先级</p>
</body>
</html>
盒子模型(重点)
基础介绍
(1)Box Model，盒子模型
(2)HTML页面中的元素可看作是一个盒子，容器
(3)网页布局：
A.先准备好网页元素，网页元素基本上都是盒子
B.利用CSS设置盒子样式，摆放到合适位置
C.往盒子中装内容
盒子组成
(1)实际内容、内边距、边框、外边距
(2)内边距：padding，内容到边框之间的距离
(3)边框：border，元素的边框->边框宽度 | 边框样式 | 边框颜色
(4)外边距：margin，盒子和盒子之间的距离
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
盒子模型：
(1)实际内容、内边距、边框、外边距
(2)内边距：padding，内容到边框之间的距离
(3)边框：元素的边框->边框宽度 | 边框样式 | 边框颜色
(4)外边距：margin，盒子和盒子之间的距离
*/
p {
width: 200px;
height: 200px;
background-color: pink;
/*
边框：
影响盒子实际大小
想保持盒子大小是100*100->修改宽高值
*/
/* 边框粗细 */
/* border-width: 1px; */
/* 边框样式 solid实线 */
/* border-style: solid; */
/* 边框颜色 */
/* border-color: black; */
/* 复合写法 */
/* border: 1px solid black; */
/*
内边距：
内容到边框之间的距离
最常用：padding-left: xxpx; 左内边距
*/
/* 单独设置 */
/* padding-left: 10px; */
/* 统一设置 */
/* padding: 10px; */
/* 上下为10px 左右为20px */
/* padding: 10px 20px; */
/* 上 左右 下 */
/* padding: 10px 20px 30px; */
/* 上 右 下 左 */
/* padding: 10px 20px 30px 40px; */
/*
外边距：
盒子和盒子之间的距离
常用写法：
margin: xxpx auto;
让元素水平方向居中
*/
/* margin-top: 5px; */
/* 上下 左右 */
/* 让元素水平方向居中 */
margin: 10px auto;
}
</style>
</head>
<body>
<p>盒子模型</p>
</body>
</html>
网页布局(重点)
基础介绍
(1)使用CSS摆放盒子
(2)CSS提供了3种传统布局方式：
标准流 | 普通流、浮动、定位
标准流
(1)标签按照默认方式排列
(2)比如：
div、p等：独占一行，从上到下排列
span、a等：和其他元素共占一行，从左到右排列
(3)是最基本的布局方式
浮动(float)(重点)
基础介绍
(1)为什么需要浮动？
A.如何让多个块级元素水平排列一行，没有缝隙
B.如何实现元素的左对齐或右对齐
(2)浮动可以改变元素的默认排列方式
多个块级元素纵向排列->标准流
多个块级元素横向排列->浮动
设置盒子大小、盒子位置
(3)float属性创建浮动，将其移动到一边，直到左边缘或右边缘等
float：left | right | none;
(4)特征：
A.顶部对齐规则
B.如果父元素装不下浮动的盒子，多出的盒子会另起一行对齐
C.脱离标准流的控制
D.浮动的盒子不再保留它们的位置
E.浮动盒子只会影响后面的标准流盒子 ***
F.建议：一浮全浮
G.清除浮动：
overflow: hidden;
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.second {
/* display：可以让几个块元素垂直排列，但是元素之间有间隙 */
/* display: inline-block; */
/*
浮动：
left：左浮动
right：右浮动
特征：
顶部对齐规则
如果父元素装不下浮动的盒子，多出的盒子会另起一行对齐
浮动元素：
脱离标准流的控制
浮动的盒子不再保留它们的位置
浮动盒子只会影响后面的标准流盒子 ***
建议：一浮全浮
清除浮动：
overflow: hidden;
*/
/* float: left; */
/* 消除浮动影响 */
overflow: hidden;
}
.second .one {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.second .two {
width: 100px;
height: 100px;
background-color: #008000;
float: left;
}
.second .three {
width: 100px;
height: 100px;
background-color: #800080;
float: left;
}
.first {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #7FFF00;
}
.third {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #7FFFD4;
}
</style>
</head>
<body>
<div class="first">
first div
</div>
<div class="second">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="third">
third div
</div>
</body>
</html>
定位(position)(重点)
基础介绍
(1)定位：
将盒子定在一个位置，定位->摆放盒子
当使用标准流或浮动不能很好的实现对应的网页布局时，可尝试采用定位实现
(2)定位：
定位模式：定位方式
边偏移：元素的位置
(3)定位组成：
static：静态定位->元素默认排列方式|无定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
(4)边偏移：
top 顶部偏移量
bottom 底部偏移量
left 左侧偏移量
right 右侧偏移量
(5)使用定位布局时：
盒子层叠，可以使用z-index属性控制盒子排列的次序
z-index:number; 数值越大，盒子越靠上
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
定位：
相对定位：
相对于它自身原来的位置偏移
继续保留原来位置
绝对定位：
相对于它祖先元素偏移
不再保留原来位置
如果元素没有祖先元素，若元素存在祖先元素但是祖先元素无定位：
以浏览器为准；
若元素存在祖先元素且祖先元素设置定位：
以最近一级的有定位的祖先元素为准
固定定位：
以浏览器可视窗口为准，固定位置不动
不随滚动条滚动
使用定位布局时：
盒子层叠，可以使用z-index控制盒子的次序
z-index:number; 数值越大，盒子越靠上
*/
.one1 {
width: 100px;
height: 100px;
background-color: red;
/* 相对定位 */
/* position: relative; */
/* 绝对定位 */
/* position: absolute; */
/* 固定定位 */
/* position: fixed; */
/*绝对定位 */
position: absolute;
top: 10px;
left: 10px;
}
.one2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 30px;
left: 30px;
}
.one3 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 50px;
left: 50px;
z-index: -1;
}
.one {
width: 500px;
height: 1500px;
/* background-color: pink;
position: absolute;
top: 20px;
left: 20px; */
}
</style>
</head>
<body>
<div class="one">
<div class="in">
<div class="one1"></div>
<div class="one2"></div>
<div class="one3"></div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
