增加字体和颜色样式-------CSS
2024-10-12 23:34:02
通过使用CSS,控制文本的字体,风格和颜色
1.基本操作:
body{
font-family: Verdana, Geneva, Tahoma, sans-serif
} body{
font-size: 14px
} body{
color: silver
} body{
font-weight: bold
} body{
text-decoration: underline
}
注释:
- font-family:定制页面中使用的字体
- font-size:控制字体大小
- color:为文本设置颜色
- font-weight:影响字体的粗细
- text-decoration:为文本增加更多风格
2.字体系列:
系列分类:
- sans-serif
- serif
- monospace
- cursive
- fanstasy
- 衬线:是字母末端的装饰性的小线
示例:
- sans-serif:没有衬线,适合阅读
- Serif:有衬线,看起来传统,多出现在报纸
- Monospace:字体包含固定宽度的字符,例如:一个“i”水平的宽度和一个“m”相同,主要用于显示软件代码示例
- Cursive:有些看似手写,有时会在标题上使用
- Fantasy:含有某种风格的装饰性字体:
总结特点:
- serif字体看起来很高雅,传统。
- sans-serif字体外观清晰,可读性好
- monospace 像打字机打出来的
- Cursive和fantasy字体给人有趣或者很有分格的感觉
3.使用CSS指定字体系列:
浏览器的幕后工作:
body{
font-family: Verdana, Geneva, Tahoma, sans-serif
}
注释:
- 我们为body指定了4个候选字体
- 浏览器会从左往右进行选择
- 如果浏览器检查到用户没有定制的第一个字体,会接着检查第二个
- 直到查找到用户有的字体
- 如果前面3种特定的字体都没找到,浏览器就会使用默认的sans-serif字体
示图:
4.Wed字体的使用
我们都会有这样一个想法,
自己辛苦设计的页面,有很酷的字体,
不希望到了用户手里,却全都变成了默认。。。
因此:有了@font-face规则
使用步骤:
- 找到一个字体,可以是自己所有的,也可以使用提供字体网站授权给你使用的
- 确保有所需字体的格式,一般建议使用web开放字体格式(.woff)
- 把字体文件放在web上,或者利用在线字体服务为你托管这些文件。但无论哪种,你都需要字体文件的URL
- 在CSS中增加@font-face属性
- 在CSS中使用@font-face属性
示例代码:
@font-face{
/*我们为我们的字体设立一个名字*/
font-family: "JJStyle One";
/*浏览器会加载src指定的字体文件,直到找到他能支持的一个文件*/
src: ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff")
ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf")
} h1{
/*使用我们指定的字体名*/
font-family: "JJStyle One",sans-serif;
}
注意:
- 可以定制多个字体,但需要保证服务器上有相应的字体文件,
- 而且要分别创建一个单独的@font-face规则,且名字唯一
5.调整字体大小
大多数默认的字体都不太美观,
为此,作为设计者,
都需要知道如何指定字体大小。
指定font-size的一些方法:
- PX
- %
- em
- 关键字
示例代码:
body{
/*字体的高度为14像素*/
font-size: 14px
} h1{
/*字体大小为相对于另一个字体大小的150%,这里是相对于body字体的大小*/
font-size:150%
} h2{
/*相对于另一个字体1.2倍*/
font-size: 1.2em;
} h3{
font-size: small
/*关键字有:xx-small,x-small,small,medium,large,x-large,xx-large*/
}
指定字体大小的建议:
- 选择一个关键字(推荐samll或mediun),指定它为body规则的字体大小。相当于页面默认大小
- 使用em或百分数,相对于body字体大小指定其它元素的字体大小(使用em还是百分数由你决定,因为效果都一样)
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
/*字体的高度为14像素*/
font-size: small
} h1{
font-family: sans-serif;
/*字体大小为相对于另一个字体大小的150%,这里是相对于body字体的大小*/
font-size:150%
} h2{
/*相对于另一个字体1.2倍*/
font-size: 1.2em;
}
示图:
6.改变字体粗细:
- font-weight:bold
- font-weight:normal
7.为字体增加风格:
斜体:
- not italic
- italic(文本向右倾斜,另外衬线还有弯曲)
倾斜:
- not oblique
- oblique(普通文本向右倾斜)
注意:
- 一般来说,不论你指定什么风格,结果都不确定,有时是斜体,有时是倾斜。
- 所以,除非真的对你很重要,不然完全可以就用斜体,不用担心差别
8.颜色样式:
指定颜色的方法:
- 颜色名
- 按红绿蓝对百分比指定
- 十六进制码
1.按名字指定
body{
background-color: silver;
}
2.用红绿蓝值指定颜色
body{
/*rgb:红绿蓝 颜色的缩写*/
background-color: rgb(80%, 40%, 0%);
}
h1{
background-color: rgb(204,102,0);
}
3.用16进制码指定
h2{
background-color: #cc6600
}
注释:
- 十六进制码以#开头
- 前两位数字表示红色的分量,中间两位是绿色,后面两位是蓝色
- 上图代码的“CC”的分量的计算步骤与解释如下图
文本装饰:
em{
/*使<em>元素有一个从文本中间穿过的横线*/
text-decoration: line-through;
} em{
/*使<em>元素有一个上画线和下划线*/
text-decoration: underline overline;
} em{
/*使<em>元素没有任何装饰*/
text-decoration: none;
} h1,h2{
color: #cc6600;
/*在下滑框上加一条细的虚线*/
border-bottom:thin dotted #aabbcc;
}
The end--
最新文章
- 【前端】使用CSS使元素居中的几种方式
- Timeline Portfolio - 时间轴作品集效果
- 转:画图解释 SQL join 语句
- java对象和类学习
- SVM入门(十)将SVM用于多类分类
- JS表单对象和图片对象--JavaScript基础
- git常用使用命令
- 洛谷模拟NOIP考试反思
- Python_ collections_defaultdict默认字典
- Android勒索软件研究报告
- 20165327 预备作业3 Linux安装及学习
- html\css不同长度文本左右对齐 text-align:justify的使用
- POJ1062不错的题——spfa倒向建图——枚举等级限制
- springcloud的分布式配置Config
- MySQL学习笔记:字符串前后补全0
- 11-基于dev的bug(还没想通)
- WindowsServices_无法拷贝文件到服务器
- 使用laravel实现用户的登陆
- Android Studio 常用应用
- C++_函数2-内联函数
热门文章
- uva - 133 The Dole Queue(成环状态下的循环走步方法)
- <;你不知道的JavaScript>;读书笔记
- Android调用.net的webservice服务器接收参数为空的情况
- 新建的linux虚拟机找不到eth0解决办法
- linux查看文件个数命令
- iOS自学之NSOperation、NSOperationQueue、Background
- 把十进制整数转换为r(r=2)进制输出(顺序栈实现)
- 堆排序 C++
- json字符串转JSONObject,输出JSONObject问题
- Eclipse启动报错Java was started but returned exit code=13