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

  • “注册”按钮(图片)怎么跳转到注册页面?

    页面代码: <input name=”Submit” type=”submit” class=”STYLE2″ value=”登陆”> <input name=”Submit2″ type=”submit” class=”STYLE2″ value=”注册”> “注册”按钮怎么跳转到注册页面? <inpu…

    2021年4月5日
    1.5K0
  • 如何为需要打印的网页设置单独的css样式

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

    2019年11月20日
    1.8K0
  • vue学习-我的第一个vue代码

    创建一个 .html 文件,然后通过如下方式引入 Vue: <!– 开发环境版本,包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者: <!– 生产环境版本,优化了尺寸和速度 –>…

    2020年6月14日
    2.2K0
  • 注册表单验证常用js代码:用户名、密码、邮箱等字段验证

    <script language=”javascript”>   //验证是否为数字   function IsDigit(cCheck)       {       return ((‘0′<=cCheck) && (cCheck<=’9’));       }      //验证是否为英文字母        fun…

    2021年11月30日
    7700
  • css布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    2.0K0
  • 第6课:超链接

    CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样,我们便可为网站增添奇特而有用的效果。

    2020年2月22日
    2.0K0

发表回复

登录后才能评论