CSS3学习笔记之属性值
font-family
设置文本的字体名称。
font-style
设置文本样式。
取值
normal不使用斜体。
italic使用斜体。
oblique使用倾斜体。
inherit从父元素继承。
font-variant
设置文本是否大小写。
取值
normal使用浏览器默认值。
small-caps使用小型大写字母。
inherit从父元素继承
small-caps使用小型大写字母。
这个是什么意思呢？那么比如说我们在这里，也是用这个那我们在这呢把这个英文单词，换成小写。
<h1>Hello Html5 Css3</h1>
那么这里面，就就是这个小写的英文，那么我们可以给它h1加一个属性。
h1{*/
/*font-family: Arial;*/
/*font-variant: small-caps;*/
/*}
使用小型的大写字母，我们来保存一下，然后刷新。
我们发现这里的这个小写的这个e，那么它会自动把它转换为大写，但是它是小型的大写。那么这就是这个font-variant设置文本是否大小写。
font-weight
设置文本的粗细。
取值
normal使用浏览器默认值。
bold使用粗体。
bolder使用更粗的字体。
lighter使用更细的字体。
100-900从细字体到粗，值必须是100的倍数，其中400等于normal，700等同于bold。
我们来看一下，做一个演示，那我们注释掉h1，然后。
h1{
font-weight: bold;
}
那么这个时候我们来看一下效果。
字体没有拿到。
h1{
font-family: Arial;
font-weight: bold;
}
然后我们看一下，那么这是粗体，定义它的这个更粗的.
h1{
font-family: Arial;
font-weight: bolder;
}
这个字体可能不支持，没有什么变化。然后设置这个字体的，为更细的我们来看一下。
h1{
font-family: Arial;
font-weight: lighter;
}
字体就变细了一些。那么我们可以这样来把这个字体呢给复制几个。
<h1>Hello Html5 Css3</h1>
<h1>Hello Html5 Css3</h1>
<h1>Hello Html5 Css3</h1>
然后把它的这个值呢都拿到，默认的是更细的。
h1.bold{
font-weight: bold;
font-size: 30px;
}
比如说这个第一个呢，给它这个。
<h1 class=" bold">Hello Html5 Css3</h1>
然后第二个使用这个，更粗的，然后再来一个。
h1.bolder{
font-weight: bolder;
font-size: 50px;
}
<h1 class=" bolder">Hello Html5 Css3</h1>
那么我们来看一下，这样呢第一个呢会是这个细的，第二个呢会是粗的，第三个是更粗的。
那么我们可以看到这个颜色明显的一个深度。
font-stretch
设置文本是否横向的拉伸变形。（IE及Firefox已支持font-stretch，但显示效果与正常文字并无不同。）
取值
normal：正常文字宽度。
wider把伸展比例设置为更进一步的伸展值。
narrower：把收缩比例设置为更进一步的收缩值。
ultra-condensed：比正常文字宽度窄4个基数。
extra-condensed：比正常文字宽度窄3个基数。
condensed：比正常文字宽度窄2个基数。
semi-condensed：比正常文字宽度窄1个基数。
semi-expanded：比正常文字宽度宽1个基数。
expanded：比正常文字宽度宽2个基数。
extra-expanded：比正常文字宽度宽3个基数。
ultra-expanded：比正常文字宽度宽4个基数。
font-size
设置文本字体大小。那么我们来看一下font-size呢它是用来修改字体大小的，比如说我们把这个，更大的这个字体，我们其实可以在字体上面可以把它变成大一个层面。
h1.bolder{
font-weight: bolder;
font-size: 50px;
}
那不如说大50个像素。然后上面这个，我们给它30个像素。
h1.bold{
font-weight: bold;
font-size: 30px;
}
最后那个10个像素。
h1{
font-family: Arial;
font-weight: lighter;
font-size: 10px;
}
我们可以这样来。
50的30的10的，那么这是这个font-size的使用方法。那么到这里我们就讲完了这个服务器端字体的一个使用方法。
src
设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。
代码例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在页面上显示服务器端的字体</title>
<style>
/*@font-face {*/
/*font-family: webfont;*/
/*src: url(qtgg.otf);*/
/*}*/
/*@font-face {*/
/*font-family: webfont;*/
/*font-style: italic;*/
/*src: url(jpzk.otf);*/
/*}*/
/*h1{*/
/*font-family: webfont;*/
/*}*/
/*h2{*/
/*font-family: webfont;*/
/*font-style: italic;*/
/*}*/
@font-face{
font-family:Arial;
src:local('Arial');
}
/*h1{*/
/*font-family: Arial;*/
/*font-variant: small-caps;*/
/*}*/
h1{
font-family: Arial;
font-weight: lighter;
font-size: 10px;
}
h1.bold{
font-weight: bold;
font-size: 30px;
}
h1.bolder{
font-weight: bolder;
font-size: 50px;
}
</style>
</head>
<body>
<h1>在页面上显示服务器端的字体</h1>
<h1>Hello Html5 Css3</h1>
<h1 class=" bold">Hello Html5 Css3</h1>
<h1 class=" bolder">Hello Html5 Css3</h1>
</body>
</html>
文章来源：麦子学院
原文链接：http://www.maiziedu.com/wiki/css3/value/
CSS3学习笔记之属性值的更多相关文章
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- 机器学习实战（Machine Learning in Action）学习笔记————06.k-均值聚类算法（kMeans）学习笔记
机器学习实战(Machine Learning in Action)学习笔记————06.k-均值聚类算法(kMeans)学习笔记 关键字:k-均值.kMeans.聚类.非监督学习作者:米仓山下时间: ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
- 十天精通CSS3学习笔记 part4
CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...
- CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
- 我的CSS3学习笔记
1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...
- 十天精通CSS3学习笔记 part3
第8章 CSS3中的变形与动画(上) 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. ...
- 十天精通CSS3学习笔记 part1
http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...
随机推荐
- 测试post
http://www.atool.org/httptest.php 这里也可以测试 火狐有插件:HttpRequester Chrome有插件:Postman
- 制作变形、移位、扭曲等效果：《CSS3 transform》
今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).转换(transition)和动画(animation)等更高级的CSS3技术.本文主要介绍的是这三个属性之中的第一 ...
- 2016 ACM/ICPC Asia Regional Qingdao Online HDU5878
链接:http://acm.hdu.edu.cn/showproblem.php?pid=5878 解法:先保存,再二分查询~具体http://blog.csdn.net/coder_xia/arti ...
- MIME协议生成邮件
MIME协议生成一封复杂的邮件 MIME协议是对RFC822文档的升级和补充,用MIME协议能生成一封有文字.图片和附件的复杂邮件.首先要导入activation.jar和mail.jar.Mail. ...
- CF 504E Misha and LCP on Tree（树链剖分+后缀数组）
题目链接:http://codeforces.com/problemset/problem/504/E 题意:给出一棵树,每个结点上有一个字母.每个询问给出两个路径,问这两个路径的串的最长公共前缀. ...
- 曲线救国，解决Mac系统下，Android sdk下载失败的问题
Mac下翻_墙的问题 话说GFW屏蔽谷歌已经有一阵子了,最近打算在Mac系统下折腾个Android应用,备好了IDE,只欠SDK,无奈下载时因为GFW的缘故,总是失败,我心痛哉! 由于本人偏爱Mac系 ...
- excel在一个图表内，显示折线图和柱状图
折线图和柱状图,在同一个图表中拆分显示 一个图,设置主坐标轴 另外一个图,设置次坐标轴 拆分,通过调整纵坐标的最小值和最大值来实现 关于图表的标题,选中图表,选择布局,然后图表 ...
- NPO与X7R、X5R、Y5V、Z5U神马的有啥区别
主要是介质材料不同.不同介质种类由于它的主要极化类型不一样,其对电场变化的响应速度和极化率亦不一样. 在相同的体积下的容量就不同,随之带来的电容器的介质损耗.容量稳定性等也就不同.介质材料划按容量的温 ...
- Scanner
/* next()与nextLine()区别 next(): 1.一定要读取到有效字符后才可以结束输入. 2.对输入有效字符之前遇到的空白,next()方法会自动将其去掉. 3.只有输入有效字符后才将 ...
- 【转】Haproxy安装及配置
1.安装 # wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.20.tar.gz # tar zcvf haproxy-1.3.20.t ...