CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 2--> <style> #i1{ background-color: #0d8ddb; width: 100px; height: 100px; } </style> <!-- 3--> <link rel="stylesheet" href="2_demo.css"> </head> <body> <!-- 增加css属性三种方式 1.直接在div标签中写 2.在<head></head>中写style标签，通过id选择器创建一个关系，通过'#'定位id 3.在css文件2_demo.css中写样式表,通过在head中的link标签引入到当前的html中 4.备注：id属性在一对<html></html>中只能出现一次 <div>标签中的style属性优先级最高，其余优先级由高至低是取决于离<div>标签的远近 展示4的效果需要注释<body>中的1，2，3 css文件中同样需要注释一下--> <!-- 1--> <div style="background-color: #c6ffc6;width: 100px;height: 100px">第一种方式背景色</div> <!-- 4--> <!-- <div id="i1" style="background-color: #c6ffc6;width: 100px;height: 100px">第一种方式背景色</div>--> <!-- 2--> <div id="i1">第二种方式背景色</div> <!-- 3--> <div id="i2">第三种方式背景色</div> </body> </html>
选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*1*/ #i1{ background-color: rebeccapurple; width: 100px; height: 100px; } /*2*/ .c1{ background-color: rosybrown; width: 100px; height: 100px; } /*3*/ .c2{ width: 100px; height: 100px; } .i2{ background-color: yellow; } .i3{ background-color: green; } /*4*/ div{ background-color: #c6ffc6; } /*5*/ div span{ background-color: red; } /*6*/ div[mh='strive']{ background-color: blue; width: 100px; height: 100px; } </style> </head> <body> <!-- 1--><!-- 通过id选择器(不允许重复，唯一，一对html标签中只允许有一个id选择器)定位div标签--> <div id="i1">通过class选择器</div> <!-- 2--><!-- 通过class(可重复，可共用)选择器定位div标签--> <div class="c1">通过class选择器</div> <div class="c1">通过class选择器</div> <!-- 3--><!--不同颜色相同宽高的class重复，id唯一,class选择器属性允许多个，用空格分割--> <div class="c2 i2">通过class1选择器</div> <div class="c2 i3">通过class1选择器</div> <!-- 4标签选择器 div没有宽，高，内容 在浏览器中显示就是一个点 肉眼看不见,所有的标签都是红色--> <div class="c2">123</div> <!-- 5层级选择器 用的较少--> <div class="c2"> <span> 层级选择器 </span> </div> <!-- 6属性选择器(自定义的)--> <div mh="strive">自定义的</div> </body> </html>