HTML之CSS
HTML中引入CSS的三种方式
- 在标签中添加style属性
- 在<head>标签中加style标签
- 在<head>标签中加link标签，引入xx.css文件
三种方式引用顺序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css笔记</title> <!--第二种 在<head>标签中加style标签--> <style> .c1{ background-color: red; } </style> <!--第三种 在<head>标签中加link标签，引入xx.css文件--> <link rel="stylesheet" href="cssDemo.css"> </head> <body> <!--第一种 在标签中添加style属性--> <div class="c1" style="width: 100%;height: 48px;background-color: #bbe2d5"></div> <!--三种方式优先级：由内至外，由近到远--> <!--所以这里先取div里面的style属性，再取link的，最后才是head中的style标签，--> </body> </html>
CSS选择器
- id选择器--通过id来标识
- class选择器--通过class来标识
- 标签选择器--通过标签来确定
- 标签层级选择器--通过标签+层级来确定
- id组合选择器--通过id与标签或者其它来确定
- class组合选择器--可以多个class一起定义属性，优先级高于原来class
- 属性选择器--通过标签里面元素的属性来确定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
/*id选择器 #代表id*/ #i1{ width: 100px; height: 100px; background-color: red; } /*class选择器* .代表class*/ .c1{ width: 100px; height: 100px; background-color: blue; } /*标签选择器*/ /*当使用这个标签的时候会默认使用里面的css样式*/ div{ width: 100%; height: 100px; background-color: blue;; } /*标签层级选择器*/ /*div--span的格式 会引用*/ div span { background-color: red; } /*id组合选择器*/ /*id为i2 后面是span的格式时 引用*/ #i2 span{ background-color: blue; } /*class组合选择器*/ /*可以用这样的方式定义新的属性，优先级是原来的选择器高*/ .c3 c4{ width: 100%; background-color: red; } .c3{ width: 100px; height: 100px; } .c4{ width: 30%; background-color: purple; } /*属性选择器*/ /*当这个标签的这个属性等于这个名字时引用*/ div[name='szz']{ width: 100px; height: 100px; background-color: aquamarine; } </style> <link rel="stylesheet" href="cssDemo.css"> </head> <body> <!--html中不允许出现相同的id--> <!--id选择器 唯一标签 --> <div id="i1"></div> <!-- class选择器 css都是通过class属性 --> <div class="c1"></div> <div class="c1"></div> <div class="c1"></div> <!--标签选择器--> <div></div> <div></div> <div></div> <!--标签选择器--> <div> <span>标签选择器</span> </div> <!--标签层级选择器--> <div id="i2"> <span>标签层级选择器</span> </div> <!--引用两个样式--> <div class="c3 c4">class组合选择器，引用两个样式</div> <!--属性选择器--> <div name="szz"></div> </body> </html>
CSS属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css常用属性</title> <style> /* */ /*<body style="margin: 0">--让元素撑满整个屏幕*/ /*基础属性*/ .c111{ width: 100px; /*宽*/ height: 100px; /*高*/ background-color: white; /*背景色*/ border: 1px red solid;/*边框：边框宽、颜色、实线*/ border-left: 1px red dotted ;/*左边框，虚线，边框上下左右可以单独设置*/ text-align: center;/* 横向居中 */ line-height: 100px;/* 纵向居中，100px是元素本身的高度 */ font-size: 14px; /*字体大小*/ font-weight: bold; /* 字体加粗 */ } /***********************************************/ /*浮动*/ .f111{ float: left;/*浮动元素悬挂在页面左边*/ float: right;/*浮动元素悬挂在页面右边*/ clear: left;/*清除左边浮动，右边用right，全部用both*/ } /***********************************************/ /*dispaly属性*/ .myDispaly{ display: inline;/*把块级标签转换成行内标签，有多大占多大，不能设置宽高*/ display: inline-block;/*转换成即是行内又是块级，可以设置宽高，占宽高大小*/ display: none;/*隐藏元素*/ } /***********************************************/ /*外边距内边距*/ .margin-top111{ margin-top: 10px;/*顶部距离外层10像素*/ margin-left: 10px;/*左边距*/ margin-right: 20px;/*右边距*/ margin: 1px 1px 1px 1px;/*上下左右边距*/ } /*内边距--改变自身的边距*/ .padding-top111{ padding-top: 10px;/*距顶部的大小，如果数值增大则本身大小增大*/ padding-left: 10px; padding-right: 10px; } /***********************************************/ /*position 分层*/ .position111{ position: fixed;/*固定在窗口的某个位置*/ top: 0;/*距离顶部多少像素*/ left: 0;/*距离左边多少像素*/ right: 0;/*距离右边多少像素*/ bottom: 0;/*距离下边多少像素*/ z-index: 10;/*分层后通过z-index来记录层级关系,越大越在前面*/ } /*相对定位*/ /*p1是固定的，p2是需要被定位的*/ .p1{ position: relative;/*以这个元素为基准，写上relative*/ } .p2{ position: absolute;/*被定位的元素写上absolute，相对位置*/ top: 0;/*靠上*/ left: 0;/*靠左*/ right: 0;/*靠右*/ bottom: 0;/*靠底部*/ } /***********************************************/ /*滚动条*/ .overflow111{ overflow: hidden;/*溢出部分截取掉*/ overflow: auto;/*超出就出现滚动条*/ overflow: scroll;/*超出就出现滚动条--一般不用，图片小于边框也会出滚动条*/ } /***********************************************/ /*背景图*/ .background-image111{ background-image: url("logo.jpg");/*背景图片*/ background-repeat: no-repeat;/*图片大小不足也不重复*/ background-repeat: repeat-x;/*横向重复*/ background-repeat: repeat-y;/*纵向重复*/ background-repeat: repeat;/*重复*/ background-position: 10px,20px;/*从图片的哪个像素开始展示*/ } /*----------------上面是用法说明----------------------- */ /*实际例子*/ /*浮动*/ .f1{ width: 100px; height: 48px; background-color: red; float: left; } /*xxx:hover hover选择器*/ .hover-test:hover { background-color:yellow; color: black; } .hover-move{ width: 100px; height: 100px; border: 1px red solid; text-align: center; line-height: 100px; color:azure; } </style> </head> <body> <!--style里面写多个属性，要用分号隔开--> <!-- height：高 width：宽 --> <div style="height: 48px;width: 48px;border: 1px solid red">高宽</div> <!-- 宽高的设定可以是指定的像素 宽度也可以百分比 --> <div style="height: 48px;width: 80%;border: 1px solid red">CSS</div> <!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold--> <div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;font-weight: bold">字体大小、加粗</div> <!-- 边框 border：宽度 实线还是虚线 颜色--> <div style="height: 48px;border: 1px solid red">边框</div> <!-- 边框 border 上下左右边框 都可单独配置 --> <div style="height: 48px;border-left: 1px dotted red">上下左右边框可单独设置</div> <!-- 平行方向左右居中 text-align: center --> <div style="height: 48px;width: 80%;border: 1px solid red;text-align: center">平行居中</div> <!-- 垂直方向居中 line-height：垂直方向要根据标签高度--> <div style="height: 48px;width: 80%;border: 1px solid red;text-align: center;line-height: 48px">垂直居中</div> <!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行--> <!--float:inherit 会换行--> <div class="f1" style="float: inherit">浮动1</div> <div class="f1" style="background-color: limegreen;" >浮动2</div> <div class="f1" style="background-color: pink;float: right">靠右浮动</div> <!--display 可以在标签在行内和块级之间自由转换 块级标签的占满100%是相对来说，相对与他外层的div --> <!--块转行内 display:inline--> <div style="display: inline">块转行内标签</div> <!--块转行内 display:block--> <!--行内标签不可以应用 宽、高、外边距、内边距的样式--> <span style="display: block; width: 100px;height: 100px">行内标签转块标签</span> <!--希望行内标签能够设置宽、高、外边距、内边距的样式 display: inline-block 既是行内标签，又是块级标签--> <span style="display: inline-block; width: 100px;height: 100px; background-color: red">既是行内又是块</span> <!--display:none 隐藏 在页面上就看不到了--> <div style="display:none;border: 1px greenyellow dashed; width: 100px;height: 100px">看不到我</div> <!-- margin 外边距 不改变自身，针对外侧div进行移动 --> <div style="border:1px red solid;width: 100%;height: 100px"> <div style="margin-top: 25px; width: 100px;height: 48px;background-color: limegreen">距离外层25px</div> </div> <!--padding 内边距 改变自身--> <div style="border:1px red solid;width: 100%;height: 100px"> <div style="padding-top: 10px; width: 100px;height: 48px;background-color: limegreen">改变自身的值</div> </div> <!--hover属性是当鼠标移动到上面后，显示其样式--> <div class="hover-test hover-move">hover属性</div> </body> </html>
CSS分层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css分层</title> <style> .header{ height: 48px; background-color: #0e9aef; text-align: center;/*水平居中*/ line-height: 50px;/*垂直居中*/ /*fixed 固定在窗口的某个位置*/ position: fixed; /*top left right bottom 距离顶部、左右、底部多少像素*/ top:0px; left:0; right:0; z-index:9999;/*设置个大点的值保证我在最上面*/ } </style> </head> <body style="margin: 0"> position分层 绝对定位 <div class="header">我在顶部不会随滚动条滚动</div> <!--一定要加上margin-top: 48px 距离边框48 不然顶部的内容会被固定顶部挡住--> <div style="width: 10%;height: 500px;margin-top: 48px;border: 1px solid red">我在左边</div> <!--右下角固定不动的div 可实现功能回到顶部--> <div style="width: 48px;height: 48px; position: fixed;bottom:0;right: 0;background-color: blueviolet">右下角</div> <!--position 相对定位--> <div style="width: 500px;height: 500px;border: 1px black solid; position: relative"> <div style="width: 100px;height: 100px;background-color: blueviolet;position: absolute;top: 0;left: 0">左上角</div> <div style="width: 100px;height: 100px;background-color: hotpink;position: absolute;top: 0;right: 0">右上角</div> <div style="width: 100px;height: 100px;background-color: darkmagenta;position: absolute;bottom: 0;left: 0">左下角</div> <div style="width: 100px;height: 100px;background-color: greenyellow;position: absolute;bottom:0;right: 0">右下角</div> </div> <!--z-index 0-999 控制上下层级 值大的显示在上面--> <div style="width:200px;height: 200px;border: 1px red solid;position: relative"> <div style="z-index:999;width: 200px;height: 200px;background-color: pink;position: absolute">99</div> <div style="z-index:9;width: 200px;height: 200px;background-color: black;position: absolute">9</div> <div style="z-index:0;width: 200px;height: 200px;background-color: blue;position: absolute">0</div> </div> <!--<!–cursor: pointer 箭头悬浮到按钮上时，鼠标变成小手–>--> <input type="button" value="登录" style="cursor: pointer"> <!--overflow 属性 hidden 直接剪裁掉多余的地方 scroll 直接加滚动条边框 auto 自动识别，如果超出范围就加滚动条 --> <div style="overflow:hidden;width: 100px;height: 80px;border: 1px red solid" > <img src="http://www.imdsx.cn/wp-content/uploads/2017/01/logo-1-150x150.jpg"> </div> <div style="overflow:scroll;width: 200px;height: 200px;border: 1px red solid" > <img src="http://www.imdsx.cn/wp-content/uploads/2017/01/logo-1-150x150.jpg"> </div> <div style="overflow:auto;width: 200px;height: 100px;border: 1px red solid" > <img src="http://www.imdsx.cn/wp-content/uploads/2017/01/logo-1-150x150.jpg"> </div> <!--background-image 背景图 如果图片太小会重复图片水平垂直铺满--> <!--background-repeat 背景图是否重复平铺 background-repeat : no-repeat 只显示一个图片 background-repeat : repeat-x 横向重复 background-repeat : repeat-y 纵向重复 --> <div style="background-image:url('http://www.imdsx.cn/wp-content/uploads/2017/01/logo-1-150x150.jpg');height: 500px;width: 500px;border: 1px black solid">我是背景图</div> <div style="background-image:url('http://www.imdsx.cn/wp-content/uploads/2017/01/logo-1-150x150.jpg');background-repeat:repeat-x;height: 500px;width: 500px;border: 1px black solid">我是背景图-x</div> <div style="background-image:url('http://www.imdsx.cn/wp-content/uploads/2017/01/logo-1-150x150.jpg');background-repeat:repeat-y;height: 500px;width: 500px;border: 1px black solid">我是背景图-y</div> <div style="background-image:url('http://www.imdsx.cn/wp-content/uploads/2017/01/logo-1-150x150.jpg');background-repeat:no-repeat;height: 500px;width: 500px;border: 1px black solid">我是背景图-no-repeat</div> <!--改变 background-position 的值就可以横向、纵向移动图片--> <div style="background-image:url('http://www.imdsx.cn/wp-content/uploads/2017/01/logo-1-150x150.jpg');background-repeat:no-repeat;background-position:1px 1px;width: 200px;height: 200px;border: 1px black solid">background-position横纵向移动</div> <!--跳转--> <!--设置id 超链接中href的值与id相同则可实现跳转 id值前面加#--> <div id="hhh">页头</div> <div style="height: 1000px;width: 100%"></div> <a href="#hhh">回到页头</a> </body> </html>
