前端学习笔记---CSS介绍与基础语法2
CSS介绍与基础语法2
属性相关的部分
基本属性
1.长宽
对于块级标签是可以调节长宽的
height:80 单位:px or %
width:80 单位:px or %
p{
background-color: red; /* 背景颜色 */
height: 80px; /* 标签占用长宽,默认一行 */
width: 80px;
}
效果如下:
2.字体属性
font-family:"仿宋","微软雅黑"; /*若第一个不生效后面生效*/
font-size:24px; /* 字体大小 */
font-weight:bolder; /* 字体效果:加粗 */
color:red; /*字体颜色，或者color:rgba(x,x,x,x)*/
p{
font-family:"仿宋","微软雅黑"; /*第一个不生效后面生效*/
font-size:24px; /* 字体大小 */
font-weight:bolder; /* 字体效果:加粗 */
color:red; /*字体颜色，或者color:rgba(x,x,x,x)*/
}
效果如下:
3.文字属性
text-aling:center;/*right left 居中，左右对齐*/
text-decoration:underline; /*overline,line-through,none 上划线，删除线,none可以给a标签去掉下划线*/
text-indent: 32px; /*缩进32个px*/
p{
text-align: center;
text-decoration:underline;
text-indent: 32px;
}
效果如下:
4.背景属性
background-color:red; /*背景颜色*/
background-image:url(""); /*背景图片，默认全部铺满*/
background-repeat:no-repeat; /*不铺满*/
background-repeat:repeat-x; /*x铺满*/
background-repeat:repeat-y; /*y铺满*/
background-position:center center;/*图片居中*/
/*其实浏览器不是二维，是三维，z轴指向用户*/
backgound:url("") no-repeat center center
/*若出现了多属性名前缀相同，一般情况下可以简写*/
p{
height: 500px;
width: 500px;
background-image:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.baidu.com%2Fit%2Fu%3D3788606852%2C2363382091%26fm%3D253%26app%3D120%26f%3DJPEG%3Fw%3D800%26h%3D800&refer=http%3A%2F%2Fimg1.baidu.com&app=2002&size=w300&q=a80&n=0&g=0n&fmt=jpeg?sec=1645336236&t=a131a1778f8f9c740f11666d8cf94742"); /*背景图片，默认全部铺满*/
background-repeat: no-repeat;
background-position: center center;
}
效果如下:
5.边框
border-width:5px; /*宽度*/
border-style:solid; /*样式*/
border-color:green; /*颜色*/
/*上边框*/
border-top-width:5px;
border-top-style:solid;
border-top-color:red;
/*下边框*/
border-bottom-width:5px;
border-bottom-style:solid;
border-bottom-color:red;
/*左边框*/
border-left-width:5px;
border-left-style:solid;
border-left-color:red;
/*右边框*/
border-right-width:5px;
border-right-style:solid;
border-right-color:red;
p{
height: 500px;
width: 500px;
border-width:5px; /*宽度*/
border-style:solid; /*样式*/
border-color:green; /*颜色*/
}
效果如下:
6.弧度
border-radius:50%; /*四个角分别取50%的边长变为弧形，即圆形*/
border-radius:为缩写，其内部分别为是四个角，也可以写px为单位
p{
background-color:green;
height:400px;
width:400px;
border-radius:200px
/*直接写50%,长宽一样就是圆，不一样就是椭圆*/
}
效果如下:
7.display属性
display:none /*不展示并且不占用位置*/
display:inline /*变为行内标签的特征*/
display:block /*变为块级标签特征*/
display:inline-block /*变为行内的块级标签特征*/
p{
background-color:green;
height:100px;
width:100px;
display:inline-block;
}
效果如下:
盒子模型
每个标签可以看成一个快递盒子，其拥有四个属性.
1.标签间距离
可以看为快递盒子间的距离
margin:5px
2.盒子的厚度
即标签的边框
border:5px red solid
3.盒子内物体到盒子的距离
即内容到边框的距离,内边距
padding:10px
4.物体的大小content
浮动
虽然display属性也可以实现两个标签显示在统一行内，但是实际应用中很少使用display而是使用float即浮动属性来进行布局
ps：浮动后的标签其并无块级，行内说法，其浮动后仅仅占用自己本身的大小.
float:left /*向左浮动*/
float:right /*向右浮动*/
#d1{
background-color:green;
height:100px;
width:100px;
float: left;
}
#d2{
background-color:red;
height:100px;
width:100px;
float: right;
}
效果如下:
浮动有些类似于俄罗斯方块。
浮动的影响：
浮动有些向装在麻袋里面的气球，将子标签看为气球，将父标签看为麻袋，当子标签浮动后，其父标签可能会出现塌陷的情况.
<div>
<p id="d1">我是p1</p>
<p id="d2">我是p2</p>
</div>
div{
border: 10px solid red;
}
#d1{
background-color:green;
height:100px;
width:100px;
float: left;
}
#d2{
background-color:red;
height:100px;
width:100px;
float: right;
}
塌陷:
解决方法:
1.利用高度属性，给父标签设置高度
2.利用clear属性
clear:left
clear:right
clear:both
分别意味该标签左方，右方，左右同上不可存在浮动元素
3. 为塌陷标签添加.clearfix:after{content:'';display:block;clear:both}
本质是利用2
效果如下:
溢出
即为文本内容溢出标签范围
解决方法:
overflow: visible; /*默认可见*/
overflow: hidden; /*超出的隐藏*/
overflow: scroll; /*超出的滚动显示*/
overflow: auto; /*自动适应滚动*/
div{
background-color:green;
height:100px;
width:100px;
overflow: hidden;
}
div{
background-color:green;
height:100px;
width:100px;
overflow: scroll;
}
定位
定位即就是改变标签的位置状态，标签默认状态都是static，即静态，不可位移
1.相对定位
相对于标签的原来的位置进行移动
position:relative
left:50px /*由左向右移动50px*/
top:50px /*由上向下移动50px*/
div{
background-color:green;
height:100px;
width:100px;
position: relative;
left: 50px;
top: 50px;
}
效果如下:
2.绝对定位(常用)
position:absolute
相对于其父标签做移动，若无父标签，则以body为参照物
<div id="d1">
<div id="d2">
</div>
</div>
#d1{
background-color:green;
height:100px;
width:100px;
position: relative;
left: 100px;
top: 100px;
}
#d2{
background-color:blue;
height:10px;
width:10px;
position:absolute;
left: 10px;
top: 10px;
}
效果如下:
3.固定定位
相对于浏览器窗口定位在某处，比如清理垃圾的小火箭之类，回到顶部。。
position:fixed
#d1{
background-color:green;
height:100px;
width:50px;
position: fixed;
right: 10px;
bottom: 10px;
text-align: center;
}
效果如下:
关于布局是否会脱离文档流
脱离文档流即为脱离本html框架所决定的位置
1.脱离:
浮动，绝对定位， 固定定位
2.不脱离:
相对定位
z-index模态框
ps：z-index模态框仅仅作用于定位状体不处于static的标签，其相当于z轴，指向外部
z-index:;
数值越大，越外层
#d1{
background-color:red;
height:100%;
width:100%;
position: fixed;
text-align: center;
z-index: 99;
}
#d2{
background-color:blue;
height:100px;
width:100px;
z-index: 100;
position: relative;
}
效果如下:
透明度
opcity=0.5
其值越小，透明度越高，和raba的区别：其会影响到字体，rgba不会
小项目:基本博客首页搭建
html:
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个博客页面</title>
<link rel="stylesheet" href="boke.css">
</head>
<body>
<div id="left_all">
<div id="left_1">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.baidu.com%2Fit%2Fu%3D3788606852%2C2363382091%26fm%3D253%26app%3D120%26f%3DJPEG%3Fw%3D800%26h%3D800&refer=http%3A%2F%2Fimg1.baidu.com&app=2002&size=w300&q=a80&n=0&g=0n&fmt=jpeg?sec=1645276731&t=2212b42c6d3db994dfd3dcc1178c0cdc" alt="">
</div>
<div id="left_2">
<p>CC的博客</p>
<p>他太懒了，没有啥简介</p>
</div>
<div id="left_3">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="">微信公众号</a></li>
</ul>
</div>
<div id="left_4">
<ul>
<li><a href="">#Python</a></li>
<li><a href="">#Java</a></li>
<li><a href="">#Golang</a></li>
</ul>
</div>
</div>
<div id="right_all">
<div id="right_1" class="arc">
<div class="arc_title">
<span class="title">标题</span>
<span class="date">2022/1/20</span>
</div>
<div class="arc_body">
<p>
阿八八八!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</p>
</div>
<hr>
<div class="arc_bottom">
<span>#Python</span>
<span>#Java</span>
</div>
</div>
<div id="right_2" class="arc">
<div class="arc_title">
<span class="title">标题</span>
<span class="date">2022/1/20</span>
</div>
<div class="arc_body">
<p>
阿八八八!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</p>
</div>
<hr>
<div class="arc_bottom">
<span>#Python</span>
<span>#Java</span>
</div>
</div>
<div id="right_3" class="arc">
<div class="arc_title">
<span class="title">标题</span>
<span class="date">2022/1/20</span>
</div>
<div class="arc_body">
<p>
阿八八八!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</p>
</div>
<hr>
<div class="arc_bottom">
<span>#Python</span>
<span>#Java</span>
</div>
</div>
<div id="right_5" class="arc">
<div class="arc_title">
<span class="title">标题</span>
<span class="date">2022/1/20</span>
</div>
<div class="arc_body">
<p>
阿八八八!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</p>
</div>
<hr>
<div class="arc_bottom">
<span>#Python</span>
<span>#Java</span>
</div>
</div>
<div id="right_6" class="arc">
<div class="arc_title">
<span class="title">标题</span>
<span class="date">2022/1/20</span>
</div>
<div class="arc_body">
<p>
阿八八八!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</p>
</div>
<hr>
<div class="arc_bottom">
<span>#Python</span>
<span>#Java</span>
</div>
</div>
<div id="right_7" class="arc">
<div class="arc_title">
<span class="title">标题</span>
<span class="date">2022/1/20</span>
</div>
<div class="arc_body">
<p>
阿八八八!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</p>
</div>
<hr>
<div class="arc_bottom">
<span>#Python</span>
<span>#Java</span>
</div>
</div>
</div>
</body>
</html>
css:
点击查看代码
/*这是博客园的搭建样式*/
/*通用样式*/
body{
margin: 0;
background-color: antiquewhite;
}
a{
text-decoration: none;
}
ul{
list-style-type: none;
padding-left: 0;
}
/*左侧样式*/
#left_all{
float: left;
width: 20%;
height: 100%;
position: fixed;
background-color: darkgrey;
}
#left_1{
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid powderblue;
margin: 20px auto;
overflow: hidden;
}
#left_1 img{
width: 100%;
}
#left_2{
color:darkblue;
font-size: 18px;
text-align: center;
}
#left_3{
font-size: 24px;
text-align: center;
}
#left_3 a{
color:darkorchid;
margin-top: 80px;
}
#left_3 a:hover,#left_4 a:hover{
color: orchid;
}
#left_4{
text-align: center;
margin-top: 100px;
}
/*右侧样式*/
#right_all{
float: right;
width: 80%;
}
.arc{
height: 120px;
background-color: white;
border: 5px solid royalblue;
margin: 10px 10px 10px 10px;
box-shadow: 1px 1px 1px 1px ;
}
.arc_title{
border-left: 5px red solid;
}
.title{
font-size: 24px;
margin-left: 5px;
font-weight: bolder;
}
.date{
float: right;
text-align: right;
margin-top: 5px;
margin-right: 10px;
}
.arc_body{
font-size: 16px;
text-indent: 32px;
}
效果如下:
浙公网安备 33010602011771号