css基础知识之字体属性

最新推荐文章于 2021-10-23 19:45:50 发布

不知道叫什么呢123

最新推荐文章于 2021-10-23 19:45:50 发布

阅读量230

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_48519907/article/details/109894061

版权

css基础知识之字体属性

font-family

			h2 {
				font-family: "microsoft yahei";
				/* 当由几个单词组成时，要加上引号（英文下的）。 */
			}

			p {
				font-family: "times new roman", times, serif;
				/* 执行顺序是，看你电脑有没有第一个字体，有就用，没有就去看你电脑有没有第二个字体，有就用，没有就去看有没有第三个字体。多个字体之间用英文下的逗号隔开。 */
			}

font-size

			p {
				font-size: 20px;
			}

注意：
1.px(像素)大小是我们网页中最常用的单位。

2.谷歌浏览器默认的文字大小为16px。

3.不同浏览器可能默认显示的字号大小不一致，我们要给一个明确值大小，不要默认大小。

4.font-size属性可以给body，用于指定整个页面的文字大小。
例：

			body {
				font-size: 16px;
			}

注意:

标题标签比较特殊,需要单独指定文字大小.

			body {
				font-size: 50px;
			}
			h2 {
				/* 	font-size: 50px; */
				font-weight: 400; /* 不加粗,方便对比效果 */
			}

	<body>
		zzz
		<h2>zzz</h2>
	</body>

效果：
在这里插入图片描述
给 h2 单独设置 font-size: 50px; 后

效果：
在这里插入图片描述

font-weight

.bold {
font-weight: 700;
}

注意：
1.不要跟单位。
2.实际开发中,提倡用数字表示加粗或变细。
3.数字范围:100–900.正常字体为 400。700 等同于bold 。
4.标题本身默认就会变粗,但在开发中很多情况不想让它变粗.。解决办法就是font-weight：400；

font-style

			p {
				font-style: italic;
				/* 倾斜效果 */
				/* 实际开发中很少用. */
			}

			em {
				font-style: normal;
				/* 让倾斜的字体不倾斜 */
				/* 平时我们很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜. */
			}

css字体属性之复合属性

需求：
想让 div 文字变倾斜,加粗,字号设置为20像素,行高50像素，并且是微软雅黑。

div {
font: italic 700 20px/50px "microsoft yahei";
background-color: pink; /* 加一个背景颜色方便观察行高 */
}

效果：
在这里插入图片描述

font: font-style font-weight font-size/line-height font-family; 顺序是有严格要求的.

注意：
1.使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性之间以空格隔开。
2.不需要设置的属性可以省略(取默认值),但必须保留 “font-size” 和 “font-family” 属性,否则 font 属性将不起作用。

文本属性

文本颜色

			div {
				color: red;
			}

注意;
1.color: #ff0000;十六进制，开发中用的最多。
2.color: rgba(255,0,255)。rgb 分别代表红绿蓝取值在 0-255 之间。
a 代表 alpha。用于设置透明度。取值在 0-1 （透明度依次降低）。0.5为半透明。

对齐文本

			div {
				text-align: center;
			}

注意：text-align属性用于设置元素内文本内容的水平对齐方式。本质是让盒子里面的文字水平居中对齐,不影响盒子本身。

取值：
1.left:左对齐(默认值)。
2.right:右对齐。
3.enter:居中对齐

装饰文本

text-decoration 属性。
none:默认.没有装饰线(最常用);
underline:下划线(常用,链接a自带下划线);
overline:上划线(几乎不用);
line-through:删除线(不常用) 。

需求:
链接自带下划线,怎么去掉呢?

			a {
				text-decoration: none;
			}

文本缩进

			p {
				text-indent: 2em;
			}

text-indent 属性用来指定文本的第一行缩进,通常是将段落的首行缩进。
em 是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的一个文字大小。

行间距（行高）

line-height 属性 1.上间距。2.文本高度。3.下间距。说通俗一点就是文字上下和文字本身的高度，三者之和叫行间距

不知道叫什么呢123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础知识之字体属性

css基础知识之字体属性font-family h2 { font-family: "microsoft yahei"; /* 当由几个单词组成时，要加上引号（英文下的）。 */ } p { font-family: "times new roman", times, serif; /* 执行顺序是，看你电脑有没有第一个字体，有就用，没有就去看你电脑有没有第二个字体，有就用，没有就去看有没有第三个字体。多个字体之间用英文下的逗号隔开。 */ }
复制链接

扫一扫