增加字体和颜色样式-------CSS
通过使用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的更多相关文章
- Android 系统字体和颜色样式
Android 字体和颜色 对于能够显示文字的控件(如TextView EditText RadioButton Button CheckBox Chronometer等等),你有时需要控制字体的大小 ...
- Css3:选择器、字体和颜色样式
1.私有前缀及其用法 在CSS3模块标准尚未被W3C批准或者标准所提议的特性尚未被浏览器完全实现时,浏览器厂商会使用所谓的私有前缀来测试“试验性的”CSS特性.看看CSS3中实现圆角的代码: .rou ...
- CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、
与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...
- CSS样式----CSS属性:字体属性和文本属性(图文详解)
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...
- CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- NPOI.dll 用法。单元格,样式,字体,颜色,行高,宽度。读写excel
NPOI.dll 用法.单元格,样式,字体,颜色,行高,宽度.读写excel 转载:http://yuncode.net/code/c_531e679b3896495 view source prin ...
- 自定义orgmode中加粗字体的颜色
自定义orgmode中加粗字体的颜色 Table of Contents 1. orgmode中加粗字体的默认处理 2. 设置设置加粗字体的颜色 1 orgmode中加粗字体的默认处理 在orgmod ...
- CSS3——背景 文本 字体 链接 列表样式 表格
背景 background-color rgb(255,0,0,1) 最后一个值表示透明度,范围是 0--1 background-image 默认平铺重复显示 background-rep ...
- Java读取word文件,字体,颜色
在Android读取Word文件时,在网上查看时可以用tm-extractors,但好像没有提到怎么读取Word文档中字体的颜色,字体,上下标等相关的属性.但由于需要,要把doc文档中的内容(字体,下 ...
随机推荐
- RadioGroup&RadioButton
RadioGroup提供多选一机制:属性orientation:“vertlcal” or “horizontal” @Override public void onCheckedChanged(Ra ...
- CSS内容
选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框 border-radius box-shadow border-image
- HTTPS证书制作
openssl 安装可参照之前文章 1.mkdir /etc/ssl/xip.ioopenssl genrsa -out /etc/ssl/xip.io/xip.io.key 1024openssl ...
- a链接中关于this的使用
a连接点击事件用 this 时,要用 onclick='click(this)',href='javascript:void()' a连接无法使用,要看看是不是自动变成ie7或者更低
- canvas实现“探照灯”共能
简单的样式: body{ margin: 0; padding: 0;}#canvas{ display: block; position: relative; margin: auto;} 创建绘图 ...
- php处理字符串常用函数
1查找字符位置函数: strpos($str,search,[int]):查找search在$str中的第一次位置从int开始: stripos($str,search,[int]):函数返回字符串在 ...
- MySQL 에서 root 암호 변경하기
먼저 터미널이나 SSH를 이용해 접속합니다. 그리고 리눅스 쉘상에서 다음과 같이 입력합니다. [mysqladmin을 이용한 암호변경] 형식) root계정]$mysqladmin -u ...
- 过滤网页中HTML代码的ASP函数
Function LoseHtml(ContentStr) Dim ClsTempLoseStr,regEx ClsTempLoseStr = Cstr(ContentStr) Set regEx = ...
- linux+asp.net core+nginx四层负载均衡
Linux Disibutaion:Ubuntu 16.04.1 LTS Web Server:Nginx.Kestrel 关于如何在linux中部署asp.net core我这里不再详细介绍,可以参 ...
- 自定义控件ViewPagae<
学习知识点 onTouch事件传递机制. Lisenter监听 ImageView的src background scaleType不同属性的显示情况. onTouch滑动抬起调用的MotionEve ...