CSS文本设置

最新推荐文章于 2024-04-11 20:24:06 发布

qq_45978082

最新推荐文章于 2024-04-11 20:24:06 发布

阅读量181

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_45978082/article/details/110739280

版权

本文介绍了CSS页面引入的三种方法：外联式、嵌入式和内嵌式，并详细讲解了CSS文本设置，包括font-size、color、font-family、font-style、font-weight、line-height、font、text-decoration、text-indent和text-align等属性的用法，帮助理解如何控制网页文本的样式和布局。

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

CSS页面引入方法：

1.外联式：通过link标签，链接到外部样式表到页面中。例如：
<link rel=“stylesheet” type=“text/css” href=“main.css”>

2.嵌入式：通过style标签，在网页上创建嵌入的样式表。例如：
<style type=“text/css”>
div{
width:100px; height:100px; color:red
}
</style>

3.内嵌式：通过标签的style属性，在标签上直接写样式。例如：
<div style=“width:100px; height:100px; color:red”>……</div>

CSS文本设置：

常用的应用文本的CSS样式：

font-size 设置字号大小，如：font-size:12px;
color设置字体颜色，如：color:red;
font-family 设置文字的字体，如：font-family’微软雅黑’；这里建议使用英文，不然容易出现乱码，如：font-family:‘Microsoft Yahei’;
font-style 设置字体是否倾斜，如：font-style:‘normal’;设置不倾斜，font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold;设置加粗 font-weight:normal;设置不加粗
line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距，如：line-height:24px;
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：font:是否加粗字号/行高字体;如：font:normal 12px/36px’Microsoft Yahei’
text-decoration设置文字的下划线，如：text-decoration:none;将文字下划线去掉，text-decoration:underline;添加下划线。
text-indent 设置文字首行缩进，如：text-indent:24px;设置文字首行缩进24px
text-align 设置文字水平对齐方式，如text-align:center 设置水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--第三种插入样式的方式，外链式-->
    <link