有关网站开发的书籍,wordpress 用户组权限,企业产品展示网站源码,个人什么取消网站备案盒模型代码简写 还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的#xff1a;上右下左。具体应用在margin和padding的例子如下#xff1a; margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设… 盒模型代码简写 还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的上右下左。具体应用在margin和padding的例子如下 margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/ 通常有下面三种缩写方法: 1、如果top、right、bottom、left的值相同如下面代码 margin:10px 10px 10px 10px; 可缩写为 margin:10px; 2、如果top和bottom值相同、left和 right的值相同如下面代码 margin:10px 20px 10px 20px; 可缩写为 margin:10px 20px; 3、如果left和right的值相同如下面代码 margin:10px 20px 30px 20px; 可缩写为 margin:10px 20px 30px; 注意padding、border的缩写方法和margin是一致的。 颜色值缩写 关于颜色的css样式也是可以缩写的当你设置的颜色是16进制的色彩值时如果每两位的值相同可以缩写一半。 例子1 p{color:#000000;} 可以缩写为 p{color: #000;} 例子2 p{color: #336699;} 可以缩写为 p{color: #369;} 字体缩写 网页中的字体css样式代码也有他自己的缩写方式下面是给网页设置字体的代码 body{font-style:italic;font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:宋体,sans-serif;
}这么多行的代码其实可以缩写为一句 body{font:italic small-caps bold 12px/1.5em 宋体,sans-serif;
}注意 1、使用这一简写方式你至少要指定 font-size 和 font-family 属性其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。 2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。 一般情况下因为对于中文网站英文还是比较少的所以下面缩写代码比较常用 body{font:12px/1.5em 宋体,sans-serif;
} 只是有字号、行间距、中文字体、英文字体设置。 颜色值 在网页中的颜色设置是非常重要有字体颜色color、背景颜色background-color、边框颜色border等设置颜色的方法也有很多种 1、英文命令颜色 p{color:red;} 2、RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数也可以是 0%~100% 的百分数。如 p{color:rgb(20%,33%,25%);} 3、十六进制颜色 这种颜色设置方法是现在比较普遍使用的方法其原理其实也是 RGB 设置但是其每一项的值由 0-255 变成了十六进制 00-ff。 p{color:#00ffff;} 配色表 长度值 长度单位总结一下目前比较常用到px像素、em、% 百分比要注意其实这三种单位都是相对单位。 1、像素 像素为什么是相对单位呢因为像素指的是显示器上的小点CSS规范中假设“90像素1英寸”。实际情况是浏览器会使用显示器的实际像素值有关在目前大多数的设计者都倾向于使用像素px作为单位。 2、em 就是本元素给定字体的 font-size 值如果元素的 font-size 为 14px 那么 1em 14px如果 font-size 为 18px那么 1em 18px。如下代码 p{font-size:12px;text-indent:2em;} 上面代码就是可以实现段落首行缩进 24px也就是两个字体大小的距离。 下面注意一个特殊情况 但当给 font-size 设置单位为 em 时此时计算的标准以 p 的父元素的 font-size 为基础。如下代码 html: p以这个span例子/span为例。/p css: p{font-size:14px}
span{font-size:0.8em;} 结果 span 中的字体“例子”字体大小就为 11.2px14 * 0.8 11.2px。 3、百分比 p{font-size:12px;line-height:130%} 设置行高行间距为字体的130%12 * 1.3 15.6px。 ——————————————————————————————————————————————————————————— 以上内容参考自慕课网http://www.imooc.com
