网站建设资讯

NEWS

网站建设资讯

css3复合属性是什么

在css3中,复合属性又称“简写属性”,指的是可以在一个声明中同时书写多个属性代码、控制多种样式的属性;例如border属性,就可以在一个声明中控制边框宽度、边框样式和边框颜色。

创新互联是一家集网站建设,雷州企业网站建设,雷州品牌网站建设,网站定制,雷州网站建设报价,网络营销,网络优化,雷州网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css3中,复合属性又称“简写属性”,指的是可以在一个声明中同时设置多个属性、控制多种样式的属性。

我们知道border属性可以同时规定边框的粗细、颜色和边框类型。例如:

border:2px solid blue;

所谓复合属性就是类似于border这样的属性,能够一个属性规定对象的多种样式。比较常用的复合属性有font、border、margin、padding和background等。当然这些属性也是可以拆分的,例如border属性就可以拆分为:border-color、border-width和border-style。

CSS 常用复合属性background// background: background-color background-imagebackground-repeat background-attachment background-position/background-size// background: 背景色 图片地址 是否重复 是否固定 定位/图片尺寸background: #fff url(https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2657596156,4172056089&fm=26&gp=0.jpg) no-repeat fixed 0 0/100%

注意background-attachment和background-size会互相影响


animation// animation: name duration timing-function delay iteration-count direction fill-mode play-state;// animation: 动画名称 动画时长 动画函数 延迟时间 动画次数 动画方向 动画状态 动画运行或者暂停animation: move 5s linear 0s infinite alternate both running;

注意animation属性里有一些是可以直接省略的,比如animation-directionanimation-fill-modeanimation-play-state,每个属性效果都会有默认值,详细可参考文档


border// border: width style color;// border: 宽度 边框类型 边框颜色border: 2px dashed #000;
outline// outline: width style color;// outline: 宽度 边框类型 边框颜色outline: 2px dashed #000;

outline不占空间,上述示例可看出outline会层叠在一起


border-image// border-image: source slice width outset repeat;// border-image: 图片路径 偏移 边框宽度 图像区域超出的量 边框图片重复类型border-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576497337284&di=26ef95dbb3b7e1a4766732e6f95f1e8d&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F39%2F06%2F4556d5b0a022b0a.jpg) 100 100 100 100 round;

着重注意background-image-slice属性,正确切割才能得到理想显示


box-shadow// box-shadow: h-shadow v-shadow blur spread color inset;// box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 阴影类型box-shadow: 2px dashed #000;
font// font: style variant weight size/line-height family;// font: 字体样式 字体异体 字体粗细 字体字号/行高 字体系列font: italic small-caps bold 24px/50px Serif;
list-style// list-style: type position image;// list-style: 标记类型 标记位置 标记图像;list-style:lower-roman inside;list-style: inside url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=167525435,1152422064&fm=26&gp=0.jpg);

设置图片之后,类型属性将失效


transition// transition: property duration timing-function delay;// transition: 过渡属性 过渡时长 过渡效果 过渡延时;transition: width 1s linear 0s;

设置图片之后,类型属性将失效


padding// padding: 上 右 下 左;// padding: 上 左右 下;// padding: 上下 左右;// padding: 上下左右;padding: 10px 11px 12px 13px;padding: 10px 20px 13px;padding: 10px 20px;padding: 10px;
margin// margin: 上 右 下 左;// margin: 上 左右 下;// margin: 上下 左右;// margin: 上下左右;margin: 10px 11px 12px 13px;margin: 10px 20px 13px;margin: 10px 20px;margin: 10px;

(学习视频分享:css视频教程)


当前名称:css3复合属性是什么
标题来源:http://njwzjz.com/article/cjigsi.html