Home > Developer > Web Develop
Note: This site is mainly excerpted from the MDN Web Developer.
How does CSS actually work?When a browser displays a document, it must combine the contents of the document with its style information. It processes documents in two stages:
There are three different ways to apply CSS to HTML documents in a common way, some of which are more useful than others. Here, we will briefly review each of the ways:
External style sheet (recommended)You've seen an external style sheet in this article, but you don't know its name. An external style sheet is when you save your CSS in a separate file with a. css extension and reference it from the elements of the HTML. <link>
<link rel="stylesheet" href="style.css">
The elements in the HTML specify the relationship of the external resource to the current document.
The purpose of this element includes defining a relational framework for navigation. This element is often used to link style sheets (such as CSS files).
The HTML file looks like this at this point:
<! DOCTYPE html> <HTML> <meta charset= "Utf-8" span class= "kw" >> <TITLE> My CSS experiment</title>< /span> <link rel= "stylesheet" href= "style.css" > </ Head> <BODY> <H1> Hello world! </H1> <P> This is my first CSS example</P> </BODY> </HTML>
And the following CSS file
{ color:blue; background-color:yellow; border:1pxsolidblack;}{ color:red;}
This approach is best, because you can use a stylesheet to style multiple documents, and update the CSS whenever you need to update it in one place.
Another: external style sheet-importedAnd link is a little different, using an @import url external style sheet.
Internal style sheet<style type="text/css"> @import url(‘./index.css‘);</style>
An internal style sheet is one that does not use an external CSS file, but instead places your CSS in an <style> element (the HTML <style> element contains the style information of the document or part of the document, and the style information for the tag is usually in CSS format.) The element is contained HTML head within.
At this point the HTML looks like this:
<! DOCTYPEHtml> <metacharset="Utf-8"> <title>My CSS Experiment</title> <style>H1{ Color: Blue; Background-color: Yellow; border: 1px Solid Black; }P{ Color: Red; } </style> <body> Hello world! <p>This is my first CSS example</p> </body>This is useful in some cases (perhaps you're using a content management system that doesn't directly modify the CSS file), but it's not as efficient as an external stylesheet-in a Web site, the CSS will need to be repeated on each page and change multiple locations when it needs to be updated.
inline styleInline styles are CSS declarations that affect only one element, and are style included by attributes:
<! DOCTYPE html> <HTML> <meta charset= "Utf-8" span class= "kw" >> <TITLE> My CSS experiment</title>< /span> </HEAD> <BODY>
Span class= "OT" > style= > Hello world! </H1> <p style= "color:red;" > This is my first CSS example</P> </BODY> </HTML>
Don't do this unless it's necessary! This is difficult to maintain (you may have to update the same information multiple times in each document), and it mixes CSS-style information and HTML structure information to make CSS difficult to read and understand. Keeping the separation and purity of different types of code makes it easier for anyone working with that code.
The only thing you may need to use inline style is when your working environment is really very limited (perhaps your CMS only allows you to edit the body of the HTML).
SummarizeThere are three ways to introduce CSS in HTML:
style<style>link )@import url )End
2018-05-30
CSS Learning Summary-Introducing styles
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
