目录
CSS简介
中文名:层叠样式表
作用:美化HTML标签
书写位置：
1.在标签的style属性中书写 这样的方式,编写的样式无法给别的标签使用,如果网页中有多个该样式的标签,此时代 码就会较为冗余(内联样式)
2.在style标签中书写
3.在css文件中书写,通过link标签引入到需要使用的html文件中，一般这种方式最标准
选择器
作用：:寻找指定的html标签
常见选择器
1.统配选择器
作用:给当前网页中所有标签都使用
语法: *{
css样式
}
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
font-size: 50px;
}
</style>
</head>
<body>
<font>
JAVA
</font>
</body>
</html>
2.标签选择器
作用:给当前网页指定标签设置样式
语法:
标签名{
css样式 }
例：给font标签指定属性
font{
font-size: 50px;
color: #0079F5;
}<font>
JAVA
</font>
3.class选择器
作用:给当前网页class属性值为xxx的设置样式
语法: .class的属性值{
css样式 }
例：
.text{
font-size: 80px;
color: red;
}
<font class="text">font01</font>
/**
text为自己命名的
*/4.id选择器 作用:给当前网页中id属性值为xxx的设置样式.
语法: #id的属性值{
css样式 }
例：
#f{
font-size: 80px;
}
<font id="f">Java</font>
5.伪类选择器
鼠标悬浮:hover
语法: hover{
鼠标悬浮在该标签上,该标签的样式}
例：
#f{
font-size: 80px;
}
#f:hover{
color: red;
}
<font id="f">Java</font>
效果为鼠标放在上面，字体就会变红，不放就是正常颜色
获取焦点:focus
语法: 选择器:focus{
css样式}
border:：点击后框框大小
color：颜色
input:focus{
border: 10px ;
color: #0079F5;
}<input type="text" />选择器的优先级
优先级:内联>id选择器>class选择器>标签选择器>统配选择器
如果多个优先级相同的给同一个标签设置样式,谁在后使用谁的
文本样式
大小:font-size
字体:font-family ：例 宋体，楷体...
颜色:color
rgb(红色,绿色,蓝色);
rgba(红色,绿色,蓝色,透明度)
透明度取值范围:0~1,0表示全透明,1表示不透明
/*color: #FF9900;*/
/*color: rgb(255,0,0);*/格式:font-style
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
笔画粗细:font-weight
装饰:text-decoration
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
文本位于标签的位置:text-align
一行字所占高度:line-height
背景样式
background-color:背景颜色
background-image: 背景图片
background-size:背景大小
background-repeat:是否平铺
background-position:背景位置
background:背景
/*background-color: #FF0000;*/
background-image: url("img/qianfeng.png");
background-size:10% 10%;
background-repeat:no-repeat;
background-position:center center;元素类型
1.行内元素:
特点:设置宽高无效,标签大小由标签中内容决定,不会独占一行
如:font标签
2.行内块元素:
特点:设置宽高有效,不独占一行
如:img,input
3.块级元素
特点:设置宽高有效,独占一行
如:h1,h2,p,div,li
修改改标签的元素类型
通过display属性进行修改
inline-block:行内块元素
inline:行内元素
block:块元素
none:隐藏
flex:弹性盒子
盒子模型
相关属性
宽/高 width/height
内边距:标签内,内容距离边框的距离 padding
边框:边框厚度 border
border:10px solid #0000CC
顶部没了为html自带bug
边框的大小，solid为实现的意思
外边距:当前标签距离父容器或兄弟标签的距离 margin
可以设置距离其它距离的位置
盒子类型
标准盒子:
计算标签占用大小:左外边距+左边框+左内边距+宽+右内边距+右边框+右外边距 = 真实 的宽 默认的就是该类型的盒子
上述的就为标准盒子
IE盒子:
计算方式:左外边距 + 宽 + 右外边距 = 真实的宽
设置盒子类型为IE盒子:box-sizing: border-box;
与标准盒子相比
#box01{
background: red;
width: 200px;
height: 200px;/*
* 本来盒子的大小
*/
padding: 30px;
/*加了内边距，盒子变大 */
border: 20px solid black;
/* 加了边框 */
margin: 50px;
}
#box02{
background: red;
width: 200px;
height: 200px;
/* 盒子大小不变*/
padding: 30px;/*内容变小了，边框，内边距被减去了 */
border: 20px solid black;
margin: 50px;
box-sizing: border-box;/* 设置为ie盒子*/
}
布局
浮动：
float：left从左向右
right 从右向左
给所有需要子标签加
#box{
width: 300px;
height: 200px;
background: orange;
}
.box_item{
width: 100px;
height: 100px;
border: 1px solid black;/* 整一个属性*/
/*float: left;*/ /* 悬浮自带补齐，但是因为边框也有大小会折到下一行 */
}<div id="box">
<div class="box_item"></div>
<div class="box_item"></div>
<div class="box_item"></div>
<div class="box_item"></div>
<div class="box_item"></div>
<div class="box_item"></div>
</div>效果如图
独占一行所以从上到下排列
float: left;/* 悬浮自带补齐，但是因为边框也有大小会折到下一行 */
这时候把class属性的width: 100px; height: 100px;都变为98px即可解决
空间塌陷：不使用浮动时，使box属性为0，填入内容，内容会填满空间。
#box{
width: 300px;
/*height: 200px;*/
background: orange;
}
使用浮动后：
高度不定义也是希望用内容撑起来，让其更加灵活，给定后也可能导致边框与后面的叠加
但是高度没了，父容器没了，导致空间塌陷，具体原因我也不知道，毕竟我不是专业前端
解决方案：
.clearAfter:after{
content: ".";
overflow: hidden;
clear: both;
height: 0;
display: block;
}
在其浮动的标签的父容器的class属性值中加入clearAfter即可
反正是解决了
定位：属性:position
1.浏览器窗口定位:fixed
相对与浏览器窗口的位置,不会保留标签的原位置
#gg{
width: 240px;
height: 160px;
background: red;
position: fixed;
right: 0;//距离右边的距离
bottom: 0;//距离底部的距离
// left 左边
// top 顶部
}
<div id="gg">
<font>这是一个广告</font>
</div>
2.相对定位:relative 相对于标签的原位置, 注意：会保留标签的原位置
#box02{
background: greenyellow;
position: relative;
left: 50px;//一般用这两个，
top: -50px;
//bottom reight这两个可能有的浏览器不适配
}
给其加入层级 z-index: -1;//层级可以让其去任意一层，有个定位才能用
3.绝对定位:absolute，相对与最近一层做过定位的父容器的位置，不会保留原位置
父容器定位随便做，每填值都行
注意：里面的坐标类似于这样
其它：
弹性盒子 应用在手机端比较多
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 300px;
height: 200px;
background: brown;
display: flex;/*弹性布局,会默认平分*/
}
.div{
width: 100px;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="box">
<div id="box01" class="div">1</div>
<div id="box02" class="div">2</div>
<div id="box03" class="div">3</div>
<div id="box04" class="div">4</div>
<div id="box05" class="div">5</div>
<div id="box06" class="div">6</div>
<div id="box07" class="div">7</div>
</div>
</body>
</html>
display: flex;/*弹性布局,会默认平分*/
flex-wrap: wrap;/*会自动换行，按给的宽度自动排列，此时不设置父容器高度也不会空间塌陷*/
不设置高度
居中：
<style type="text/css">
#box{
width: 300px;
height: 200px;
background: orchid;
display: flex;/*设置为弹性盒子*/
}
#div{/*此标签就在父标签中居中，只有一个时有效*/
width: 100px;
height: 100px;
background: palevioletred;
margin:auto;/*自动居中*/
}
</style>
响应式布局
检测窗口的大小，不同大小有不同的页面，这样可以适配多种屏幕大小
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#content{
width: 100%;
width: 100%;
}
@media only screen and (min-width: 100px) and (max-width: 640px) {
#content{
background: black;/*例如在这个区间背景为黑*/
}/*显示器屏幕100px到640px用这个 */
}
@media only screen and (min-width: 640px) and (max-width: 1400px) {
#content{
background: red;/*例如在这个区间背景为红*/
}/*显示器屏幕640px到1400px用这个 */
}
....不同尺寸写一套不同的css这样就可以适应不同的屏幕大小
</style>加个小阴影
box-shadow
box-shadow(X轴偏移量 Y轴偏移量 blur阴影模糊半径 spread阴影扩展半径 阴影颜色 position投影方式 )
x :值为正数时，阴影在右侧；值为负数,阴影在元素左
y:值为正数时，阴影下方；值为负数，阴影在上方
blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0
spread:阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。前提是存在阴影模糊半径。
position:默认为外投影，可设置为 inset 变为内投影
圆角
border-radius 10%就是这个效果
transform:rotate(45deg) ;/*例如顺时针旋转45°*/
transform:translateX(x轴平移)translateY(y轴平移) scale(0~1缩小,大于1变大);
设置背景变化
@keyframes anim{
0%{
background-image: url(img/IMG_20221024_222535.jpg) ;
background-size: 100% 700px;
}
50%{
background-image: url(img/QQ图片20220325160444.jpg);
background-size: 100% 700px;
}
100%{
background-image: url(img/IMG_20221024_222535.jpg);
background-size: 100% 700px;
}
}
body{
animation: anim 2s linear infinite;
}
//anim 2s表示循环2s，linear infiite表示不停线性循环背景
1335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
