CSS介绍
CSS：层叠样式表：Cascading Style Sheets：修改HTML样式
CSS引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引用CSS</title> <!-- 第一种:外部样式 --> <link rel="stylesheet" href="style.style"> <!-- 第二种:内部样式 --> <style> p { color: red; } </style> </head> <body> <!-- 第三种:行内样式 --> <p style="color: red">引用样式</p> </body> </html>
CSS选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <style> /*标签选择器 选择所有p标签*/ p {} /*id选择器 选择id为xiu的标签*/ #xiu {} /*类选择器 选择所有class为kang的标签*/ .kang {} /*后代选择器 选择div里面所有class为kang的标签*/ div .kang {} /*子代选择器 选择div里面子类的所有p标签*/ div > p {} /*交集选择器 选择p标签且id为kang的标签*/ p#kang {} /*并集选择器 选择id为id的标签和class为kang的两个标签*/ #id,.kang {} /*伪类选择器 :link未访问的链接 :visited已访问的链接 :hover鼠标移上去的链接 :active选中的链接*/ p:hover {} /*结构伪类选择器 选择第一个p标签*/ p:first-child {} /*结构伪类选择器 选择最后一个p标签*/ p:last-child {} /*结构伪类选择器 选择第2个p标签 n表示所有 2n表示偶数 2n+1表示奇数*/ p:nth-child(2) {} /*结构伪类选择器 选择所有偶数的p标签 even偶数 odd奇数*/ p:nth-child(even) {} /*属性选择器 选择属性为href的a标签*/ a[href] {} /*属性选择器 选择属性href和属性title的a标签*/ a[href][title] {} /*属性选择器 选择属性和值为href="url"的a标签*/ a[href="url"] {} /*属性选择器 选择属性和值为href="url"且title="提示"的a标签*/ a[href="url"][title="提示"] {} /*属性选择器 选择属性的值以url开头的a标签,该值必须是整个单词*/ a[href|="url"] {} /*属性选择器 选择属性的值以url开头的a标签*/ a[href^="url"] {} /*属性选择器 选择属性的值以url结尾的a标签*/ a[href$="url"] {} /*属性选择器 选择属性的值包含url的a标签,该值必须是整个单词*/ a[href~="url"] {} /*属性选择器 选择属性的值包含url的a标签*/ a[href*="url"] {} </style> </head> <body> <p>段落</p> <a href="url" title="提示">百度</a> </body> </html>
CSS字体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体</title> <style> p { /*设置字体大小*/ font-size: 20px; /*设置字体*/ font-family: "宋体","微软雅黑"; /*字体加粗*/ font-weight: 700; /*字体倾斜*/ font-style: italic;/*normal 取消样式*/ /*字体颜色 预定义颜色:red;十六进制颜色:#FF0000;RGB颜色:rgb(255,255,255) */ color: #aa00cc;/* #aa00cc可以简写为#a0c 两两相同才可以*/ /*设置行高*/ line-height: 20px; /*设置文字对齐方式*/ text-align: center; /*段落首行缩进*/ text-indent: 2em; /*设置字体装饰 underline下划线 overline上划线 line-through删除线 none无装饰 */ text-decoration: underline; } h1 { /*字体连写，顺序不能交换，size/family不能省略*/ /*font: font-style font-weight font-size font-family;*/ font: 25px "宋体"; } </style> </head> <body> <p>字体</p> <h1>标题</h1> </body> </html>
元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">ｈ <title>块级元素</title> <style> /* 块级元素 block-level 总是从新行开始 高度，行高，外边距都可以控制 宽度默认是容器的１００％ 可以容纳内联元素和其他元素 常见的块元素：<h> <p> <div> <ul> <ol>等等*/ /* 行类元素 inline-level 和相邻的行内元素在一行上 高宽无效，但水平方向的padding和margin可以设置，垂直方向无效 默认宽度为他本身内容的宽度 常见的行内样式有：<a> <strong> <em> <s>等等 */ /*行内块元素 inline-block 和相邻行内元素在一行上，但之间有空白缝隙 默认宽度为他本身内容的宽度 宽度，高度，外边距都可以控制 常见的行内块元素有：<img> <input> <td> */ /*可以将行内元素和行内块元素看作文字对待*/ div { /*将块元素转换为行内元素*/ display: inline; } span { /*将行内元素转换为块元素*/ display: block; } a { /*将行内元素转换为行内块元素*/ display: inline-block; } </style> </head> <body> <div></div> <span></span> <a href="#"></a> </body> </html>
CSS的特性
- 层叠性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">ｈ <title>继承性</title> <style> /*一般情况下，如果出现样式冲突，会按照CSS的书写顺序，已最后的样式为准 样式冲突，遵循的原则为就近原则，那个样式离结构进，就执行那个样式,就近原则 样式不会冲突，不会层叠 color样式冲突了，就执行最近的一个color，font-size没有冲突，正常执行 */ p { color: red; font-size: 20px; } p { color: blue; } </style> </head> <body> <p>段落</p> </body> </html>
- 继承性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">ｈ <title>继承性</title> <style> /*子标签会继承父标签的某些属性，比如：字体颜色和字号*/ .xiu { color: red; } </style> </head> <body> <div class="xiu"> <p>段落</p> </div> </body> </html>
- 优先性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">ｈ <title>优先级</title> <style> /* 继承或者*的贡献值 0000 每个元素的贡献值 0001 每个类,伪类的贡献值 0010 每个ID的贡献值 0100 行内样式的贡献值 1000 每个!important的贡献值 无穷大 贡献值越大,越先执行 贡献值可以叠加,比如: div ul li {} -- 0003 .xiu ul li {} -- 0012 #xiu ul li {} -- 0102 */ .xiu { color: red!important;/*最先执行*/ } .xiu { color: blue; } </style> </head> <body> <div class="xiu"> <p>段落</p> </div> </body> </html>
背景图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">ｈ <title>背景图片</title> <style> body { /*添加背景颜色*/ background-color: red; /*添加背景图片*/ background-image: url(1.png); /*no-repeat图片不平铺 repeat-x水平平铺 repeat-y垂直平铺*/ background-repeat: no-repeat; /*设置图片位置 top上 bottom下 left左 right右 也可以写数值x,y值 */ background-position: right bottom;/*如果只写一个,剩下一个为居中center*/ /*设置图片滚动 fixed固定 scroll默认滚动而滚动*/ background-attachment: fixed; /*设置图片透明度*/ background: rgba(0,0,0,0.5); /*设置背景图片的大小 cover 等比例铺满整个盒子，超出范围将隐藏 contain 等比例铺满整个盒子，保证图片始终显示在盒子内 */ background-size: 300px 300px;/*一般设置一个值，另外一个值默认auto 等比例缩放*/ /*background连写方式*/ /*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置*/ } </style> </head> <body> </body> </html>
边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框</title> <style> table { width: 100px; height: 100px; /*设置边框宽度*/ /*border- 1px;*/ /*设置边框样式 none无边框 solid实线边框 dashed虚线 */ /*border-style: dashed;*/ /*设置边框颜色*/ /*border-color: red;*/ /*设置上边框*/ /*border-top: 1px solid red;*/ /*border连写*/ border: 1px solid red; } td { border: 1px solid blue; } table,td { /*合并单元格相邻边框*/ border-collapse: collapse; } </style> </head> <body> <table cellpadding="0" cellspacing="0"> <tr> <td>修抗</td> <td>修抗</td> </tr> <tr> <td>牛皮</td> <td>牛皮</td> </tr> </table> </body> </html>
边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内边距与外边距</title> <style> /* padding 用于设置内边距:自身的边框与自身内部内容的距离 margin 用于设置外边距:自身边框与相邻边框的距离 margin与padding的语法一样: padding-top 上内边距 padding-right 右内边距 padding-bottom 下内边距 padding-left 左内边距 padding: 3px; 上下左右都是3px padding: 3px 4px; 上下为3px,左右为4px padding: 2px 3px 4px;上2px,左右为3px,下为4px padding: 1px 2px 3px 4px; 上1px,左2px,下3px,右4px padding不能为负数值 padding在块级元素下,上下左右可以随意设置,会撑开盒子,一般要减去padding设置的高度宽度 padding在行内元素只有左右边距有效果,上下不识别 margin: 0 auto;设置水平居中,auto自动 只对块元素起作用 margin在块级元素下,上下左右可以随意设置 margin在行内元素只有左右边距有效果,上下不识别 */ </style> </head> <body> </body> </html>
- 边距问题：1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*外边距合并*/ .xiu { width: 100px; height: 100px; background-color: red; margin-bottom: 150px; } .kang { width: 100px; height: 100px; background-color: blue; margin-top: 100px;/*最终两个盒子的距离已最大的那个为准*/ } </style> </head> <body> <div class="xiu"></div> <div class="kang"></div> </body> </html>
- 边距问题2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嵌套块元素垂直外边距合并</title> <style> .xiu { width: 400px; height: 400px; background-color: red; border:1px solid red; } .kang { width: 100px; height: 100px; background-color: blue; /*嵌套块元素垂直外边距合并 如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并 大概意思就是： 父元素有个margin-top，子元素有一个margin-top 会合并为最大的margin-top 即使父元素的上外边距为0 解决方法有两种： 1.为父元素定义一个1px的外边框或上内边框 border:1px solid red;/padding-top: 1px; 2.为父元素添加overflow:hidden; */ margin-top: 100px; } </style> </head> <body> <div class="xiu"> <div class="kang"></div> </div> </body> </html>
- 边距问题3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边距问题3</title> <style> .xiu { /*宽度width/高度height仅适用于块级元素，对行内元素无效(img/input除外)*/ width: 300px; height: 300px; background-color: red; } .kang { height: 100px; background-color: blue; /*如果子元素没有设置宽度，会继承父元素的宽度，而padding-left则不会撑开盒子*/ padding-left: 20px; } </style> </head> <body> <div class="xiu"> <div class="kang">修抗</div> </div> </body> </html>
圆角边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆角边框</title> <style> .xiu { width: 100px; height: 100px; border: 1px solid red; /*设置边框圆角，可以设置百分比*/ border-radius: 50px; /*border-radius: 50px 50px 50px 50px;*/ } </style> </head> <body> <div class="xiu"></div> </body> </html>
盒子阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> div { width: 100px; height: 100px; /*设置盒子阴影 box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内部阴影inset; */ box-shadow: 2px 2px 2px 2px red; } </style> </head> <body> <div></div> </body> </html>
浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <style> /*浮动会脱离标准流，不占位置 一般会给浮动添加一个父元素设置高度来占位置 浮动只会影响后面的标准流，不会影响前面的标准流 浮动不会超过内边距，不会超出父边框 浮动只有左右浮动 left左 right右 none默认 如果一个父盒子中一个子盒子浮动了，则其他子盒子都应该浮动，这样才能一行显示 浮动可以让元素变成行内块元素 如果已经给行内元素添加了浮动，此时不需要转换这个元素也可以有宽高了 浮动的作用: 让多个块元素在一行显示 清除浮动： 子盒子是标准流会撑开父盒子的高度(没有设置盒子高度) 子盒子浮动就不会撑开父盒子的高度(没有设置盒子高度) 清除动主要为了解决父元素因为子元素浮动引起内部高度为0的问题 不是所有情况都需要清除浮动，在影响布局的情况下才清除浮动 清除浮动的方法： 1.额外标签法: 在浮动最后添加一个空标签 <div style="clear:both"></div> 2.父级添加overflow属性方法 overflow: hidden; 3.使用after伪元素清除浮动,额外标签法的升级版 .clearfix:after { content:""; display: bloak; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; 清除ie7以下的浏览器 } */ .xiu { width: 100px; height: 100px; background-color: red; /*左浮动*/ float: left; } </style> </head> <body> <div class="xiu clearfix"></div> </body> </html>
定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <style> /*position 定位属性： static：静态定位：所有元素的默认定位方式：作用清除定位 relative：相对定位：已自己左上角的位置移动 absolute：绝对定位：根据当前最近父元素设置的定位而定位，不占位置跟浮动一样 fixed：固定定位：随浏览器滚动而滚动 */ /*z-index: 1; 设置层叠等级属性 默认属性值为0，取值越大，定位元素在层叠元素中越居上 如果取值相同，则后来居上，没有单位 只有定位的盒子才有该属性 */ /*设置绝对定位居中的盒子*/ .xiu { width: 200px; height: 200px; border: 1px solid blue; /*设置相对定位*/ position: absolute; /*将盒子向右移动50%*/ left: 50%; /*在将盒子向左移动一半的距离*/ margin-left: -100px; /*默认值*/ z-index: 0; } </style> </head> <body> <div class="xiu"></div> </body> </html>
显示或隐藏隐藏元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示或隐藏元素</title> <style> .xiu { width: 100px; height: 100px; border: 1px solid red; /*hidden隐藏元素,保留位置 visible显示元素*/ /*visibility: hidden;*/ /*none隐藏元素,不保留位置 block显示元素*/ display: block;/*除了转换为块元素,还有可以显示元素*/ /*visible默认不剪切内容也不添加滚动条 auto超出部分显示滚动条 hidden隐藏超出内容 scroll总是显示滚动条*/ overflow: hidden; /*设置文本换行 nowrap禁止文本换行 normal默认可以换行*/ white-space: nowrap; /*将超出部分用省略号代替 要和overflow/white-space一同使用 */ text-overflow: ellipsis; } </style> </head> <body> <div class="xiu"></div> </body> </html>
用户样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户样式</title> <style> div { /*pointer小手样式 text选择样式 move十字架样式 default默认鼠标样式*/ cursor: pointer; } input { /*取消边框轮廓线的做法 轮廓线就是点击输入框默认显示的蓝色边框*/ outline: none; /*在输入框添加图片*/ background-image: url(1.png); /*设置输入框边框*/ border: 1px solid red; } textarea { /*禁止拖动文本框*/ resize: none; } img{ /*设置垂直对齐 baseline默认基线对齐 middle垂直居中 top顶部对齐 因为图片是默认以基线对齐,所以图片底部有一点缝隙,取消基线对齐或改成块元素可以解决该问题*/ vertical-align: baseline;/*行内块元素才有效果*/ } </style> </head> <body> <div>修抗</div> <input type="text"/> <textarea name="" id="" cols="30" rows="10"></textarea> <img src="1.png" alt=""> </body> </html>
精灵图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>精灵图</title> <style> /*精灵图的作用 处理一些零碎的背景图像集中在一张大图上,然后将大图应用到网页上 为了有效减少服务器接收和发送请求的次数,提高页面的加载速度 */ div { width: 100px; height: 100px; background: url(1.png) no-repeat -2px -4px; } /*滑动门*/ a { height: 30px; display: inline-block; background: url(1.png) no-repeat; padding-left: 15px; } span { display: inline-block; background: url(1.png) no-repeat right; padding-right: 15px; } </style> </head> <body> <div></div> <a href="#"> <span>商业</span> </a> </body> </html>
字体图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体图标</title> <style> /*字体图标的好处: 可以做出图片一样的事情,改变透明度,旋转度... 但其本质是文字,可以任意改变颜色,产生阴影... 本身体积更小,但携带的信息并没有消减 没有兼容问题 字体图标下载地址: 国内阿里巴巴图标: http://www.iconfont.cn 国外的字体图标网站: https://icomoon.io/app 将图片转换为字体图标: 图片后缀名为svg,在https://icomoon.io/app 网页中点击 import Icons 上传然后在选中下载就行了 追加字体图片: 以前有字体图标,然后需要在加一个图标在https://icomoon.io/app 网页中点击 import Icons 上传 selection.json文件上传然后在选中下载就行了 */ /*引用字体图标到网页中*/ /*第一步,引用字体文件夹fonts*/ @font-face {/*声明字体,引用字体*/ font-family: 'icomoon'; /*自己取的名字*/ src: url('fonts/icomoon.eot?cj3rhu');/*引用fonts文件夹*/ src: url('fonts/icomoon.eot?cj3rhu#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cj3rhu') format('truetype'), url('fonts/icomoon.woff?cj3rhu') format('woff'), url('fonts/icomoon.svg?cj3rhu#icomoon') format('svg'); font-weight: normal; font-style: normal; } span { /*第三步:声明字体*/ font-family: "icomoon"; } </style> </head> <body> <!-- 第二步:在demo.html中选择想要的图标,复制粘贴 --> <span></span> </body> </html>
伪元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素</title> <style> /*选择第一个字*/ /*p::first-letter { font-size: 30px; }*/ /*选择第一行字*/ /*p::first-line { font-size: 30px; }*/ /*选择鼠标选中的文字*/ /*p::selection { color: red; }*/ /*在盒子内容前面添加一个伪元素*/ div:before { /*必须带一个属性content 伪元素 before就是一个行内盒子*/ content: ""; } /*在盒子内容后面添加一个伪元素*/ div::after { /*必须带一个属性content 伪元素 before就是一个行内盒子*/ content: ""; } </style> </head> <body> <p>段落</p> <div></div> </body> </html>
CSS3盒子模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3内减边框</title> <style> /*CSS2的模型的盒子大小为width+padding+border 可以通过CSS3的box-sizing:border-box来设置盒子,盒子的大小就是width,也就是说border与padding在width里面*/ .xiu { width: 300px; height: 300px; border: 10px solid red; padding: 20px; box-sizing: border-box; } </style> </head> <body> <div class="xiu">修抗</div> </body> </html>
过度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过度</title> <style> div { width: 100px; height: 100px; border: 1px solid red; /*transition: 要过度的属性 过度时间 运动曲线(默认ease) 何时开始(默认0s); 如果有多个属性用逗号隔开*/ transition: width 2s ease 0s,height 2s ease 0s; /*简写为 all所有过度属性 transition: all 2s*/ } div:hover { width: 200px; height: 200px; } </style> </head> <body> <div></div> </body> </html>
2D效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2D效果</title> <style> /* 2D效果 */ .xiu{ width: 100px; height: 100px; border: 1px solid red; /*移动盒子 translate(x,y) 水平移动盒子 translateX(x) 垂直移动盒子 translateY(y)*/ transform: translate(100px,100px);/*位移*/ } .kang{ width: 100px; height: 100px; border: 1px solid red; /*放大缩小 scale(x,y) 水平放大缩小 scaleX(x) 垂直放大缩小 scaleY(y)*/ transform: scale(1,2);/*缩放*/ } .sear{ width: 100px; height: 100px; border: 1px solid red; /*旋转度数 rotate(deg)*/ transform: rotate(10deg);/*旋转*/ /*设置旋转的原点 左下角*/ transform-origin: right bottom; } .niu{ width: 100px; height: 100px; border: 1px solid red; /*倾斜度数 skew(deg)*/ transform: skew(10deg); } .niu1{ width: 100px; height: 100px; border: 1px solid red; /*也可以设置多个效果用空格隔开*/ transform: skew(10deg) rotate(10deg);/*倾斜+旋转*/ } /*scale(缩放) translate(位移) rotate(旋转) skew(倾斜) 上面几种动画都是由 matrix 矩阵完成的*/ </style> </head> <body> <div class="xiu"></div> <div class="kang"></div> <div class="sear"></div> <div class="niu"></div> <div class="niu1"></div> </body> </html>
CSS动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS动画</title> <style> div { width: 100px; height: 100px; border: 1px solid red; /*animation：动画名称 花费时间 运动曲线(默认ease) 何时开始(默认0) 无限播放(infinite) 逆向播放(alternate) 保持动画最后的位置(forward);*/ animation: xiu 3s; /* ease 先快后慢,最后非常慢 linear 匀速 ease-in 越来越快 ease-out 越来越慢 ease-in-out 先快后慢 上面几种动画速度都是 贝塞尔曲线 完成的 */ } /*声明动画*/ @keyframes xiu { 0% {/*开始*/ width: 100px; } 50% { width: 150px; } 100% {/*结束*/ width: 200px; } } </style> </head> <body> <div></div> </body> </html>
flex布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局(伸缩布局)</title> <style> .xiu { width: 80%; height: 200px; /*给父元素添加伸缩布局*/ display: flex; /*设置水平/垂直分配 默认row水平分配 column垂直分配*/ flex-direction: column; } .xiu div:nth-child(1){ background: red; /*设置分配的份数*/ flex: 1; } .xiu div:nth-child(2){ background: blue; flex: 2; } .xiu div:nth-child(3){ background: yellow; flex: 3; /*max- 150px;*/ /*设置最大宽度*/ min-width: 150px;/*设置最小宽度*/ } </style> </head> <body> <div class="xiu"> <div></div> <div></div> <div></div> </div> </body> </html>
文字阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字阴影</title> <style> p{ /*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/ text-shadow: 1px 1px 0px rgba(0,0,0,0.1); } </style> </head> <body> <p>文字阴影</p> </body> </html>
背景渐变/浏览器前缀
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浏览器前缀与背景渐变</title> <style> /*浏览器前缀常用于解决H5与C3的兼容解决文件 浏览器前缀 浏览器 -webkit- Google Chrome，Safari，Android Browser -moz- Firefox -ms- Interent Explorer，Edge -o- Opera -khtml- Konqueror*/ /*颜色渐变*/ div { width: 300px; height: 100px; /*background: linear-gradient(渐变的起始位置,起始颜色 位置(默认平均分配),结束颜色 位置(默认平均分配));*/ background: linear-gradient(top,red 30%,green 70%); /*因为Google不支持该属性，所以需要添加浏览器前缀*/ background: -webkit-linear-gradient(top,red,green); } </style> </head> <body> <div></div> </body> </html>
多背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多背景</title> <style> div { width: 500px; height: 500px; /*添加多背景就用多个url()，用逗号隔开*/ background: url(1.png) no-repeat bottom right,url(1.png) no-repeat top left; background-color: red;/*多背景的背景颜色需要写到多背景后面*/ } </style> </head> <body> <div></div> </body> </html>
盒子背景透明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子半透明</title> <style> div { width: 500px; height: 500px; /*盒子半透明*/ /*opacity: .5;*/ /*盒子的背景颜色半透明*/ background: rgba(0,0,0,.5); } </style> </head> <body> <div></div> </body> </html>
3D效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D效果</title> <style> /*3D效果 transform*/ .xiu { /*rotateX(deg) X轴立体旋转 rotateY(deg) Y轴立体旋转 rotateZ(deg) Z轴立体旋转*/ transform: rotateZ(10deg); } </style> </head> <body> <div class="xiu"><img src="images/1.jpg" alt=""></div> <!-- 3D转换与2D转换的区别 --> <!-- 在移动端使用3D转换可以优化性能(如果设备有3D加速引擎GPU就可以加速性能 而2D转换不能使用GPU) --> </body> </html>
透视效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透视效果</title> <style> /*透视原理：近大远小 浏览器透视：把近大远小的所有图像，透视在屏幕上 perspective：视透，表示视点距离屏幕的长短 视点：用于模拟透视效果时人眼的位置 perspective:定义3D元素距视图的距离 定义perspective属性时，其子元素会获得透视效果，而不是元素本身 */ .xiu{ height: 150px; width: 150px; margin: 50px; padding:10px; border: 1px solid black; perspective:150; /*因为谷歌浏览器不支持，所以加上浏览器前缀*/ -webkit-perspective:150; } .kang{ padding: 50px; border: 1px solid black; background-color: yellow; transform: rotateX(45deg); } </style> </head> <body> <div class="xiu"> <div class="kang"></div> </div> </body> </html>
ss文本
- 首行缩进
p { text-indent: 10em; }
- 水平对齐
p { text-align: left;/*(右对齐)*/ text-align: right;/*(左对齐)*/ text-align: center;/*(居中)*/ }
- 单词间隔
p { word-spacing: 10em; }
- 字间隔
p { letter-spcaing: 10em; }
- 行间隔
p { line-height: 10px; }
- 字符转换
p { text-transform: uppercase;/*(全大写)*/ text-transform: owercase;/*(全小写)*/ text-transform: capitalize;/*(首字母大写)*/ }
- 文本装饰
p { text-decoration: underline;/*(添加下划线)*/ text-decoration: overline;/*(添加上划线)*/ text-decoration: line-through;/*(添加删除线)*/ text-decoration: none;/*取消文本装饰*/ }
- 处理空白符
p { white-space: normal;/*(合并空格)*/ white-space: nowrap;/*(禁止换行)*/ white-space: pre;/*(不忽略空格和换行)*/ white-space: pre-wrap;/*(不忽略空格和换行)*/ white-space: pre-line;/*(合并空格，可以换行)*/ }
- 文本方向
p { direction: rtl;/*设置文本方向从右向左*/ direction: ltr;/*（默认）*/ }
- 文本阴影
p { text-shadow: 5px 5px 5px red； }
css字体
- css字体
Serif字体、Sans-serif字体、Monospace字体、Cursive字体、Fantasy字体
- 指定字体
p { font-family: Georgia,serif;/*如果没有Georgia字体就设置serif字体，以此类推*/ }
- 字体风格
p { font-style: normal;/*文本正常宣示*/ font-style: italic;/*文本斜体宣示*/ font-style: oblique;/*文本倾斜宣示*/ font-style: normal;/*取消字体风格*/ }
- 字体变形
p { font-variant: snall-caps;/*小型大写字母*/ }
- 字体加粗
p { font-weight: 100-900;/*(400==normal 700==bold)*/ }
- 字体大小
p { font-size: 16px;/*(16px==1em)*/ }
css溢出
p { overflow: hidden;/*溢出内容修剪*/ overflow:scroll;/*始终显示滚动条*/ overflow: auto;/*溢出内容时显示滚动条*/ text-overflow: ellipsis;/*溢出内容使用省略号代替*/ }
css链接
- 设置链接的样式
设置样式必须按照下面顺序
a : link{}/*(未被访问的链接)*/ a : visited{}/*(已访问的链接)*/ a : hover{}/*(指针位于链接上方)*/ a : active{}/*(链接被点击的时刻)*/
- 常见的链接样式
a { text-decoration: none;/*(取消下划线)*/ }
css列表
ul { list-style-type: square; list-style-image: url(xx.png); }
css表格
- 表格边框
table,th,td { border: 1px solid red; }
- 折叠边框
table { border-collapse: collapse; }
- 表格宽度和高度
table { width: 100% height: 50px }
- 表格文本对齐
td { text-align: right; text-align: left; text-align: center; }
- 表格内边距
td { padding: 10px; }
- 表格颜色
th { color: red; }
css轮廓
p { outline: red solid red; }
css框模型
body { width : 70px; margin: 10px; padding: 5px; }
css内边距
h1 { padding: 10px 0.1em 2ex 10%;/*(上右下左)*/ padding: 10px 10px;/*(上下,左右)*/ padding-top:10px;/*(上)*/ padding-right: 0.1em; /*(右)*/ padding-bottom: 2ex;/*(下)*/ padding-left: 10%;/*(左)*/ }
css边框
- 边框样式
div { border: 1px solid red;/*(宽度 样式 颜色)*/ border-top-style: solid;/*(设置上边框样式)*/ border-right-width: 1px;/*(设置右边框宽度)*/ border-bottom-color: red;/*(设置下边框颜色)*/ border-color: transparent;/*(透明边框)*/ }
- border-radius(圆角)
div { border-radius: 25px; }
- box-shadow(阴影)
div { box-shadow: 10px 10px 5px red; }
css外边距
div { margin: 10px 0.1em 2ex 10%;/*(上右下左)*/ margin: 10px 10px;/*(上下,左右)*/ margin-top:10px;/*(上)*/ margin-right: 0.1em; /*(右)*/ margin-bottom: 2ex;/*(下)*/ margin-left: 10%;/*(左)*/ }
css定位
.div { position: static;/*(默认)*/ position: relative;/*(相对定位)*/ position: absolute;/*(绝对定位)*/ position: fixed;/*(固定定位)*/ }
css浮动
img { float: right;/*(右浮动)*/ float: left;/*(左浮动)*/ float: inherit;/*(继承父类浮动)*/ }
通配符选择器
* { color: red }
元素选择器
<h1>标题</h1>
h1 { color: red }
选择器分组
<h1>标题1</h1>
<h2>标题2</h2>
h1, h2 { font-size: 10px; }
css类选择器
<h1 class="xiu">标题</h1>
.xiu { color: red; }
结合元素选择器
<h1 class="xiu">标题</h1>
h1.xiu { color: red; }
css多类选择器
<h1 class="xiu kang">标题</h1>
.xiu { color: red; } .kang { font-size: 1px; }
id选择器
<h1 id="xiu">标题</h1>
#xiu { width: 1px }
属性选择器
<a href="url" title="提示">链接</a>
/*第1种方法*/ a[href] { text-decoration: none; } /*第2种方法*/ a[href][title] { text-decoration: none; } /*第3种方法*/ a[href="url"] { text-decoration: none; } /*第4种方法*/ a[href="url"][title="提示"] { text-decoration: none; }
部分属性值选择
<h1 class="xiu kang">标题</h1>
h1[class~=xiu] { color: red; }
子串匹配属性选择器
后代选择器
<h1><s>内容<s></h1>
h1 s { color: red; }
选择子元素
<h1><s>内容</s></h1>
<h1><p><s>内容</s></p></h1>（不受影响）
h1>s { color: red; }
相邻选择器
/*选择h1后面紧挨后面的h2元素*/ h1 + h2{ color: red; }
伪类
<a href="#"></a>
a : link {}/*未被访问的链接*/ a : visited {}/*已访问的链接*/ a : hover {}/*指针位于链接上方*/ a : active {}/*链接被点击的时刻*/
<input type="text" value="红色"/>
/*input获取焦点的时候*/ input : focus { color : red; }
<ul>
<li>1<li>
<li>2<li>
</ul>
/*获取第一个元素*/ li:first-child{ color: red; }
css伪元素
- :first-letter
/*向文本的第一个字符添加样式*/ p:first-letter { color: red; }
- :first-line
/*向文本的第一行字符添加样式*/ p:first-line { color: red; }
- :before
/*在元素前面添加内容*/ p:before{ content: "0"; }
- :after
/*在元素后面添加内容*/ p:after{ content: "0"; }
2D效果
- 修改元素的位置
transform: translate(x,y)
transform: translateX(n)*5
transform: translateY(n)*6
img { transform: translate(21px,23px); }
- 修改元素大小
transform:scale(x,y)
transform: scaleX(n)*3
transform: scaleY(n)*2
img { transform: scale(2,2); }
- 倾斜元素
transform:skew(x-angle,y-angle)
transform: skewX(angle)*1
transform: skewY(angle)*4
img { transform: skew(10deg,10deg); }
transform: matrix(1,2,3,4,5,6)
- 旋转元素
transform: rotete(angle)
img { transform: rotate(10deg); }
3D转换
- 翻转元素
transform:rotateX()
transform:rotateY()
transform:rotateZ()
img{ transform:rotateX(100deg); }
- 透视效果
perspective定义3D元素距视图的距离
定义perspective属性时，其子元素会获得透视效果，而不是元素本身
浏览器暂时不支持perspective属性
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
/*.kang是.xiu的子元素*/ .xiu{ height: 150px; width: 150px; margin: 50px; padding:10px; border: 1px solid black; -webkit-perspective:150; } .kang{ padding: 50px; border: 1px solid black; background-color: yellow; transform: rotateX(45deg); }
- 嵌套效果
transform-style设置元素3D嵌套
必须和transform属性一同使用
/*.kang是.xiu的子元素*/ .xiu{ padding:100px; background: red; transform: rotateY(60deg); transform-style: preserve-3d; } .kang{ padding:60px; background: yellow; transform: rotateY(80deg); }
- 设置元素的重心
transform-origin属性改变旋转元素的重心位置
/*.kang是.xiu的子元素*/ .xiu{ height: 200px; width: 200px; margin: 100px; padding:10px; border: 1px solid black; } .kang{ padding:50px; background-color: yellow; transform: rotate(45deg); transform-origin:20% 40%; }
css过渡
- transition: 2s
设置过度时间为2秒
.div { width: 100px; height: 100px; background: red; transition: 2s; } .div:hover { background: blue; }
- transition: width 2s, height 4s
设置宽度的过度时间为2秒，高度的过度时间为4s
.div { width: 100px; height: 100px; background: red; transition: width 2s,height 4s; } .div:hover { width: 300px; height: 300px; }
- transition-delay: 2s
等待2秒执行hover
.div { width: 100px; height: 100px; background: red; transition-delay: 2s; } .div:hover { width: 300px; height: 300px; }
css动画
div {
animation-name: xiu(定义动画的名称)
animation-duration: 5s(定义动画的时间，默认为0)
animation-timing-function: linear(定义动画速度曲线)
animation-delay: 2s(定义动画开始的时间，默认为0)
animation-iteration-count: infinite(定义动画播放次数，默认为1)
animation-direction: normal/alternate(定义动画一周后师傅逆向播放)
animation-plat-state: paused/running(暂停播放动画)
}
.div {
animation: xiu 5s linera 2s infinite alternate;
}
div{ background:red; animation:xiu 5s; } @keyframes xiu{ 0% { width:100px; height:100px; } 100% { width:300px; height:300px; } }
css多列
p { column-count: 2;/*定义文本多少列*/ column-gap: 2px;/*定义列之间的距离*/ column-rule: 1px solid red;/*定义列之间的样式*/ column-width: 1px;/*定义列的宽度*/ }
css用户界面
- 允许用户修改div的大小
resize：both
div { border: 1px solid red; resize: both; overflow: auto; }
- 在边框外面在加一个边框
outline添加外边框
outline-offset外边框与内边框的间距
div { border: 8px solid black; outline: 6px solid red; outline-offset: 4px; }