学习HTML之路8

最新推荐文章于 2025-04-20 19:03:17 发布

原创最新推荐文章于 2025-04-20 19:03:17 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

分享专栏收录该内容

92 篇文章

订阅专栏

CSS用于控制HTML元素的样式，可通过内联样式、内部样式表和外部引用方式添加。最佳实践是使用外部样式表，提高代码复用。例如，使用font-family、color和font-size属性定义文本样式，text-align属性设置文本对齐。同时，HTML中的<img>标签应使用alt属性提供替代文本，确保在图像不可见时仍能传达信息。

HTML 样式- CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。

HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 样式标签

标签	描述
<style>	定义文本样式
<link>	定义资源引用地址

ALT 属性

最常见用在 <img> 标签上，那我们先来看下 <img> 标签的 alt 属性。

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：

网速太慢
src 属性中的错误
浏览器禁用图像
用户使用的是屏幕阅读器

<img> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

强烈推荐你在文档的每个图像中都使用这个属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。而且对于特殊人群来说，alt 属性通常是他们了解图像内容的唯一方式。

注释和提示：

注释：alt 属性的值是一个最多可以包含 1024 个字符的字符串，其中包括空格和标点。这个字符串必须包含在引号中。这段 alt 文本中可以包含对特殊字符的实体引用，但它不允许包含其他类别的标记，尤其是不允许有任何样式标签。

注释：当用户把鼠标移动到 img 元素上时，Internet Explorer 会显示出 alt 属性的值。这种行为并不正确。所有其他的浏览器正在向规范靠拢，只要当图像无法显示时，才会显示出替代文本。

提示：如果需要为图像创建工具提示，请使用 title 属性。

用法和语法：

用法：alt 属性只能用在 img、area 和 input 元素中（包括 applet 元素）。对于 input 元素，alt 属性意在用来替换提交按钮的图片。比如：

<input type="image" src="image.gif" alt="Submit" />

语法：
规定图像的替代文本

alt 文本的使用原则：

如果图像包含信息 - 使用 alt 描述图像
如果图像在 a 元素中 - 使用 alt 描述目标链接
如果图像仅供装饰 - 使用 alt=""