以下文章提供了 HTML 样式表的概述。 HTML 层叠样式表是一个包含规则和属性的表,告诉浏览器如何使用所有指定的样式呈现 HTML。 CSS 是我们设计任何网页的方式。 CSS 具有背景、颜色、字体、间距、边框等所有属性,我们可以为页面上的每个元素定义这些属性。
HTML 样式表还用于设置页面布局,例如页眉、页脚或任何其他元素在页面上的放置位置。 CSS 总是与 HTML 一起讨论,因为没有任何样式的页面非常苍白,没有突出显示任何标题等,并且整个页面的字体大小相同,这对用户来说根本不好看。
过去,样式、脚本、HTML 所有内容都写在同一个页面上。这使得页面变得非常冗长并且非常难以阅读和编辑。然后就出现了分离 HTML、样式和 Javascript 的方法。
我们可以通过 3 种方式包含样式:
这是一种在名为 style 的属性内为 HTML 本身内的每个元素编写样式的方法。
完全不推荐这种样式方式,因为 HTML 看起来很混乱,而且我们不能遵循“一次编写,多处使用”的方法。
示例:
代码:
<h1 style=”font-size: 10px;margin-top: 10px;”>Hello World!</h1>
这是将样式包含在样式标签中并将其放置在网页中的 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>
这是为网页设置样式的最常见也是最好的方式。这与内部样式类似,但不同之处在于,样式被编写在扩展名为 .css 的单独文件中,并且对其的引用放置在网页的 head 标签中。
网页上链接 CSS 文件的语法为:
语法:
<link rel="stylesheet" type="text/css" href="theme.css">
样式应包含在 head 标签中,该标签位于 HTML 的 body 标签(即实际内容)之上。
内联样式比内部样式优先,最后是外部样式。
内联>内部>外部
使用 CSS 的最佳实践:
用法: @import ‘./process.css’;
这些基本上是所选元素的状态,而不是真正的确切元素。
各种功能如下:
示例:
Code:
-webkit-transition: width 2s, height 4s;
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中文网其他相关文章!