CSS_v2
/* 时间：2021/12/07 功能：CSS 目录: 一: 引入 二: 选择器 1 标签 2 类 3 层级 4 id 5 组 6 伪类 三: 属性 1 布局 2 文本 四: 元素溢出 五: 显示特性 六: 盒子模型 */
一: 引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 内嵌式 --> <style> a{ color: green; } div{ width: 100px; width: 100px; background: orange; } </style> <!-- 外链式 --> <link rel="stylesheet" href="css/main.css"> </head> <body> <!-- 行内式 --> <p style="color: red;"> 段落标签</p> <div> 123 </div> <!-- 内嵌式 --> <a href="http://www.bing.com">bing</a> <h1> 一级标题 </h1> <!-- 外链式 --> <h2> 二级标题 </h2> </body> </html>
h2{ color: skyblue; }
1 : 说明 文件 main.css
二: 选择器
1 标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 标签选择器 */ p { color: red; } </style> </head> <body> <p> hi </p> <p> hello </p> </body> </html>
2 类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 类选择器 */ .myp{ color: red; } .myby{ background: blue; } </style> </head> <body> <p> xxx </p> <p class="myp"> 段落标签 1</p> <p class="myp myby"> 段落标签 2</p> </body> </html>
3 层级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 层级选择器 --> <style> div div { color: green; } div .box{ color: blue; } /* div div p{ color: red; } */ div p{ color: aqua; } </style> </head> <body> <div> 哈哈 </div> <div> <div> 嘻嘻</div> <div class="box"> 哈哈</div> <div> <p> hi</p> </div> </div> </body> </html>
4 id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #myid1{ color:blue; } </style> </head> <body> <p id="myid1"> 哈哈 </p> <p id="myid1"> 嘻嘻 </p> </body> </html>
5 组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 组选择器 */ .box1, .box2, .box3{ width: 100px; height: 100px; } /* 追加样式 */ .box1{ background: red; } .box2{ background: gray; } .box3{ background: blue; } </style> </head> <body> <div class="box1"> </div> <div class="box2"> </div> <div class="box3"> </div> </body> </html>
6 伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> div{ width: 100px; height: 100px; background: green; } /* 伪类选择器: 给其他选择器添加效果 */ div:hover{ width: 200px; height: 200px; background: red; } </style> </body> <div> 哈哈 </div> </html>
三: 属性
1 布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100px; height: 100px; background: green; /* 设置背景图片: 不重复显示 - 拉伸*/ background: url("imgs/logo.png") no-repeat; /* 设置边框 */ border-top: 5px solid red; border-left: 5px solid green; border-bottom: 5px solid pink; border-right: 5px solid orange; /* 设置浮动: left左浮动 right右浮动 */ float: right; } .box1{ width: 200px; height: 200px; background: blue; } .box2{ width: 50px; height: 50px; background: green; } .box3{ width: 50px; height: 50px; background: red; } </style> </head> <body> <!-- 布局常用控件: div --> <div class="box"> 哈哈 </div> <div class="box1"> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
2 文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{ color: orange; /* 字体颜色 */ font-size: 18px; /* 字体大小 */ font-weight: bold; /* 字体加粗 */ font-family: "Microsoft Yahei"; /* 字体格式 */ background: blue; /* 字体背景 */ text-decoration: underline; /* 设置下划线: overline line-through underline */ line-height: 100px; /* 设置行高 */ text-align: left; /* 设置水平方向 */ text-indent: 30px; /* 文本缩进 */ } /* 设置样式 : 指定范围 */ span{ color:tomato; font-size: 60px; } h3{ color:black; } a { /* 取消下划线 */ text-decoration: none; } </style> </head> <body> <p> 东风夜放花千树。更吹落、星如雨。</p> <br> <br> <br> <h3> 原件<span>888</span>，现价 <b style="color: red; font-size: 40px; text-decoration: underline;"> 499 </b> </h3> <a href="http://www.bing.com"> 必应 </a> </body> </html>
四: 元素溢出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 100px; height: 100px; background: red; overflow: auto; /* 设置溢出: visible(默认值-显示) line-hidden(隐藏) auto(显示-滚动查看) */ } .box2{ width: 200px; height: 50px; background: green; } </style> </head> <body> <div class="box1"> <div class="box2"> 溢出 </div> </div> </body> </html>
五: 显示特性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .display_none{ width: 100px; height: 50px; background: gold; /* 元素隐藏 */ display: none; } .box{ /* 显示效果: 块元素转为行内元素; 和别的元素占一行 */ /* 若想显示高度和宽度: 设置浮动*/ display: inline; background: green; } .link{ /* 显示效果: 行内元素 -> 块元素; 单独占一行 */ display: block; background: red; } </style> </head> <body> <div class="display_none"> 数据隐藏</div> <div class="box"> div .box </div> <div class="box"> div .box</div> <a href="#" class="link">first link</a> <a href="#" class="link">second link</a> </body> </html>
六: 盒子模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 100px; /* 内容宽度 */ height: 200px; /* 内容高度 */ background: green; padding-top: 10px; /* 内间距 - 高 */ padding-bottom: 20px; padding-left: 30px; padding-right: 15px; border: 5px solid blue; /* 边框 */ } .box2{ width: 50px; height: 50px; background: red; } .box3{ width: 50px; height: 50px; background: gray; } .box4{ width: 50px; height: 50px; background: brown; padding-top: 10px; border: 10px solid rebeccapurple; margin-top: 10px; /* 外边距 */ } </style> </head> <body> <div class="box1"> <div class="box2"> </div> </div> <div class="box3"></div> <div class="box4"></div> </body> </html>
