术致科技

您现在的位置是:首页 > 建站 > 正文

建站

漂亮网页(前端新手看过来)

术致建站2022-12-29建站874
层叠样式表(CascadingStyleSheet,简称:CSS)是为网页添加样式的代码。本节将介绍CSS的基础知识,并解答类似问题:怎样将文本设置为黑色或红色?怎样将内容显示在屏幕的特定位置

层叠样式表(CSS)是用于向网页添加样式的代码。本节介绍CSS的基础知识,并回答类似的问题:如何将文本设置为黑色或红色?如何在屏幕上的特定位置显示内容?如何用背景图片或颜色装饰网页像HTML一样,CSS不是真正的编程语言,甚至不是标记语言。它是一种样式表语言,这意味着人们可以使用它有选择地向HTML元素添加样式。例如,要选择HTML页面中的所有段落元素,然后将其中的文本更改为红色,可以按如下方式编写CSS:

漂亮网页(前端新手看过来)

尝试创建一个新的样式文件夹和一个新的样式CSS文件,并将三行CSS保存在此新文件中,然后将CSS文件连接到HTML文档,否则,CSS代码不会对浏览器中HTML文档的显示效果产生任何影响。(如果您还没有完成前几节中的练习,请复习文件处理和HTML的基础知识。这方面包含在笔记本中!)

1。打开索引HTML文件,然后将以下行粘贴到文档标题中(即,在和标记之间)

2。保存索引HTML并用浏览器打开。您应该看到以下页面:

如果段落文本变为红色,恭喜您。您已经成功地迈出了CSS学习的第一步,让我们仔细看看上面的CSS:

整个结构称为规则集(通常称为“规则”),每个部分的定义如下所示:

请注意其他重要语法:

如果要同时修改多个属性,只需用分号将它们分开。例如:

您还可以选择多种类型的图元,并向其添加一组相同的样式。用逗号分隔不同的选择器。例如:

选择器有许多不同的类型。上面只介绍了元素选择器,它用于选择HTML文档中的给定元素。但是,所选操作可以更具体。以下是一些常见的选择器类型:

在研究了一些CSS基础知识之后,让我们为样式CSS添加更多的规则和信息,这使示例更加美观。首先,使字体和文本更加美观。步骤1:查找之前由Google字体输出的地址。并添加到索引HTML文档标题(介于和之间的任意位置)。代码如下所示:

上述代码下载当前网页的open SAN字体,以便将字体应用于自定义CSS中的HTML元素。步骤2:接下来,删除CSS文件中已有的样式规则。虽然测试成功了,但红字看起来不太舒服。第3步:在相应的位置添加以下代码,并将字体系列中的占位符行替换为您在Google字体中找到的字体。(字体系指希望文本使用的字体。)此规则首先为整个页面设置全局字体和字体大小(因为它是整个页面的父元素,其所有子元素将继承相同的字体大小和字体系列):

然后为文档正文中的元素设置字体大小(

(EN-US)和

)。将标题居中,并设置正文的行高和字间距,以提高页面的可读性。您可以随时调整这些PX值,以获得满意的结果。以下是一般效果:

在编写CSS时,您会发现您的工作似乎围绕着一个框展开—设置大小、颜色、位置等。一个页面中的大多数HTML元素可以看作是几个堆叠的框,毫不奇怪,CSS布局主要基于框模型。每个占用页面空间的块都有这样的属性:

这里也使用它:

开始向页面添加更多CSS!大胆地将这些新规则添加到页面底部,而不必担心更改属性值的结果。此规则将整个页面的背景颜色设置为计划颜色,现在是一个元素。让我们逐一检查上面的陈述:

您可能会在页面顶部发现一个难看的间隙,因为浏览器会为元素设置一些默认样式,例如没有任何CSS的en-us。但这不是一个好主意,因为我们希望没有任何样式的网页具有基本的可读性。为了消除这个差距,我们设置边距:0;要覆盖默认样式到目前为止,我们已经将标题的上下边距设置为20像素,并将标题文本设置为与HTML的背景颜色一致。应该注意的是,这里使用了文本阴影属性,它可以为元素中的文本提供阴影。这四个值的含义如下:

尝试不同的值,看看可以得到什么结果。最后,我们将图像居中,以使页面更加美观。车身边距:0 auto可以重复使用,但需要稍作调整。元素是一个块级元素,这意味着它占据了页面的空间,并且可以被赋予外部边距和其他改变间距的值。图片是一个内联元素,不具有块级元素的某些功能。因此,为了使图像具有外部边距,我们必须使用display:block为其提供块级行为。注意:以上描述假设所选图片小于页面宽度(600像素)。较大的图像将溢出正文并占据页面上的其他位置。要解决此问题,您可以:

1)使用图像编辑器缩小图像宽度;2) 使用CSS限制图像的大小,即减少元素宽度属性的值(如400 PX)

如果您一步一步地完成本文的练习,您最终可以得到以下页面的相关建议:

前端的新手可以看到它并轻松地带您练习HTML