css3简写

1、font的简写:font:italic small-caps bold 12px/1.5em arial,verdana
       等效于: font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana;
         顺序:  font-style| font-variant| font-weight | font-size| line-height| font-family
        注意:简写的时候,font-size 与 line-height 必须要通过斜杠/来组成一个词,不容分割
2、 background的简写:background:#fff url(‘images/bg.png‘) no-repeat fixed left top;
            等效于:background-color:#fff;background-image:url(‘images/bg.png‘);background-attachment:fixed;background-position:left top;
              顺序:background-color| background-image| background-repeat| background-attachment| background-position
3、margin 和 padding(它们的用法相同,我以margin来说明)
         margin的简写:margin:1px 2em -23px;
               等效于:margin-top:1px;margin-right:0px;margin-bottom:2em;margin-left:-23px;
                 顺序:margin-top| margin-right| margin-bottom| margin-left
4、 border(这是四个边框的样式)的简写:border:1px solid #000;
                           等效于:border-width:1px;border-style:solid;border-color:#000;
                             顺序:border-width| border-style| border-color
border又分为:border-top| border-right| border-bottom| border-left(上、右、下、左)
       border-top:1px solid #000; 等效于:border-top-width:1px;border-top-style:1px;border-top-color:#000;

 5、list-style 的简写:list-style:square outside url("images/bullet.gif");
               等效于:lsit-style-type:square;list-style-position:outside;list-style-image:url(‘imags/bullet.gif‘);
                 顺序:list-style-type| list-style-posiiton| list-style-image
时间: 2024-10-12 07:29:24

css3简写的相关文章

CSS3 animation 属性

定义和用法:animation 属性是一个简写属性,用于设置六个动画属性: animation-name 规定需要绑定到选择器的 keyframe 名称..animation-duration 规定完成动画所花费的时间,以秒或毫秒计.animation-timing-function 规定动画的速度曲线.animation-delay 规定在动画开始之前的延迟.animation-iteration-count 规定动画应该播放的次数.animation-direction 规定是否应该轮流反向

css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解css. 一.字体属性主要包括下面几个 font-family,font-style,font-variant,font-weight,font-size,font font-family(字体族): “Arial”.“Times New Roman”.“宋体”.“黑体”等;font-style(字体

HTML5+CSS3 - 代码简写篇

有话先说:我是一只菜鸟,还是一只刚步入前端这个领域的小菜年,在不断的进阶,理解最深刻的还是代码,既爱又恨却不知如何去感悟. background属性简写: background-position属性组合方式:[ left | center | right ] || [ top | bottom ] (组合中代码都是以空格间距) background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动 background属性简写顺序:background-color ||

css2和CSS3的background属性简写

1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  background: url("") || 0 0/cover || no-repeat || scroll || border-box || content-box || black; CSS2中的Background属性: background: background-color || bac

CSS3略谈(中二)

一.3D转换:三维变换使用基于二维变换的相同属性,可以让我们基于三个坐标方向对元素进行变换.和二维变形一样,三维变形可以使用transform属性来设置 1. 3D移动 l   方法:translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写,如:translateX(length),translateY(length), translateZ(length) l   示例: div:hover{ /*Y轴移动+100px*/ /*transform:translateY(10

css3 动画(animation)-简单入门

css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做一些动画).具体如何使用呢??? 首先定义一个动画,然后引用动画. 定义一个动画要使用@keyframes,然后跟上你要定义的动画的名字.关键字"from"表示开始, "to"表示结束,等同于0% 和 100%.最好使用百分比来表示变化发生的时间,这样的话还可以定义从开

CSS笔记(十二)CSS3之动画

参考:http://www.w3school.com.cn/css3/css3_animation.asp 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 属性 描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性. 3 animation-name 规定

《css3揭秘》的效果code

1.在阅读css3揭秘的基础上,跟着书中的效果组合起来的这组代码. 2.代码中有四张图片分别是 1.jpg 2.jpg  3.jpg 4.jpg; 作为demo,图片名称没有语义. 3.兼容性:  IE上有部分并不兼容,Edge,FF,chrome没有问题. 4.下面是一个选择器的实现: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"

CSS3与动画有关的属性transition、animation、transform对比

最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换). Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D