<!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-width: 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-width: 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>
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； }
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)*/ }
a : link{}/*(未被访问的链接)*/ a : visited{}/*(已访问的链接)*/ a : hover{}/*(指针位于链接上方)*/ a : active{}/*(链接被点击的时刻)*/
a { text-decoration: none;/*(取消下划线)*/ }
ul { list-style-type: square; list-style-image: url(xx.png); }
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; }
p { outline: red solid red; }
body { width : 70px; margin: 10px; padding: 5px; }
div { border: 1px solid red;/*(宽度 样式 颜色)*/ border-top-style: solid;/*(设置上边框样式)*/ border-right-width: 1px;/*(设置右边框宽度)*/ border-bottom-color: red;/*(设置下边框颜色)*/ border-color: transparent;/*(透明边框)*/ }
div { border-radius: 25px; }
div { box-shadow: 10px 10px 5px red; }
div { margin: 10px 0.1em 2ex 10%;/*(上右下左)*/ margin: 10px 10px;/*(上下,左右)*/ margin-top:10px;/*(上)*/ margin-right: 0.1em; /*(右)*/ margin-bottom: 2ex;/*(下)*/ margin-left: 10%;/*(左)*/ }
.div { position: static;/*(默认)*/ position: relative;/*(相对定位)*/ position: absolute;/*(绝对定位)*/ position: fixed;/*(固定定位)*/ }
img { float: right;/*(右浮动)*/ float: left;/*(左浮动)*/ float: inherit;/*(继承父类浮动)*/ }
* { color: red }
h1 { color: red }
h1, h2 { font-size: 10px; }
.xiu { color: red; }
h1.xiu { color: red; }
.xiu { color: red; } .kang { font-size: 1px; }
#xiu { width: 1px }
h1[class~=xiu] { color: red; }
h1 s { color: red; }
h1>s { color: red; }
/*选择h1后面紧挨后面的h2元素*/ h1 + h2{ color: red; }
/*input获取焦点的时候*/ input : focus { color : red; }
/*向文本的第一个字符添加样式*/ p:first-letter { color: red; }
/*向文本的第一行字符添加样式*/ p:first-line { color: red; }
/*在元素前面添加内容*/ p:before{ content: "0"; }
/*在元素后面添加内容*/ p:after{ content: "0"; }
img { transform: translate(21px,23px); }
img { transform: scale(2,2); }
- 倾斜元素
img { transform: skew(10deg,10deg); }
- 旋转元素
transform: rotete(angle)
img { transform: rotate(10deg); }
.div { width: 100px; height: 100px; background: red; transition: 2s; } .div:hover { background: blue; }
.div { width: 100px; height: 100px; background: red; transition: width 2s,height 4s; } .div:hover { width: 300px; height: 300px; }
.div { width: 100px; height: 100px; background: red; transition-delay: 2s; } .div:hover { width: 300px; height: 300px; }
p { column-count: 2;/*定义文本多少列*/ column-gap: 2px;/*定义列之间的距离*/ column-rule: 1px solid red;/*定义列之间的样式*/ column-width: 1px;/*定义列的宽度*/ }
div { border: 1px solid red; resize: both; overflow: auto; }
- 在边框外面在加一个边框
outline添加外边框
outline-offset外边框与内边框的间距
div { border: 8px solid black; outline: 6px solid red; outline-offset: 4px; }
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
