首页 > web前端 > html教程 > HTML 样式表

HTML 样式表

王林
发布: 2024-09-04 16:16:28
原创
1307 人浏览过

以下文章提供了 HTML 样式表的概述。 HTML 层叠样式表是一个包含规则和属性的表,告诉浏览器如何使用所有指定的样式呈现 HTML。 CSS 是我们设计任何网页的方式。 CSS 具有背景、颜色、字体、间距、边框等所有属性,我们可以为页面上的每个元素定义这些属性。

HTML 样式表还用于设置页面布局,例如页眉、页脚或任何其他元素在页面上的放置位置。 CSS 总是与 HTML 一起讨论,因为没有任何样式的页面非常苍白,没有突出显示任何标题等,并且整个页面的字体大小相同,这对用户来说根本不好看。

如何使用 HTML 样式表?

过去,样式、脚本、HTML 所有内容都写在同一个页面上。这使得页面变得非常冗长并且非常难以阅读和编辑。然后就出现了分离 HTML、样式和 Javascript 的方法。

在网页上包含 HTML 样式表的方法

我们可以通过 3 种方式包含样式:

1.内联样式

这是一种在名为 style 的属性内为 HTML 本身内的每个元素编写样式的方法。

完全不推荐这种样式方式,因为 HTML 看起来很混乱,而且我们不能遵循“一次编写,多处使用”的方法。

示例:

代码:

<h1 style=”font-size: 10px;margin-top: 10px;”>Hello World!</h1>
登录后复制

2.内部造型

这是将样式包含在样式标签中并将其放置在网页中的 HTML 之上。这种样式方式仍然比内联样式更好,因为我们可以将常见样式组合在一起,以防必须一次用于多个元素。

在开发阶段编辑HTML文件比较容易,而且我们不需要每次都打开相应的CSS文件并进行编辑。

示例:

代码:

<html>
<head>
<style>
container-block{
font-size: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class=”container-block”>Hello World!</div>
</body>
登录后复制

3.外部造型

这是为网页设置样式的最常见也是最好的方式。这与内部样式类似,但不同之处在于,样式被编写在扩展名为 .css 的单独文件中,并且对其的引用放置在网页的 head 标签中。

网页上链接 CSS 文件的语法为:

语法:

<link rel="stylesheet" type="text/css" href="theme.css">
登录后复制

样式应包含在 head 标签中,该标签位于 HTML 的 body 标签(即实际内容)之上。

内联、内部、外部样式之间的优先级是什么?

内联样式比内部样式优先,最后是外部样式。

内联>内部>外部

使用 CSS 的最佳实践:

  • CSS 可以分为多个文件,而不是一个。
  • 可以使用链接标签将单独的 CSS 文件逐一包含在 head 标签中。
  • 或者一个 CSS 文件可以有多个 import 语句来导入其余的 CSS 文件。这会在逻辑上分离CSS,但最终会得到;所有样式均从同一文件渲染。

用法: @import ‘./process.css’;

  • 可以使用选择器为任何网页元素定义样式,如 HTML 标签本身、类名、id、任何属性名称。
  • 有一些伪选择器可用,例如:
    • 之前
    • 之后
    • 第 n 个孩子
    • 第一个孩子
    • 最后一个孩子
    • 悬停
    • 访问过

这些基本上是所选元素的状态,而不是真正的确切元素。

  • 当页面中包含多个 CSS 文件时,最后一个文件具有最高优先级,并覆盖具有相同选择器的先前文件的现有样式。
  • 样式表应该在 HTML 本身之前使用,以便在页面加载时应用样式。如果包含在最后,HTML 将首先加载,然后慢慢应用样式,这会给用户带来非常糟糕的体验。

HTML 层叠样式表的各种特性

各种功能如下:

  • CSS 提供动画:以前,javascript 仅用于动画。但最新的 CSS,即 CSS3,使用属性本身提供动画。
  • 供应商前缀:在浏览器发布任何新功能的标准版本/属性名称之前,浏览器会在一段时间内为我们提供一些供应商前缀作为实验。开发者需要等待浏览器发布标准版本,在此期间,实验性功能可以与供应商前缀一起使用。
  • CSS 转换:转换用于在给定持续时间内逐渐从属性的另一个值转到一个值。

示例:

Code:

-webkit-transition: width 2s, height 4s;

  • CSS Transforms: Transforms in CSS allow you to translate, rotate, scale and skew elements.

Media Queries

Mobile, Desktops, iPads behave differently; however, we cannot style the pages in the same way. Previous web standards have been designed in such a way that we had different CSS for every type of device.

With the progress of web standards and the way the web is built, browsers are developed to have a single CSS that can be used for any type of device. To change the styles for devices based on width and height, media queries are used with which we can specify the min or max-width of the device and write styles within it.

Example:

Code:

@media screen and (max-width: 767px){
container{
width: 60%;
padding: 20px;
}
}
登录后复制

Styles are definitely a boon for the web. And as web development has increased exponentially in recent times, CSS3 has definitely gained a lot of demand to make the pages extremely interactive and intuitive.

以上是HTML 样式表的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板