Priority: external style < internal style sheet < inline style sheet;
Priority, that is: the selector on the right of the same name will overwrite the left
1. Internal style sheets
< head > < style > /* Internal style sheet, generally used to override public styles */ #headTip { color : 0xff5 ; } </ style > </ head >
2. Use the link tag to declare the use of external resources in the document, which is the most common way.
The css external style sheet specifies the encoding @CHARSET="utf-8"; needs to be placed on the first line.
<head> <link href="./my-common.css" rel="stylesheet" media="screen" type="text/css"/> </head>
3. @ method, introduce css, note that this is loaded asynchronously, and it will be loaded after the entire html is loaded, which will cause the page to flicker. Not recommended.
<head> <style> @import 'my-common.css'; </style> </head>
4. Inline style sheets have the highest priority and the most straightforward, but cannot be reused and are not easy to maintain.
<body> <input type="text" style="color:0x550;font-size:30px;"/> </body>