CSS:
1.css的引入方式
2.基础选择器
3.高级选择器
4.属性选择器
5.伪类选择器
6.伪元素选择器
7.css的继承性，层叠性，层叠性权重以及important属性
8.盒模型的认知和计算
9.认识padding
10.认识border和使用border制作三角形
11.认识margin
12.标准文档流的概念和微观现象
1.css的引入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的引入方式</title> <style type="text/css"> /*写我们的css代码*/ /*选择器 标签选择器*/ span{ color: yellow; } </style> <!--导入式 实际用的少 使用import是 先加载html 在加载css import 是css2.1特有的，对于不兼容的css2.1的浏览器是无效的eg：IE5以下 @import url()必须写在文件最开始的位置 --> <style type="text/css"> @import url('./index.css'); </style> <!--链接式 使用link是html css同时加载的！ link 是XHTML --> <link rel="stylesheet" href="./index.css"> </head> <body> <!-- 1.行内样式 2.内接样式 3.外接样式 3.1 链接式 3.2 导入式 --> <div> <p style="color:red">我是一个段落</p> </div> <div> <div> <span>我是另一个样式</span> <span>我是另一个样式</span> <span>我是另一个样式</span> <a href="#">路飞</a> </div> </div> </body> </html>
2.基础选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础选择器</title> <style type="text/css"> /*标签选择器*/ p{ color: red; font-size: 20px; } span{ color: yellow; } /*id选择器*/ #box{ background: gray; } #s1{ color: red; } #s2{ font-size: 30px; } /*类选择器*/ .title{ color: yellowgreen; font-size: 20px; } .alex{ color: red; } /*通用选择器 性能差，权重低*/ *{ color: aquamarine; } </style> </head> <body> <!-- css的选择器：1.基础选择器 2.高级选择器 1.标签选择器 1.标签选择器可以选择中所有的标签元素，比如div，ul，li，p等等 2.不管标签藏得多深，都能选中 3.选中的是所有的，而不是某一个，所有说“共性”，而不是"特性" 2.id选择器 #选中id 1.同一个页面中id不能重复， 2.任何的标签都可以设置id 3.id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 3.类选择器 1.所谓类就是class .class与id非常相似，任何的标签都可以加类 但是类是可以重复的 归类 2.同一个标签可以携带多个类，用空格隔开 一定要有“公共类”的概念 总结： 1.不要去试图用一个类将我们的页面写完，这个标签要携带多个类，共同设置样式 2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用 4.通用选择器 *{...} --> <div> <p>我是一个选择器</p> <ul> <li> <span> 哈哈哈 </span> </li> </ul> </div> <div id="box"> <span id="s1">123</span> <span id="s2">456</span> </div> <div> <h3 id="h" class="title xiaoma egon alex">我是一个三级标签</h3> <h3>我是一个三级标签</h3> <h3 class="title">我是一个三级标签</h3> <h3>我是一个三级标签</h3> <h3>我是一个三级标签</h3> </div> </body> </html>
3.高级选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高级选择器</title> <style type="text/css"> /*后代选择器 在css中使用非常频繁*/ /*div p{*/ /*color: red;*/ /*}*/ /*div div p{*/ /*color: yellow;*/ /*}*/ /*.container div p{*/ /*color: green;*/ /*}*/ /*子代选择器*/ .container>p{ color: yellowgreen; } /*交集选择器*/ h3{ width: 300px; color: red; } .active{ font-size: 30px; } h3.active{ background: yellow; } /*并集选择器（组合）设置多个标签统一样式*/ a,h4{ color: #666; font-size: 20px; text-decoration: none; } </style> </head> <body> <div class="container"> <p>我是另一个段落</p> <div> <p>我是一个段落</p> <a href="#">luffy</a> </div> <p>我是另一个段落2</p> <ul> <li class="item"> <h3 class="active"> 我是一个h3</h3> <h4>我是一个h4标题</h4> </li> <li> <h4>我是一个h4标题</h4> <a href="#">BAT</a> </li> </ul> </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="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style type="text/css"> /*根据属性查找*/ label[for]{ color: red; font-size: 20px; } /*根据属性和值查找*/ /*找到label中所有for属性等于pwd的元素*/ label[for='pwd']{ color: yellow; } /*以...开头*/ label[for^='vip']{ font-size: 30px; } /*以...结尾*/ label[for$='p2']{ font-size: 20px; } /*包含ser的元素*/ label[for*='ser']{ color: green; } input[type='text']{ background: purple; } </style> </head> <body> <!--属性选择器 通常使用在 表单控件中--> <div class="box"> <form action=""> <label for="user">用户名：</label> <input type="text" name="" id="user"> <label for="pwd">密码：</label> <label for="vip1">vip1</label> <label for="vip2">vip2</label> <label for="user2">用户名2：</label> <label for="user3">用户名3：</label> </form> </div> </body> </html>
5.伪类选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> /*爱恨原则 love hate*/ /*没有被访问的a标签的样式*/ .box ul li.item1 a:link{ color: #666; } /*访问过后的a标签的样式*/ .box ul li.item2 a:visited{ color: yellow; } /*鼠标悬停时a标签的样式*/ .box ul li.item3 a:hover{ color: green; } /*鼠标点住时a标签的样式*/ .box ul li.item4 a:active{ color: yellowgreen; } /*选中第一个元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*选中最后一个元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*选择当前指定的元素 数值从1开始*/ div ul li:nth-child(2){ font-size: 30px; color: purple; } /*n表示选中所有 从0开始的 0 的时候表示没有选中*/ div ul li:nth-child(n){ font-size: 40px; color: red; } /*选中偶数*/ div ul li:nth-child(2n){ font-size: 50px; color: gold; } /*选中奇数*/ div ul li:nth-child(2n-1){ font-size: 50px; color: yellow; } /*隔几换色,隔3就是4n+1*/ div ul li:nth-child(4n+1){ font-size: 40px; color: red; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> 1 <a href="#">张三</a> </li> <li class="item2"> 2 <a href="#">李四</a> </li> <li class="item3"> 3 <a href="#">王五</a> </li> <li class="item4"> 4 <a href="#">赵六</a> </li> <li class="item4"> 5 <a href="#">赵六</a> </li> <li class="item4"> 6 <a href="#">赵六</a> </li> <li class="item4"> 7 <a href="#">赵六</a> </li> <li class="item4"> 8 <a href="#">赵六</a> </li> <li class="item4"> 9 <a href="#">赵六</a> </li> </ul> </div> </body> </html>
6.伪元素选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style type="text/css"> /*设置第一个首字母的样式*/ p:first-letter{ color: red; } /* 在...之前 添加内容 这个属性使用补水很频繁 了解 使用此伪元素选择器需要结合content属性*/ p:before{ content: 'mm'; } /*在...之后 使用非常频繁 通常与后面要讲到的布局 有很大的关系 (清除浮动)*/ p:after{ content:'$'; color: yellow; font-size: 40px; } </style> </head> <body> <p> 我是一个段落 </p> </body> </html>
7.css的继承性，层叠性，层叠性权重以及important属性
# css的继承性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>继承性</title> <style type="text/css"> .father{ color: red; font-size: 30px; background: green; } </style> </head> <body> <!--继承：给父级设置了一些属性，子级继承了父级的该属性 有一些属性是可以继承下来的:color,foot-*,text-*,line-* 文本元素 像一些盒子元素，定位的元素(浮动，绝对定位，固定定位)不能继承 --> <div class="father" id="egon"> <p>alex</p> </div> </body> </html> # css的层叠性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层叠性</title> <style type="text/css"> /*1 0 0*/ #box{ color: red; } /* 0 1 0*/ .container{ color: yellow; } /*0 0 1*/ p{ color: purple; } </style> </head> <body> <!-- 层叠性：权重大的标签覆盖了权重小的标签，说白了，就是干掉了 权重：谁的权重大，浏览器就会显示谁的属性 数数！！！ id的数量 class的数量 标签的数量 --> <p id="box" class="container"> 猜猜我是什么颜色 </p> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层叠性2</title> <style type="text/css"> /*2 0 1*/ /*#box1 #box2 p{*/ /*color: yellow;*/ /*}*/ /*1 1 1*/ /*#box2 .wrap3 p{*/ /*color: red;*/ /*}*/ /*1 0 3*/ /*div div #box3 p{*/ /*color: purple;*/ /*}*/ /*0 3 4*/ div.wrap1 div.wrap2 div.wrap3 p{ color:blue ; } </style> </head> <body> <div id="box1" class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色</p> </div> </div> </div> </body> </html> # 层叠性权重相同的处理： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层叠性2</title> <style type="text/css"> /*!*1 1 1*!*/ /*#box1 .wrap2 p{*/ /*color: red;*/ /*}*/ /*!*1 1 1*!*/ /*#box2 .wrap3 p{*/ /*color: yellow;*/ /*}*/ /*2 1 0*/ /*继承来的*/ #box1 #box2 .wrap3{ color: red; } /*1 1 1*/ /*选中来的*/ #box2 .wrap3 p{ color: green; } </style> </head> <body> <!--当权重一样的时候 以后面设置的属性为准 继承来的属性 权重为0 总结： 先看有没有被选中，如果选中了，就数数(id,class,标签的数量) 谁的权重大 就显示谁的属性，如果没有被选中，权重为0 如果属性都是被继承下来的 权重都为0，“就近原则”：谁描述 的近，就显示谁的属性，当描述的相同时，就比权重（数数） --> <div id="box1" class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色</p> </div> </div> </div> </body> </html> # important属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p{ color: red !important; font-size: 30px; } .spe1{ color: yellow; font-size: 40px; } .spe2{ color: green; font-size: 40px; } ul{ color: red; } .list{ color: purple !important; } </style> </head> <body> <!--!important:设置权重为无限大 !importtant 不影响继承来的权重，只影响选中的元素 --> <div> <p class="spe1 spe2">我是什么颜色</p> <p class="spe2 spe1">我是什么颜色</p> </div> <div class="list"> <ul> <li> 我是一个li标签 </li> </ul> </div> </body> </html>
8.盒模型的认知和计算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 200px; height: 200px; padding: 20px; border: 1px solid red; } </style> </head> <body> <!--盒模型：在网页中 基本上都会显示一些方方正正的盒子，这种盒子 就被我们称为盒模型 重要的属性：width,height,padding,border,margin 指的是内容的宽度，而不是整个盒子真实的宽度 heigth:指的是内容的高度，而不是整个盒子真实的高度 做一个402*402的盒子，你应该如何设计 --> <div> 好雨知时节，当春乃发生，随风潜入夜，润物细无声。 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型的计算</title> <style type="text/css"> div{ width:400px ; height: 400px; border: 1px solid red; } </style> </head> <body> <!--如果想保持盒子的真实宽度，加width应该减padding 减width 应该加padding--> <div> 内容 </div> </body> </html>
9.认识padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding</title> <style type="text/css"> .box{ width: 300px; height: 300px; /*padding:20px;*/ background-color: red; /*border: 5px solid yellow;*/ /*写小属性*/ /*padding-top:10px;*/ /*padding-right:20px;*/ /*padding-bottom:30px;*/ /*padding-left:40px;*/ /*综合属性设置 用空格隔开*/ /*上 右 下 左*/ /*padding: 20px 30px 40px 50px;*/ /*上 左右 下*/ /*padding: 20px 30px 40px;*/ /*上下 左右*/ padding: 20px 30px; } </style> </head> <body> <!-- padding:就是内边距.padding的区域是有背景颜色的，并且背景颜色和内容区域 颜色一样，也就是说background-color这个属性将填充所有的border以内的区域 内边距的距离就是边框到内容之间的距离 padding有四个方向，所以说我们能分别描述4个方向的padding 方法有两种：1.写小属性 2.写综合属性 用空格隔开 --> <div class="box"> 好雨知时节，当春乃发生，随风潜入夜，润物细无声。 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding:0; margin: 0; } </style> </head> <body> <!-- 比如说通常我们做站的时候，要清除默认的padding，margin *效率不高，所以我们要使用并集选择器选中页面中应有的标签(不用背， 因为有人已经给咱们写好了这些清除默认的样式表) body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } --> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </body> </html>
10.认识border和使用border制作三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border</title> <style type="text/css"> .box{ width: 200px; height: 200px; /*border: 5px solid red;*/ /*按照3要素*/ /*border- 5px;*/ /*border-style: solid;*/ /*border-color: red;*/ /*border- 5px 10px;*/ /*border-style: solid dotted double dashed;*/ /*border-color: red green yellow;*/ /*按照方向分*/ border-top-width: 5px; border-top-color: red; border-top-style:solid; border-right-width: 10px; border-right-color: green; border-right-style:dotted; border-bottom-width: 15px; border-bottom-color: yellow; border-bottom-style:double; border-left-width: 20px; border-left-color: blue; border-left-style:dashed; /*设置border没有样式*/ /*border: none;*/ /*border-left:none;*/ /*border-top:0;*/ } </style> </head> <body> <!-- border:边框的意思 边框有三个要素：粗细 线性 颜色 如果颜色不写，默认是黑色 如果粗细不写 不显示，只写线性(solid)，默认的有上下左右 3px的宽度 solid默认黑色 --> <div class="box"></div> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*小三角 箭头指向下方*/ div{ width: 0; height: 0; border-top:20px solid red; border-left:20px solid transparent; border-right:20px solid transparent; } </style> </head> <body> <div></div> </body> </html>
11.认识margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> *{ padding: 0; margin: 0; } /*会出现塌陷效果，就是上面比左边的窄一些*/ div{ width: 300px; height: 300px; border: 1px solid red; background-color: green; /*margin: 20px;*/ margin-top:30px; margin-left: 50px; margin-bottom:100px; } p{ border: 1px solid green; } </style> </head> <body> <!--margin:外边距 指的是距离 --> <div></div> <p>我是一个p标签</p> </body> </html>
12.标准文档流的概念和微观现象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> span{ font-size: 50px; } </style> </head> <body> <!-- 什么是标准文档流： 宏观的讲，我们的web网页和ps等设计软件有本质的区别 web网页的制作是个“流”，从上而下，像“织毛衣” 而设计软件，想往哪里画东西 就去哪里画 标准文档流下 有哪些微观现象？ 1.空白折叠现象: 文字之间的所有换行都会换算成一个空格来显示 2.高矮不齐，底边对齐： 3.自动换行，一行写不满，换行写 --> <div> 文字 文字 </div> <div> 文字文字文字文字文字<span>姚明</span>文字文字文字文字文字文字文字文字文字文字文字 </div> </body> </html>