下面为你详细讲解在Dreamweaver中利用CSS样式表设置网页的完整攻略。
一、新建CSS样式表文件
-
打开Dreamweaver软件，点击左上角“文件”选项，选择“新建”。
-
在新建页面中，点击“空白页面”，再在右侧的“布局”选项中选择“无布局”。
-
点击“创建”按钮，新建一个空白页面。
-
在页面上点击“窗口”选项，选择“CSS样式表”或者按快捷键“Shift+F11”。
-
在弹出的“CSS样式表”面板中，点击“新建CSS样式表”按钮，新建样式表文件。
二、使用CSS样式表设置网页样式
- 在CSS样式表文件中编写CSS代码，设置网页样式。
例如，我们可以设置一个页面的背景颜色为蓝色，字体颜色为白色：
body {
background-color: blue;
color: white;
}
- 将CSS样式表文件关联到网页文件中。
在你的网页文件中，把以下代码添加到<head>标签之间，将CSS样式表文件与网页相互关联起来：
<link rel="stylesheet" href="style.css">
在上述代码中，“style.css”是你新建的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技术站
微信扫一扫 
支付宝扫一扫 