HTML 文本样式的使用

文本样式是什么。在CSS样式中,最基本的属性是用来设置文字和文本的样式。"文字"指的是单个文字或单词,"文本"指的是由文字组成的内容。为字体设置样式主要是设置字、词的样式,对文本设置样式样式主要是对整段文章设置样式。使我们网页的内容看起来更加丰富

怎么改变字体大小和颜色？

你可以使用 color 和 font-size 属性在文本标签内更改文本的颜色和大小。这被称为内联 CSS。你可以使用 HTML 中的 style 属性来实现。

<div>这是一个div</div>

在css里面

div{
   font-size:24px;
}

效果图：

我们在来加上字体的颜色

div{
     font-size:24px;  字体大小
     color: #9ef5f9;  颜色
}

效果图

style代码展示

<div style="font-size: 24px;color: #9ef5f9">这是一个div</div>

效果图是和上面一样的

字体单位

font-size字体大小属性

单位
px(像素)
em、rem、cm、mm、pt、pc
h1{font-size:24px;}

文字怎么改变字体

我们的文字有很多种字体，我们在html用font-family来实现

<p>今天天气好晴朗,处处好风光</p>

css代码

p{
    font-family: "宋体", serif;
}

效果图

字体风格

代码font-style: italic

p{
    font-family: "宋体", serif;
    font-style: italic;
}

font-style属性

属性	含义	举例
notmal	正常的字体	font-style:notmal;
italic	斜体	font-style:italic;
oblique	也是倾斜	font-style:oblique;

字体粗细

p{
    font-family: "宋体", serif;
    font-style: italic;
    font-weight:bold;
}

字体粗细有好几种样式：

值	说明	举例
normal	默认值，定义标准的字体	fontweight:norml;
bold	粗体字体	font-weight:bold;
bolder	更粗的字体	font-weight:bolder;
lighter	更细的字体	font-weight:lighter;

字体样式表

属性名	含义	举例
font-family	设置字体类型	font-family:"隶书";
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	ont-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 36px "宋体";

水平对齐方式

text-align属性

值	说明	举例
left	把文本排列到左边。默认值：由浏览器决定	text-align:left;
right	把文本排列到右边	text-align:right;
center	把文本排列到中间	text-align:center;
justify	实现两端对齐的文本效果	text-align:justify;

代码演示

p{
  width: 250px;  宽
    height: 100px;  高
    border: solid 2px;  边框
    text-align: center;  居中
}


<p>今天天气好晴朗,处处好风光</p>

为了方便我们看清楚，所以加了一个边框，这样可以很清楚看到字体居中了，其他的实现方法是一样的。

总结就到啦 有什么可以评论区补充