首页 > 其他分享 >HTML——day5

HTML——day5

时间:2023-02-26 12:00:43浏览次数:27  
标签:字体大小 样式 day5 HTML 字体 font 写法 我们

继续我们上次的学习进度今天是有关于css中一些字体的属性:
1.字体样式:

指得是我们字体的样式,例如宋体,微软雅黑这种。

font_family: " 宋体",”times”,times new roman",times

上面是我们的例子写法,其中要注意的是字体种类之间要用逗号隔开,上面我们写了很多只能够字体,原因是在我们代码程序中很多时候客户端并没有某种字体,这样我们上面的写法当用户没有相对应的字体的时候,就会顺位显示下一种字体,直到所有字体都没有那就会默认显示微软雅黑。

2.字体大小

font-size: 10 px

这里设置字体大小单位是px,表示像素,对于我们文字的大小一般来说是整体来设置的所以我们可以直接写在body标签中,至于我们其他不同演示的字体可以在下面的标签中单独设置。

3.字体加粗,变细

font-weight: bold(变粗)

在字体变粗这方面有三种属性:bold(加粗),bolder(更粗),normal(正常),除此三种以外我们还可以采用数字的办法来设置,这里就不需要单位了直接写数字就行,400表示我们的正常粗细。

4.文字样式

font-style:normal

这里的文字样式表示斜体或者正常体,用italic和normal表示,

以上就是css中一些文字样式

当我们在写的时候通常要设置很多例如这样

body {

front-style: italic

font-weight: 700

font-size: 16px

font-family :" mcriosoft yahei"

}

可以看见我们上述的属性写法要写很多遍的属性,这里我们说明一种写法不需要写属性名直接写入属性值,

body{

font: italic 700 16px "mcrisoft yahei"
}

这种写法省去了我们的属性名,非常方便但是有一个重要的点是必须要按照:文字样式(斜体?),字体粗细,字体大小,字体样式(宋体?)这样的顺序来写,在写的时候除了字体大小,字体样式不能省略以外其余的可选择性省略。

下面是有关于css的文本属性

1.颜色

还是采用color的写法不过颜色的属性值分为:英文,16进制、rgb三种写法,比较常用的是16进制,rgb表示red green blue 三种组成写法为(0,0,0)以三种颜色纯度不同例如正红色,(255,0,0)这样写法,不是很常见但见到了要知道。

2.对齐文本

text-align属性值有三种:center left right 非常好理解就是他们中文意思,这里要注意的是我们的文本对齐是相对于水平方向来说的。

3.装饰文本

text-decoration:

共有四种属性:underline thoughline ouerline none,分别表示下划线删除线,上划线,无效果,一般情况默认无效果,这里我们只需要记住删除线即可。

4.首行缩进;

text-indent: 20px

表示首行缩进多少个像素,一定记住带单位,

这里还有另一种写法

text-indent:2em

单位是em表示当前字体大小的一个字符所占空间,举个栗子:当我们的字体大小为50px的时候,我们首行缩进20px是不是看起来就显得不是那么标准和协调,我们的em在这时即表示向内缩进2个50px,这样就看的更加协调喽。因为我们一般中文段落起始是向里面缩进两个字符大小,这里如果只用px就不会那么准确所以em会常用一点哦。

5.行间距,

text-hight : 20px

我们的行间距是这样分的首先用行间距减去字体的大小例如字体16px那就剩下4px再除以2表示得2px,那我们这个字体上有2px的空间下有2px的空间这样叫做行间距,而非单纯的每一行文字之间空白的地方。

ok!这就是我们今天介绍的css中的一些文字样式和文本样式。

标签:字体大小,样式,day5,HTML,字体,font,写法,我们
From: https://www.cnblogs.com/222wan/p/17156413.html

相关文章

  • HTML
    <!dortypehtml><html><head><title>字体</title></head><body><style>.fonth1{font-family:"草书";}.fonth3{ font-family:"甲骨文";}.fontp{......
  • django.template.exceptions.TemplateDoesNotExist: rest_framework/api.html
    django.template.exceptions.TemplateDoesNotExist:rest_framework/api.html报错,使用postman进行提交请求是能正常调用的,但是使用浏览器就会抛出这个错误这是因为没在set......
  • HTML--字体
    <!docpytehtml><html><head><title>字体</title></head><style>.fonth1{font-family:"楷体";}.fonth3{font-wiight:30px;font-heigh:30px;......
  • 浏览器如何渲染一个 html 文件?
    浏览器如何渲染一个html文件14KB规则,具体的看MDN的解释:https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work#tcp_慢启动_14kb_规则大概......
  • 小白成神day5
    顺序结构java的基本结构就是顺序结构,除非特别指明,否则就按照顺序逐句执行顺序结构是最简单的算法结构语句与语句之间,框与框之间是按从上到下的顺序进行的,他是由若干个......
  • HTML
    <!doctypehtml><html> <read> <title>字体排版</title> </read> <body> <div> <h1>给设计师:字体排版才是网页的最基础</h1> <imgsrc="https://nim-nosdn.neteas......
  • HTML
    HTML笔记大纲1基本介绍HTML元素1.级别容器级<div></div>内部可存放任意内容文本级<p></p>只能存放文字或类似文字的内容2.元素对空白不敏感(即可通......
  • HTML5的WebSocket使用
    index.html(客户端)1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8"/>5<metaname="viewport"content="width=device-width......
  • HTML个人简介
    <html><head><title>个人简介</title></head><body> <h1>个人简历</h1> <imgsrc="https://mailh.qiye.163.com/js6/s?_host=mailh.qiye.163.com&func=mbox%3AgetMe......
  • html
    <html><hand><title>简历</title><str/></hand><body><h1>个人简历</h1><imgsrc="https://mailh.qiye.163.com/j......