Three ways to use CSS inline styles, embedded styles, and external reference styles
|
A simple example of how to use the three methods is as follows: Inline styles: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>css inline style</title> </head> <body> <div style="width:100px;height:100px;background:red;"></div>> </body> </html> Inline styles:
<!!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css embedded style</title>
</head>
<body>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
<div id="div"></div>>
</body>
</html>
External type: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>css embedded style</title> <link rel="stylesheet" type="text/css" href="ccss.css"> </head> <body> <div id="div"></div>> </body> </html> css file
#div{width:100px;height:100px;background:red;}
In short: Inline style: the code is written in an element on a specific web page; for example: <div style="color:#f00"></div> Inline: just write it before </head>; for example: <style type="text/css">.div{color:#F00}</style> External style: refers to an external CSS file; for example: <link href="css.css" type="text/css" rel="stylesheet" /> 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. |
<<: Detailed tutorial on installing CentOS, JDK and Hadoop on VirtualBox
>>: Newbies quickly learn the steps to create website icons
Recommend
Detailed explanation of writing multiple conditions of CSS: not
The :not pseudo-class selector can filter element...
Web designers also need to learn web coding
Often, after a web design is completed, the desig...
How to add file prefixes in batches in Linux
You need to add "gt_" in front of the f...
Implementation code for using CSS text-emphasis to emphasize text
1. Introduction In the past, if you wanted to emp...
How to upgrade all Python libraries in Ubuntu 18.04 at once
What is pip pip is a Python package management to...
Win10 + Ubuntu 16.04 dual system perfect installation tutorial [detailed]
Be sure to remember to back up your data, it is p...
Summary of common commands for Ubuntu servers
Most of the commands below need to be entered in ...
Specific use of MySQL window functions
Table of contents 1. What is a window function? 1...
Example code showing common graphic effects in CSS styles
Let me briefly describe some common basic graphic...
Understanding innerHTML
<br />Related articles: innerHTML HTML DOM i...
Html makes a simple and beautiful login page
Let’s take a look first. HTML source code: XML/HT...
Personalized and creative website design examples (30)
Therefore, we made a selection of 30 combinations ...
How to implement gzip compression in nginx to improve website speed
Table of contents Why use gzip compression? nginx...
Div adaptive height automatically fills the remaining height
Scenario 1: Html: <div class="outer"...
Modify the jvm encoding problem when Tomcat is running
question: Recently, garbled data appeared when de...