一、CSS的引用方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1CSS的引用方式</title> <!--外接样式--> <link rel="stylesheet" href="./index.css"> <!--内接样式--> <style type="text/css"> div{ margin: 200px; padding: 200px; } </style> </head> <body> <!--行内样式--> <div style="width: 200px;height: 200px;background: red"></div> </body> </html>
二、CSS的基础选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2CSS的基本选择器</title> <style type="text/css"> /*标签选择器*/ div{ width: 200px; height: 200px; background: red; } /*ID选择则器*/ #box{ width: 200px; height: 200px; background: red; } /*类选择器*/ /*同一个标签中可以携带多个类，用空格隔开*/ .box{ width: 200px; height: 200px; background: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
三、CSS的高级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.CSS的高级选择器</title> <style type="text/css"> /*后代选择器*/ /*父元素的后代（包括儿子，孙子，重孙子）*/ div p{ color: red; } /*子代选择器*/ /*仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。*/ div>p{ color: yellow; } /*并集选择器*/ p,a{ color: blue; } /*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*!*/ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin: 0; padding: 0 } /*并集选择器*/ /*第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active*/ div.box1{ background: blue; } </style> </head> <body> <div class="box1" id="box"> <div class="box2"> <p>我是孙子标签</p> <a href="#">我是a标签</a> </div> <p>我是儿子标签</p> </div> </body> </html>
四、CSS的伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4CSS的伪类选择器</title> <style type="text/css"> /*没有被访问的a标签的样式*/ a:link{ color: black; text-decoration: none; } /*访问过后的a标签的样式*/ a:visited{ color: black; } /*鼠标悬停时a标签的样式*/ a:hover{ color: blue; } /*鼠标摁住的时候a标签的样式*/ a:active{ color: blue; } </style> </head> <body> <a href="#">点我</a> </body> </html>
五、CSS的伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>5CSS的伪元素选择器</title> <style type="text/css"> /*设置第一个首字母的样式*/ p:first-letter{ color: red; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/ p:before{ content: "X"; } /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ p:after{ content: "Y"; } </style> </head> <body> <p>我是P标签</p> </body> </html>
六、CSS的继承性和层叠性（权重）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6CSS的继承性和权重</title> <style type="text/css"> /*继承性*/ /*可以继承的属性：color 、 font-*、 text-*、line-* ，主要是文本级的标签元素。*/ /*不能继承的属性：定位的元素（浮动，绝对定位，固定定位）*/ /*权重*/ /*数数：id的数量 class的数量 标签的数量，顺序不能乱*/ /*先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上*/ /*如果没有被选中标签元素，权重为0。 如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性*/ /*1 0 0*/ #box{ width: 30px; height: 30px; color: red; } /*0 1 0*/ .box{ width: 30px; height: 30px; color: red; } /*0 0 1*/ div{ width: 30px; height: 30px; color: red; } /*权重示例2*/ /*201*/ #box1 #box2 p{ color: yellow; } /*111*/ #box2 .wrap3 p{ color: red; } /*103*/ div div #box3 p{ color: purple; } /*031*/ div.wrap1 div.wrap2 div.wrap3 p{ color: blue; } </style> </head> <body> <div class="box" id="box"></div> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色？</p> </div> </div> </div> </body> </html>
七、CSS的盒模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>7盒模型</title> <style type="text/css"> /*那么在这里要注意看了。标准盒模型，width不等于盒子真实的宽度。 另外如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。真实高度一样设置。*/ div{ width: 200px; /*width：内容的宽度*/ height: 200px; /*height: 内容的高度*/ background-color: #2892F1; margin: 50px; /*margin：外边距，盒子边框到附近最近盒子的距离*/ padding: 50px; /*padding：内边距，边框到内容的距离*/ border: 5px solid red;/*border: 边框，就是指的盒子的宽度*/ } /*那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置*/ /*我们现在初学可以使用通配符选择器*/ *{ padding:0; margin:0; } /*https://unpkg.com/[email protected]/reset.css*/ </style> </head> <body> <div class="box"></div> </body> </html>
八、border制作三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 0; height: 0; border-bottom: 60px solid red; border-left: 60px solid transparent; border-right: 60px solid transparent; } </style> </head> <body> <div></div> </body> </html>
九、块级元素和行内元素
""" 学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级： 行内元素 块级元素 行内元素： 与其他行内元素并排； 不能设置宽、高。默认的宽度，就是文字的宽度。 块级元素： 霸占一行，不能与其他任何元素并列； 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。 从HTML的角度来讲，标签分为： 文本级标签：p、span、a、b、i、u、em。 容器级标签：div、h系列、li、dt、dd。 PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。 现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样： 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。 块级元素：所有的容器级标签都是块级元素，还有p标签。 块级元素和行内元素的相互转换 我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。 块级元素可以转换为行内元素： 一旦，给一个块级元素（比如div）设置：display: inline; 那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说： 此时这个div不能设置宽度、高度； 此时这个div可以和别人并排了 行内元素转换为块级元素： 同样的道理，一旦给一个行内元素（比如span）设置：display: block; 那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说： 此时这个span能够设置宽度、高度 此时这个span必须霸占一行了，别人无法和他并排 如果不设置宽度，将撑满父亲 标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！ css中一共有三种手段，使一个元素脱离标准文档流： （1）浮动 （2）绝对定位 （3）固定定位 """
十、浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10浮动</title> <style type="text/css"> *{ margin: 0; padding: 0; } /*浮动*/ .box{ float: left; width: 200px; height: 200px; } .box1{ background: red; } .box2{ background: blue; } .outer{ background: black; } /*清除浮动带来的影响*/ .outer:after{ content: ""; display: block; visibility: hidden; clear: both; } </style> </head> <body> <div class="outer"> <div class="box1 box"></div> <div class="box2 box"></div> </div> </body> </html>
十一、overflow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>11overflow</title> <style type="text/css"> .box{ float: left; height: 200px; width: 200px; } .box1{ background-color: red; } .box2{ background-color: blue; } .outer_box{ background-color: black; overflow: hidden; } </style> </head> <body> <div class="outer_box clearfix"> <div class="box1 box"></div> <div class="box2 box"></div> </div> </body> </html>
十二、margin
""" 当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？ 设置margin-left:auto；我们发现盒子尽可能大的右边有很大的距离，没有什么意义。当设置margin-right:auto；我们发现盒子尽可能大的左边有很大的距离。 当两条语句并存的时候，我们发现盒子尽可能大的左右两边有很大的距离。此时我们就发现盒子居中了。 另外如何给盒子设置浮动，那么margin:0 auto失效。 使用margin：0 auto;注意点： 1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center; 2.只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了 3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center; 另外大家一定要知道margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系 """
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12margin</title> <style type="text/css"> .box1{ width: 200px; height: 180px; background-color: red; padding-top: 20px; } .box2{ width: 100px; height: 100px; background-color: black; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
十三、文本属性和字体属性
""" 文本属性 介绍几个常用的。 文本对齐 text-align 属性规定元素中的文本的水平对齐方式。 属性值：none | center | left | right | justify 文本颜色 color属性 文本首行缩进 text-indent 属性规定元素首行缩进的距离，单位建议使用em 文本修饰 text-decoration属性规定文本修饰的样式 属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。) 行高 line-height就是行高的意思，指的就是一行的高度。 字体属性 字体大小 font-size表示设置字体大小，如果设置成inherit表示继承父元素的字体大小值。 字体粗细 font-weight表示设置字体的粗细 属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值） 字体系列 font-family font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif 如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。 行高 line-height 针对单行文本垂直居中 公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。 针对多行文本垂直居中 行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。 第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px 第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px; font-family介绍 使用font-family注意几点： 1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装， 比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体， 那么就会变成宋体 页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman 2.为了防止用户电脑里面，没有微软雅黑这个字体。 就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面， 没有安装微软雅黑字体，那么就是宋体： font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。 3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体， 就自动的变为后面的中文字体： font-family: "Times New Roman","微软雅黑","宋体"; 4.所有的中文字体，都有英语别名， 我们也要知道： 微软雅黑的英语别名： font-family: "Microsoft YaHei"; 宋体的英语别名： font-family: "SimSun"; font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun"; 5.行高可以用百分比，表示字号的百分之多少。 一般来说，都是大于100%的，因为行高一定要大于字号。 font:12px/200% “宋体” 等价于 font:12px/24px “宋体”; 反过来，比如： font:16px/48px “宋体”; 等价于 font:16px/300% “宋体” """
十四、精灵图技术
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*background-img:表示设置该元素的背景图片*/ /*那么发现默认的背景图片，水平方向和垂直方向都平铺*/ /*background-repeat:表示设置该元素平铺的方式*/ /*repeat 默认。背景图像将在垂直方向和水平方向重复。*/ /*repeat-x 背景图像将在水平方向重复。*/ /*repeat-y 背景图像将在垂直方向重复。*/ /*no-repeat 背景图像将仅显示一次。*/ /*inherit 规定应该从父元素继承 background-repeat 属性的设置。*/ /*background-attach*/ /*设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动*/ div{ width: 100px; height: 100px; background-image: url("14.jpg"); background-position: -100px -100px; } </style> </head> <body> <div class="box"> </div> </body> </html>