CSS-增加字体和颜色样式

文本和字体

字体属性

字体系列

指定字体系列

web字体

为页面增加文本字体

调整字体大小

改变字体的粗细

为字体增加风格

web颜色

web颜色如何工作

指定颜色的方法

文本和字体

字体属性

font-family属性：定制页面中使用的字体

font-size属性：控制字体大小

color属性：为文本设置颜色

font-weight属性：为字体指定特定的粗细

text-decoration属性：对文本加上一些装饰，包括上划线，下划线及删除线

字体系列

Sans-serif字体系列：包括没有衬线的字体

Serif字体系列：包括有衬线的字体

Monospace字体系列：包含固定宽度字符，用于显示软件代码示例

Cursive字体系列：包括含类似手写字体

Fantasy字体系列：包含有某种风格的装饰性字体

指定字体系列

body{font-family:Verdana,Geneva,Arial,sans-serif;
}
用逗号隔开指定的多个字体，创建首选字体列表

在最后通常放一个通用的字体系列

浏览器会按照首选字体列表来匹配字体，若第一个可用，则使用，否则继续查找下一个

若字体名包含多个单词，则用双引号阔在一起

web字体

如果浏览器没有你想要使用的字体，可以使用web字体像浏览器提供该字体

@font-face规则：允许你定义一个字体的名字和位置，可以在页面中使用

字体文件：*.woff，包含在页面中使用该字体时浏览器所需的一切信息

为页面增加文本字体

1、找到一个字体，可以去提供字体的网站寻找

2、确保有所需字体的所有格式

3、将字体文件放到网站上（你需要URL）

4、在CSS中增加@font-face属性，将规则增加到文件的最上面
@font-face{
font-family:"Emblema One"; /*指定font-family名*/
src:url("http://……"),
src:url("http://……");
}
5、在css中使用字体

调整字体大小

有四种方法

1、px：按像素指定字体的大小

2、%：相对于另一个字体大小，指出该字体多大

3、em：类似于百分数，指定一个比例因子
body{
font-size:14px;
}
h1{
font-size:150%;
}
h2{
font-size:1.2em;
}
4、关键字：浏览器使用默认值来将关键字转换为像素值
body{
font-size:xx-small;
}

指定字体大小：

1、选择一个关键字，指定它作为body规则中的字体大小

2、使用em或%，相对于body字体大小指定其他元素的字体大小

改变字体的粗细

body{
font-weight:bold;  /*加粗*/
font-weight:normal;  /*变细*/
}

为字体增加风格

body{
font-style:italic;  /*得到斜体*/
font-style:oblique;  /*得到斜体文本*/
}

web颜色

web颜色如何工作

web颜色是按构成颜色的红、绿、蓝三个分量所占数量来指定的

每一种颜色会分别指定一个从0%到100%的数值，然后把它们混合起来得到最终颜色

指定颜色的方法

1、按名指定颜色：可以指定16种基本颜色和150种扩展颜色

2、用红、绿、蓝值指定颜色
body{
background-color:rgb(80%,40%,0%);  /*使用百分比*/
background-color:rgb(204,102,0);  /*使用0-255的数字*/
}
3、使用十六进制码指定颜色：每组2位数字分别代表颜色的红、绿、蓝分量，十六进制码总以#开头

CSS-增加字体和颜色样式相关推荐

第八章——扩大你的词汇量：增加字体和颜色样式
在这一章中,我们会介绍影响文本显示的一些最常用的属性.有很多CSS属性专门用来帮助我们设置文本样式.通过使用CSS,我们可以控制文本的字体.风格和颜色,甚至可以控制文本上加的装饰. 常用的文本属性 f ...
前端-CSS文本字体与背景样式
CSS文本字体与背景样式 1. 字体样式 **字体大小:**font-size: px / % / em / rem; 设置的是字体的高度单位: px 像素相对于显示屏分辨率而言的,浏览器默认的字 ...
05使用CSS设置字体和文本样式
使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|ser ...
html font设置字号,CSS font-size字体文字大小样式属性
CSS font-size字体文字大小样式属性-字体大小样式篇: 本节DIVCSS5为大家介绍通过CSS样式设置文字字体大小知识,涉及CSS样式单词font-size. 一.设置字体大小CSS单词与语 ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
HTMLCSS基础篇之十一：字体与颜色样式
代码 body {font-family: Verdana, Geneva, Arial, sans-serif;font-size: small; }h1, h2 {font-weight: nor ...
HTML、CSS定义字体、颜色、背景等属性
字体属性字体font-family:"字体1","字体2",... 例:font-family:"宋体"; 字号font-size: ...
CSS文本字体与背景样式
1.字体样式字体大小:font-size:30px/%/em/rem; 设置的是字体高度单位: px 像素相对于显示屏分辨率而言的,浏览器默认的字体大小都是16px rem:根据的是根元素的字体 ...
HTML css 实现字体渐变颜色
利用CSS中的-webkit-gradient背景渐变属性实现,-webkit-gradient是background的一个属性值,webkit内核的safari. Chrome的Linear Gra ...
CSS好看的背景颜色样式（持续更新）
1 红色 #D24D57 2 绿色 #26A65B 3 橙色 #EB7347 4 黑色 #2C3E50 5 暗绿色 #84AF9B 6 橙红色 #FC9D99 7 草绿色 #AEDD81 8 蓝色 # ...

CSS-增加字体和颜色样式

文本和字体

字体属性

字体系列

指定字体系列

web字体

为页面增加文本字体

调整字体大小

改变字体的粗细

为字体增加风格

web颜色

web颜色如何工作

指定颜色的方法

CSS-增加字体和颜色样式相关推荐

最新文章

热门文章