作为前端开发人员,您应该熟悉 css 伪元素,包括它们的功能以及各种表示和结构应用。基本的 css 选择器及其众多属性使用起来很有趣,但了解伪类和伪元素是成为 css 专家的下一步。
除了css伪元素之外,还有一些html元素通常被称为假元素。 css 有时使用它来轻松处理并允许开发人员在网页中创建自定义元素。然而,它们没有标准化,因此不能在全球范围内使用。
在本文中,我们将讨论为什么 css 可以与假元素一起使用?本文首先解释什么是假元素、我们为什么使用它们、它们如何工作以及假元素的许多其他基本方面。
什么是假元素?未在 html 文档中定义的 html 元素称为假元素。制造假元件是可行的。您可以为元素指定任何您选择的名称,但不建议这样做。 html 使开发人员能够在网页中使用自定义元素。该元素将在您的页面中顺利运行。
示例
查看以下示例以了解如何在 html 文档中使用 fake 元素。
<!doctype html><html><head> <title> fake elements </title> <style> *{ background-color: grey; margin: 5px; letter-spacing: 1px; } .para{ font-family: cursive; } </style></head><body> <section> <heading> programming languages </heading> <p class= para> to communicate with computers, programmers (developers) use a programming language, which is a computer language. it is a set of instructions written in a specific language (such as c, c++, java, or python), built to do a certain task. </p> <example> some of the most popular programming languages are: </example> <br> <p> <ol> <li> <h1> c/c++ </h1> </li> <li> <h1> java </h1> </li> <li id= demo> <h1> python </h1> </li> <li> <h1> javascript </h1> </li> <li> <h1> php </h1> </li> </ol> </p> </section></body></html>
正如我们在上面的示例中看到的,我们使用了自己的元素,例如 和 。代码执行顺利,文字显示出来。然而,我们必须根据它们来设计它们的样式。例如,如果我们使用 html 识别元素 (h1) 而不是 ,文本将自动具有更大的字体大小。要对假元素执行此操作,我们必须使用 css 指定字体大小。
示例在此示例中,我们已向伪元素 和 声明了某些 css 属性。
<!doctype html><html><head> <title> fake elements </title> <style> *{ background-color: yellow; margin: 5px; letter-spacing: 1px; } heading{ color: black; text-decoration: underline; text-shadow: 4px 4px 4px grey; font-size: 28px; } .para{ font-family: cursive; } example{ color: red; font-weight: 900; } </style></head><body> <section> <heading> <h1 class= head> programming languages </h1> </heading> <p class= para> programmers (developers) utilise a programming language, which is a computer language, to communicate with computers. it is a set of guidelines created in any particular language (c, c++, java, python), developed to carry out a certain task. </p> <example> some of the most popular programming languages are: </example> <br> <p> <ol> <li> <h1> c/c++ </h1> </li> <li> <h1> java </h1> </li> <li id= demo> <h1> python </h1> </li> <li> <h1> javascript </h1> </li> <li> <h1> php </h1> </li> </ol> </p> </section></body></html>
我们已向假元素添加了 css 样式。代码执行顺利,样式没有问题。问题是这些假元素如何在 html 文档中工作。
答案是:随着 html 功能的日益进步,大多数现代浏览器已经与其功能中的许多更改或添加兼容。因此,无法识别的元素会被直接解析到 dom 树中。然而,它们不具有任何功能或特殊性。
为什么我们不应该使用假元素?虽然假元素在网页中可以正常工作,但强烈建议不要在 html 文档中使用假元素。以下是我们不应该使用假元素的一些原因 -
html 规范不支持和识别这些虚假元素。
这些元素没有指定的功能。就像 中的文本具有预定义的字体大小一样,假元素无法访问此类功能。
它们可能会阻碍未来标准元素(如果已开发)的功能,这些元素与假元素同名。
随着 html 版本的快速修改,dom 中可能存在最适合该特定功能的特定标准元素。
这些标签可能会在不同浏览器中出现兼容性问题。此外,浏览器渲染标准元素的速度更快。这样,您的网页就会顺利运行。
标准 html 元素提供各种优势,例如 seo(搜索引擎优化)和速度。它们是 google 等流行浏览器的首选。
使用虚假元素表明缺乏专业精神(对于某些开发人员而言)。标准元件易于维护。此外,它还允许进一步修改(如果需要)。
使用标准 html 元素将使调试更加容易。这是因为调试工具可以轻松访问标准元素。
结论可以在 html 文档中创建您自己的元素。然而,它们没有任何附加的语义或功能。此外,这些元素无法被所有开发人员全局理解或使用。因此,最好使用标准 html 元素,这比假元素具有多种优势。
以上就是为什么 css 可以使用假元素?的详细内容。