Introduction to css style sheets and multiple style priorities-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Introduction to css style sheets and multiple style priorities

王林

May 25, 2020 pm 05:41 PM

csspriority

Introduction to css style sheets and multiple style priorities

There are three ways to insert a style sheet, namely:

1. External style sheet;

2. Internal style sheet;

3. Inline style

External style sheet

When using an external style sheet, you can change the appearance of the entire site by changing one file. . Each page links to the style sheet using the tag. tag in the head (of the document):

The example is as follows:

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

The browser will read the style declaration from the file mystyle.css and format the document according to it.

External style sheets can be edited in any text editor. The file cannot contain any html tags. Style sheets should be saved with a .css extension. The following is an example of a style sheet file:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

Note: Do not leave a space between the attribute value and the unit (such as: "margin-left: 20 px"). The correct way to write it is " margin-left: 20px" .

(Video tutorial recommendation: css video tutorial)

Internal style sheet

When a single document needs special When styling, you should use an internal style sheet. You can define an internal style sheet in the head of the document using the

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline styles

If the style only needs to be applied on one element This method can be used once. (Please use with caution)

To use inline styles, you need to use the style attribute within the relevant tags. The Style property can contain any CSS property.

Here shows how to change the color and left margin of a paragraph:

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

Multiple Styles

If certain properties are specified in different style sheets With the same selector definition, the attribute values will be inherited from the more specific style sheet.

For example, the external style sheet has three properties for the h3 selector:

h3{
    color:red;    
    text-align:left;    
    font-size:8pt;
}

and the internal style sheet has two properties for the h3 selector:

h3{
    text-align:right;
    font-size:20pt;
}

If This page with an internal style sheet is linked to an external style sheet at the same time, so the style obtained by h3 is:

color:red;text-align:right;font-size:20pt;

That is Color properties will be inherited from the external style sheet, while text-alignment and font-size will be replaced by rules in the internal style sheet.

Multiple style priorities

Style sheets allow style information to be specified in multiple ways. Styles can be specified in individual HTML elements, in the header element of an HTML page, or in an external CSS file. You can even reference multiple external stylesheets within the same HTML document.

Generally, the priority is as follows:

Inline style) Inline style > (Internal style) Internal style sheet > (External style) External style sheet > Browser default style

Note: If the external style is placed after the internal style, the external style will override the internal style.

Recommended tutorial: CSS basic tutorial

The above is the detailed content of Introduction to css style sheets and multiple style priorities. 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

Weekly Platform News: Web Apps in Galaxy Store, Tappable Stories, CSS SubgridApr 14, 2025 am 11:20 AM

In this week's roundup: Firefox gains locksmith-like powers, Samsung's Galaxy Store starts supporting Progressive Web Apps, CSS Subgrid is shipping in Firefox

Weekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification PromptsApr 14, 2025 am 11:15 AM

In this week's roundup: Internet Explorer finds its way into Edge, Google Search Console touts a new speed report, and Firefox gives Facebook's notification

The Power (and Fun) of Scope with CSS Custom PropertiesApr 14, 2025 am 11:11 AM

You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set

We Are ProgrammersApr 14, 2025 am 11:04 AM

Building websites is programming. Writing HTML and CSS is programming. I am a programmer, and if you're here, reading CSS-Tricks, chances are you're a

How Do You Remove Unused CSS From a Site?Apr 14, 2025 am 10:59 AM

Here's what I'd like you to know upfront: this is a hard problem. If you've landed here because you're hoping to be pointed at a tool you can run that tells

An Introduction to the Picture-in-Picture Web APIApr 14, 2025 am 10:57 AM

Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop

Ways to Organize and Prepare Images for a Blur-Up Effect Using GatsbyApr 14, 2025 am 10:56 AM

Gatsby does a great job processing and handling images. For example, it helps you save time with image optimization because you don’t have to manually

Oh Hey, Padding Percentage is Based on the Parent Element's WidthApr 14, 2025 am 10:55 AM

I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.