• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS值、单位和字体说明

CSS值、单位和字体说明

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,单位,字体等相关知识,佚名 希望在学习及工作中可以帮助到您

1.颜色值

最为简洁明了的制定颜色值的方法是利用颜色的名字。HTML4和CSS2规定了16种颜色,CSS2.1新增了一个Orange。要指定颜色很简单:

<div style="background-color:Gray">Gray</div>
下图是17种颜色的示例:
image 

使用命名来指定颜色的话种类很有限,更加通用的方法是用RGB分量来制定。RGB可以用三个0到255的整数来指定,也可以用一个百分数来指定。或者利用#加上三个连写在一起的两位16进制数来表示。例如:

<div style="background-color:rgb(75,0,0);"> </div>
<div style="background-color:rgb(10%,15%,0%);"></div>
<div style="background-color:#334455;"></div>

 

2 长度单位

长度单位中最常用的是px,1个px就是屏幕上的一个像素点。实际上,不同屏幕的像素点的大小是不一样的(点距不同),因此,同样10px的字体在不同的显示器上的显示效果不太一样。不过这种差别一般不会太大。使用px也是最常见的选择。

还一个是em,em被定义为当前字体大小。

pt和px经常混淆。pt的精确定义是1inch=72pt=2.54cm. 它定义的是一个绝对的物理意义上的长度,然而事实上,浏览器很难知道你的显示器上一个像素到底有多宽,也就无法精确的现实这些物理距离。从像素到物理长度单位转换靠的操作系统的设置。一般的操作系统把96个像素当作1英寸。早期的Mac系统这个值是72。因此,在早期的Mac中,使用pt和px的效果是完全一样的。在windows下使用pt大约是px的1.2倍大。当然,操作系统的这个值是可以根据用户的设置来调节的。因此,使用pt,cm这一类的值意义不是太大。

3. 字体

我们通常意义所说的字体的确切含义是字体族,例如,Times字体常常包括TimesItatlic,TimesOblique等字体。在css中用font-famliy来指定字体。然而,浏览器在实际显示的时候,还是依赖于客户机上所安装的字体。如果利用css指定了一种不很常见的字体,在客户机器上没有安装此字体,那么该字体是不会被应用的。因此,要注意尽量使用通用的字体。英文字体主要有以下几种:Arial,Times,Verdana,Helvetica,Courier等。除了直接指定这些字体,CSS还定义一组通用字体,这些通用字体包括几种相似的通常的字体,当指定通用字体的时候,浏览器会从中挑出一种作为显示字体。但是浏览器除了IE以外对于这种通用字体的支持都不太好。

下面是5种通用系列。

IE8,IE8的字体一流漂亮:

image

Chrome 4,很奇怪Chrome 4似乎没有正确的解析Sans-serif字体。

image

更加奇怪的是Firefox完全不支持这种字体指定方式 –_-!!! 。有待研究。最后上一张常见英文字体的样子,还是用IE8的,IE8 的字体最漂亮。

image

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06CSS视差滚动效果
  • 2017-08-06CSS padding属性定义边内补白
  • 2017-08-06metro的介绍以及metro的好处介绍
  • 2017-08-06细说CSS中margin属性的使用
  • 2017-08-06同一行的图片和文字巧妙的居中对齐的解决方法
  • 2017-08-06简单介绍CSS中的URL工具
  • 2017-08-06CSS haslayout 彻底了解
  • 2017-08-06网络广告的发展历程的详细分析与心得体会(图文)
  • 2017-08-06CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
  • 2017-08-06浅析CSS编程的外部CSS文件引用方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 为网页内容添加结构和语义的hAtom微格式
    • CSS3 优势以及网页设计师如何使用CSS3技术
    • css实现鼠标滑过五角星高亮效果
    • 一波CSS制作的三角形和圆形小按钮示例
    • 30个别出心裁的网站导航设计案例 网站导航设计经典欣赏(图文)
    • IE绝对定位元素神秘消失或被遮挡的解决方法
    • 用css添加手状样式鼠标移上去变小手
    • 为博客添加“正在加载中”的过度特效的方法
    • CSS 新的图像替换方法
    • float元素浮动后高度不一致导致错位的解决办方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有