常用的十个CSS经典技巧
CSS字体属性简写规则
使用CSS设定字体属性时，可以将多个属性合并为一行。
font: bolditalic smallcaps 1em/1.5em verdana, sansserif;
需要注意的是，这种方法只在同时指定fontsize和fontfamily属性时才生效。
同时使用两个类
可以给一个元素同时应用两个类，中间用空格分隔。
<p class="text side">...</p>
这样，text和side两个类的属性都会应用到该元素上，如果两个类有冲突的属性，后写的类会覆盖前者。
CSS边框的缺省值
通常设置边界的颜色、宽度和风格时，只需要指定风格即可，其他属性将使用缺省值：
border: 3px solid #000; /* 宽度为3像素，黑色实线 */
缺省情况下，宽度为medium，颜色为文本颜色。
CSS用于文档打印
可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen"/> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print"/>
打印样式表中可以使用display: none关闭装饰图片或导航按钮等。
图片替换技巧
建议使用标准HTML来显示文字，但有时需要特殊字体时可以用图片替代文字：
h1 {background: url(widgetimage.gif) norepeat; height: imageheight; textindent: 2000px;}
这样，图片作为背景显示，文字通过负缩进隐藏。
CSS盒模型调整技巧
针对IE6之前的浏览器，它们会把边界宽度和空白都算在元素宽度内，可以通过调整盒子大小来解决此问题：
#box {width: 150px; border: 5px; padding: 20px;}
这样，不管什么浏览器，盒子的全宽都是150点。
块元素居中对齐
固定宽度的网页水平居中，可以使用以下方法：
body {textalign: center;}
#content {textalign: left; width: 700px; margin: 0 auto;}
这会使网页内容居中显示。
垂直对齐处理
垂直对齐可以通过设置行高来实现：
lineheight: 2em; /* 使导航条文字垂直居中 */
CSS在容器内定位
可以在容器内任意定位元素：
#container {position: relative;}
#navigation {position: absolute; left: 30px; top: 5px;}
这样可以精确控制元素的位置。
直通到屏幕底部的背景色
为了让背景色延伸到页面底部，可以使用以下方法：
body {margin: 0; height: 100vh; background: #f0f0f0;}
这会使背景色充满整个视窗高度。
FAQs
1. 如何在CSS中同时使用两个类？
答：可以在HTML标签中通过空格分隔两个类名来同时使用两个类，如class="text side"，这样，两个类的属性都会应用到该元素上。
2. CSS中的字体属性简写规则是什么？
答：CSS的字体属性简写规则允许将多个字体属性合并为一行书写，font: bolditalic smallcaps 1em/1.5em verdana, sansserif;，这种方法只有在同时指定fontsize和fontfamily时才有效。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1097713.html
