What are the ways to introduce styles in CSS?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What are the ways to introduce styles in CSS?

清浅

Nov 17, 2018 pm 04:26 PM

css style

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

(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

So Many Color LinksApr 13, 2025 am 11:36 AM

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AM

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AM

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AM

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AM

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

Domain-Driven Design With ReactApr 13, 2025 am 11:22 AM

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Detecting Inactive UsersApr 13, 2025 am 11:08 AM

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also

See all articles