先做网站后台还是前台,注册中文域名费用一般多少钱,全景网站开发多少钱,建站系统平台目录 常见样式参考表
特殊样式
媒体查询
自定义字体
变换效果 transform
translate() 方法
rotate() 方法
scale() 方法
skew() 方法
matrix() 方法
过渡效果 transition
动画效果 keyframes animate
渐变效果
background-image:linear-gradient
background-imag…目录 常见样式参考表
特殊样式
媒体查询
自定义字体
变换效果 transform
translate() 方法
rotate() 方法
scale() 方法
skew() 方法
matrix() 方法
过渡效果 transition
动画效果 keyframes animate
渐变效果
background-image:linear-gradient
background-image:radius-gradient
多列效果 column-count
字体图标(icon) 常见样式参考表
样式名称样式的值说明font-family字体名称如微软雅黑or Microsoft YaHei文本字体font-stylenormal、italic、oblique规定斜体文本font-variantsmall-caps、normal小型大写字母font-weightnormal、bold、bolder、数值文本的粗细font-size默认大小是 16 像素 (16px1em)单位一般是px也可以是其他文本的大小text-indent所有元素的第一行都可以缩进一个给定的长度该长度可以是负值软化文本内容text-alignleft、right 、center、justify文本行间的对齐方式word-spacing其默认值 normal 与设置值为 0 是一样的改变单词间隔letter-spacing其默认值 normal 与设置值为 0 是一样的改变字字母间隔text-transformnone、uppercase、lowercase、capitalize处理文本的大小写text-decorationnone、underline、overline、line-through、blink文本装饰white-spacenormal、pre-line、nowrap、pre、pre-wrap空格换行和tab 处理color#十六进制三原色、颜色单词、rgb函数、rgba函数文本颜色direction默认ltr、rtl、inherit文本的方向line-heightnormal、数值、%等行高text-shadowh1 { text-shadow: 5px 5px 5px #FF0000; }文本阴影效果box-shadowdiv{ text-shadow: 5px 5px 5px #FF0000; }盒子阴影效果list-style-typedisc、circle、square、decimal、lower-roman、lower-latin列表的样式list-style-imageurl函数引入图片列表图标list-style-positioninside、outside、inherit何处放置列表项标记list-stylelist-style:square inside url(imgs/point.png);统一设置列表样式outlinep { outline:#00FF00 dotted thick; }轮廓线outline-offset数值轮廓和元素的距离outline-color#十六进制三原色、颜色单词、rgb函数、rgba函数轮廓颜色outline-styledotted、solid、dashed、double等轮廓样式outline-widththin细、medium默认、thick粗、数值轮廓的宽度border-imagediv { border-image:url(border.png) 30 30 round;}使用图片来创建边框opacity0~1之间的数值0表示全透明1表示不透明透明度width数值元素的宽度height数值元素的高度max-height数值最大高度max-width数值最大宽度min-height数值最小高度min-width数值最小高度margin{margin: 0px; margin: 10px 20px; margin: 10px 20px 30px 0px; margin: auto;}外边距margin-left数值左外边距margin-right数值右外边距margin-top数值上外边距margin-bottom数值下外边距padding{padding: 0px; padding: 10px 20px; padding: 10px 20px 30px 0px; }内边距padding-xx和margin一致也有四个borderborder: 1px solid red;边线border-width数值边线粗细border-styledotted、dashed、solid、double边线样式border-color#十六进制三原色、颜色单词、rgb函数、rgba函数颜色border-xx-xxborder-top-width: 15px样式、颜色、粗细border-radiusdiv { border:2px solid; border-radius:25px; }数值或者百分比边线的弧度background{ background: #00FF00 url(bgimage.gif) no-repeat fixed top; }背景综合写法background-color#十六进制三原色、颜色单词、rgb函数、rgba函数背景颜色background-positiontop left 这种单词对 或者 坐标位置x,y或者 x%, y%背景位置background-sizebackground-size:80px 60px;| cover背景图像的尺寸background-repeatrepeat、repeat-x、repeat-y、no-repeat背景图像重复background-imageurl函数引入图片背景图片background-attachment默认scroll、fixed背景图像是否固定或者随页面的滚动visibilityvisible、hidden元素是否可见displaynone、block、inline、inline-block、list-item元素类型转换、可见性positionstatic、relative、absolute、fixed元素定位z-index数值默认0表示z轴的优先级vertical-alignbaseline、sub、super、top、text-top、middle、text-bottom元素的垂直对齐方式overflowvisible、hidden、scroll、auto溢出元素框时处理clearleft、right、both、none清除浮动floatleft、right、none元素在哪个方向浮动resizenone、both、horizontal、vertical规定是否调整元素尺寸box-sizingcontent-box、border-box容器尺寸计算方式filteropacity()、url()、blur()、grayscale()、brightness()等函数设置页面的滤镜
案例详解 body {/*background-color: #666666;*/
}
.content {width: 600px;font-family: 微软雅黑,宋体;font-size: 16px;line-height: 35px;/*font-weight: bold;*/text-shadow: -5px -5px 2px #317FE5; /* offset-x | offset-y | blur-radius | color */position: fixed;top: 0;left: 0;
}
.box {margin: 30px auto;width: 700px;height: 100px;background-color: grey;color: white;/*text-align: justify;*/word-spacing: 10px;letter-spacing: 5px;text-transform: lowercase;text-decoration: underline;direction: inherit;box-shadow: 5px 5px 5px[阴影的模糊程度] #ff0000; /* offset-x | offset-y | blur-radius | color */
/*border: 2px solid green;*/border-width: 2px;border-style: solid;border-color: green;/*border-radius: 5px;*/
border-bottom-left-radius: 5px;border-top-right-radius: 15px;
/*visibility: hidden;*//*display: none;*/
}
input {outline: blue 1px solid;
}
.box1 {margin-top: 30px;width: 300px;height: 300px;/*background-color: #317FE5;*/border-radius: 50%;background: #317FE5 url(../image/5.jpeg) left top;
}
.box2 {margin: 30px;width: 700px;height: 300px;border: 1px solid red;background: url(../image/mybatis-logo.png) no-repeat 50px 5px;
} 页面 !DOCTYPE html
html langen
headmeta charsetUTF-8title常见样式的使用/titlelink relstylesheet hrefcss/index.css
/head
body
div classcontent
中新网2月20日电 据香港《明报》报道澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启被视为“城中钻石笋盘”家底丰厚兼遗传了赌王的帅气。2018年农历新年他公布向内地女友GiGi求婚成功随后传媒追问他有关婚礼的安排却低调避谈。
/div
div classbox澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启hello HTML css/div
input typetext nameusername placeholder姓名
div classbox1/div
div classbox2/div
/body
/html 特殊样式
媒体查询 有时我们需要显示的区域根据不同设备显示不一样的效果这时就可以使用媒体查询。而使用媒体查询我们就需要用到 media 来实现。 !DOCTYPE html
html langen
headmeta charsetUTF-8title媒体查询/titlestyle.box{width: 100%;height: 500px;background-color: #317FE5;}media screen and (max-width: 500px) {.box {background-color: red;}}media screen and (min-width: 768px){.box {background-color: blue;}}media screen and (min-width: 1200px){.box {background-color: #C44F00;}}/style
/head
body
div classbox/div
/body
/html 自定义字体 由于浏览器默认的使用的字体是微软雅黑但有时候我们希望使用我们自己指定的字体这时就需要使用 font-face 来实现。 !DOCTYPE html
html langen
headmeta charsetUTF-8title字体的使用/titlestyle/*指定自定义字体*/font-face {/*自定义字体名称*/font-family: myfont;src: url(./font/ttf/JetBrainsMono-Bold.ttf), url(./font/ttf/JetBrainsMono-Italic.ttf);}/* 使用自定义字体 */.box {font-family: myfont;}/style
/head
body
div classbox澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启/div
/body
/html 变换效果 transform
在 CSS 中有以下几种变换效果 translate()移动 rotate()旋转 scale()缩放 skew() 翻转 matrix() 综合 translate() 方法
它是一种平移效果元素从某个位置移动到另一个位置。在使用过程中需要通过 x 轴和 y 轴来实现。 !DOCTYPE html
html langen
headmeta charsetUTF-8titletranslate/titlestylediv {width: 200px;height: 200px;}div.box1 {background-color: #317FE5;z-index: 900000;}div.box2 {background-color: orange;/*transform: translate(200px, 30px);*//*transform: translate(100px, -100px);*//*transform: translate(50px);*//*transform: translateX(100px);*/transform: translateY(100px);z-index: 0;}/style
/head
body
div classbox1/div
div classbox2/div
/body
/html rotate() 方法
这个效果是让某个元素进行旋转需要指定旋转的角度。负数为逆时针旋转正数是顺时针旋转旋转的单位是 deg。 !DOCTYPE html
html langen
headmeta charsetUTF-8titlerotate/titlestylediv {width: 200px;height: 200px;}div.box1 {background-color: #317FE5;transform: rotate(-20deg);}div.box2 {background-color: orange;transform: rotate(45deg);}/style
/head
body
div classbox1/div
div classbox2/div
/body
/html scale() 方法
这个方法的作用是让某个元素的尺寸增加或减少会根据给定的宽度x轴和高度y 轴来进行变化。 !DOCTYPE html
html langen
headmeta charsetUTF-8titlescale/titlestylediv {width: 200px;height: 200px;}div.box1 {background-color: #317FE5;transform: scale(0.5, 0.5);}div.box2 {background-color: orange;/*transform: scale(1.5, 1.5);*//*transform: scale(2);*/transform: scaleX(2);}.container {position: absolute;left: 200px;top: 0;}/style
/head
body
div classcontainerdiv classbox1/divdiv classbox2/div
/div
/body
/html skew() 方法
这个方法的作用是让元素翻转给定的角度根据给定的水平线x 轴和垂直线y 轴来进行变化。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleskew/titlestylediv {width: 200px;height: 200px;color: white;}div.box1 {background-color: #317FE5;}div.box2 {background-color: orange;transform: skew(30deg, 30deg);}/style
/head
body
div classbox1这是第一个块元素/div
div classbox2这是第二个块元素/div
/body
/html matrix() 方法
这个方法可以实现前面的那几个效果。 !DOCTYPE html
html langen
headmeta charsetUTF-8titlematrix/titlestylediv {width: 200px;height: 200px;color: white;text-align: center;}div.box1 {background-color: #317FE5;}div.box2 {background-color: orange;transform: matrix(0.86, 0.5, -0.5, 0.86, 0, 0); /* matrix(a, b, c, d, tx, ty) */}/style
/head
body
div classbox1这是第一个块元素/div
div classbox2这是第二个块元素/div
/body
/html 过渡效果 transition
从一个状态变为另一个状态的过程要想有过渡效果我们需要有触发条件通常的触发条件为鼠标移动到元素上hover。 !DOCTYPE html
html langen
headmeta charsetUTF-8title单项过渡效果/titlestyle.box {width: 200px;height: 200px;background-color: #317FE5;transition: width 2s;}.box:hover {width: 400px;background-color: #C44F00;}/style
/head
body
div classbox/div
/body
/html 多项过渡 !DOCTYPE html
html langen
headmeta charsetUTF-8title多项过渡效果/titlestyle.box {width: 200px;height: 200px;background-color: #317FE5;/*transition: width 2s, background-color 2s, transform 2s;*/transition: all 2s;}.box:hover {width: 400px;background-color: #C44F00;transform: translateX(150px);}/style
/head
body
div classbox/div
/body
/html transition 这个属性的值
属性描述值transition简写属性用于在一个属性中设置四个过渡属性。属性对transition-property规定应用过渡的 CSS 属性的名称。属性名称transition-duration定义过渡效果花费的时间。默认是 0。数值单位秒transition-timing-function规定过渡效果的时间曲线。默认是 ease。linear、ease、ease-in等transition-delay规定过渡效果何时开始。默认是 0。数值单位秒 !DOCTYPE html
html langen
headmeta charsetUTF-8title过渡效果比较/titlestyle.box {width: 200px;height: 200px;background-color: #317FE5;/*transition: width 5s ease 2s;*//*transition: width 3s linear;*//*transition: width 3s ease-in;*//*transition: width 3s ease-in-out;*/transition: width 3s ease-out;}.box:hover {width: 500px;}/style
/head
body
div classbox/div
/body
/html 动画效果 keyframes animate
在 CSS3 中提供了基于 CSS 动画效果我们需要先定义动画然后再使用动画。
定义动画使用 keyframes而使用动画使用 animate。 !DOCTYPE html
html langen
headmeta charsetUTF-8title动画效果/titlestyle/*.box {*//* width: 200px;*//* height: 200px;*//* background: #317FE5;*//* transition: transform 2s;*//*}*/
/*.box:hover {*//* transform: translateX(100px);*//*}*/
/* 定义动画 */keyframes myAnimate {from {left: 5px;background: #317FE5;}to {left: 500px;background: red;}}
.box {width: 200px;height: 200px;background: #317FE5;animation: myAnimate 5s;position: absolute;left: 5px;top: 5px;}/style
/head
body
div classbox/div
/body
/html 另一个效果 !DOCTYPE html
html langen
headmeta charsetUTF-8title动画效果/titlestyle/* 定义动画 */keyframes myAnimate {0% {left: 5px;top: 5px;}25% {left: 500px;top: 5px;}50% {left: 500px;top: 200px;}75% {left: 5px;top: 200px;}100% {left: 5px;top: 5px;}}
.box {width: 200px;height: 200px;background: #317FE5;animation: myAnimate 5s;position: absolute;left: 5px;top: 5px;}/style
/head
body
div classbox/div
/body
/html 动画属性
属性描述值keyframes规定动画。指定css样式animation所有动画属性的简写属性除了 animation-play-state 属性。动画名称animation-name规定 keyframes 动画的名称。动画名称animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。数值animation-timing-function规定动画的速度曲线。默认是 ease。ease-in-out、linear、ease、ease-in、ease-outanimation-delay规定动画何时开始。默认是 0。数值animation-iteration-count规定动画被播放的次数。默认是 1。数值或者infiniteanimation-direction规定动画是否在下一周期逆向地播放。默认是 normal。normal、alternateanimation-play-state规定动画是否正在运行或暂停。默认是 running。paused、runninganimation-fill-mode规定对象动画时间之外的状态。none、forwards、backwards、both !DOCTYPE html
html langen
headmeta charsetUTF-8title动画属性介绍/titlestyle.box {width: 200px;height: 200px;background: #317FE5;position: absolute;top: 5px;left: 5px;
/*animation: myMove 5s;*//* 指定动画名称 *//*animation-name: myMove;*//* 定义动画持续时间单位是秒或毫秒 *//*animation-duration: 3s;*//* 定义动画执行的效果 *//*animation-timing-function: ease-in;*//* 定义动画执行次数默认为 1 次如果希望无限次则值为 infinite *//*animation-iteration-count: infinite;*//*animation-iteration-count: 1;*//* 定义动画的运行方向 *//*animation-direction: alternate-reverse;*//*animation-direction: alternate;*/
/*animation-play-state: paused;*/
animation: myMove 3s ease-in infinite alternate;
}
keyframes myMove {from {/*background: #317FE5;*/left: 5px;top: 5px;}to {/*background: red;*/left: 200px;top: 5px;}}/style
/head
body
div classbox/div
/body
/html 动画案例定义两个圆一个圆逆时针旋转另一个圆顺时针旋转。
下图是定义分析 !DOCTYPE html
html langen
headmeta charsetUTF-8title动画的案例/titlestyle.outer {width: 300px;height: 300px;background: url(image/5.jpeg) no-repeat center center;overflow: hidden;border-radius: 50%;/*transform: translateY(50%);*/position: absolute;left: 50%;top: 50%;margin-top: -150px;margin-left: -150px;animation: outerAnimate 5s linear infinite;}.inner {width: 200px;height: 200px;background: url(image/7.jpeg) no-repeat center center;/*transform: translate(25%, 25%);*/border-radius: 50%;position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;animation: innerAnimate 3s linear infinite;}keyframes outerAnimate {from {transform: rotate(360deg);}to {transform: rotate(0deg);}}keyframes innerAnimate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}/style
/head
body
div classouterdiv classinner/div
/div
/body
/html 渐变效果
background-image:linear-gradient
background-image:radius-gradient
在 CSS3 中提供了可以让两种或多种颜色 之间的显示平稳过渡。我们只需要使用 background-image: linear-gradients 属性来指定即可。它的语法为
background-image: linear-gradient(direction, color-stop1, color-stop2,....);
简单示例 !DOCTYPE html
html langen
headmeta charsetUTF-8title渐变效果1/titlestyle.box {width: 500px;height: 200px;border: 1px solid #333333;/* 线性渐变从下到上 *//*background-image: linear-gradient(#cccccc, #317FE5, #ff0000);*//* 线性渐变从左到右 *//*background-image: linear-gradient(to right, #317FE5, #ff0000);*//* 线性渐变从右到左 */background-image: linear-gradient(to left, #317FE5, #ff0000);}/style
/head
body
div classbox/div
/body
/html 其它效果 !DOCTYPE html
html langen
headmeta charsetUTF-8title渐变效果2/titlestyle.box {width: 300px;height: 300px;margin: 50px auto;border: 1px solid #333333;border-radius: 50%;/* 可以指定渐变的角度 *//*background-image: linear-gradient(180deg, #ff0000, yellow);*/
/* 可以指定渐变的透明度 *//*background-image: linear-gradient(to right, rgba(255,0,0,.5), rgba(255, 255, 0, 0.5));*/
/* 重复的线性渐变 *//*background-image: linear-gradient(red, yellow 10%, green 20%);*/
/* 径向渐变 */background-image: radial-gradient(red, yellow);}/style
/head
body
div classbox/div
/body
/html 多列效果 column-count
在 CSS3 中提供了将文本内容设计成像报纸一样的多列布局。 !DOCTYPE html
html langen
headmeta charsetUTF-8title多列效果/titlestyle.box {column-count: 3;}/style
/head
body
h1下面的数据呈现3列展示/h1
div classbox“当我年轻的时候我梦想改变这个世界当我成熟以后我发现我不能够改变这个世界我将目光缩短了些决定只改变我的国家当我进入暮年以后我发现我不能够改变我们的国家我的最后愿望仅仅是改变一下我的家庭但是这也不可能。当我现在躺在床上行将就木时我突然意识到如果一开始我仅仅去改变我自己然后我可能改变我的家庭在家人的帮助和鼓励下我可能为国家做一些事情然后谁知道呢?我甚至可能改变这个世界。”
/div
/body
/html 字体图标(icon) !DOCTYPE html
html langen
headmeta charsetUTF-8title字体图标/title
/head
body
h1svg标签的使用/h1
svg xmlnshttp://www.w3.org/2000/svg version1.1circle cx50 cy50 r20 strokeblack stroke-width2 fillred /
/svg
/body
/html
