前端学习笔记_004_CSS字体样式属性调试工具

最新推荐文章于 2024-09-09 11:03:57 发布

阿十三

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量306

点赞数

分类专栏：学习笔记文章标签： css

本文链接：https://blog.csdn.net/A_thirteen/article/details/108372558

版权

学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了CSS中关于字体样式的属性，包括font-size、font-family、font-weight、font-style等，强调了综合设置字体样式的语法和注意事项。此外，还讲解了color、text-align、line-height和text-indent等外观属性的使用，以及开发人员工具的调试方法。

摘要由CSDN通过智能技术生成

CSS字体样式属性调试工具

目标
1、学会CSS字体样式完成对字体的设置。
2、学会emment语法。
3、学会开发人员工具调试代码。

1、font字体

1.1、font-size:大小

作用：font-size用于设置字号
语法

p {
	font-size: 20px;
}

单位

1.2、font-family：字体

作用：font-family属性用于设置字体。
语法

p {
	font-family: "微软雅黑", "宋体", arial ;
}

注意：
1、当电脑没有第一个字体会下推下一个字体，直到成功。
2、当字体是中文字体、字体名带有空格或特殊字符则加引号。
3、英文字体不需要加引号。
Unicode字体
用于早期设置字体使用中文，文件编码不匹配的解决方法之一。
也可以设置成 font-family=“Microsoft Yahei”;

1.3、font-weight：自体粗细

作用：在CSS中设置字体粗细；但是CSS没有语义。
提倡：使用数字来控制加粗效果。
语法

 p {
	font-weight: 700;
	font-weight: bold;
}

1.4、font-style：字体风格

作用：设置字体风格（如：倾斜），但CSS无语义。
属性
语法

.two {
	font-style: italic;
}

案例

em {
	/* 让倾斜的字体不倾斜 */
	font-style: normal;
}

1.5、综合设置字体样式（重点）

作用：利用font属性对字体进行综合设置。

语法

选择器 {
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	font-family: "book antiqua";	
}

案例

.title {
	font: italic 700 18px "楷体" ;
}

注意：
1、各属性必须按照顺序写入，否则无效。
2、该写法必须有font-size（字号）和font-family（字体）否则写法无效。

1.6、font总结

在这里插入图片描述

2、CSS外观属性

2.1、color：文本颜色

作用：color属性用于定义文本的颜色。
取值方式有以下3种

在这里插入图片描述
注意：
1、十六进制：前两个数代表红色；中间两个数代表绿色；后面两个数代表蓝色。
2、十六进制：#FF0000可以缩写为 #F00 ；代表同一种颜色的数字如果一样可以缩写。
3、RGB代码其实是十六进制的变体，16*16=256（别忽略0）。

语法

.color {
	color: #ff0000;
	color: #f00;
	color: red;
	color: rgb(255,0,0);
	color: rgb(100%,0%,0%);
}

2.2、text-align：文本水平对齐方式

作用：text-align用于设置文本内容的水平对齐方式，相当于HTML中的align属性。
属性值

注意：是让盒子里的内容居中对齐而不是让盒子居中对齐。
语法

.text-align {
	text-align: center;
}

2.3、line-height：行间距

作用：line-height用于设置行高
属性值

属性值单位
像素（px）
相对值（em）
百分比（%）

注意：
1、实际使用中一般使用像素（px）。
2、一般情况下行高比字体大 7、8 像素左右就可以了。

用法

/* 行高 */
.line-height {
	line-height: 26px;
}

2.4、 text-indent：首行缩进

作用：text-indent 属性用于设置文本首行缩进。
属性值单位：一般使用em作为单位，1em 代表文本中一个字符的宽度。
语法

/* 首行缩进 */
.text-indent {
	text-indent: 2em;
}

2.5、text-decoration：文本的装饰

作用：text-decoration通常用于修改链接装饰效果。
属性值
语法

/* 文本装饰 */
.text-decoration {
	text-decoration: line-through;
}

2.6、CSS外观属性总结

在这里插入图片描述

小技巧（emment语法的一部分）：
1、.demo + Tab键将生成<div class="demo"></div>。
2、.demo$*3 + Tab键将生成：

<div class="demo1"></div>
		<div class="demo2"></div>
		<div class="demo3"></div>

实践

在这里插入图片描述

HTML

<html>
	<head>
		<meta charset="utf-8">
		<title>体育新闻</title>
		<link rel="stylesheet" type="text/css" href="./style.css"/>
	</head>
	<body>
		<h1 class="title">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
		
		<div class="nav">
			<span class="date">2017年07月16日20:11</span> 
			<span class="news">新浪体育 评论中大奖 （11人参与）</span> 
			<a href="#" class="collect">收藏本文</a>
			<input type="text" value="请输入查询条件" class="search" />
			<input type="button" value="搜索" class="btn">
		</div>
		
		<hr />
		
		<p>新浪体育讯　7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
		</p>
		
		<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。
		</p>
		
		<p>据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
		</p>
		
		<p>这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong>
		</p>
		
	</body>
</html>

CSS

.title {
	font: 400 26px "微软雅黑";
	text-align: center;
}

.nav {
	text-align: center;
}

.date {
	color: #ccc;
}

.news {
	color: #990000;
}

.collect {
	text-decoration: none;
}

.search {
	color: red;
}

.btn {
	color: #008000;
	font-weight: 700;
}

p {
	font-size: 16px;
	line-height: 26px;
	text-indent: 2em;
}

em {
	font-style: normal;
	color:#33A6DB;
}