css基础—字体那些事
css基础—字体那些事
1. 首先讲字的大小样式等
- 字体大小 font-size: 40px;
- 文字字体 font-family: "宋体",Arial;
文字样式 font-style:normal;
-normal:正常字体
-italic，oblique:斜体- 字体加粗 font-weight: bold;
- 每行所占高度（行高） line-height: 50px;
疑问一: 文字字体怎么会同时写两个值？
解答:
是首选和备选的关系，不只可以写两个，还可以写多个。放在第一个位置的是首选，后面的是备选。因为网页中可能存在中英文，中英文的字体样式不同。
font-family：首选，备选1，备选2.....
注意：当网页上存在中文和英文的时候。要首先写英文字体，在写中文字体。因为中文字体库包含英文，英文字体库不包含中文。
疑问二：行高是什么？用来干什么的？
解答：转答案在这里，别人的博文和再看一篇会更懂，也是别人的博客
line-height用来控制文字垂直方向上的位置。
2. 字体相关属性
- 字体颜色 color:red;
- 首行缩进 text-indent: 2em;或者 text-indent: 32px;
文本水平方向对齐 text-align:文本对齐
- 属性值有3个：left，center，right。
- 只能靠左，居中，靠右。
- 上下移动目前可以使用line-height.text-decoration:文本修饰
- underline 下划线
- line-through 删除线
- overline 上划线
- none 无
- 字间距:letter-spacing:10px;
- 词间距:word-spacing:10px;
- 字间距+词间距:
letter-spacing:10px;和word-spacing:10px;共同使用 强制换行：word-break:break-all;
由于中文会强制换行，但是因为英文和数字不会强制换行。<!--强制换行-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
border: 1px solid red;
}
#box1{
width: 300px;
height: 300px;
border: 1px solid red;
word-break:break-all;
}
</style>
</head>
<body>
<div id="box">
dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111
</div>
<div id="box1">
dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111
</div>
</body>
<!--
英文和数字不能强制换行
强制换行
word-break:break-all; -->
</html>
- 强制不换行：white-space：nowrap；
点击查看强制不换行
注意：词间距的使用
eg:
1.我爱学习
2.我 爱 学习
对这两个写样式词间距的样式。只有2起作用。因为浏览器无法自动识别那些是词，给了空格才知道。 <!--词间距-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1, #box{
width:800px;
height:50px;
border: 1px solid pink;
color:red;
font: 16px "宋体";
word-spacing: 10px;
}
</style>
</head>
<body>
<div id="box">我 爱 学习</div>
<div id="box1">我 爱 学习</div>
</body>
<!--
word-spacing: 表示词间距;
使用词间距前：我空格-爱空格-学习
使用词间距后：我空格-10px-爱空格-10px-学习
-->
</html>
词间距和字间距同时使用时，注意实际效果：
eg：我 爱 学 习。设置字间距为20px，词间距为50px。
实际效果为：
我-20px-空格-20px-50px-爱
<!--字+词间距-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width:800px;
height:50px;
border: 1px solid pink;
color:red;
font: 16px "宋体";
letter-spacing: 50px;
}
#box1{
width:800px;
height:50px;
border: 1px solid pink;
color:red;
font: 16px "宋体";
word-spacing: 50px;
}
#box2{
width:800px;
height:50px;
border: 1px solid pink;
color:red;
font: 16px "宋体";
word-spacing: 50px;
letter-spacing: 20px;
}
</style>
</head>
<body>
<!--只使用字间距-->
<div id="box">我爱学习</div>
<!--只使用词间距-->
<div id="box1">我 爱 学 习</div>
<!--同时使用字间距和词间距-->
<div id="box2">我 爱 学 习</div>
<!--
box2：字+词间距
我-20px-空格-20px-50px-爱
-->
</body>
</html>
css基础—字体那些事的更多相关文章
- HTML&CSS基础-字体的样式
HTML&CSS基础-字体的样式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> & ...
- CSS基础-字体
字体变化设置 改变字体颜色 color 改变字体大小 font-size 改变字体粗细 font-weight 改变字体样式 font-family 改变字间距 letter-spacing 改变字体 ...
- css 基础 字体和文本样式
字体样式处理font-size:30px:// 设置字体大小 font-weight:700://设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体 ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
- 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
[图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- css基础总结一
最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...
随机推荐
- tensorflow白话篇
接触机器学习也有相当长的时间了,对各种学习算法都有了一定的了解,一直都不愿意写博客(借口是没时间啊),最近准备学习深度学习框架tensorflow,决定还是应该把自己的学习一步一步的记下来,方便后期的 ...
- [BZOJ 4668]冷战(带边权并查集+启发式合并)
[BZOJ 4668]冷战(并查集+启发式合并) 题面 一开始有n个点,动态加边,同时查询u,v最早什么时候联通.强制在线 分析 用并查集维护连通性,每个点x还要另外记录tim[x],表示x什么时间与 ...
- 小白如何入门 Python 爬虫？
本文针对初学者,我会用最简单的案例告诉你如何入门python爬虫! 想要入门Python 爬虫首先需要解决四个问题 熟悉python编程 了解HTML 了解网络爬虫的基本原理 学习使用python爬虫 ...
- 标准库path源码解读
先看标准库 作用:关于路径的一些实用操作 https://github.com/golang/go/blob/master/src/path/path.go 源码地址 func IsAbs func ...
- PCIeのType0与Type1型配置请求与BAR（基地址寄存器）
PCIe中存在两种配置空间Type0&type1,TYPE0对应非桥设备(Endpoint),Type1对应桥设备(Root和Switch端口中的P2P桥)因为Root每个端口总都含有一个P2 ...
- 新手使用GIT 上传文件到github
手把手教你如何使用 Git # 初始化一个新的Git仓库 1.方式一: mkdir(make directory) test或者直接进入文件夹中再打开git 方式二:cd /文件夹 cd(change ...
- mkswap - 建立一个linux交换区
总览 mkswap [-c] [-vN] [-f] device [size] 描述 mkswap 在一个设备上或者在一个文件里创建一个linux交换区. (该交换区创建后,必须使用 swapon 命 ...
- tortoise svn回滚常用命令
一.revert to this version 和 revert changes from this version的区别 假设SVN已有版本4814-4854:1.基于4837版本执行[rever ...
- 使用Medusa美杜莎暴力破解SSH密码
使用Medusa美杜莎暴力破解SSH密码 1.Medusa简介 Medusa(美杜莎)是一个速度快,支持大规模并行,模块化的爆力破解工具.可以同时对多个主机,用户或密码执行强力测试.Medusa和hy ...
- Shell编程变量
shell变量 什么是变量,存放了各种数据,在linux怎么定义了变量,name=ken,name就是变量名,ken就是变量值, 但是在shell中,有三种方式: name=ken name='ken ...