前端基础：通过 《画廊》实战CSS文字边框背景属性
画廊一般指彩绘的走廊，这里是收藏、陈列或销售美术作品的场所。行走在画廊中，两边陈列着美术作品，并在作品的下方标有作者及相关信息，美术作品又是由画作和线框装裱出来的，这也是CSS文字边框背景属性实战的舞台。
一、项目说明
该项目是实践CSS文字属性、背景属性、边框属性的具体应用，在对页面进行HTML+CSS布局的时候灵活应用这些属性，可以更好的调节网页整体的效果。
二、项目效果图展示
一般对CSS样式使用之前，也需要使用HTML技术对页面进行布局，实现了HTML页面的基本结构，继而更好的修饰页面中的元素，对于《画廊》来说，布局是一些图片的有序排列，在图片和图片之间需要有一定的距离，在图片的下方有作者的相关介绍。效果图如下图所示。
三、项目说明
《画廊》页面从结构上看，可以理解为上中下型结构。上面是三幅图片，中间是“画廊”的文字，下面仍然是三幅图片。对于这种竖向的排列可以使用
标签，DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在DIV中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。“div”也是网页布局最重要的盒子的概念，在具体的布局技术会介绍“盒子模型”这样的概念。三个div就会曾现上中下的排列顺序，然后在对应的div标签中使用对应的图片标签或者是“画廊”的文字标签。这样HTML初步布局的代码如下。
<html>
<head>
</head>
<body>
<div>
<img src="hua1.png"/>
<img src="hua2.png"/>
<img src="hua3.png"/>
</div>
<div>
<center>
画 廊</font>
</center>
</div>
<div>
<img src="hua4.png"/>
<img src="hua5.png"/>
<img src="hua6.png" />
</div>
</body>
</html>
这样的布局最终是浏览器中的初步效果如下图所示。
从图中的效果看，每幅图片都是不一样的大小，同时中间的文字“画廊”也是很小的一个字，现在就需要使用CSS属性对HTML布局进行样式上的调整。
四、CSS的字体属性和文本属性
CSS有许多的字体属性和文本属性是对网页中的文字进行装饰的技术，在《画廊》页面中间显示的是“画廊”两个字，字体比较小，使用CSS字体属性就可以为“画廊”这两个字实现字体的放大及显示字体的选择。
关于字体的属性如下。
1、调整字体的字号大小：
font-size:字号大小;
其中字号大小以px为主。px是HTML页面的像素单位。如font-size:15px;
2、调整字体的字体名称：
font-family:字体名称；
其中字体名称可以使用“宋体”、“黑体”等名称。如font-family:"宋体";
3、调整字体的颜色:
color:颜色名称
其中颜色名称使用英文颜色名“red”、“blue”等，其中如果是比“blue”颜色稍浅的颜色可以使用“lightblue”，如果是比“blue”颜色稍重的颜色可以使用“darkblue”。也可以使用“#”的格式，后面跟上rgb的数值，每个数值里最大的是255，不过需要16进制显示，16进制显示为FF，也就是rgba的每一个字母的值显示在00-FF之间。如color:red;或color:#999999;
4、设置字体加粗
font-weight:bold
其中“bold”是加粗的属性值，“normal”表示加粗的效果失效,字体正常。
5、设置字体倾斜
font-style:italic
其中“italic”是倾斜的属性值，“none”表示倾斜的效果失效。
6、设置字体下划线
text-decoration:underline
其中“underline”是字体下划线的属性值，“none”表示下划线的效果失效。
7、设置字体的行高
line-height:px值的大小
CSS中，所有的行，都有行高。CSS的行高不是直接作用在文字上的，而是作用在“行”上的。
如果html中没有给这个p标签设置高度，p标签的高度是内容将其撑高的。如果给这个p标签设置行高，在垂直方向来看，文字在自己的行里是居中的。比如，文字是14px，行高是24px，那么上下的空隙就是5px。图解如下图所示。
五、CSS的背景属性
HTML很多元素是需要设置背景色来提升用户体验的。CSS可以对HTML中的元素设置与背景有关的样式，这些样式属性基本都有一个background做前缀。
1、设置颜色作为对象背景颜色
background-color:颜色名称。
其中“颜色名称”的设置与color的“颜色名称”内容是一样的。
2、设置图片作为背景图片
background-image:url(图片路径和名称)
3、设置背景图片是否重复平铺
background-repeat:no-repeat
其中background-repeat的值no-repeat表示不重复，还可以设置repeat-x（即x轴重复），repeat-y（即y轴重复），repeat(即x和y都重复）。
4、定位背景图片中对象中显示定位
background-position:位置参数
其中位置参数有常见left、right、center代表水平左、中、右显示图片，或者常见bottom、top代表下部（底部）、上部（顶部）显示图片。也可以用px来限定上下、左右的距离,也就是background-position后面可以跟两个参数，水平的位置和竖向的位置。如background-position:10px（水平左中右） 20px（垂直上下）。
5、定义背景图片的大小
bachground-size：大小参数
其中背景大小参数属性值有：auto , 像素值 ,百分比 , cover , contain。 如background:100% 100%;语句实现背景图片水平和竖向的拉抻。
六、CSS的边框属性
HTML网页中有很多元素有时需要边框来美化，来增加网页界面的美感和体验。
CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。
１、设置显示的边框类型
border-style：类型名称
其中类型名允许以下值：dotted - 定义点线边框;dashed - 定义虚线边框；solid - 定义实线边框；double - 定义双边框。如：border-style:dashed;
2、指定显示的边框宽度
border-width:宽度值
可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick。如border-width:10px;
3、指定显示的边框颜色。
border-color:颜色名称;
其中颜色名称可以指定颜色名，比如 border-color:"red"，也可以指定十六进制值，比如 border-color:"#ff0000";
4、设置圆角
border-radius:圆角尺寸
圆角尺寸可以使用像素值，如border-radiu:10px;
在border的使用上，也可以对四个边框做单独设置。
border-left 设置左边框，一般单独设置左边框样式使用。
border-right 设置右边框，一般单独设置右边框样式使用。
border-top 设置上边框，一般单独设置上边框样式使用。
border-bottom 设置下边框，一般单独设置下边框样式使用。
如果使用border-left、border-right、border-top、border-bottom来进行边框的设置，其后面的参数可以把边框的大小、颜色和粗细都做参数使用，顺序可以颠倒。如border-left:2px solid red;
七、对《画廊》的文字部分进行设置
文字部分需要使用如下的设置过程。
１、设置文字的字体名称为“隶书”：
font-family:“隶书”
2、设置文字的字体大小为50px,大小也可以根据实现情况调整。
font-size:50px;
3、设置文字的样式为倾斜。
font-style:italic;
4、设置文字的样式为加粗。
font-weight:bold;
5、设置文字的颜色为“黑色”。
color:black;
6、设置文字的样式为有下划线的样式
text-decoration:underline;
7、设置行距为100px，这是由height决定的，使文字能够做到垂直居中。
line-height:100px;
由于div层标签或者盒子元素是没有宽和高的，一定要对div进行宽和高的设置。
8、设置div的高度
height:100px;
9、设置div的宽度
width:800px;
以上这些CSS样式可以用类选择器，也可以用id选择器，这里为了表示唯一性，我们使用id选择器。在标签的<style>标签中定义“#content”选择器，把这些设置CSS语句定入其中，并每句之间用“；”隔开。然后在HTML竖向结构的第二个
标签中使用这个id选择器就可以使字体达到这样的效果。
代码如下。
<html>
<head>
<style>
#content{
width:800px;
height:100px;
font-family:"隶书";
font-size:50px;
font-style:italic;
font-weight:bold;
color:black;
text-decoration:underline;
line-height:100px;
}
</style>
</head>
<body>
<div>
<img src="hua1.png"/>
<img src="hua2.png"/>
<img src="hua3.png"/>
</div>
<div id="content">
<center>
画 廊</font>
</center>
</div>
<div>
<img src="hua4.png"/>
<img src="hua5.png"/>
<img src="hua6.png"/>
</div>
</body>
</html>
在浏览器中显示的效果如下图所示。
从图中可以看出，“画廊”两个字已经能够看得出来了，且有了我们设置的样式。
八、对《画廊》的图片部分进行设置
首先图片是不一样大小的，可以为所有的图片添加一个类别选择器，统一好图片的大小，根据图片效果，图片也是需要添加边框。这样就实现了图片的样式语句如下。
1、设置图片的宽度220px，宽度也可根据实际情况调整。
width:220px;
2、设置图片的高度220px，高度也可以根据实际情况调整。
height:220px;
3、设置边框为蓝色实心线精细为5px ,粗细也可以视具体情况调整。
border:solid 5px blue;
这里把边框的样式solid，边框粗细5px和边框颜色blue放在一条语句中。
border可以概括为一条语句，后面的顺序可以任意。
上面这些CSS语句都需要设置在每一个图片上，而id选择器一般是唯一性的，因此这里可以把上面的语句定义成class类别选择器，再把这个class选择器使用到图片上即可。代码如下。
<html>
<head>
<style>
.imgstyle{
width:220px;
height:220px;
border:solid 5px blue;
}
#content{
width:800px;
height:100px;
font-family:"隶书";
font-size:50px;
font-style:italic;
font-weight:bold;
color:black;
text-decoration:underline;
line-height:100px;
}
</style>
</head>
<body>
<div>
<img src="hua1.png" class="imgstyle"/>
<img src="hua2.png" class="imgstyle"/>
<img src="hua3.png" class="imgstyle"/>
</div>
<div id="content">
<center>
画 廊</font>
</center>
</div>
<div>
<img src="hua4.png" class="imgstyle"/>
<img src="hua5.png" class="imgstyle"/>
<img src="hua6.png" class="imgstyle"/>
</div>
</body>
</html>
代码在浏览器中的显示结果如下图所示。
九、对《画廊》的图片背景进行设置
从《画廊》效果上看，对上、下两部分图片的陈列墙上需要添加背景图片。把上下两个div都加入一个背景设置的CSS样式文件即可。由于这里的DIV也是两个，所以仍然使用class类别选择器来定义，定义内容包括以下各项。
1、对于DIV来说，width宽度是必须要设置的。这里设置宽度为800。
width:800px;
2、对于DIV来说，height高度也是必须设置的。这里设置宽度为275。
height:275px;
3、设置背景图片为大理石纹理图片(dali.png),背景不重复,并显示在左上角。
background:url("dali.png") no-repeat 0px 0px;
语句中background也是背景设置的统一格式，url(“dali.png”)就是背景的图片地址，no-repeat就是背景图片的不重复，“0px 0px”就是背景图片显示的位置。后面的参数顺序也是可以颠倒的。
4、background-size:100% 100%;
背景图片的尺寸横向100%和纵向100%，也就是横向和纵向的拉伸。
将上面的CSS语句设置成class类别选择器，分别作用在《画廊》的上下两个DIV上即可。
代码如下：
<html>
<head>
<style>
.top_bar{
width:800px;
height:275px;
background:url("dali.png") no-repeat 0px 0px;
background-size:100% 100%;
}
.imgstyle{
width:220px;
height:220px;
border:solid 5px blue;
}
#content{
width:800px;
height:100px;
font-family:"隶书";
font-size:50px;
font-style:italic;
font-weight:bold;
color:black;
text-decoration:underline;
line-height:100px;
}
</style>
</head>
<body>
<div class="top_bar">
<img src="hua1.png" class="imgstyle"/>
<img src="hua2.png" class="imgstyle"/>
<img src="hua3.png" class="imgstyle"/>
</div>
<div id="content">
<center>
画 廊</font>
</center>
</div>
<div class="top_bar">
<img src="hua4.png" class="imgstyle"/>
<img src="hua5.png" class="imgstyle"/>
<img src="hua6.png" class="imgstyle"/>
</div>
</body>
</html>
代码对应的浏览器效果如下图所示。
从图中显示的结果上来，图片没有显示在中间，而且图片都堆在了解一起，可以通过调整距离来做修饰。
十、调整《画廊》中图片的距离
关于调整《画廊》中图片的距离可以通过margin这个外边距的参数来决定，这个参数在后续盒子模型会详细介绍。margin外边距表示的就是两个盒子间的距离，左边的距离可以用margin-top，上面的距离可以用margin-top，当然，右边的距离可以用margin-right，下面的距离可以用margin-bottom。如果把图片理解成盒子，margin-top就可以调整图片上面的距离，margin-left就可以调整图片右边的距离。
这里为图片的“imgstyle”类选择器添加两条代码。
1、设置左边距离20px；
margin-left:20px;
2、设置上边距离20px；
margin-top:20px;
整体代码如下。
<html>
<head>
<style>
.top_bar{
width:800px;
height:275px;
background:url("dali.png") no-repeat 0px 0px;
background-size:100% 100%;
}
.imgstyle{
width:220px;
height:220px;
border:solid 5px blue;
margin-left:20px;
margin-top:20px;
}
#content{
width:800px;
height:100px;
font-family:"隶书";
font-size:50px;
font-style:italic;
font-weight:bold;
color:black;
text-decoration:underline;
line-height:100px;
}
</style>
</head>
<body>
<div class="top_bar">
<img src="hua1.png" class="imgstyle"/>
<img src="hua2.png" class="imgstyle"/>
<img src="hua3.png" class="imgstyle"/>
</div>
<div id="content">
<center>
画 廊</font>
</center>
</div>
<div class="top_bar">
<img src="hua4.png" class="imgstyle" />
<img src="hua5.png" class="imgstyle" />
<img src="hua6.png" class="imgstyle" />
</div>
</body>
</html>
代码最终在浏览器中显示的效果如下图所示。
代码的github地址：https://github.com/wawacode/hualang_css
扫一扫
1292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
