【网页制作】CSS文本和字体属性讲解【附讲解视频】
1.CSS文本和字体属性的作用：给文本和字体设置样式（具体看第二部分）
注意：在html中我们可以省略单位，但CSS中不可以省略单位。
简单的说大多数情况在html的body标签中我们可以省略单位，但在CSS的style标签中我们不能省略单位。
2 CSS文本和字体属性
（1）一些常用的CSS文本属性
|
属性名称 |
作用 |
单位/值 |
|
color |
设置字体的颜色 |
#f00/red/rgb(200,125,100) |
|
text-indent |
设置首行缩进，允许负值 |
px/em |
|
text-decoration |
设置文本修饰线 |
underline/overline/line-through |
|
text-transform |
单词字体大小写 |
单词字体大小写 |
|
line-height |
设置行高 |
固定值或百分比 |
|
text-align |
设置在当前文本的对齐方式 |
left/right/center |
|
word-spacing |
设置单词之间的间距 |
px |
|
letter-spacing |
设置字符之间的间距 |
px |
注意：此处大家要注意单词间距和字符间距，不要搞错了。下面举例说明一下：
abcd 四个字符之间的间距叫做字符间距
a happy day 3个单词之间的间距叫做单词间距
（2）一些常用的CSS字体属性
|
属性名称 |
作用 |
单位/值 |
|
font-size |
设置文本的大小 |
10px，20px |
|
font-family |
设置字体的类别 |
宋体，楷体 |
|
font-style |
设置文本为斜体 |
normal（正常）,italic(斜体） |
|
font-weight |
设置字体的粗细 |
normal（正常），bold（加粗) |
|
font |
包含上面所有作用。 注意属性设置有顺序要求： 1斜体 2加粗 3大小 4类别 每一个值之间需要空格隔开 |
举例：font：italic bold 10px “楷体” 设置为：斜体 加粗 10px大小 楷体 |
注意：
（2.1）用font直接设置属性值时要注意属性的顺序（1斜体 2加粗 3大小 4类别），不能弄错
（2.2）关于font-family字体类别的设置，如果用户电脑有对应的字体文件，则设置成功；否则默认显示为宋体，用户可以通过路径导入没有的字体，这里就不讲解怎么导入了，大家知道这一点就好。
（2.3）font-family: "楷体","黑体","微软雅黑";
如果用户电脑有楷体则为楷体，否则判断用户电脑是否有黑体，有则为黑体，没有则判断用户电脑是否有微软雅黑，有责则为微软雅黑，没有则为默认的宋体，按照顺序判断
3 代码及介绍（本章会用到前面选择器的内容，不懂的小伙伴可以去学习回顾一下）
总代码：
（1） CSS文本属性代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本字体属性</title>
<style type="text/css">
.a{/*设置《火影忍者》为红色*/
/*color:red; */ /* 方法1设置颜色为红色 */
/* color:#f00; */ /* 方法2设置颜色为红色 */
color:rgb(255,0,0); /* 方法3设置颜色为红色 */
/* #rgb分别代表红绿蓝，通过比列混合出不同的颜色 */
/* 十进制表示的颜色在CSS中没有浏览器兼容性问题 */
/* 通常rgb三个值取值在0-255之间，大了也可以，只不过不会变了 */
}#h{
/*设置大标题火影忍者的样式*/
text-align:center; /* center居中，left靠左，right靠右 */
color:rgb(200,100,125); /* 设置文本颜色 */
font:normal bold 100px "楷体"; /* 设置文本为 非斜体 加粗 100px 楷体 */}
#b{
/*设置二级标题岸本齐史的样式*/
text-align:center; /*设置文本居中*/
color:rgb(220,50,105);
text-decoration: underline;
/* underline下划线/overline上/line-through中 */
}
#e{/*设置段落为首行缩进值*/
/* text-indent: 35px; */ /*设置首行缩进35px*/
text-indent: 2em; /*设置首行缩进2个汉字*/ /* 1个em表示一个汉字的位置 */
/* text-indent: -2em; /*设置首行缩进负的2个单位*/
} */
}
#bc{/*设置字母abcd的的样式*/
text-align:center;
text-transform: uppercase;
/* capitalize首字母大写，uppercase小写-大写，lowercase大写-小写 */
letter-spacing: 5px; /*设置字符间距为5px*/
}
#g{/*设置a happy day的的样式*/
text-align:center;
text-transform: uppercase;
/* capitalize首字母大写，uppercase小写-大写，lowercase大写-小写 */
word-spacing: 20px; /*设置单词间距为20px*/
letter-spacing: 5px; /*设置字符间距为5px*/
}
#m1{/*设置div标签的第二季《火影忍者疾风传》的样式*/
height: 100px; /*设置高度*/
border:1px solid #00f; /*设置边框的大小1px，实线，蓝色*/
line-height: 100px; /*设置第二季《火影忍者疾风传》在边框的垂直距离*/
/* 当行高的值（ line-height）和高度（height）的值一样就可以实现文本垂直居中 */
text-align:center;
}s
</style>
</head>
<body>
<h1 id="h">火影忍者</h1>
<h2 id="b">岸本齐史</h2>
<h3 id="bc">abcd</h3>
<p id="e">电视动画<span class="a">《火影忍者》</span>改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</p>
<p id="g">a happy day </p>
<div id="m1">第二季《火影忍者疾风传》</span></div>
</body>
</html>
代码效果：
（2）CSS字体属性代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style type="text/css">
#h{
font-size: 100px; /* 设置字体的大小100px */
font-family: "楷体"; /* 设置字体为楷体 */
/* 默认为宋体 */
font-weight: normal; 设/* 置字体不加粗 */
font-style: italic; /* 设置为斜体 */
/* font:italic bold 100px "微软雅黑"; */
/* 用最后一行代码时记得注释掉前面所有四部分 */
}
.a1{
font-style: italic;
}
</style>
</head>
<body>
<h1 id="h">火影忍者</h1>
<p>电视动画《火影忍者》改编自日本漫画家<span class="a1">岸本齐史</span>的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</p>
</body>
</html>
代码效果：
本期讲解到此结束，大家如果有不懂的地方可以私信，只要有时间一定回复哦。
【网页制作】—CSS文本和字体属性讲解1（文本属性）_哔哩哔哩_bilibili今天给大家讲解一下CSS的文本和字体属性，通过文本和字体属性大家可以让文本更加的美观，让网页的视觉效果更加漂亮。视频中如有不对的地方，大家可以私信告诉我。一起学习进步。
https://www.bilibili.com/video/BV1dF411W7hV?spm_id_from=333.999.0.0
【网页制作】—CSS文本和字体属性讲解2（字体属性）_哔哩哔哩_bilibili今天给大家讲解一下CSS的文本和字体属性，通过文本和字体属性大家可以让文本更加的美观，让网页的视觉效果更加漂亮。视频中如有不对的地方，大家可以私信告诉我。一起学习进步。
https://www.bilibili.com/video/BV1vS4y1N7gz?spm_id_from=333.999.0.0
博主的哔哩哔哩账号：一枫阳光，感兴趣的可以关注一下哦。定期更新CSS代码学习。萌新UP主大家一起进步呀。讲解若有不对，一定第一时间修改，谢谢大家啦。
【网页制作】CSS文本和字体属性讲解【附讲解视频】相关推荐
- css文本与字体样式（基础知识整理）
本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 CSS的单位 html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中 ...
- cursor css(鼠标悬浮禁用) 网页制作CSS中的光标类型
Cursor是网页制作CSS中的光标类型,与图标文件Icon一样,是特殊类型的小位图. 语法: cursor :auto|all-scroll|col-resize|crosshair|default ...
- CSS 文本溢出 text-overflow属性
text-overflow属性用来设置容器内的文本溢出时,如何处理溢出的内容,取值为 clip | ellipsis,默认值为 clip. clip 表示文本溢出时,简单的把溢出的部分裁剪掉:elli ...
- 2021-04-03 Web前端之CSS——选择器、字体属性、文本属性、样式表
视频课程:黑马程序员Pink老师 笔记: 选择器以及一条或多条声明 写在<head><style>之间</style></head> font-size ...
- html网页制作.css属性,网页设计中的CSS样式
一.CSS能做什么 CSS用于增强或控制网页样式,并允许将样式信息与网页内容分离.引用样式表的目的是将"网页结构代码"和"网页样式风格代码"分离开,从而使网页设 ...
- CSS中的字体属性和文本属性总结
文章目录 一.字体属性 1.用行高让单行文本居中 2.font属性简写 3.字体加粗属性 4.大小写转换 二.文本属性 1.空白处理 2.overflow属性:超出范围的内容处理 一.字体属性 css ...
- 网页制作 css样式,网页设计与制作-CSS样式.ppt
网页设计与制作-CSS样式 第四章CSS样式 4．1 CSS样式的定义和使用 4.1.1什么是CSS CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展 ...
- CSS 文本及字体样式（复习 自用）
1.文本属性 文本属性-概览 color 为字体指定颜色 font-style 用于打开和关闭斜体文本 font-weight 为字体设置粗细程度 font-size 为文字指定大小 font-fam ...
- css字体像素教程,详解CSS中的字体属性的使用
字体族 font-family 示例: CSS Code复制内容到剪贴板 h2 {font-family:times,serif;} 注意:如果一个字体名多于一个单词(有空格),应该加上引号. 例如: ...
最新文章
- 面向单细胞RNA-seq数据插补及聚类方法研究
- android与mysql的交互,与Android中的外部SQLite数据库进行交互.
- Supporting Python 3(支持python3)——为Python 3做准备
- python用递归法写斐波那契_python实现斐波那契数列： 递归+备忘录法+动态规划实现...
- 由浅到深理解ROS（7）-URDF
- Koa 中间件的执行
- HDU-1712-ACboy needs your help
- 如何开始ChickTech章节
- SQL命令向表中添加列
- 隐马尔可夫模型及其基本假设
- DoS攻击之Syn洪泛攻击原理及防御
- 2018年手机ODM行业分析
- 双硬盘主机安装Ubuntu 18.04
- k8s Container资源控制: requests和limits
- 自动驾驶和辅助驾驶基础知识
- 抖音短视频账号运营方案
- 云服务器ECS网卡多队列优化
- 电力圈大佬再次“华山论剑”：如何构建以新能源为主体的新型电力系统？
- Codeforces Round #808 (Div. 1)（A~C）
- Python告诉你《隐秘的角落》好看在哪里