第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%的人还看了以下文章

  • css布局基础:定位练习1

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 效果图: 效果说明:故宫文字段落设置背景色黑色透明,覆盖在图片底部。 …

    2020年4月4日
    2.5K0
  • Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

    css多栏自适应布局一般使用position属性布局,或者用float属性布局,也可以使用display属性。 position适合首页布局,因为首页内容往往可以完全控制。float适合模板布局,模板中填充的内容无法控制。 相关阅读:左侧固定,右侧自适应布局的两种实现方法 1、浮动实现 原理:左侧定宽浮动,右侧使用margin-left,且不要定宽,容器尺寸…

    2021年11月29日
    1.1K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    2.3K0
  • 如何制作图片按钮,并为图片按钮添加提交表单和重置表单功能

    网页中有表单,表单的默认按钮样式不是很好看,很多人为了美观使用图片做按钮。 今天中国网页设计给大家分享在网页制作中怎么制作图片按钮,并为图片按钮添加提交表单和重置表单功能。 一、图片按钮的制作方法 1、<input type=”image” /> 定义图像形式的提交按钮。 <input type=”image” sr…

    2018年9月30日
    3.8K0
  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    4.5K0
  • 如何在网页中输入多个连续的空格?

    默认状态下(输入法为半角状态),按空格键只能输入一个空格,要在文本之间插入多个连续的空格,可以使用以下几种方法: 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下,使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“&nbsp;”字符。

    2020年4月3日
    7.4K0

发表回复

登录后才能评论