前端——元素类型+文字样式
一、元素类型
1. 块级元素
>块级标签: div p h1~h6 ul ol li dl dt dd hr br等 还有表格标签 table
特征:
1.独占一行 不会共享一行的位置
2.不设置宽度 默认是继承父级宽度 100% 结构上没有父级那就是浏览器
3.高度不设置 默认由内容撑开
4.可以自定义高宽 支持auto自适应居中 内外边距都可以设置
示例：
<div style="background-color: red;">我是盒子1</div>
<p style="background-color: green;">我是一段文本</p>
<span style="background-color: pink;">包裹文字标签</span>
<hr style="background-color: orange;height: 20px;">
2. 行内元素
>行内标签: a span i em b strong del u s等
特征:
1.不能自定义高宽 默认0 靠文字内容撑开
2.不会独占一行 可以和其它的行内元素共享一行的位置 横排显示
3.不支持设置 auto自适应居中 上下外边距不支持 但是支持设置 左右外边距
示例：
<a style="background-color: orange;">
11111
</a>
<span style="background-color: aqua;">包裹文字</span>
<i style="background-color: blueviolet;">2222</i>
</body>
3. 行内块元素
>行内块 : img (input 输入控件)
特征:
1.本质上是行内元素 具有行内特征 可以横排显示 不会独占一行 可以和行内元素并排显示
2.支持设置高宽 (具有部分块级特征)
3.不支持auto自适应居中 内外边距都支持设置
示例
<img src="./1.webp" alt="" style="width: 250px;height: 300px;margin-top: 50px;">
<img src="./2.webp" alt="" style="width: 250px;height: 300px;margin-top: 50px;">
注意：display: 定义元素是什么类型
1.块级元素 display:block; / 在这个页面显示
2.行内元素 display:inline;
3.行内块元素 display: inline-block;
4.没有这个元素 display:none;
二、文字样式——修改网页的字体大小 颜色 粗细 排版等
继承性: 父级设置字体颜色 子级没有设置 默认子级是继承父级的文字颜色
1. 文字颜色——color
取值: 列如 red 红色
2. 文字大小——font-szie
3. 文字粗细——font-weight
/* 粗的字体 */
font-weight: bold;
/* 更粗的字体 */
font-weight: bolder;
/* 细体字 */
font-weight: lighter;
4. 字体类型——font-family：如黑体 微软雅黑 宋体 楷体等等
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* color: red; */
/* color:red; */
/* 网页默认的能看到的文字 是16像素 最小可以设置为0*/
/* font-size: 16px; */
/* 网页最小可以看到的文字 1-12是12像素 */
font-size: 12px;
/* 取值 px em rem(移动端单位) %相对于父级的字体大小 */
/* font-size: 2em; */
/* 1em=16像素 2em */
/* font-size:100px; */
/* font-size: 100%; */
/* 文字粗细 默认值:normal标准字体大小 除了加粗标签外 */
font-weight: normal;
/* 粗的字体 */
font-weight: bold;
/* 更粗的字体 */
font-weight: bolder;
/* 细体字 */
font-weight: lighter;
}
.text {
/* 字体类型 */
/* font-family: '黑体'; */
/* font-family: '微软雅黑'; */
/* font-family: '小宋体'; */
font-family: "阿里妈妈刀隶体 Regular";
}
/* 需要引入外部 文字类型 */
@font-face {
/* 文字类型 */
font-family: '';
/* 引入路径 */
src: '';
}
@font-face {
font-family: "阿里妈妈刀隶体 Regular";
font-weight: 400;
src: url("./font/AlimamaDaoLiTi.woff") format("woff2"),
url("./font/AlimamaDaoLiTi.ttf") format("ttf");
font-display: swap;
}
</style>
</head>
<body>
<div class='box'>
我是文字1
<span>有点想睡觉 可是还得忍住</span>
</div>
<p class='text'>这是一段文本内容信息</p>
</body>
</html>
5.字体倾斜——font-style
> 默认值normal 正常显示的文字 （除了i和em 默认就倾斜）
/*正常显示不倾斜的文字 */
/* font-style: normal; */
/* 文字倾斜效果 */
/* font-style: italic; */
/* 强制倾斜属性 */
/* font-style: oblique; */
6——行高 line-height 设置这一行文字的高度
行高等于当前盒子高度 上下居中效果
/* 行高 */
line-height: 40px;
7——文本样式
text-align: 文本对齐方式
/* 文本左对齐 */
text-align: left;
/* 文本右对齐 */
text-align: right;
/* 文本居中对齐 */
text-align: center;
text-indent: 首行文字缩进
/* 文字缩进 首行文字缩进 */
/* text-indent: 10px; */
三、背景样式
1.背景颜色 background-color
2.背景图片 background-image
3.背景大小 background-size
4.背景平铺 background-repeat
/* 背景图片 */
background-image: url(./1.webp);
/* 背景不平铺 */
background-repeat: no-repeat;
/* 背景大小 */
background-size: 100% 100%;
/* 背景图片 */
background-image: url(./img/1.webp);
原文地址：https://blog.csdn.net/qq_53256193/article/details/142414901
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！