初识css--2

最新推荐文章于 2024-07-17 16:29:37 发布

logical_thinking

最新推荐文章于 2024-07-17 16:29:37 发布

阅读量95

点赞数 2

分类专栏： css基础盒知识文章标签： html5 前端 css 青少年编程

本文链接：https://blog.csdn.net/logical_thinking/article/details/126184303

版权

css基础盒知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

前言
一、字体样式
二、文本样式
三、文本其他样式
总结

前言

在我们打开浏览器，就会看到不同内容，其字体、文本的大小、颜色、粗细……是不一样的。

下面我们就开始学习怎么对字体、文本设置css

一、字体样式

字体样式就是对字体进行修饰

所用到的便是font-

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 字体样式：font- */
			p {
				/* 谷歌默认字体大小16px */
				font-size: 30px;
				/* 字体的粗细
					值：100~900
					bold：粗
					bolder：更粗
					light：细
					lighter：更细
					normal：默认=不设置字体的粗细
				 */
				font-weight: 500;
				/* 字体风格
				 normal：默认=不设置
				 oblique：倾斜 外力作用
				 italic：倾斜 利用字体本身的倾斜
				 */
				font-style: italic;
				/* 字体类型
					多个类型用逗号隔开，中文字体写在英文字体后
				 */
				font-family: 'Times New Roman', "宋体";
				/* 综合设置
					顺序必须是：风格 粗细 大小 类型
				 */
				font: italic normal 30px 'times new roman', "微软雅黑";

			}
		</style>
	</head>
	<body>
		<p>welcome</p>
	</body>
</html>

二、文本样式

所用到的是text-

详细内容请阅读代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 文本样式：text- */
			div{
				/* 字体颜色 */
				color: red;
				/* 文本缩进 */
				text-indent: 20px;
				/* 文本的水平对齐方式 并且是所在元素的宽度大小的对齐*/
				text-align: center;
				/* 行高 */
				line-height: 30px;
				/* 文本垂直居中方式 
					1、只设置行高
					2、高度与行高保持一致
				*/
			   height: 30px;
			   /*
				文本装饰
				underline：下划线
				overline：上划线
				line-through：删除线
				none：去除下划线
				上下划线不能同时出现
			   */
				text-decoration:overline;
				
				/* 
					转换大小写
					uppercase：大写
					lowercase：小写
				 */
				text-transform: capitalize;
			}
			a{
				text-decoration: none;
				vertical-align: middle;
			}
			img{
				/* 	vertical-align：只在行内块元素上有效
					middle：指的是中线对齐
					baseline：基线对齐
					text-top：顶线对齐
					
				 */
				vertical-align:text-top;
			}
			input{
				width: 50px;
				height: 50px;
				vertical-align:text-top;
			}

		</style>
	</head>
	<body>
		<div>666</div>
		<a href="百度">456</a>
		<img src="./img/核桃.png" alt="">
		<input type="checkbox" name="" id="" value="同意">
	</body>
</html>

三、文本其他样式

文本的样式有很多这里让我们看一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 300px;
				height: 300px;
				background-color: cornflowerblue;
				
				/* visible原样显示
					hidden：将多余的裁剪掉
					scroll：产生滚动条
					auto：自适应，需要就产生滚动条
					overflow-x:; 水平方向产生滚动条
					overflow-y:; 垂直方向产生滚动条
				 */
				overflow: visible;

			}

			p {
				width: 300px;
				height: 300px;
				background-color: cornflowerblue;
				
				/* 文本不换行 */
				white-space: nowrap;
				overflow: auto;
				
				/* 省略显示：必须配合white-space和overflow使用 */
				text-overflow: ellipsis;
			}

			.third {
				width: 300px;
				height: 300px;
				
				/* 
				normal:纵向滚动,并且是紧靠顶部开始排列
				nowrap:横向滚动，紧靠左边开始排列
				pre:右边居中排列，会有左、上、下边距
				pre-line：紧靠下方排列，会出现上边距
				pre-wrap：图片之间的距离加大，并且第一张图片会有顶端边距
				*/
				white-space: nowrap;
				overflow: auto;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div class="first">

		</div>
		<br>
		<div class="second">
			qwe
		</div>
		<div class="third">
			<img src="./img/核桃.png" alt="1">
			<img src="./img/核桃.png" alt="1">
			<img src="./img/核桃.png" alt="1">
		</div>
	</body>
</html>