在Dreamweaver中利用CSS样式表设置网页

下面为你详细讲解在Dreamweaver中利用CSS样式表设置网页的完整攻略。

一、新建CSS样式表文件

例如，我们可以设置一个页面的背景颜色为蓝色，字体颜色为白色：

body {
  background-color: blue;
  color: white;
}

在你的网页文件中，把以下代码添加到<head>标签之间，将CSS样式表文件与网页相互关联起来：

<link rel="stylesheet" href="style.css">

在上述代码中，“style.css”是你新建的CSS样式表文件的名称。

例如，我们可以将上述CSS样式表中的body样式应用到我们的网页中，将整个网页的背景颜色和字体颜色设置为蓝色和白色：

<body>
  <p>这是网页中的一段文字。</p>
</body>

在上述代码中，<body>标签表示整个网页的内容，<p>标签表示网页中的一个段落。

这时候，在网页中查看网页内容，你会看到整个网页的背景变成了蓝色，字体颜色变成了白色。

下面给出两个示例，帮助你更好的理解用CSS样式表设置网页：

我们可以使用CSS样式表设置网页中文字的字体、字号、字体颜色等样式。例如，下面的CSS样式表中设置了网页中所有段落的字体为宋体，字号为16像素，字体颜色为红色：

p {
  font-family: SimSun;
  font-size: 16px;
  color: red;
}

在示例中，p表示所有网页中的段落，在这个选择器下设置了其它样式。

我们可以使用CSS样式表设置网页中元素的位置，使网页更加美观。例如，下面的CSS样式表中设置一个HTML元素的左边距和上边距分别为50像素，位置在浏览器窗口左边缘和上边缘的50像素处：

div {
  position: absolute;
  left: 50px;
  top: 50px;
}

在示例中，div表示一个HTML元素，在这个选择器下设置了其它样式。position:absolute表示该元素的位置是绝对的，而left和top则表示该元素距离浏览器窗口左边缘和上边缘的像素值。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：在Dreamweaver中利用CSS样式表设置网页 - Python技术站