前端学习:学习笔记(CSS部分)
CSS的插入方式_内嵌样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 插入CSS代码的第1种方式: 内嵌形式 --> <div style="height: 300px;width: 300px;background-color: red;"> <h1>我是DIV--1号</h1> </div> <div> <h1>我是DIV--2号</h1> </div> </body> </html>
CSS的插入方式_内部样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ height: 300px; width: 300px; background-color: red; color: yellow; } </style> </head> <body> <!-- 插入CSS代码的第2种方式: 内部形式 --> <div> <h1>我是DIV--1号</h1> </div> <div> <h1>我是DIV--2号</h1> </div> </body> </html>
CSS的插入方式_外部样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/Demo1.css" /> </head> <body> <!-- 插入CSS代码的第3种方式: 外部形式 --> <div> <h1>我是DIV--1号</h1> </div> <div> <h1>我是DIV--2号</h1> </div> </body> </html>
Demo01.css
div{ height: 500px; width: 500px; background-color: #FFFF00; color: black; }