网页是我们上网经常会用到的、也是最常见的,而网页的布局是其中吸引人注意的一个点 。对于网页的排版布局我们会用到HTML自身的一些表格、图像构建;第二种就是CSS页面布局,它比HTML自身的布局结构要精细的多。
CSS指层叠样式表,储存在CSS文件中,它可以对HTML中的所有内容(标签、滚动条、字体、链接等)进行编辑。因为它是外部样式表,所以能极大的提升工作效率。我下面简单的介绍两种CSS中的样式,代码来自于菜鸟教程。CSS 简介 | 菜鸟教程https://www.runoob/css/css-intro.html
一、CSS字型:
通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif" 或 "Monospace")
特定字体系列 - 一个特定的字体系列(如 "Times" 或 "Courier")
字体样式演示代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</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)</title>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color 实例!</h1>
<div>
该文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div>
</body>
</html>
运行结果:
这就是其中基础的样式,更多的内容大家可以通过上面的链接去自行学习。
更多推荐
HTML网页的设计
发布评论