第12课:页面布局(CSS)

如何为页面实现理想的布局?

你可以使用级联样式表(Cascading Style Sheets,简称CSS)为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识,可以使用我们提供的CSS教程。因此,请将本课当作CSS的预备课。
CSS是HTML的搭档。在编码过程中,它们发挥不同的作用:HTML负责网页的具体内容(结构),而CSS则修饰网页的表现形式(布局)
正如第7课所讲, 可以用style属性将CSS内联到网页中。例如,你可以采用下面的方法来设置文字的字体类型和大小: 例1:

<p style="font-size:20px;">这里的文字大小为20像素</p>
<p style="font-family:黑体;">这里的文字字体为黑体</p>
<p style="font-size:20px; font-family:黑体;">这里是文字大小为20像素、采用黑体的文字</p>

该例在浏览器中将显示如下:

这里的文字大小为20像素

这里的文字字体为黑体

这里是文字大小为20、采用黑体的文字

在上例中,我们使用了style属性来指定字体类型(font-family)和字体大小(font-size)。在最后一段中,我们同时进行了字体类型与字体大小的设置,请注意用“;”号将它们隔开。

页面布局似乎挺繁琐的?

CSS有一个优越的特性,即它可以对页面布局进行集中管理。也就是说,你不必在每个标签里都使用style属性;相反,你可以只声明一次,浏览器便会按相应的页面布局效果来显示文本: 例2:

<html>
<head>
<title>我的第一个CSS页面</title>
<style type="text/css">
h1 {font-size:30px; font-family:宋体;}
h2 {font-size:15px; font-family:黑体;}
p {font-size:8px; font-family:"隶书";}
</style>
</head>
<body>
<h1>我的第一个CSS页面</h1>
<h2>欢迎参观我的第一个CSS页面</h2>
<p>你可以在这里了解CSS的原理</p>
</body>
</html>

在上例中,我们在文档的头部(head)插入了CSS,它将应用于整个页面。要将CSS嵌入文档,你只需通过标签<style type=”text/css”>告诉浏览器该段为CSS即可。
在例2中,所有一级标题(h1)采用宋体,字体大小为30(象素);所有二级标题(h2)采用黑体,字体大小为15(象素);普通段落文字(p)采用隶书,字体大小为8(象素)。
另一种使用CSS的方法,是将CSS代码单独作为一个文档保存。通过把CSS文档独立出来,你就可以同时对多个页面的布局进行集中管理。如果你要对一个大型网站上的大量网页作字体类型或大小的修改,那么这个方法绝对是最佳选择。在此,我们不对CSS作更深的讨论,我们的CSS教程会就此作详细介绍。

CSS具有哪些其他功能?

CSS的作用不仅仅是指定字体类型和大小,它还可以用于许多其它方面,比如设置颜色和背景等。你可以试试下面的例子:

<p style="color:green;">绿色的文字</p>
<h1 style="background-color:blue;">兰色背景的标题</h1>
<body style="background-image:url('http://www.html.net/logo.png');">

你可以试一下将这些示例代码插入自己的网页中。

CSS仅仅用于设置颜色和字体吗?

CSS除了用于设置颜色与字体等布局之外,还可以控制页面设置与表现形式(边距,漂浮,对齐,宽度,高度等)。通过为不同元素设置不同的CSS,你可以令页面布局精密而美观。 例3:

<p style="padding:25px;border:1px solid red;">我爱CSS</p>

该例在浏览器中将显示如下:

我爱CSS

例4:

<img src="wp-content/uploads/2018/01/125jz.png" alt="125建站网" style="position:absolute;bottom:50px;right:10px;" />

在该例中,图像被放置在浏览器中位于距底端50象素、距右边界10象素的位置。这里只是一个例子,实际上你可以把它放在你所期望的任何位置上。试一试吧!挺容易,而且很酷,是吧?

当然,你不可能在十分钟内学会CSS。正如前面所提到的,这一课只对CSS作简要的介绍。以后,你可以从我们提供的CSS教程中学到更多CSS知识。
现在,让我们先把精力集中于HTML,继续学习下一课吧!

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/465.html

(1)
江山如画的头像江山如画管理团队
上一篇 2018年1月18日 下午8:25
下一篇 2018年1月19日 下午7:52

99%的人还看了以下文章

  • CSS3动画:@keyframes animation 案例——制作滚动公告

    滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 注释:当动画完成后,动画的状态会回到初始状…

    2019年2月26日
    5.4K0
  • 第12课:高度和宽度

    到目前为止,我们还没有在元素尺寸方面给予关注。在这一课,我们将看到为元素定义高度和宽度是十分简单的。 设定宽度[width] 设定高度[height] 设定宽度[width] 你可以通过width属性来设定一个元素的宽度,即在水平方向上的尺寸。 下面是一个简单的例子,它为我们提供了一个可以容纳文本的盒子: div.box {width: 200px;bord…

    2020年2月25日
    1.5K0
  • 如何为需要打印的网页设置单独的css样式

    项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用: <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

    2019年11月20日
    1.8K0
  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    2.6K0
  • 第2课:CSS的工作原理

    在这一课,你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型,以及在HTML文档里使用CSS所必需的代码。

    2020年2月22日
    1.9K0
  • 菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)

    网页开发时,导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同,如导航的最后一个菜单不再需要分隔符或右边的空白间距,新闻或文章列表的最后一项不需要底边距,列表一般都会有分割线,但是最后一个列表没有分割线等。 如文章列表如下: <ul class=’posts’> <li class=’post’> <h3>中国…

    2018年9月27日
    2.3K0

发表回复

登录后才能评论