高效入门css3（二）

最新推荐文章于 2024-04-02 23:59:19 发布

全栈O-Jay

最新推荐文章于 2024-04-02 23:59:19 发布

阅读量671

点赞数 1

分类专栏：前端文章标签： css3 javascript css

本文链接：https://blog.csdn.net/weixin_45116099/article/details/122901573

版权

前端专栏收录该内容

8 篇文章 3 订阅

订阅专栏

引用css文件

若我们的style里面写了很多很多，很复杂，我们可以新建一个css文件，放在.html同目录下，然后在style里面输入

<link href="./mystyle.css" rel="stylesheet" type="text/css"/>

就可以在html文件里面引用css文件，对于大文件修改起来更加方便！

颜色

对于颜色的设置，除了直接color:red；
还可以用hex格式表示，如color:#000000 color:#00FF00；
还可以用rgb格式，如color:rgb(255,0,255)；
对于多个对象，若我们想同时修改，则要一个一个地改？我们可以先用JavaScript定义一个变量defined_color:pink;然后css定义颜色color:defined_color即可，当我们只修改这一变量，则所有用了这个颜色的对象都会被修改！（JS的知识可以康康我的文章哦）

其他基础

padding填充: 内容在区域内部的上下左右距离设置。试试padding:20px;你会发现内容的上下长度变为20px。

/*body里*/
<p class="k">hello5</p>

/*style里*/
.k{
	color:orange;
	padding:20px ;
}

在这里插入图片描述
你看，定义了padding的hello5比没定义的hello3要宽。

margin边缘：内容的边缘外部的距离设置，冰雪聪明的你看下面图就能理解。

/*body里*/
<p class="k">hello5</p>

/*style里*/
.k{
	color:orange;
	margin:20px ;
}

在这里插入图片描述
你看，定义了margin的hello5与外部有了20px的距离，没有定义的hello3则撑满了页面。

grid网格布局：二维，可以利用grid布局快捷地绘制表格！
如何绘制一个2行3列的表格？

/*body里*/
<div class="container">
		<div class="d1"> 1 </div>
		<div class="d1"> 2 </div>
		<div class="d1"> 3 </div>
		<div class="d1"> 4 </div>
		<div class="d1"> 5 </div>
		<div class="d1"> 6 </div>
</div>

/*style里*/
.container{
		font-size:20px;                       /*字体大小为20px*/
		display:grid;                         /*grid布局*/
		grid-template-columns:1fr 1fr 1fr;    /*3列，fr是充满页面单位*/
		grid-template-rows:1fr 1fr;           /*2行，fr是充满页面单位*/
}
.d1{
		background-color:lightblue;   /*背景天蓝色*/
		text-align:center;            /*字体居中*/
		border-color:blue;            /*边框颜色为蓝色*/
		border-width:5px;             /*边框粗5px*/
		border-style:solid;           /*边框类型为实线*/
		border-radius:0px;            /*边框无圆角*/
}

在这里插入图片描述
相信大家看代码注释就能理解，注意这个fr单位非常好，如果1fr 2fr 1fr，则页面按照1:2:1的比例分配列的宽度。当然我们也可以直接用px设置列和行的长度。

flex弹性布局：与grid对应，这个是一维的。

<div class="box">
		<div class="d2"> 1 </div>
		<div class="d2"> 2 </div>
</div>

/*style里*/
.box{
		display: flex;                /*flex布局*/
		flex-direction: row;          /*水平分布*/
}
.d2{
		text-align:center;
		background-color:lightblue;
		border-color:blue;            /*边框颜色为蓝色*/
		border-width:5px;             /*边框粗10px*/
		border-style:solid;           /*边框类型为实线*/
		border-radius:0px;            /*边框圆角*/
		flex: 100%;                   /*充满页面*/
}

在这里插入图片描述
grid布局你都理解了，flex肯定ok啦。区别好一个是二维一个是一维就ok了。

repeat():grid布局中用到了 1fr 1fr 1fr ，如果有10列，我们岂不是要写十个1fr？“懒惰 ”的程序猿发明了repeat函数，repeat( 3 , 1fr )就是3个1fr连着写的意思，同理10个1fr就是repeat( 10 , 1fr ).
还可以repeat( 3 , 1fr 50px ) 表示 1fr 50px 1fr 50px 1fr 50px，简便很多！