CSS复习总结
CSS(层叠样式表)，就像网页的化妆师，当你在设计一个网页时，CSS的作用就是对网页的元素内容进行美化。如改变文字的元素、大小、字体，调整图片位置、大小等。
CSS引入方式
- 内部样式表：将CSS代码写在style里面
<style>
/* CSS 代码 */
/* 选择器 { CSS 属性} */
/* 属性名和属性值成对出现 → 键值对 */
p {
/* 文字颜色 */
color: red;
/* 字号 */
font-size: 30px;
}
</style>
- 外部样式表：单独的CSS文件（.CSS),在 HTML 使用 link 标签引入
<!-- link 引入外部样式表； rel：关系，样式表 -->
<link rel="stylesheet" href="./my.css">
- 行内样式：配合 JavaScript 使用，CSS写在标签的style属性值中
<!-- 行内，style=" CSS" -->
<div style="color: green; font-size: 30px;">这是 div 标签</div>
选择器
标签选择器
- 使用标签名作为选择器，对其设置样式；如：p,h1.div…
<style>
/* 特点：选中同名标签设置相同的样式，无法差异化同名标签的样式 */
p {
color: red;
}
</style>
类选择器
定义类名，添加class=“类名”，对相同标签进行差异化的设置
<style>
/* 定义 */
.red {
color: red;
}
.size {
font-size: 50px;
}
</style>
--------------------------------------------------------------------------
<body>
<!-- 使用 -->
<!-- 一个类选择器可以给多个标签使用 -->
<p class="red">111111</p>
<!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 -->
<div class="red size">div 标签</div>
</body>
</html>
id选择器
- 通过添加id名，来进行标签效果设置；一般配合 JavaScript 使用
<style>
/* 定义 */
#red {
color: red;
}
</style>
</head>
<body>
<!-- 使用 -->
<div id="red">div 标签</div>
</body>
通配符选择器
-
对页面的所有标签，设置相同样式
-
可用于清除默认样式，如标签默认的外边距、内边距
<style>
* {
color: red;
}
文字控制属性
字体大小
p {
font-size: 30px;
}
字体是否倾斜
<style>
em {
/* 正常 */
font-style: normal;
}
/* 倾斜 */
div {
font-style: italic;
}
</style>
</head>
<body>
<em>em 标签</em>
<div>div 标签</div>
行高
/* line-height: 30px; */
/* 行高值是数字，表示是当前标签字体大小的倍数 */
line-height: 2;
字体族
div {
font-family: 楷体;
}
font复合属性
style>
/* 文字倾斜、文字加粗、字体大小是30px、行高2倍、楷体 */
div {
/* font: italic 700 30px/2 楷体; */
/* font 属性必须写字号和字体，否则 属性不生效 */
font: 30px 楷体;
/* font: italic 700 30px/2; */
}
</style>
文本缩进
p {
text-indent: 2em;
}
文本对齐
h1 {
/* 本质：居中的是文字内容，不是标签 */
/* text-align: left; */
text-align: center;
/* text-align: right; */
}
文本修饰线
<style>
a {
/* 无，去掉修饰线 */
text-decoration: none;
}
div {
/* 下划线 */
text-decoration: underline;
}
p {
text-decoration: line-through;
}
span {
text-decoration: overline;
}
</style>
</head>
<body>
<a href="#">a 标签，去掉下划线</a>
<div>div 标签，添加下划线</div>
<p>p 标签，添加删除线</p>
<span>span 标签，添加顶划线</span>
</body>
文字颜色
h1 {
background-color: aqua;
/* color: red; */
/* color: rgb(0,255,0); */
/* color: rgba(0,0,0,0.8); */
/* color: #0000ff; */
color: #00f;
}
复合选择器
后代选择器
选择某元素里面再次包含的元素
<style>
div span {
color: red;
}
</style>
<span> span 标签</span>
<div>
<span>这是 div包裹的span</span >
</div>
子代选择器
<style>
/* div 的儿子 span 文字颜色是红色 */
div > span {
color: red;
}
</style>
</head>
<body>
<div>
<span>儿子 span</span>
<p>
<span>孙子 span</span>
</p>
</div>
并集选择器
<style>
div,
p,
span {
color: red;
}
交集选择器
<style>
/* 第一个 p 标签文字颜色是红色 */
/* 既又的关系：既是 p 标签，又是有 box 类 */
p.box {
color: red;
}
</style>
</head>
<body>
<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器</div>
</body>
伪类选择器
style>
/* 任何标签都可以设置鼠标悬停的状态 */
a:hover {
color: red;
}
/* div:hover */
.box:hover {
color: green;
}
</style>
</head>
<body>
<a href="#">a 标签，超链接</a>
<div class="box">div 标签</div>
</body>
背景属性
背景图
<style>
/* 盒子是 400 * 400 */
div {
width: 400px;
height: 400px;
/* 1.背景图默认是平铺（复制）的效果 */
background-image: url(./images/1.png);
}
</style>
平铺方式
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
/* 不平铺：盒子的左上角显示一张背景图 */
background-repeat: no-repeat;
/* background-repeat: repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
}
背景图位置
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
/* 左上角 */
/* background-position: 0 0; */
/* background-position: left top; */
/* background-position: right bottom; */
/* 水平：正数向右，负数向左 */
/* background-position: 50px 0; */
/* background-position: -50px 0; */
/* 垂直：正数向下，负数向上 */
/* background-position: 0 100px; */
/* background-position: 0 -100px; */
/* background-position: 50px center; */
/* 特殊写法 */
/* background-position: bottom left; */
/* 关键字可以只写一个，另一个方向居中 */
/* background-position: bottom; */
/* 只写一个数字表示水平方向，垂直方向居中 */
background-position: 50px;
}
</style>
背景图缩放
div {
width: 500px;
height: 300px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
/* contain：如果图的宽高跟盒子尺寸相等停止缩放，可能导致盒子有露白 */
/* background-size: contain; */
/* cover：图片完全覆盖盒子，可能导致图片显示不全 */
/* background-size: cover; */
/* 100% 图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放 */
background-size: 100%;
}
背景图固定
- 背景图不会随着元素的内容而滚动
body {
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
背景复合属性
div {
width: 400px;
height: 400px;
background: pink url(./images/1.png) no-repeat right center/cover;
}
显示属性
块级元素
独占一行，宽度默认为父级所有
行内元素
一行可以多个显示，设置宽高不生效；宽高尺寸由内容撑开
行内块元素
一行可显示多个块，设置宽高生效；也可由内容撑开
各类型转换
属性：display
盒子模型
结构伪类选择器
根据元素的结构关系查找元素
li:first-child {
background-color: green;
}
伪元素选择器
创建虚拟元素，用来摆放装饰性内容
div::before {
content: "before 伪元素";
}
div::after {
content: "after 伪元素";
}
盒子组成
- 内容区域 – width & height
- 内边距 – padding（出现在内容与盒子边缘之间）
- 边框线 – border
- 外边距 – margin（出现在盒子外面）
div {
width: 200px;
height: 200px;
background-color: pink;
/* 内容与盒子边缘之间 */
padding: 20px;
border: 1px solid #000;
/* 出现在盒子外面，拉开两个盒子之间的距离 */
margin: 50px;
}
边框线
div {
width: 200px;
height: 200px;
background-color: pink;
/* 实线 */
/* border: 1px solid #000; */
/* 虚线 */
/* border: 2px dashed red; */
/* 点线 */
border: 3px dotted green;
}
单方向边框线
div {
width: 200px;
height: 200px;
background-color: pink;
border-top: 1px solid #000;
border-right: 2px dashed red;
border-bottom: 5px dotted green;
border-left: 10px solid orange;
}
内边距
div {
width: 200px;
height: 200px;
background-color: pink;
/* padding: 20px; */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
/* padding多值写法 */
/* 四值：上 右 下 左 */
/* padding: 10px 20px 40px 80px; */
/* 三值：上 左右 下 */
/* padding: 10px 40px 80px; */
/* 两值：上下 左右 */
padding: 10px 80px;
/* 记忆方法：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样 */
}
盒子尺寸
- 盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
外边距-版心居中
div {
margin: 0 auto;
width: 1000px;
height: 200px;
background-color: pink;
}
清除默认样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 去掉列表的项目符号 */
li {
list-style: none;
}
圆角
-
属性名：border-radius
-
多值写法：
-
胶囊形状：
iv {
width: 200px;
height: 80px;
background-color: orange;
border-radius: 40px;
}
盒子阴影
-
属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
-
默认是外阴影，内阴影需要添加 inset
div {
width: 200px;
height: 80px;
background-color: orange;
box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}
浮动
-
作用：让块元素水平排列；
-
属性名：float
-
属性值: left：左对齐 ; right：右对齐
/* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
.one {
width: 100px;
height: 100px;
background-color: brown;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: orange;
float: right;
}
清除浮动
- 浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度，则可能导致页面布局错乱→通过清除浮动解决
属性名：clear
<style>
.clearfix {
clear: both;
}
</style>
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
flex布局
Flex布局也为弹性布局，不会产生浮动布局中的脱标现象，使网页布局更灵活简单
-
设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸
主轴对齐方式： -
属性名：justify-content
侧轴对齐方式： -
align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置
-
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
行内对齐方式：
- 属性名：align-content
定位
基本使用
-
用来改变盒子在网页中的位置
-
定位模式：position
-
边偏移：设置盒子的位置 left right top bottom
相对定位
position: relative
/*
1. 改变位置的参照物是 自己原来的位置
2. 不脱标，占位
3. 标签显示模式特点 不变
*/
div {
position: relative;
top: 100px;
left: 200px;
}
绝对定位
position: absolute
.father {
position: relative;
}
.father span {
position: absolute;
top: 0;
right: 0;
}
定位居中
<style>
img {
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -265px;
margin-top: -127px; */
/* 方便： 50% 就是自己宽高的一半 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<img src="./images/login.webp" alt="">
</body>
固定定位
position: fixed
/*
1. 脱标，不占位
2. 参照物：浏览器窗口
3. 显示模式特点 具备行内块特点
*/
div {
position: fixed;
top: 0;
right: 0;
width: 500px;
}
字体图标
1.下载字体：iconfont 图标库：https://www.iconfont.cn/
2.引入
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
/* 如果要调整字体大小，注意 选择器的优先级 要高于 iconfont 类 */
.iconfont {
font-size: 200px;
color: orange;
}
</style>
</head>
<body>
<span class="iconfont icon-icon-test3"></span>
</body>
修饰属性
垂直对齐
img {
/* vertical-align: middle; */
/* 顶对齐：最高内容的顶部 */
/* vertical-align: top; */
/* 底对齐：最高内容的底部 */
/* vertical-align: bottom; */
/* 因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 */
/* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 */
display: block;
}
过渡
作用：在一个元素在不同状态之间切换过程添加过渡效果
img {
width: 200px;
height: 200px;
transition: all 1s;
}
img:hover {
width: 500px;
height: 500px;
}
透明度
div {
width: 500px;
height: 500px;
background-color: orange;
/* 完全透明 */
opacity: 0;
/* 不透明 */
opacity: 1;
/* 透明度:0-1之间 */
opacity: 0.5;
}
光标类型
鼠标悬停在元素上可产生不同的样式
color: orange;
}
修饰属性
垂直对齐
img {
/* vertical-align: middle; */
/* 顶对齐：最高内容的顶部 */
/* vertical-align: top; */
/* 底对齐：最高内容的底部 */
/* vertical-align: bottom; */
/* 因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 */
/* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 */
display: block;
}
过渡
作用：在一个元素在不同状态之间切换过程添加过渡效果
img {
width: 200px;
height: 200px;
transition: all 1s;
}
img:hover {
width: 500px;
height: 500px;
}
透明度
div {
width: 500px;
height: 500px;
background-color: orange;
/* 完全透明 */
opacity: 0;
/* 不透明 */
opacity: 1;
/* 透明度:0-1之间 */
opacity: 0.5;
}
光标类型
鼠标悬停在元素上可产生不同的样式
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
