Home >Web Front-end >CSS Tutorial >css folding style (1) - three ways to use css style
1. The declaration tag of css tells the browser what form it should use to parse you, usually: Because html5 supports downward compatibility, see the details Pictured above.
2. How to use css style:
(1) Internal link style sheet:
demo.html
<!DOCTYPE html> <html> <head> <title>内链样式使用</title> <meta charset="utf-8"> </head> <body style="background-color:green; margin:0; padding:0;"> <h1>内链样式使用</h1> <div style="background-color:red;font-size:20px;"> 内链样式使用 <div> </body> </html>
(2) Embedded style sheet:
demo .html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>嵌入式样式</title> <style type="text/css"> <!--HTML标记定义 --> body{ background:yellow;font-size:20px } div{ background:red;font-size:40px } </style> </head> <body> <h1>嵌入式样式</h1> <div>嵌入式样式</div> </body> </html>
(2) Introduced style sheet:
demo.htnl
<!DOCTYPE html> <html> <head> <title>引入式样式</title> <meta charset="utf-8"> <!--style.css就是指定的样式,href为指定路径作用--> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>引入式样式</h1> <a href="http://www.baidu.com" target="_blank">百度</a> <br> <p>引入式样式</p> <div>css的html选择器</div> </body> </html>
style.css
/* HTML样式定义 */ body{ background-color:yellow; color:#fff } div{ background:red;font-size:20px }
The above is the css folding style (1 ) - Contents on three ways to use css styles. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!