Front-end learning: Study Notes (CSS section)
CSS inline style of insert mode _
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> < Body > <! - 1 ways to insert CSS code: inline form -> < div style = "height: 300px; width: 300px; background-Color: Red;" > < h1 > I DIV- No. -1 </ h1 of > </ div > < Div > < h1 > I am DIV - No. 2 </ h1 > </ div > </body> </html>
CSS style inside the insert mode _
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ height: 300px; width: 300px; background-color: red; color: yellow; } </style> </head> < Body > <-! 2 ways to insert CSS code: Internal form -> < div > < h1 > I am DIV - No. 1 </ h1 > </ div > < Div > < h1 > I am DIV - No. 2 </ h1 > </ div > </body> </html>
CSS external style of insert mode _
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/Demo1.css" /> </head> < Body > <-! 3 ways to insert CSS code: external form -> < div > < h1 > I am DIV - No. 1 </ h1 > </ div > < Div > < h1 > I am DIV - No. 2 </ h1 > </ div > </ body > </html>
Demo01.css
div{ height: 500px; width: 500px; background-color: #FFFF00; color: black; }