A summary of detailed insights on how to import CSS
|
The development history of CSS will not be introduced here. One of the reasons for writing a blog is that I want to help those partners who are new to the front-end and like to struggle like me. I hope that the posts I write can be of some help to my partners; the second reason is that these posts can also be regarded as a summary of my own knowledge. There is no specific order to follow now, but starting with CSS, try to write in order. 1. CSS Initial Concept: CSS is called cascading style sheets or cascading style sheets. Styles define how an HTML element is displayed. Styles are usually stored in style sheets. Function: CSS is based on HTML, provides rich functions, and can also set different styles for different browsers. CSS is mainly used to set the text content (font, size, alignment, etc.) in HTML pages, the appearance of pictures (width and height, border style, margins, etc.), and the layout and appearance display style of the page. 2. CSS Syntax CSS syntax consists of two main parts: a selector, and one or more declarations. Each declaration consists of an attribute and an attribute value. Simply put, a style syntax consists of three parts: selector, attribute, and attribute value. For example:
Selector: The selector tells the browser which objects in the page the style will apply to. These objects can be a certain tag, all web page objects, specified Class or ID values, etc. When the browser parses this style, it renders the display result of the object according to the selector. That is to say, the selector is usually the HTML element you want to change the style of, and the selector is a way to select the tag you want to set the style of. Only after selecting this tag can you set the CSS style for it. Declaration: A declaration can be one or more, which tells the browser how to render the object specified by the selector. A declaration consists of attributes and attribute values, and a semicolon is used to mark the end of a declaration. In a style, the semicolon can be omitted for the last declaration. All declarations are placed in a pair of curly braces, which follow the selector. Now that we know what CSS is used for and that the CSS syntax consists of several parts, the question is, how do we use CSS and where do we write CSS styles? The next thing to talk about is where to write CSS. 3. How to introduce CSS There are three ways to introduce CSS styles into HTML: inline style sheets, internal style sheets, and external style sheets. 3.1 Inline Style Sheets Inline style sheets are also called inline style sheets or inline style sheets. Inline style sheets place CSS code and HTML code in the same file. If you want to use inline styles, you need to use the style attribute in the relevant tag. The Style property can contain any CSS properties. Syntax: <tag name style="attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3; ">content</tag name> For example:
<!DOCTYPE html>
<html>
<head>
<title>Inline Style Sheet</title>
</head>
<body>
<h1 style="color:red;">I am an inline style sheet, you can also call me an inline style sheet or an inline style sheet</h1>
</body>
</html>As can be seen from the above code, we added a style attribute to the <h1> tag, and the CSS attribute set for the style attribute is the color attribute, and the attribute value is red. The display effect is as follows:
Inline style sheets are convenient to use and easy to understand. In fact, any HTML tag has a style attribute, which is used to set the inline style . The following points should be noted when using inline: (1). Style is actually an attribute of the tag; (2) Use ";" between style attributes and attribute values, which is the semicolon in English. (3) Multiple attribute values are separated by semicolons ";" in English. (4) The inline style can only control the current tag and the subtags nested in it, which can easily cause code redundancy. Inline styles are defined within a single tag. For websites, there are a lot of redundant codes, and because of the large amount of redundant codes, every time the CSS style is changed, it must be modified in the specific tag, which makes the maintainability of the website very poor. Furthermore, inline style does not separate style from structure. 3.2. Internal Style Sheets An internal style sheet is also called an embedded style sheet. It is a CSS code written in the head tag of an HTML document and defined with a style tag. grammar:
<!DOCTYPE html>
<html>
<head>
<title>Internal Style Sheet</title>
<style>
selector{
Attribute 1: attribute value 1;
Attribute 2: attribute value 2;
}
</style>
</head>
<body>
</body>
</html>For example:
<!DOCTYPE html>
<html>
<head>
<title>Internal Style Sheet</title>
<style>
p{
color:pink;
}
</style>
</head>
<body>
<p>I am an internal style sheet, also called an embedded style sheet</p>
</body>
</html>As can be seen from the above code, the internal style sheet is used for the p tag, and the font color added is pink. The display effect is as follows:
It should be noted that in the internal style sheet, the style tag has a type attribute, whose value is text/css, that is: type="text/css", which can be omitted in HTML5. There are two disadvantages to using internal style sheets: the first is that the internal style sheet can only control the current page; the second is that the internal style sheet does not separate structure and style. 3.3. External Style Sheets External style sheets are also called linked or externally linked. The so-called external style sheet is to put the CSS code and HTML code separately in different files, and then use the link tag or @import in the HTML document to reference the CSS style sheet. The file extension of an external style sheet is .css and the file cannot contain any html tags. There are two cases for introducing external style sheets: The first case is placed in the link tag inside the head tag. The syntax is: <head><link rel="stylesheet" type="text/css" href="1.css"></head> For example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--Reference the css file named index in the HTML page-->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div></div>
</body>
</html>The second case is to place it in the style tag within the head tag or write it directly into the style sheet. The syntax is:
<style>
@import 1.css;
@import '1.css';
@import "1.css";
@import url(1.css);
@import url('1.css);
@import url("1.css");
</style>Note: There are 6 forms of "1.css" in the above syntax, which means there are 6 ways to use the @import command to import external style sheets. For example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
@import url("index.css");
</style>
</head>
<body>
<div></div>
</body>
</html>You may be confused about whether to use the link tag or @import to introduce external style sheets. The difference between the link tag and @import is as follows: Difference 1: In terms of subordinate relationships, the link tag is an HTML tag that can do many other things besides loading CSS files, such as defining RSS, defining rel connection attributes, etc.; while @import is a method provided by CSS and can only be used to load CSS files. Difference 2: In terms of loading order, when the page is loaded, the CSS file introduced by the link tag is loaded at the same time; while the CSS introduced by @import will be loaded after the page is loaded. Difference 3: In terms of compatibility, the link tag is an HTML tag and does not have any compatibility issues; while @import is a syntax provided by CSS2.1 and is not supported by browsers before IE5. Difference 4: In terms of DOM controllability, when you use JavaScript to control the DOM to change the style, you can only use the link tag and cannot use the @import method. Difference 5: In terms of weight, the styles introduced by link are more important than those introduced by @import. (PS: The knowledge related to weights will not be explained in detail here, and will be explained in detail later) The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Don't forget to close the HTML tag
>>: Comparison of the usage of EXISTS and IN in MySQL
Recommend
About the difference between js typeof and instanceof in judging data types and their development and use
Table of contents 1. typeof operator 2. instanceo...
Practical TypeScript tips you may not know
Table of contents Preface Function Overloading Ma...
Vue.$set failure pitfall discovery and solution
I accidentally found that Vue.$set was invalid in...
Linux uses iftop to monitor network card traffic in real time
Linux uses iftop to monitor the traffic of the ne...
HTML table tag tutorial (17): table title vertical alignment attribute VALIGN
The table caption can be placed above or below th...
Let's talk in depth about the principle and implementation of new in JS
Table of contents definition Constructor bodies a...
MySQL 5.7.21 winx64 installation and configuration method graphic tutorial
This article summarizes the notes for installing ...
Introduction to Vue3 Composition API
Table of contents Overview Example Why is it need...
MySQL 8.0.18 Installation Configuration Optimization Tutorial
Mysql installation, configuration, and optimizati...
In-depth understanding of Worker threads in Node.js
Table of contents Overview The history of CPU-bou...
Summary of Vue 3 custom directive development
What is a directive? Both Angular and Vue have th...
Solution to Element-ui upload file upload restriction
question Adding the type of uploaded file in acce...
jQuery implements a simple carousel effect
Hello everyone, today I will share with you the i...
The difference between the name and id of the a tag's target pointing to the iframe
Copy code The code is as follows: <iframe id=&...
Html page supports dark mode implementation
Since 2019, both Android and IOS platforms have s...