Home > Article > Web Front-end > What are the ways to introduce styles in CSS?

What are the ways to introduce styles in CSS?

清浅Original: 2018-11-17 16:26:396413browse

This article will share how to introduce CSS style sheets and the advantages and disadvantages between them. It has certain reference value and I hope it will be helpful to everyone.

Style sheets can be introduced into CSS through three methods:

(1) Inline style

(2) Embedded style

(3) External styles

Each of these CSS styles has their advantages and disadvantages. Next, we will introduce them to you in detail

Inline styles

Features: (1) Inline styles are placed in HTML elements in the code.

(2) When using inline styles, the style will only affect the elements you select.

(3) Inline style has no selector

Example:

<div style="width:100px;height:100px;border:1px solid #ccc"><div>

This CSS inline style can only be changed The width and height of this div, it will not change the style of any divs or attributes on the page. This is one of the limitations of inline styles. This is not a best practice since they only make changes to specific elements, inline styles are also very specific. This makes it difficult to override them with other non-inline styles, and in fact, we rarely use inline styles on web pages.

Embedded styles

Features: (1) Web pages written by placing style tags 687c2c06e5a4995392a66a2c50c231d2 e90442d4aba9b6409c93259f982d1eec in the head part.

(2) The style written will only be used for the web page where you use it.

(3) Embedded styles are also called "internal styles"

Example

<！DOCTYPE html>
<html>
<head>
<meta content =“text / html; charset = utf-8”/>
<title> Document </title>
<style>
div{
width:100px;
height:100px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Embedded styles are styles embedded in the header of the document. Embedded styles only affect the markup on the page on which they are embedded. Again, this approach negates one of the advantages of CSS. Since every page has styles, if you want to make a site-wide change, such as changing a link color from red to green, you need to make this change on every page since every page uses an embedded style sheet. This is better than inline styles, but still problematic in many cases.

External style sheet

Features: (1) Written in a separate document and then attached to various Web documents

(2) Modification It can affect all pages you call

(3) Convenient modification operations

Example

<link href=“demo.css”rel=“stylesheet”type=“text/css>
在demo文件下写css样式

Most websites today use external style sheets, and external styles are in separate Styles are written in the document and then appended to various web documents. External style sheets affect any files they are connected to, meaning if you have a 20 page website and every page uses the same style sheet, when changes need to be made you can simply edit the style sheet to complete those pages. Makes long-term site management easier. The disadvantage of external style sheets is that they require the page to obtain and load these external files. Not every page will use every style in the CSS table, so many will load a much larger CSS page than is actually needed.

Summary: The above is the introduction of this article to the introduction of style sheets in CSS. I hope that through this article, everyone can understand CSS styles.

The above is the detailed content of What are the ways to introduce styles in CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use display in cssNext article：How to use display in css

See more

What are the ways to introduce styles in CSS?

Related articles