Home >Web Front-end >CSS Tutorial >Detailed explanation of how to use CSS inline styles, embedded styles and external reference styles
Detailed explanation of how to use CSS inline styles, embedded styles and external reference styles
- 王林forward
- 2020-03-21 11:01:543504browse
A simple example of how to use the three methods is as follows:
Inline style:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>css行内样式</title> </head> <body> <div style="width:100px;height:100px;background:red;"></div>> </body> </html>
(Recommended tutorial: CSS tutorial )
Inline style:
<!!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
</head>
<body>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
<div id="div"></div>>
</body>
</html>External style:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>css内嵌样式</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;}Summary:
Inline style: The code is written within an element in a specific web page; for example: 69488b5ef9e0d45b3c24d1c2c63b861416b28748ea4df4d9c2150843fecfba68
Inline style: It is within < ;/head>Write in front; for example: 080b747a20f9163200dd0a7d304ba388.div{color:#F00}531ac245ce3e4fe3d50054a55f265927
External style: refers to an external css file; for example ：035edf72ed074421fd586ae87126add1
Related video tutorial recommendations: css video tutorial
The above is the detailed content of Detailed explanation of how to use CSS inline styles, embedded styles and external reference styles. For more information, please follow other related articles on the PHP Chinese website!