CSS-增加字体和颜色样式

最新推荐文章于 2024-04-30 10:21:35 发布

有公子如玉

最新推荐文章于 2024-04-30 10:21:35 发布

阅读量805

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_52876054/article/details/119709910

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文本和字体

字体属性

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位数字分别代表颜色的红、绿、蓝分量，十六进制码总以#开头