CSS:
1.css的引入方式
2.基础选择器
3.高级选择器
4.选择器的优先级
5.伪类选择器
6.字体样式
7.文本样式
8.背景
9.盒模型border
10.margin
11.padding
1.css的引入方式
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>css的引入方式</title> <!--内链式--> <style type="text/css"> h2{ font-size: 30px; color: red; } </style> <style type="text/css"> /* 外链式：导入式 实际用的少 使用import是 先加载html 在加载css import 是css2.1特有的，对于不兼容css2.1的浏览器是无效的eg:IE5以下 */ @import url('./css/index.css'); </style> <!--外链式：链接式 使用link是html css同时加载的！！ link 是XHTML --> <link rel="stylesheet" type="text/css" href="./css/index.css"> </head> <body> <div> <!--内嵌式 优先级：内嵌式 > 内链式； 一般不写内嵌式，以后不好维护！ --> <h1 style="font-size: 10px;color: yellow">我是h1路飞学城</h1> <h2>我是h2路飞学城</h2> </div> </body> </html>
2.基础选择器
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>基础选择器</title> <style type="text/css"> /*通配符选择器*/ *{ padding: 0; margin: 0; color: #868686; } /*id选择器*/ /* 父内容一般不设 高度 子内容填充*/ #container{ width: 968px; background-color: antiquewhite; margin: 0 auto; /*内容居中显示*/ } /* 标签选择器*/ h1{ color: rgba(158,232,149,0.73) } /*类选择器*/ .content{ width: 968px; background-color: red; } img{ width: 968px; } /*子代选择器*/ ul>li{ color: aqua; } /*后代选择器*/ ul a{ color: green; } </style> </head> <body> <!-- 上中下 布局 --> <div id="container"> <div class="header"> <h1>路飞学城</h1> </div> <div class="content"> <h3>我是内容</h3> <img src="./images/homesmall1.png" alt="图片1"> </div> <div class="header"> <ul> <li>1 <a href="javascript:">哈哈</a></li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </body> </html>
3.高级选择器
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>高级选择器</title> <style type="text/css"> /*群组选择器*/ .title,.content,.footer{ width: 968px; /*height: 300px;*/ margin: 0 auto; background-color: beige; border: 1px solid red; } /*交集选择器*/ p.p1{ color: green; } p#title1{ font-size: 30px; color: red; } /* 毗邻标签 紧跟着h3标题的标签*/ h3+p{ color: aqua; } /*兄弟选择器*/ h3~p{ color: rgba(120,46,232,0.73) } /*属性选择器 找到所有class=baidu的选择器 */ [class='baidu']{ color: green; } /*找到所有class开头是btn 的选择器*/ [class^='btn']{ font-size: 20px; color: yellow; } /*找到以...结尾的选择器*/ [class$='ault']{ font-size: 40px; color: red; } </style> </head> <body> <div class="title"> <p class="p1" id="title1">我是一个段落</p> </div> <div class="content"> <h3>我是三级标题</h3> <a href="javascript:">百度一下</a> <p>我是另一个段落</p> <h3>我是三级标题</h3> <p>我是另一个段落</p> <h3>我是三级标题</h3> <p>我是另一个段落</p> <p>我是另一个段落</p> <p>我是另一个段落</p> </div> <div class="footer"> <a href="https://www.baidu.com" class="baidu">百度</a> <a href="https://www.baidu.com" class="btn-default">百度一下</a> <a href="https://www.baidu.com" class="baidu">百度</a> <a href="https://www.baidu.com" class="btn-index">百度二下</a> </div> <!-- 总结： 基础选择器： 1.标签选择器 div 2.类选择器 .div1 3.id选择器 #box 4.通配符选择器 * 高级选择器： 1.群组选择器 中间用, .title,.content,.footer{} 2.交集选择器 选择器之间不能有空格，第一个标签必须是标签选择器，第二个标签可以是id或者类选择器 p.p1{} p#title1{} 3.后代选择器 选择器之间用 空格 ul a{} 4.子代选择器 选择器之间用 > ul>li{} 5.毗邻选择器 选择器之间用 + 紧跟着h3标题的标签 h3+p{} 6.兄弟选择器 选择器之间用~ h3~p{} 7.属性选择器 [class='baidu']{} [class^='btn']{} [class$='ault']{} css样式优先级： 行内样式 > 内部样式表 > 外部样式表 ID选择器 > 类选择器 > 标签选择器 --> </body> </html>
4.选择器的优先级
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>优先级</title> <style type="text/css"> #div1{ background-color: yellow; } .box{ background-color: green; } div{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <!-- 选择器的优先级 id > 类 > 标签--> <div id="div1" class="box">哈哈</div> </body> </html>
5.伪类选择器
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> /*超链接未被访问时的状态*/ a:link{ background-color: yellow; } /*鼠标单击时超链接的状态*/ a:visited{ color: green; } /*鼠标悬停时超链接的状态*/ a:hover{ font-size: 30px; color: aqua; } /*鼠标点击不松手超链接的状态*/ a:active{ color: blue; } /*获取焦点时的样式*/ input:focus{ background-color: red; } /* 总结： 爱恨情仇原则：love / hate */ /*伪元素选择器*/ p:first-letter{ font-size: 30px; } p:before{ content: '哈哈'; color: red; } p:after{ content: "$$"; color: green; } </style> </head> <body> <ul> <li><a href="#">百度一下</a></li> <li><a href="#">hao123</a></li> <li><a href="#">博客</a></li> </ul> <form action=""> <input type="text" name=""> </form> <p>来呀，你好啊！</p> </body> </html>
6.字体样式
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>字体样式</title> <!--内链式 --> <style type="text/css"> p{ /*设置字体大小*/ font-size: 30px; /*推荐设置斜体的时候使用oblique*/ /*font-style: italic;*/ font-style: oblique; /*设置字体的粗细*/ font-weight: bolder; /*设置字体的类型*/ font-family:"微软雅黑"; /*设置字体的颜色*/ color: red; } </style> </head> <body> <!-- 默认字体大小是 16px = 1em 0.75em = 12px --> <p>这里是个p!!</p> </body> </html>
7.文本样式
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>文本样式</title> <style type="text/css"> .box1{ width: 500px; height: 200px; background-color: red; color: rgba(85,26,139,0.73); /*上下删除线 overline line-through */ text-decoration: underline; /*设置鼠标的形状*/ cursor: pointer; /*设置首行缩进*/ text-indent: 20px; font-size: 20px; /*left right center justify 两端对齐只针对英文 */ text-align:justify; /*设置阴影 左右 上下 0-1 color */ text-shadow:0px 0px 1px #fff; /*行高 规律： 当行高=盒子的高度时，文本会垂直居中 */ line-height: 200px; text-align: center; } </style> </head> <body> <div class="box1"> my name is alice </div> <a href="">天空飘个五个字</a> </body> </html>
8.背景
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>背景</title> <style type="text/css"> #img{ width: 990px; height: 980px; /*设置背景颜色*/ /*background-color: yellowgreen;*/ /*background-image: url("./images/homesmall1.png");*/ /*!* repeat-x repeat-y no-repeat *!*/ /*background-repeat: no-repeat;*/ /*background-position: 10px 20px;*/ /*简写*/ /*background:url("./images/homesmall1.png") no-repeat 20px 30px yellowgreen;*/ background: red; padding-top:10px; border: 5px solid blue; } </style> </head> <body> <div id="img"> </div> </body> </html>
9.盒模型border
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>border</title> <style type="text/css"> .wrap{ width: 200px; height: 200px; background-color: #000000; /* border-top- 5px; border-bottom- 10px; border-left- 15px; border-right- 20px; border-top-color: red; border-bottom-color: yellowgreen; border-left-color: yellow; border-right-color: blue; border-top-style: solid; border-bottom-style: dashed; border-left-style: dotted; border-right-style: double; */ /* 四个值 上 右 下 左 */ /* border-style: dotted dashed double solid; border- 5px 10px 15px 20px; border-color: blue red yellow slateblue; */ /* 三个值 上 左右 下*/ /* border-style: dotted double solid; border- 5px 10px 20px; border-color: blue yellow slateblue; */ /* 两个值 上下 左右 */ /* border-style: dotted solid; border- 5px 20px; border-color: blue yellow; */ /* 一个值 上下左右 */ /* border-style: dotted; border- 20px; border-color: blue; */ /*简写*/ /*border: 10px solid yellow;*/ } </style> </head> <body> <div class="wrap"></div> </body> </html>
10.margin
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #ff5776; /* margin-top: 20px; margin-left: 40px; margin-bottom: 20px; margin-right: 40px; */ /* 上 右 下 左*/ /*margin: 20px 30px 40px 50px;*/ /* 上 左右 下*/ /*margin: 20px 30px 40px;*/ /* 上下 左右*/ /*margin: 20px 40px;*/ /*margin-bottom: 50px;*/ /* margin: 0 auto;使盒子元素水平居中 */ margin: 0 auto; } /* 总结： 垂直方向的特殊性；水平方向没有这种特性； 当两个垂直外边距相遇时，会形成一个外边距，称为 外边距合并，已大的为基准！！ 注意：父子级盒子 嵌套 设置外边距 会形成外边距合并，影响页面布局， 解决办法：给父元素添加 border 解释： 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之（以最大的为基准）。 毗邻的定义为： 同级或者嵌套的盒元素，并且他们之间没有非空内容，padding或者border分割。 解决办法：（子债父还） 1.父级或子元素使用浮动或者绝对定位absolute,浮动或绝对定位不参与margin的折叠。 2.父级overflow:hidden 3.父级设置padding(破坏非空白的折叠条件) 4.父级设置border */ .box2{ width: 200px; height: 200px; background-color: yellow; margin-top: 100px; border: 1px solid chartreuse; /*padding: 1px;*/ /*overflow: hidden;*/ } .child{ width: 100px; height: 100px; background-color: #868686; margin-top: 150px; } span{ background-color: #ff5776; } .span1{ margin-left: 40px; } .span2{ margin-left:20px; } </style> </head> <body> <div class="box1"></div> <div class="box2"> <div class="child"></div> </div> <span class="span1">12345</span> <span class="span2">54321</span> </body> </html>
11.padding
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>padding</title> <style type="text/css"> .box1{ width: 100px; height: 200px; background-color: #ff5776; /* 内边距：内容区域到边框的距离 内边距会扩大元素所在的区域 注意： 为元素设置内边距 只能影响自己，不会影响其他的元素； */ /* padding-left: 20px; padding-top: 30px; padding-right: 40px; padding-bottom: 40px; */ /* padding: 10px 20px 30px 40px; padding: 10px 30px 50px; padding: 10px 20px; */ padding: 10px; } </style> </head> <body> <div class="box1"> 12345 </div> </body> </html>