CSS中文字体嵌入 表格边框和背景渐变怎么设置
视频介绍
怎么用CSS嵌入中文字体 怎么设置HTML表格的边框样式
说到用CSS嵌入中文字体，首先得确保一点，那就是你的客户端机器上也得装有你想用的字体，否则，呵呵，它就会回落到默认的宋体或者微软的系统字体了。比如要在你自己的电脑上先验证一下效果，最简单的做法是把字体文件直接复制到C盘Windows目录下的fonts文件夹。接着呢，根据字体文件的名字，咱们在CSS里写，比如字体文件叫“zhongyuan”，那相关CSS代码就得写成这样：
@font-face {
font-family: 'zhongyuan';
src: url('zhongyuan.ttf') format('truetype');
}
然后给需要的元素设置font-family: 'zhongyuan';，这样就大功告成啦！
再来说说表格边框的设置，尤其是HTML中表格的样式，不是难事。一般可以这样搞：
-
首先给表格定义边框合并，也就是写个
border-collapse: collapse;，让边框不会分开，整体看起来更整齐。 -
接下来给表格的每一行或者每个单元格添加边框样式，比如：
.table td, .table th {
border: 1px solid black;
}
这样每个单元格和表头都会有条1像素的黑色实线。
- 不满意默认的颜色、宽度或者线型？没问题，改改
border的属性，比如边框颜色可以换成红色，或者线条变成虚线，都能轻松实现。
总之，这样设置表格边框简单又实用，不管是用在报表还是页面布局都超搭。
怎么用CSS设置DIV背景色渐变 显示 鼠标点击后的样式怎么用CSS来设置
说到让DIV背景色变得漂亮点儿，渐变效果是个超赞的小花样。主要就是用CSS的线性渐变（linear-gradient）属性。说白了，就是让颜色从一个点慢慢变到另外一个颜色。这个渐变的起点有几个选项：
-
top表示从上往下 -
left就是从左往右 -
left top则是左上角到右下角的斜向渐变
举个栗子，假如你想让背景色从浅灰色#ccc渐变到黑色#000，那对于支持Webkit内核（比如Chrome和Safari）的浏览器，你写：
background: -webkit-linear-gradient(top, #ccc, #000);
火狐啥的用这个：
background: -moz-linear-gradient(top, #ccc, #000);
Opera浏览器用：
background: linear-gradient(to bottom, #ccc, #000);
这样一套办法几乎涵盖了所有主流浏览器，让你的背景色看起来超炫酷！
再顺便聊聊鼠标点击后的样式，用CSS的伪类简直不得了，尤其是:hover和:focus。打个比方，你想让鼠标停留在按钮上变色，就用:hover，点击获取焦点变色就用:focus。用这俩搭配起来，可以让网页元素随着你的操作动起来，视觉效果棒极了！比如：
button:hover {
background-color: #f00;
}
button:focus {
outline: none;
background-color: #0f0;
}
你瞧，交互体验瞬间提升，网页变得更活泼了。
相关问题解答
-
CSS嵌入中文字体为什么有时候不生效呢？
哎呀，这其实挺常见的啦！因为如果你用@font-face嵌入的字体文件没被正确加载，或者用户设备上根本没有那个字体，浏览器就会退回默认字体。还有可能是路径写错啦，文件格式不兼容啦，或者写法有误。要注意路径要正确，格式要支持，字体文件要完整才行。总之，多试试，多调试，别忘了清缓存，问题都能搞定！ -
怎么让HTML表格边框看起来既美观又清晰？
嘿，关键在于border-collapse: collapse;设置！这招能让所有边框紧密合并，避免出现乱七八糟的错位。然后给td和th加上统一的边框样式，比如1px solid black，简单又大方。如果你想炫酷点儿，可以换成虚线、点线或者更细腻的颜色。最重要的是别忘了对齐和留白，让表格看起来干净利索！ -
CSS中如何正确写渐变背景支持主流浏览器？
这事儿说起来也不难啦。一般咱们先写标准写法linear-gradient，然后针对不同浏览器前缀加上-webkit-、-moz-，确保兼容性棒棒哒。别忘了顺序要对，因为浏览器会用第一个能识别的。这样写完，不管Chrome、Firefox还是Opera，都能优雅展示渐变，不用担心跑偏！ -
用CSS实现点击后样式变化，有哪些常用伪类？
说到点击后样式变化，倒腾起那些伪类来很过瘾。:hover是最经典，鼠标滑过时触发，给人超级直观的反馈。:focus听起来都高级，代表元素被选中或者获得焦点，尤其用在表单元素上，用户体验棒极了。还有:active，就是鼠标点下去的那一瞬间，效果很酷。把这些伪类灵活组合，好玩得很，页面立马生动了许多！
评论