当前位置：主页 > 建站知识 > 小程序

html代码转换小程序-html首页图片转换代码

发布时间：2023-01-22 14:19 浏览次数：次作者：佚名

问：如何接收公众号平台推送的文章？

答：点击标题下方蓝色字【web前端开发】即可关注。

介绍

我们使用基本的 HTML 编写了一个网页。但是，用 HTML 代码编写的网页看起来平淡无奇。

html代码转换小程序_html首页图片转换代码_小程序html转换工具

如何改进这个非常沉闷的页面？

让我们开始使用网页的基本样式来改善页面效果，我们将使用CSS的功能。

html首页图片转换代码_小程序html转换工具_html代码转换小程序

正式开始 CSS 是 Cascading Style Sheets 的首字母缩写，它是一种为网页添加样式的通用语言，所有浏览器都支持。最新的标准是 CSS3，它完全向后兼容早期版本。 CSS3 规范由W3C 制定，目前仍处于开发阶段。它的最新版本是 CSSSnapshot 2010。

打开您的文本编辑器并输入下图上半部分所示的 HTML 代码。完成后，将其另存为 .htm 或 .html 文件并将其拖到浏览器中html代码转换小程序，您将在网页上看到下图的下半部分。

html首页图片转换代码_html代码转换小程序_小程序html转换工具

比如说，你的客户看到网页，要求把最大的标题设置成蓝色，放在网页的中央，你能做到吗？单独使用HTML，毫无疑问是做不到的。

不用担心！在HTML代码中添加如下CSS代码（下图中蓝色部分），满足客户需求。

html首页图片转换代码_html代码转换小程序_小程序html转换工具

基本 CSS 语法

刚才，我们在网页中添加了 CSS 样式。让我们来看看基本的 CSS 语法。

第 1 步 - 在头部部分，添加开始标记。该区域将用于设计 CSS 样式规则。

请注意，/* 和 */ 用于封装 CSS 中的注释。注释用于解释代码，会被浏览器忽略。

第 2 步 - 选择我们要设置样式的 HTML 元素。在这种情况下，它是一个标签，在 CSS 术语中，我们称 h1 为选择器。 h1 后面的 { } 用来包围 h1 的样式声明。

第 3 步 - 添加 2 个样式声明，一个将内容设置为蓝色，另一个将其居中。

html首页图片转换代码_小程序html转换工具_html代码转换小程序

每个声明都包含一个属性和一个值，由冒号 (:) 分隔，并以分号 (;) 结束。在我们的示例中，颜色是属性，蓝色是值。

介绍完了CSS的基本语法。让我们来看看：

 
/* End of CSS block */

向 HTML 元素添加样式，例如

，只需为选择器 p 添加一个样式声明，然后是 h1。顺序并不重要。

看到你做得很好，你的客户有一个新的要求：你需要将第二行文本设置为红色并左对齐。

html首页图片转换代码_html代码转换小程序_小程序html转换工具

CSS 选择器

CSS选择器可以帮助我们查找、选择和声明HTML元素的样式描述。

元素选择器

在前面的示例中，我们通过 HTML 标签使用了 CSS 选择器，例如将相应的样式应用于 h1、h3 和 p 元素。请记住，网页可以包含许多此类标签，尤其是

标签。 P 选择器将对所有应用相同的样式

标签，无一例外。这意味着所有

标签将为绿色且右对齐。由于所有段落都受 p 选择器的影响，因此这种一揽子样式应用程序将无法自定义单个段落的样式。

（将以下代码添加到 HTML 文档的描述部分。）

html代码转换小程序_html首页图片转换代码_小程序html转换工具

小程序html转换工具_html代码转换小程序_html首页图片转换代码

为了克服这个限制，我们将再引入 2 个选择器——ID 选择器和类选择器。

ID选择器

每个 HTML 标签都有一个 id 属性，其名称与其他标签不同。例如，在 HTML 文档中有 2

标签，我们可以将其中一个命名为“para1”，另一个命名为“para2”。要在 CSS 代码中选择它们，您需要在 ID 名称前添加“#”。名为“para1”和“para2”的选择器将通过“#para1”和“#para2”来区分。我们可以使用 ID 名称作为选择器来为它们应用不同的 CSS 样式。

html首页图片转换代码_html代码转换小程序_小程序html转换工具

你可能已经注意到 ID 名称为 para1 和 para2 的两个段落保留了 center 属性，即使 center 属性没有在它们各自的选择器中设置。在这种情况下，它们都继承了父元素的 text-align 属性。

请注意以下有关 id 选择器的内容：您可能已经注意到 ID 名称为 para1 和 para2 的两个段落保留了 center 属性，即使在各自的选择器中未设置 center 属性。在这种情况下，它们都继承了父元素的 text-align 属性。

类选择器

同样，每个 HTML 标签都有一个名称与其他标签不同的类属性。例如，如果 HTML 文档有 4

标签，我们将其中两个命名为“group1”。要在 CSS 代码中选择它们，请在它们的类名前添加一个点字符 (.)。我们可以通过类选择器名称将一组CSS样式共享给一组具有相同类名的HTML元素。

小程序html转换工具_html代码转换小程序_html首页图片转换代码

不要以数字开头类名注意以下关于类选择器的事项：

选择器链接

如果某些元素需要样式相同，我们可以用最少量的代码将它们设置在一起。

html首页图片转换代码_html代码转换小程序_小程序html转换工具

CSS 位置

目前，我们都将CSS样式放在HTML文档的头部，称为内部样式。实际上还有 2 种放置 CSS 样式表的方法——外部样式和内联样式。

内部样式表

我们已经熟悉了内部样式表。当 HTML 文档具有独特的样式时，可以使用内部样式。但是，当许多 HTML 文档共享相同的样式时，这种方法效率很低。为此，我们应该使用外部样式表。

外部样式表

顾名思义，外部样式表位于所有 HTML 文档的外部。每个文档都将通过标头中的标签链接到外部样式表。接下来，让我们看看它是如何实现的。

我们会将 HTML 文件中标签之间的代码剪切并粘贴到文本编辑器中。将此文件命名为“mystyle.css”并将其保存在与 HTML 文档相同的文件夹中。请注意，.css 是外部样式表的文件扩展名。

h1,h2,p{
   color:red;
   text-align:right;
}

CSS 样式已从 HTML 文件中移出。要将“mystyle.css”链接添加到 HTML 文件，请将以下代码添加到 HTML 文档的头部：

小程序html转换工具_html首页图片转换代码_html代码转换小程序

将 HTML 文件拖到浏览器中，您将看到与之前相同的网页。

当我们想要将相同的样式应用到站点中的多个页面时，使用外部样式表是理想的选择。我们可以在外部样式表中进行一次更改，就可以更改整个站点的外观。这对网站的维护有很大的帮助。

内联样式表

在以下代码中，通过 HTML 标记的属性声明内联样式：

Inline Style Sheet

但是，这种在HTML标签中嵌入CSS，也会导致内容呈现混乱，不利于CSS的引入。因此，应尽可能避免使用内联样式表。

样式表的优先级

不难想象一个 HTML 元素具有三种样式的情况：内联、内部和外部。在这种情况下，它的风格应该是混乱的。

以下是优先顺序（从高到低）：

记住我的这条经验法则——“最接近元素的样式优先”。

CSS 属性

在前面的示例中，我们使用了“color”和“text-align”属性。它们只是众多 CSS 属性中的两个。 CSS 属性的名称非常直观，也就是说，它们的作用与名称相同。

下面，我们讨论以下三个属性（背景/文本/字体）。

CSS 背景

可以通过以下 CSS 背景属性设置网页的背景：

我们使用 background-color 属性来设置任何 HTML 元素的背景颜色，包括标签。

html首页图片转换代码_小程序html转换工具_html代码转换小程序

我们使用 background-image 属性将背景图片嵌入到任何 HTML 元素中，将以下代码片段添加到 HTML 文件中，并修改 url 参数以指向图片文件：

body{background-image:url("logo250x135.gif");}

背景显示在浏览器中，整个网页的背景是图片的平铺效果。

html首页图片转换代码_小程序html转换工具_html代码转换小程序

要水平重复背景图像，请使用 background-repeat:repeat-x。

body{
    background-image:url("logo250x135.gif");
    background-repeat:repeat-x;
}

html首页图片转换代码_html代码转换小程序_小程序html转换工具

如果背景图片需要垂直重复，使用background-repeat属性repeat-y。

background-repeat:repeat-y;

html代码转换小程序_小程序html转换工具_html首页图片转换代码

如果您不想在左上角重复任何背景图像，请将 background-repeat 属性更改为 no-repeat。

background-repeat:repeat-y;

背景位置

需要将背景图像固定在屏幕上的某个位置，将 background-position 属性设置为“右上角”。

body{
    background-image:url("logo250x135.gif");
    background-repeat:no-repeat;
    background-position:top right;
}

html代码转换小程序_html首页图片转换代码_小程序html转换工具

CSS文本

可以通过以下 CSS 属性设置网页上的任何文本效果：

color 属性用于设置任何 HTML 元素的文本颜色。

text-align 属性用于设置文本的水平对齐方式。可以采用以下四个值之一：center、left、right 或 justified。

text-decoration 属性用于设置或取消修饰任何 HTML 内容元素。可以采用以下四个值之一：overline、line-through、underline、none。

DOCTYPE html><html><head><style>
    #overline{text-decoration:overline;}
    #strikethrough{text-decoration:line-through;}
    #underline{text-decoration:underline;}style>head><body>
    <p id="overline">Under one roofp>
    <p id="strikethrough">Cancel an appointmentp>
    <p id="underline">On solid footingp>body>html>

none 值用于删除超链接的默认下划线。

text-transform 用于根据值将任何 HTML 元素的文本内容转换为大写、小写或大写。

html首页图片转换代码_小程序html转换工具_html代码转换小程序

text-index 属性用于指定第一行文本的缩进。

小程序html转换工具_html代码转换小程序_html首页图片转换代码

字体

文本的字体效果可以通过以下CSS属性设置：

html首页图片转换代码_html代码转换小程序_小程序html转换工具

字体系列

font-family 属性用于 HTML 文档中文本的字体。有两种类型的字体系列：

下面是几个常用的font-family属性的样式名称。字体列表以逗号分隔。对于名称中带有空格的字体，请将它们括在引号中html代码转换小程序，例如“Times New Roman”：

font-family:"Times New Roman",Cambria,Serif;

如果浏览器不支持第一种字体，将尝试下一种。经验法则是，您应该始终以所需的样式名称开头，以常用的字体系列结尾。如果所有字体都不可用，这将允许浏览器选择一组近似的字体。

尝试下面的示例并在浏览器上查看结果。

html代码转换小程序_html首页图片转换代码_小程序html转换工具

字体样式

font-style 属性可以取三个值之一——normal、italic 或 oblique。将以下 CSS 代码添加到前面的示例中以查看每个示例的效果。

.serif{
    font-family:"Times New Roman",Georgia,serif;
    font-style:normal;
}.sansserif{
    font-family:Arial,"Century Gothic",sans-serif;
    font-style:italic;
}.monospace{
    font-family:"Courier New",Monaco,monospace;
    font-style:oblique;
}