简单的CSS文件
<style type="text/css"> a{ color:rebeccapurple; font-size: larger; font-weight: 900; } p{ background-color: gold; font-size: larger; font-weight: 900; } </style>
CSS的四种引用方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--内嵌式--> <!--<style>--> <!--p {--> <!--background-color: blue;--> <!--}--> <!--</style>--> <!--导入式--> <!--<style>--> <!--@import "index.css";--> <!--</style>--> <!--链接式--> <link rel="stylesheet" href="index.css"> </head> <body> <!--行内式--> <div style="color:red;background-color: aqua">HELLO</div> <p>HELLO WORLD</p> </body> </html>
选择器
基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器*/ p{ background-color: rebeccapurple; } /*id选择器*/ #p2{ background-color: rebeccapurple; } /*class选择器*/ .p_ele{ color: gold; } /*通用选择器*/ *{ background-color: green; } </style> </head> <body> <p class="p_ele">PPP1</p> <p id="p2">PPP</p> <p class="p_ele">PPP3</p> <div>DIV</div> <span>SPAN</span> </body> </html>
组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ .inner p{ color: red; } .outer p{ color: red; } /*子代选择器*/ .outer > p{ color: red; } /*多元素选择器*/ .inner p,.p4{ color: red; } /*毗邻选择器 */ .outer + p{ background-color: red; } /*兄弟选择器*/ .outer ~ p{ color: red; } ul.item li{ color: red; } div.c1{ color: red; } </style> </head> <body> <div class="c1">c1</div> <div class="outer"> <p>P1</p> <div class="inner"> <p>P3</p> </div> <p>P2</p> <a href="">click</a> </div> <a href="">aaa</a> <p>P5</p> <p class="p4">P4</p> <ul class="item"> <li>11</li> <li>11</li> <li>11</li> <li>11</li> </ul> <ol class="item"> <li>222</li> <li>222</li> <li>222</li> <li>222</li> </ol> <ul> <li>222</li> <li>222</li> <li>222</li> <li>222</li> </ul> </body> </html>