目录
前提
CSS三种引入方式
- 内部样式：head标签中的style
<head> <style> div{ width:300px; } </style> </head> - 内联样式：标签里面的style
<body> <p style="color: red;">green</p> </body> - 外链式：link
<head> <link rel="stylesheet" href="style.css"> </head>
伪类选择器
a:link----------定义正常链接的样式
a:visited-------定义访问过链接的样式
a:hover------鼠标悬停时候的链接样式
a:active-----鼠标按下时的链接样式
基本功能
1.尺寸操作
1、宽高—— width，height
2、边框—— border：边框尺寸 边框类型 边框颜色
dotted：点线边框 dashed：虚线 solid：实线
3、边框圆角—— border-radius: 圆角尺寸（例如：8px即为以8px的长度为半径画一个圆与两边相切）
4、元素内外边距
内边距：边框与内容之间的距离——padding：上下内边距 左右内边距
现象：超过外部容器大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100%;
border: 2px dashed green;
border-radius: 10px;
padding: 15px 30px;
box-sizing: border-box；
}
</style>
</head>
<body>
<div class="box">
<h3>huilangting</h3>
<p>该剧讲述了深夜回廊亭突然大火，一名男子葬身火海，姜远星严重烧伤毁容；阳光帅气的程成出现在姜远星的生命中，两人的命运似乎也被这场大火改变的故事</p>
</div>
</body>
</html>
原因：在宽度为100%的基础上加上了左右内边距的宽度，和以为div总宽度，故超出了页面
解决方法：box-sizing: border-box（调节页面呈现方式，改变宽高计算方式）
外边距：边框外部与其他元素间的距离—— margin: 距离
<head>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
border: 2px dashed green;
/* height: 250px; */
/* 水平居中 */
/* margin: 0 auto; */
/* 这样设置垂直居中无效，要用数值设置 */
/* margin: auto 0; */
/* 靠右 */
margin-left: auto;
}
</style>
</head>margin塌陷问题
第一个子元素的margin-top以及最后一个子元素的margin-bottom均会作用到其父元素上
解决方法：
1. 给其父元素设置边框
2.给其父元素设置padding
3.给其父元素设置overflow：hidden
5、清除浏览器默认样式——通配符*
<head>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>2.背景处理
1、背景颜色—— background-color
2、背景图片—— background-image: url()
3、阴影—— box-shadow: 水平方向的偏移量 竖直方向的偏移量 晕染宽度 颜色
3.文本处理
1、颜色—— color:
2、文本缩进——text-indent: 2em（首行缩进两个字符，em表示当前单个文字的大小）
<head>
<style>
.box p{
color: #666;
text-indent: 2em;
}
</style>
</head>3、字体大小设置—— font-size
4、字体设置—— font-family
5、字体粗细设置——font-weight
<style>
.box h3{
font-size: 30px;
font-family: '黑体';
font-weight: normal;
}
</style>
6、修改元素背景颜色——background-color
7、修改元素高度——height
8、修改行高——line-height
当7、8所设置的值相同时，元素内部的文字处于垂直居中
9、修改文字的水平位置——text-align: center（文字水平居中）
10、文字阴影——text-shadow
11、文本装饰——text-decoration: 装饰类型 颜色 位置
12、文字垂直显示—— writing-mode: vertical-lr（lr：从左到右）
英文竖直显示—— text-orientation: upright;
13、文字溢出—— overflow
overflow:hidden;----溢出隐藏
overflow: auto;----自适应（内容过多会自动出滚动条）
text-overflow: ellipsis;---省略号
4.位置处理——定位（position）
position：absolute即为绝对定位
<style>
.box span{
writing-mode: vertical-lr;
text-orientation: upright;
position: absolute;
top: 20px;
left: 10px;
}
</style>此时该位置的参考对象为页面的左顶点（而不是其父元素）
若需要参考其父标签来设置位置，则需要将其父标签设置为相对定位（position：relative）
相对定位不会更改元素自身位置
position：fixed——固定定位，对象不会随着滚动条移动
5.隐藏元素
方法一：display：none
方法二：visibility：hidden（呈现——visibility：show）
区别：display占位；visibility不占位
属性的继承
布局处理
改变网页的布局
flex
适用于一维布局方案
1、指定容器——display：flex（弹性布局）
2、在垂直方向进行元素位置调整——align-items （center：垂直居中；flex-start：子元素在上方；flex-end：子元素在底部）
3、在水平方向进行元素位置调整——justify-content （center：垂直居中；flex-start：子元素在上方；flex-end：子元素在底部）
4、调整各元素之间的呈现比例——flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.flex-container{
display: flex;
/* width: 100%; */
/* 最大宽度 */
max-width: 1300px;
/* 最小宽度 */
min-width: 500px;
background-color: #fdfdc8;
/* 水平居中 */
margin: 0 auto;
height: 666px;
/* 子元素居中 */
/* align-items: center; */
/* 子元素在上方 */
/* align-items: flex-start; */
/* 子元素在底部 */
/* align-items: flex-end; */
/* justify-content: center; */
}
.flex-item{
padding: 15px;
border: 1px solid #ccc;
border-radius: 6px;
background-color: #fac1c1;
/* max-height: 555px; */
/* max-width: 200px; */
/* 三个盒子的呈现比例为1:1:1 */
/* flex: 1; */
}
.flex-item:nth-child(2){
/* 1:3:1 */
/* flex: 3; */
min-width: 100px;
}
.flex-item:nth-child(2n+1){
width: 400px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">
<h3>HuangZihongfan</h3>
<p>黄子弘凡</p>
<span>黄子弘凡-Lars</span>
</div>
<div class="flex-item">
<h3>huangzi1</h3>
<p>黄子弘凡出生于音乐世家</p>
</div>
<div class="flex-item">
<h3>huangzi2</h3>
<p>2019年1月13日，受邀出席“记忆·乡愁”廖昌永个人独唱音乐会</p>
</div>
</div>
</body>
</html>grid（网格布局）
适用于二维布局方案，适合创造规则的、多行多列的结构
1、指定容器——display：grid
2、设置各列的宽度——grid-template-columns （后面写多少值即多少列）
冒号后面数值的表现形式：1：具体数值加单位 grid-template-columns: 200px 300px
2： 百分比 grid-template-columns：20% 30% 50%
3：使用占位符（fr）表示比例：
grid-template-columns：1fr 3fr 2fr（即1:3:2）
4、使用repeat表示重复 grid-template-columns：repeat(3, 1fr)
意思是1fr 1fr 1fr，即1:1:1
5、自动填充，不限制列数
grid-template-columns：repeat(auto-fill,200px)
意思是根据页面宽度自动填充列，每列宽度为200px，页面宽 度不同，列数则不同
3、设置各行的宽度——grid-template-rows
过渡变换动画处理
过渡transition
transition: 运动对象 运动时间 运动方式;（transition: width 1s;即为让宽度变化这个运动持续1s） 采用默认的运动方式，若要指定多个运动对象，则用逗号隔开， 例如transition: width 1s, height 2s;若所有运动对象统一，则用all表示运动对象
运动方式：1、linear 匀速运动
2、ease 变速运动
3、ease-in 加速运动
4、ease-in-out 减速运动
······
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.transition-box{
width: 100px;
height: 100px;
background-color: orange;
transition: width 4s ease-in-out;
}
.transition-box:hover{
width: 400px;
}
</style>
</head>
<body>
<div class="transition-box"></div>
</body>
</html>变换transform
平移
1、transform: translate(水平方向移动的距离,垂直方向移动的距离);
transform: translate(100px,20px);即为水平方向移动100px，垂直方向移动20px
2、transform: translateX(水平方向移动的距离) translateY(垂直方向移动的距离);
旋转
3、transform: rotate(90deg); 绕中心旋转90度
4、transform-origin: right bottom; 设置旋转中心为右下角，缩放的固定点，默认为中心，可以用top bottom left right center 百分比等表示
不能在交互时设置，必须在元素本身属性上设置，否则会发生偏移
5、transform:scale(.5); 垂直水平缩放至本身的0.5倍
transform:scale(.5，2); 水平方向缩小至0.5倍，垂直方向扩大至本身的2倍
6、transform: skew(30deg,10deg); 水平方向倾斜30度，垂直方向倾斜10度
transform: skew(-30deg);水平反方向倾斜30度
7、3D变换
条件：有特定容器，用来设置指定元素将以3D的状态来进行展示
前期准备：对容器设置必要属性
1、transform-style: preserve-3d; 表示内部的子元素将以3D的模式做显示
2、perspective: 500px; 确定视口与动画的距离（页面中能看到的部分）
两者缺一不可
页面中水平向右为X轴正方向，竖直向下为Y轴正方向，垂直向外为Z轴正方向
transform: translate3d(0,0,100px); 沿着Z轴正方向移动100px
transform: rotate3d(1,0,0,45deg); 以X轴为轴线旋转45度
transform: rotate3d(0,Y,0,45deg); 以Y轴为轴线旋转45度
transform: rotate3d(0,0,1,45deg); 以Z轴为轴线旋转45度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.container{
/* position: relative; */
width: 200px;
margin: 0 auto;
/* 表示内部的子元素将以3D的模式做显示，实现纵深的变换 */
transform-style: preserve-3d;
/* 视口与动画的距离 */
perspective: 500px;
transition: all 1s;
}
.container:hover{
transform: rotate3d(0,1,0,180deg);
}
.transform-box {
width: 200px;
height: 200px;
background-color: rgb(243, 201, 201);
transition: all 1s;
position: absolute;
/* left: 100px;
top: 100px; */
/* transform-origin: right bottom; */
}
.transform-box:hover {
/* transform: translate(100px,20px); */
/* transform: translateX(100px) translateY(20px); */
/* transform: rotate(60deg); */
/* transform-origin: right bottom;不能在交互时设置 */
/* transform:scale(.5,2); */
/* transform: skew(30deg, 10deg); */
/* transform: translate3d(0,0,100px); */
/* transform: rotate3d(0,1,1,45deg); */
/* transform: translateZ(100px); */
}
.test{
position: absolute;
background-color: yellow;
width: 200px;
height: 200px;
transform: translateZ(-100px);
}
</style>
</head>
<body>
<!-- 给transform-box设置一个容器，来支持3D变换 -->
<div class="container">
<div class="transform-box">
<p>ejjf</p>
</div>
<div class="test"></div>
</div>
</body>
</html>动画
定义关键帧动画—— @keyframes 动画名称{}
运行/使用设置的关键帧动画—— animation:动画名 时间值 inifinite （加上infinite即代表动画一直运行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.animation-box{
width: 300px;
height: 300px;
background-color: rgb(249, 249, 155);
animation: changeColor 5s ;
}
@keyframes changeColor {
0%{
background-color: rgb(247, 247, 27);
}
35%{
background-color: rgb(211, 102, 211);
}
75%{
background-color: rgb(249, 9, 9);
}
100%{
background-color: rgb(244, 244, 142);
}
}
</style>
</head>
<body>
<div class="animation-box"></div>
</body>
</html>
扫一扫
764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
