JavaWEB学习笔记 2024-1-8 --CSS
« 上一篇
文章目录
-
- 2.CSS
-
- 2.1CSS的引入方式
- 2.2选择器
-
- 2.2.1基本选择器
- 2.2.2选择器的权重
- 2.2.3其他选择器
-
- 2.2.3.1群组选择器
- 2.2.3.2后代选择器和父子选择器
- 2.2.3.3兄弟选择器和相邻选择器
- 2.2.3.4属性选择器
- 2.2.3.5伪类选择器
- 2.3CSS常见的样式
-
- 2.3.1CSS盒子模型
-
- 2.3.1.1margin
- 2.3.1.2border
- 2.3.1.3padding
- 2.3.1.4标签的默认的margin和padding
- 2.3.2尺寸样式
- 2.3.3边框圆角
- 2.3.4盒子阴影
- 2.3.5背景样式
-
- 2.3.5.1背景颜色
- 2.3.5.2背景图片
- 2.3.5.3背景平铺
- 2.3.5.4背景合并写法
- 2.3.5.5背景大小
- 2.3.6文本样式
- 2.3.7float浮动
- 2.3.8position定位
- 2.3.9弹性盒布局
- 2.4变换
-
- 2.4.1平移
- 2.4.2旋转
- 2.4.3缩放
- 2.4.4变换的原点
- 2.4.5 3D旋转
- 2.5过渡
- 2.6动画
2.CSS
层叠样式表
用于美化页面,修饰页面
CSS分为两个版本
CSS2.x
CSS3.x(伴随着HTML5一起发布的)
2.1CSS的引入方式
为了配合CSS的使用,所有的标签都添加了style,id,class等属性
CSS的引入分为三种方式
和HTML不同的是,HTML中的长宽是没有单位的,而CSS必须写单位(px,%,rem等)
行内式,和HTML编写在一起
<body>
<div style="width: 200px;height: 200px;background: #0cc;">div>
<input type="text" style="outline: none;width: 200px;height: 200px;border:none;border-bottom: 1px solid pink;">
body>
内联式/内嵌式,使用style标签在head中引入css
<head>
<meta charset="utf-8">
<title>title>
<style>
/*
选择器,用于对指定内容添加样式使用
标签选择器:所有的标签都可以作为选择器的名字
*/
div {
width: 200px;
height: 200px;
background: #0cc;
}
style>
head>
<body>
<div>div>
body>
外联式(开发时使用较多)
两个文件:.html 和 .css
在html文件中使用link标签,将两个文件进行连接
<head>
<meta charset="utf-8">
<title>title>
<link rel="stylesheet" href="css.css" />
head>
<body>
<div>div>
body>
div {
width: 200px;
height: 200px;
background: #0cc;
}
2.2选择器
CSS中语法都是使用选择器
语法
选择器 {
css样式:样式值;
…
…
}
2.2.1基本选择器
标签选择器
所有标签名都可以作为选择器
id选择器
为标签添加id属性,使用#id值作为选择器,唯一的
class选择器
为标签添加class属性,使用.class值作为选择器,一组的
<head>
<meta charset="utf-8">
<title>title>
<style>
/* 标签选择器 */
p {
color:red;
}
/* id选择器,唯一的 */
#p1 {
background-color: aquamarine;
}
/* class选择器,一组 */
.p-1 {
font-size: 28px;
}
style>
head>
<body>
<p>pppppp>
<p>pppppp>
<p id="p1">pppppp>
<p class="p-1">pppppp>
<p class="p-1">pppppp>
<h2 class="p-1">h2222222222222h2>
body>
2.2.2选择器的权重
其他选择器(0) element(1) class(10) id(100) 行内样式(1000)
同等样式使用多种选择器的优先级
可以使用!important去改变选择器样式的优先级
<head>
<meta charset="utf-8">
<title>title>
<style>
/* 权重100 */
#p1 {
color:hotpink;
}
/* 权重10 */
.p-1 {
color:yellowgreen;
}
/* 权重1 */
p {
color:red !important;/*!important权重最高*/
}
/* 其他选择器权重0 */
style>
head>
<body>
<p class="p-1" id="p1" style="color:cyan;">pppppppppppppppp>
body>
2.2.3其他选择器
高级选择器,组合选择器
可以将基本选择器组合在一起使用,更加针对某一个位置的样式
2.2.3.1群组选择器
同时为多个标签添加样式,使用逗号
<head>
<meta charset="utf-8">
<title>title>
<style>
div,p,span,a,b{
color:red;
}
/* 通用选择器,可以匹配所有的选择器,很少使用 */
/* * {
color:red;
} */
style>
head>
<body>
<div>div...div>
<p>ppppppp>
<span>span....span>
<a href="">aaaaaa>
<b>bbbbbb>
body>
2.2.3.2后代选择器和父子选择器
用于标签嵌套
后代选择器:使用空格,可以是隔代使用(直接或者间接嵌套) 使用很多
父子选择器:使用>,必须为父子关系(直接嵌套)
<head>
<meta charset="utf-8">
<title>title>
<style>
/* 后代选择器:间接的嵌套关系 */
#div1 .span1 {
background: #0cc;
}
/* 父子选择器:直接的嵌套关系 */
#div2>.span1{
background: orange;
}
style>
head>
<body>
<div id="div1">
<div>
<span class="span1">内容....span>
<span class="span2">内容....span>
div>
div>
<div id="div2">
<div>
<span class="span1">内容....span>
<span class="span2">内容....span>
div>
div>
body>
2.2.3.3兄弟选择器和相邻选择器
平级标签
兄弟:平级的俩个标签,使用~
相邻:紧紧挨着的两个标签,使用+
<head>
<meta charset="utf-8">
<title>title>
<style>
/* 兄弟:只要是平级的可以 */
p ~ p {
color:red;
}
p ~ span {
color:pink;
}
/* 相邻:紧紧相邻 */
p + p {
background: #0cc;
}
p + span {
background: #0cc;
}
style>
head>
<body>
<p>pppppp>
<span>spanspan>
<span>spanspan>
<p>pppppp>
<span>spanspan>
<p>ppppp>
<span>spanspan>
body>
2.2.3.4属性选择器
<head>
<meta charset="utf-8">
<title>title>
<style>
/* 有type属性 */
[type] {
background: #0cc;
}
/* type=text */
[type=text] {
width: 200px;
height: 200px;
}
/* input标签type=text */
input[type=text] {
background: none;
}
style>
head>
<body>
<input type="text">
<input type="password">
<div type="text">div...div>
body>
2.2.3.5伪类选择器
针对对标签状态的选择器
:link 超链接未被访问过的状态
:visited超链接访问后的状态
:hover 鼠标悬停状态
:active 鼠标按下状态
若编写样式时,只能按照上述的顺序编写(:link和:visited可以交换的)
对于其他标签可以使用
:hover 鼠标悬停状态
:active 鼠标按下状态
针对于表单标签使用
:focus 获取焦点时
<head>
<meta charset="utf-8">
<title>title>
<style>
a:link {
text-decoration: none;/*文本修饰*/
color:black;
}
/* 访问过的a不能添加背景色 */
a:visited {
color:red;
/* background: orangered; */
}
/* 鼠标移入 */
a:hover {
background: #0cc;
}
a:active {
color:yellowgreen;
background: orange;
}
td:hover {
background: #0cc;
}
td:active {
color:red;
}
input:focus {
background: #0cc;
}
style>
head>
<body>
<a href="#">跳转a>
<table border="1">
<tr>
<td>1td>
<td>2td>
tr>
<tr>
<td>1td>
<td>2td>
tr>
table>
<input type="text">
body>
2.3CSS常见的样式
CSS可以设置样式,用于修饰HTML
2.3.1CSS盒子模型
所有标签都可以被看做一个盒子
盒子=margin+border+padding+content
所有的盒子都是由外边距，边框，内边距，内容区组成
2.3.1.1margin
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
#div1 {
width: 200px;
height: 200px;
background: #0cc;
/*
margin是外边距,有上下左右四个方位
margin-top:
margin-left:可以直接设置的
可以将整个盒子在页面上移动,不是改变盒子的大小
*/
margin-top: 100px;
margin-left: 100px;
}
#div2 {
width: 1124px;
height: 90px;
background: gray;
/* 使用margin去完成盒子的居中效果 */
/* margin-left: auto;
margin-right: auto; */
/*
margin:
1个值:表示上下左右
2个值:表示 上下 左右
3个值:表示 上 左右 下
4个值:表示 上 右 下 左(顺时针的方向)
*/
/* margin: 10px auto; */
/* margin: 10px auto 100px; */
margin:10px 20px 30px 40px;
}
#div3 {
width: 200px;
height: 200px;
background: #0cc;
/* margin的垂直失效:
margin在垂直方向上的值是合并的,而不是相加的,取的是最大值
*/
margin-top: 40px;
}
style>
head>
<body>
<div id="div1">div>
<div id="div2">
<span>欢迎使用xxx系统span>
div>
<div id="div3">div>
body>
html>
2.3.1.2border
边框,可以改变我们盒子的大小
<head>
<meta charset="utf-8">
<title>title>
<style>
#div1 {
width: 200px;
height: 200px;
background: #0cc;
margin: 100px;
/* border
简化写法
border: 宽度 样式 颜色
正常情况下是四个方位+三个属性
*/
/* border:10px solid pink; */
/* border-top:10px solid pink; */
/* border-left:10px solid pink; */
/* border-bottom:10px solid pink; */
/* border-right:10px solid pink; */
border-color:pink;
border-width: 10px;
border-style: dotted;/*边框样式是必备的属性*/
}
style>
head>
<body>
<div id="div1">div>
body>
2.3.1.3padding
内边距,内容和border的距离
<head>
<meta charset="utf-8">
<title>title>
<style>
#div1 {
width: 200px;
height: 200px;
background: #0cc;
padding:100px;
/* 四个方位:
1个值:上右下左
2个值:上下 左右
3个值:上 左右 下
4个值:上 右 下 左*/
/* 一个盒子的真实大小=border+padding+内容 */
border:2px solid pink;
}
style>
head>
<body>
<div id="div1">div>
body>
2.3.1.4标签的默认的margin和padding
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
/* 对于布局而言,默认的html的样式是不要的 */
/* body,p,ul,li {
margin: 0;
padding:0;
} */
/* 统一设置 */
* {
padding:0;
margin: 0;
}
a {
text-decoration: none;
}
.div1 {
width: 200px;
height: 200px;
background: #0cc;
}
style>
head>
<body>
<div class="div1">div>
<div class="div1">div>
<p>ppppp>
<ul>
<li>li1li>
<li>li2li>
<li>li3li>
ul>
body>
html>
2.3.2尺寸样式
width:宽度
height:高度
html标签是没有单位的,css样式有单位可以为px
width: 200px;
height: 200px;
2.3.3边框圆角
CSS3属性,对边框的修饰,有四个方位,可是设置像素和百分比
若像素/百分比超过对应的宽高50%就圆
<head>
<meta charset="utf-8">
<title>title>
<style>
#div {
width: 200px;
height: 200px;
border:1px solid red;
/* border-radius: 100px; */
/* border-radius: 50%; */
border-bottom-left-radius: 100px;
border-top-right-radius: 10px;
}
style>
head>
<body>
<div id="div">div>
body>
2.3.4盒子阴影
CSS3属性
<style>
/* div的统一设置 */
div {
width: 200px;
height: 200px;
background: #0cc;
margin: 100px;
}
#div1 {
/* 阴影 */
/* x轴偏移量 y轴偏移量 */
box-shadow: -10px -10px;
}
#div2 {
/* 右上 */
box-shadow: 10px -10px;
}
#div3 {
/* 左下 */
box-shadow: -10px 10px;
}
#div4 {
/* 右下 */
box-shadow: 10px 10px;
}
#div5 {
/* 模糊度 */
box-shadow: 10px 10px 10px;
}
#div6 {
/* 延展度 */
box-shadow: 10px 10px 10px 10px;
}
#div7 {
/* 颜色 */
box-shadow: 10px 10px 10px red;
}
style>
2.3.5背景样式
2.3.5.1背景颜色
background-color
值:
颜色的英文单词
十六进制的值,#000000 白色 #ffffff 黑色 #ff0000 红色 #00ff00 绿色 #0000ff蓝色
rgb()颜色显示,每个位置是0~255的
rgb,a是透明度
background-color: aqua;
background-color: #55aa00;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0,.1);
2.3.5.2背景图片
background-image:url(图片路径)
background-image: url(img/3.jpg);
2.3.5.3背景平铺
background-repeat:背景平铺
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
2.3.5.4背景合并写法
background:颜色 图片 平铺
background: #0cc url(img/3.jpg) no-repeat;
2.3.5.5背景大小
background-size:CSS3属性,不能使用合并写法
可以是px 可以是% 可以auto
2.3.6文本样式
p {
/* 字体大小 */
font-size: 28px;
/* 加粗 */
font-weight: bolder;
/* 斜体 */
font-style: italic;
/* 文本修饰 */
text-decoration: overline;
text-decoration: underline;
text-decoration: none;
text-decoration: line-through;
/* 颜色 */
color:red;
/* 字体 */
font-family: '黑体';
}
2.3.7float浮动
可以移动当前的div盒子,有两种移动方式(left/right)
脱离文档输出流
<head>
<meta charset="utf-8">
<title>title>
<style>
* {
margin: 0;
padding: 0;
}
.div {
width: 200px;
height: 200px;
background: #0cc;
border:1px solid red;
/* 左浮动 */
/* float: left; */
float:right;
/* 内容居中 */
text-align: center;
}
#banner {
width: 1200px;
height: 90px;
background: orange;
margin: 0 auto;
}
#banner #div1 {
float: left;
}
#banner #div2 {
float: right;
}
style>
head>
<body>
<div id="banner">
<div id="div1"><h2>欢迎使用xxx平台h2>div>
<div id="div2">欢迎:lhy[<a href="#">退出a>]div>
div>
body>
2.3.8position定位
static:默认值,正常文档输出流的
absolute:绝对定位,脱离文档输出流
相对于网页原点定位:
没有父容器,或者父容器没有设置position:absolute/relative/fixed
相对于父容器原点定位:
有父容器且设置position:absolute/relative/fixed
<head>
<meta charset="utf-8">
<title>title>
<style>
#div1 {
width: 200px;
height: 200px;
background: #0cc;
/* 相对于网页原点定位 */
position: absolute;
top:100px;
left:100px;
}
style>
head>
<body>
<div id="div1">div>
<p>pppp1p>
<p>pppp2p>
<p>pppp3p>
<p>pppp4p>
<p>pppp5p>
<p>pppp6p>
<p>pppp7p>
<head>
<meta charset="utf-8">
<title>title>
<style>
#div1 {
width: 200px;
height: 200px;
background: #0cc;
/* 相对于网页原点定位 */
position: absolute;
top:100px;
left:100px;
}
#div2 {
width: 100px;
height: 100px;
background:orange;
/* 相对于父容器的位置 */
position: absolute;
top:100px;
left: 100px;
}
style>
head>
<body>
<div id="div1">
<div id="div2">
div>
div>
body>
relative:相对定位
正常文档输出流,在原本的位置上进行偏移
position: relative;
top: 150px;
left: 150px;
fixed:固定
脱离文档输出流,针对视口原点
position: fixed;
bottom: 0px;
right: 0px;
2.3.9弹性盒布局
父容器设置display:flex;
子容器设置flex:数值;
可以将父容器进行等分
<head>
<meta charset="utf-8">
<title>title>
<style>
#content {
width: 1200px;
height: 300px;
background: #0cc;
margin: 0 auto;
display: flex;
}
/* 所有的div统一设置 */
#content div {
height: 280px;
background: orange;
margin: 5px;
}
#content .div1 {
flex: 1;
}
#content .div2 {
flex: 3;
}
style>
head>
<body>
<div id="content">
<div class="div1">div>
<div class="div1">div>
<div class="div2">div>
<div class="div2">div>
<div class="div1">div>
<div class="div1">div>
div>
body>
2.4变换
transform:变换
变换形状
2.4.1平移
#div1 {
width: 200px;
height: 200px;
background-color: #0cc;
/* transform: translate(200px,200px); */
/* 过渡 */
transition: all 1s;
}
#div1:hover {
/* transform: translate(200px,200px); */
transform: translateX(200px);
transform: translateY(200px);
}
2.4.2旋转
<head>
<meta charset="utf-8">
<title>title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: #0cc;
margin: 100px;
border-radius: 10px;
/* 过渡 */
transition: all 1s;
}
#div1:hover {
transform: rotate(15deg);
box-shadow: 0px 0px 10px gray;
}
style>
head>
<body>
<div id="div1">div>
body>
2.4.3缩放
<head>
<meta charset="utf-8">
<title>title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: #0cc;
margin: 100px;
border-radius: 10px;
/* 过渡 */
transition: all 1s;
}
#div1:hover {
/* scale(x,y) x轴缩放的倍数 y轴缩放的倍数 */
/* transform: scale(1.5,1.5); */
transform: scale(.5,.5);
box-shadow: 0px 0px 10px gray;
}
style>
head>
<body>
<div id="div1">div>
body>
2.4.4变换的原点
<head>
<meta charset="utf-8">
<title>title>
<style>
#div1 {
background-image: url(../03-CSS常见样式/img/3.jpg);
background-size: 100%;
width: 200px;
height: 200px;
background-color: #0cc;
margin: 100px;
border-radius: 10px;
/* 变换的原点 */
/* transform-origin: 0 0; */
transform-origin: left top;
/* 过渡 */
transition: all .5s;
}
#div1:hover {
/* transform: scale(.5,.5); */
transform: rotate(3deg);
box-shadow: 0px 0px 10px gray;
}
style>
head>
<body>
<div id="div1">div>
body>
2.4.5 3D旋转
<head>
<meta charset="utf-8">
<title>title>
<style>
/* 3D旋转发生在父子容器上 */
.div {
width: 300px;
height: 300px;
background: #0cc;
border: 1px solid red;
margin: 100px;
/* 在父容器上添加远近度的属性 不能为0,数值越小,视觉感觉越明显*/
perspective: 400px;
}
.div img {
/* inherit继承属性值(父子容器) */
width: inherit;
height: inherit;
/* 过渡 */
transition: all 1s;
/* 背面不可见 */
backface-visibility: hidden;
}
/* 鼠标移入到div上时,img状态发生改变 */
.div:hover img {
/* 按照Y轴旋转 */
transform: rotateY(180deg);
/* transform: rotateX(180deg); */
}
style>
head>
<body>
<div class="div">
<img src="img/3.jpg" alt="">
div>
body>
2.5过渡
transform:过渡样式 过渡时间 过渡效果 延迟时间
过渡样式:从一个状态到另一个状态可以使用过渡,但是从无到有不行;若所有的样式都参与过渡使用all
过渡时间:秒为单位
过渡动画:ease(慢-快-慢) ease-in(慢-快) ease-out(快-慢) linear(匀速)
延迟时间:开始过渡的时间
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
#div1 {
width: 200px;
height: 200px;
background: #0cc;
/* 所有样式同步执行 */
/* transition: all 1s; */
/* transition: width 1s,background 5s; */
/* transition: all 1s linear; */
/* transition: all 1s linear 3s; */
/* width在2s内完成,background是延迟2s的 效果就是宽度先变化,然后背景颜色变化 */
/* transition: width 2s,background 5s 2s; */
transition: all 2s;
position: relative;
top: 0px;
left: 0px;
}
#div1:hover {
width:800px;
background: orange;
/* 没有默认值 */
top:100px;
left: 100px;
}
style>
head>
<body>
<div id="div1">
helloworld
div>
body>
html>
2.6动画
以帧为单位进行连续播放
<head>
<meta charset="utf-8">
<title>title>
<style>
/* 自定义动画 */
@keyframes donghua {
/* 设置时间节点 */
0% {
top:0px;
left:0px;
}
25% {
top:0px;
left:200px;
transform: scale(1.5,1.5);
}
50% {
top:200px;
left:200px;
background: orchid;
}
75% {
top:200px;
left:0px;
}
100% {
top:0px;
left:0px;
}
}
#div1 {
margin: 100px;
width: 50px;
height: 50px;
background: #0cc;
position: relative;
top: 0px;
left: 0px;
border-radius: 50%;
/* 动画名 完成动画的时间 过渡效果 循环动画的次数(infinite无穷) */
animation: donghua 10s linear infinite;
}
style>
head>
<body>
<div id="div1">div>
body>