Introduction to CSS style introduction methods and their advantages and disadvantages
|
Three ways to introduce CSS 1. Inline styles Advantages: easy to write, high weight Disadvantages: no separation of structure and style
2. Internal Style Advantages: Structural pattern phase separation Disadvantages: Incomplete separation
<style>
div {
color: violet;
font-size: 16px;
}
</style>3. External Style Advantages: Complete separation of structure and style Disadvantages: Need to introduce
<!-- Import css initialization file-->
<link rel="stylesheet" href="css/normalize.css" />
<!-- Import public styles -->
<link rel="stylesheet" href="css/baes.css">
<!-- Import home page style-->
<link rel="stylesheet" href="css/index.css">Supplement: Four ways to introduce CSS styles Prepare 1. First prepare an HTML file: test.html. It is not recommended to use Notepad to create files. It is recommended to use Notepad++ to create and edit files. Note that the encoding format is: UTF-8 without BOM format, otherwise Chinese garbled characters will appear. The content is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Four ways to introduce CSS styles</title>
<style type="text/css">
</style>
</head>
<body>
hello
</body>
</html>2. Save the file to the desktop, right-click and select Google Chrome (or other browsers to open it), and you will find the English letters "hello" appear on the page.
Four ways to introduce Inline This is achieved through the HTML attribute style, as shown below //Write in the body tag <span style="color:red;">Inline style</span> Embedded Write the CSS style in the style tag and reference it in the body
//css style written in the style tag p{
color:blue;
}
-----------------------------------------------------------------
//Write in the body tag <p>Embedded</p>Link 1. Generally, this method is used to create a new CSS file on the desktop: test.css, with a CSS style
//Write in the test.css filediv{
color:yellow;
}
2. Import the test.css file into test.html //Write in the head tag to introduce the css file, the href attribute is the absolute path, currently in the same directory <link href="test.css" type="text/css" rel="stylesheet" /> ------------------------------------------------------------------------ //Write in the body tag <div> link style</div> Import
1. Basically not used, because the page will load HTML first, and then load CSS, which will cause a delay in page style. 2. Create a demo.css file and write a CSS style
//Write in the demo.css file h2{
color:green;
}3. Use @import to import the demo.css file //After some testing, it needs to be written in a style separately. <style> @import url(demo.css) </style> ---------------------------------------------------------------------------- //Write in the body tag <h2>Important</h2> HTML page code
Page renderings
Display priority of the first three styles Proximity principle, i.e. in-line > embedded > embedded Summarize This is the end of this article about the introduction of CSS styles and its advantages and disadvantages. For more relevant content on the introduction of CSS styles and its advantages and disadvantages, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: A brief analysis of the difference between and and where in MySQL connection query
>>: Talk about how to identify HTML escape characters through code
Recommend
MySQL Basics Quick Start Knowledge Summary (with Mind Map)
Table of contents Preface 1. Basic knowledge of d...
A brief discussion on the display modes of HTML tags (block-level tags, inline tags, inline block tags)
During today's lecture, I talked about the di...
Example code for implementing background transparency and opaque text with CSS3
Recently, I encountered a requirement to display ...
How to use Vuex's auxiliary functions
Table of contents mapState mapGetters mapMutation...
Comprehensive understanding of HTML basic structure
Introduction to HTML HyperText Markup Language: H...
Web Design: Web Music Implementation Techniques
<br />When inserting music into a web page, ...
js converts a multidimensional array into a one-dimensional array and then reorders it
Table of contents Let's talk about flattening...
Elements of user experience or elements of web design
System and user environment design <br />Th...
How to implement JavaScript's new operator yourself
Table of contents Constructor new Operator Implem...
Detailed explanation of Linux host name modification command
Linux change hostname command 1. If you only need...
Summary of some reasons why crontab scheduled tasks are not executed
Preface I recently encountered some problems at w...
Detailed explanation of component development of Vue drop-down menu
This article example shares the specific code for...
Detailed explanation of the role of overflow:hidden (overflow hiding, clearing floats, solving margin collapse)
1. overflow:hidden overflow hidden If overflow:hi...
Forty-nine JavaScript tips and tricks
Table of contents 1. Operation of js integer 2. R...
Implementation of removing overlapping time and calculating time difference in MySQL
Table of contents need: drive: Ideas: accomplish:...