HTML网页的设计

最新推荐文章于 2024-09-11 20:59:43 发布

原创最新推荐文章于 2024-09-11 20:59:43 发布 · 3.2k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #html5 #css

本文介绍了CSS在网页布局中的重要性，包括字体样式和背景样式的应用。通过示例代码展示了如何使用CSS设置字体家族，如serif和sans-serif，以及如何定义背景颜色、背景图像等属性。了解这些基础知识能帮助提升网页设计的效率和美观度。

网页是我们上网经常会用到的、也是最常见的，而网页的布局是其中吸引人注意的一个点。对于网页的排版布局我们会用到HTML自身的一些表格、图像构建；第二种就是CSS页面布局，它比HTML自身的布局结构要精细的多。

CSS指层叠样式表，储存在CSS文件中，它可以对HTML中的所有内容（标签、滚动条、字体、链接等）进行编辑。因为它是外部样式表，所以能极大的提升工作效率。我下面简单的介绍两种CSS中的样式，代码来自于菜鸟教程。CSS 简介 | 菜鸟教程https://www.runoob.com/css/css-intro.html

一、CSS字型：

通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）

特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）

字体样式演示代码：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
        <style>p.serif{font-family:"Times New Roman",Times,serif;}

p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>

<body>
        <h1>CSS font-family</h1>
        <p class="serif">这一段的字体是 Times New Roman </p>
        <p class="sansserif">这一段的字体是 Arial.</p>

</body>
</html>

结果：

二、CSS背景

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color

background-image

background-repeat

background-attachment

background-position

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"

RGB - 如："rgb(255,0,0)"

颜色名称 - 如："red"

背景样式演示代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h1
{
   background-color:#6495ed;
}
p
{
   background-color:#e0ffff;
}
div
{
   background-color:#b0c4de;
}
</style>
</head>