行内标签:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><!----><body style="background-color: red;"><!--行内样式--> <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div> <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div> <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div> <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div> <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div> <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div> <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div> <p style="font-size: 40px; color: yellow;">旭宝爱吃鱼</p> <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div> <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div> <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div> <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div></body></html>
图片
业内标签:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <!-- css遵循一个规律: 1.就近原则 2.叠加原则 --> <style> div{ color: purple; font-size: 40px; background-color: yellowgreen; } p{ color: deeppink; font-size: 50px; } </style> <link href="css/index.css" rel="stylesheet"></head><body> <div style="color: hotpink; background-color: red;">旭宝爱吃鱼</div> <div>旭宝爱吃鱼</div> <div>旭宝爱吃鱼</div> <div>旭宝爱吃鱼</div> <div>旭宝爱吃鱼</div> <p>旭宝爱吃鱼</p> <p>旭宝爱吃鱼</p> <p>旭宝爱吃鱼</p> <p>旭宝爱吃鱼</p></body></html>图片:
外部样式:
div{ color: brown; font-size: 50px;}p{ background-color: yellow; color: darkgreen; font-size: 39px;}图片:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/index.css"></head><body> <div>旭宝爱吃鱼</div> <p>旭宝爱吃鱼</p></body></html>
图片:
原标题：CSS 行内样式 页内样式 外部样式
关键词：CSS
我知道了 