一. CSS 代码缩写,占用更少的带宽
- 盒模型代码简写:再说盒模型时外边框(margin),内边框(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:<strong>上右下左</strong>.具体应用在 margin 和 padding 的例子如下:
margin:10px 15px 12px 14px; /*上设置为10px, 又设置为15px, 下设置为12px, 做设置为14px*/
通常有下面三种<strong>缩写</strong>方法:
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进制的色值时,如果每两位的值相同,可以缩写一半.例:
p{
color:#00000;
}
可以缩写:
p{
color:#000;
}
例如2:
p{
color:#336699;
}
可以缩写为:
p{
color:#369;
}
- 网页中的字体 css 样式代码也有他的自己的缩写方式,下面给网页设置字体的代码:
body{
font-style:italic;
font-variant:samll-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.一般情况下因为对于中文网站,英文还是比较少的,所以以下面缩写代码比较常用:
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{
colir:rgb(111,45,200);
}
每一项的值可以是0255之间的整数,也可以是0%100%的百分数.如:
p{
color:rgb(20%,33%,25%);
}
3.十六进制颜色:<strong>这种颜色设置方法是现在比较普遍使用的方法</strong>,其原理其实也是 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, 那么 em=18px. 如下代码:
p{
font-size:12px;
text-indent:2em;
}
上面的代码就是可以实现段落首行缩进24px(也就是两个字体大小的间距).<strong>下面注意一种特殊情况:</strong>
但当给 font-size 设置单位为 em 时,此时计算标准以 p 的父元素的 font-size 为基础.如下代码:
p{
font-size:14px;
}
span{
font-size:0.8em
}
<p>这是个<span>例子</span>为演示.</p>
结果 span 中的字体"例子"字体大小就为11.2px(14 * 0.8 = 11.2px).
3.百分比:
p{
font-size:12px;
line-height:130%;
}
设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px).
三. CSS 样式设置小技巧
- 水平居中设置-行内元素:我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的.这里我们又得分两种情况:行内元素还是块状元素,块状元素里面又分为定宽块状元素,以及不定宽块状元素.现在我们了解下行内元素怎么进行水平居中.
如果被设置元素为文本,图片等行内元时,水平居中是通过给<strong>父元素</strong>设置设置 text-aligin:center 来实现的.(父元素和子元素:如下面的代码中: div 是"我是一个粉刷匠,粉刷本领强"这个文本的父元素.反之这个文本是 div 的子元素)如下代码:
<style>
.textCenter{
text-align:center;
}
</style>
<body>
<div class="textCenter">我是一个粉刷匠,粉刷本领强 </div>
</body>
- 水平居中设置-定宽块状元素:当被元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:<strong>定宽块状</strong>元素和<strong>不定宽块状</strong>元素.里先看下定宽块状元素(块状元素的宽度 width 为固定值).满足定宽和块状两个条件的元素是可以通过设置"左右 margin "值为 "auto"来实现居中的.我们看例子设置 div这个块状元素居中:
<style>
div{
border:1px solid red;/*为显示居中效果明显为 div 设置了些属性*/
width:200px;/*定宽*/
margin:20px auto;/*margin-left 与 margin-right 设置为auto*/
</style>
<body>
<div>我是定宽块状元素,我要视水平居中,哈哈</div>
</body>
也可以写成:
margin-left:auto;
margin-right:auto;
注意:元素的 "margin"是可以随意设置的.
- 水平居中设置-不定宽快状元素:在实际工作中我们会遇到需要为"不定宽块状元素"设置居中,比如网页上的分页导航,因为分页的数量不确定,所以我们不能通过设置宽度来限制它的弹性.(不定宽块状元素:块状元素的宽度 width 不固定).不定宽的块状元素有三种方法居中(这三种方法目前使用的都很多):
1.加入 table 标签.
2.设置 display:inline 方法:与第一种类似,显示类型设置为行内元素,进行不定宽元素的属性设置.
3.设置 position:relative 和 left:50%:利用相对定位的方式,将元素向左偏移50%,即达到居中的目的.
现在讲下第一种方法:
为什么方法加入 table 标签?是利用 table 标签的长度自适应性--即不定义长度也不默认父元素 body 的长度(table 其长度根据其内文本的长度决定),因此可以看做一个定宽快状元素,然后再利用定宽款状元素居中的 margin 的方法,使其水平居中.
第一步:为需要设置的居中元素外加入一个 table 标签(包括</tbody>,</tr>,</td>).
第二步:为这个 table 设置"左右 margin 居中"(这个和定宽块状元素的方法一样).例:
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
接下来讲第二种方法:改变块级元素的 display 为 inline 类型(设置为行内元素显示),然后使用 text-align:center 来实现居中效果.如下例子:
<style>
.container{
text-align:center;
}
/*margin:0 padding:0(消除文本与 div 边框之间的的间隙)*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/*margin-right:8px(设置 li 文本之间的间隔)*/
.container li{
margin:right:8px;
display:inline;
}
</style>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着问题:它将快状元素的 display 类型改为 inline, 变成了行内元素,所以少了一些功能,比如设定长度值.
最后讲第三种方法:通过给父元素设置 float, 然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中.我们可以这样理解:假想 ul 层的父层(即下面例子中的 div 层)中间有条平分线将 ul 层的父层(div 层)平均分为两份, ul 层的 css 代码是将 ul 层的最左端与 ul 层的父层(div 层)的平分线对其;而 li 层的 css 代码则是将 li 层的平分线与 ul 层的最左端(也是 div 层的平分线)对齐,从而实现 li 层的居中.
<style>
.container{
float:left;
position:relative;
left:50%;
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{
float:left;
display:inline;
margin-right:8px;
}
</style>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
这三种方法使用得都很广泛,各有各的优缺点,具体用哪种方法,可以视具体情况而定.
- 父元素居中-父元素高度确定的单行文本:我们在实际工作中也会遇到需要设置垂直居中的场景,比如好多报纸的文章标题在左右一侧时,常常会设置为垂直居中,为了用户体验性好.这里我们又得分两种情况:父元素高度确定的单行文本,以及父元素高度确定的多行文本.
这里先看第一种父元素高度确定的单行文本.怎么设置他为垂直居中的:父元素高度确定的单行文本的数值居中方法是通过社会父元素的height 和 line-height 高度一致来实现的.(height: 改元素的高度, line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的基线间的距离).
line-height 和 font-size 的计算之差,在 CSS 中成为"行间距",分为两半,分别加到一个文本行内容的顶部和底部.这种文字行高与块高一致带来一个弊端:当文字内容的长度大于块的宽度时,就有内容脱离了块.
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
<div class="container">
hi,mmmmm.
</div>
接下来看第二种:父元素高度确定的多行文本,图片等的竖直居中的方法有两种:
方法一:使用 table(包含 tbody,tr,td)标签,同时设置 veritcal-align:middle.css中有个竖直居中的属性: vertial-aligin 在父元素设置次样式时,会对inline-block 类型的子元素都有用.下面看下例子:
.warp{
height:500px;
background:#ccc;
}
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中</p>
</div>
</td></tr></tbody></table>
</body>
因为 td 标签默认情况下就设置了 vertical-align 为 middle, 所以我们就不需要显式设置了.
方法二:设置块元素的 display 为 table-cell(设置表格单元显示),激活 vertical-align 属性,但注意 IE6,7 并不支持这个样式,所以说兼容性比较差.
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8 以上及 Chrome, Firefox*/
vertical-align:middle;/*IE8 以上及 Chrome, Firefox*/
</style>
<div class="container">
<div>
<p>看我是否可以居中</p>
<p>看我是否可以居中</p>
<p>看我是否可以居中</p>
</div>
</div>
这种方法的好处是不用添加多余的无意义标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6 ,7 而且这样修改 dispaly的 block 变成 table-cell, 破坏了原有的块元素的性质.
- 隐性改变 display类型:有个有趣的现象就是当元素(不论之前是什么类型元素, display:none 除外)设置以下两句之一:
1.postion:absolute;
2.float:left 或 float:right;
简单来说,只要 html 代码中出现以上两句之一,元素的 display 显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满满父元素.如下代码,小伙伴都知道 a 标签是行内元素,所以设置它的 width 是没有效果的,但是设置 postion:absolute 以后,就可以了.
<sytle>
.constainer{
position:absolute;
width:300px;
background:#ccc;
}
</style>
<div class="container">
<a href="#", title"">点击进入</a>
</div>
