入门 CSS 排版样式

CSS（层叠样式表）是一种用于网页样式设计的语言。它使得程序员能够为网页设置各种样式，如背景颜色、字体、大小、排版等。其中排版样式是关键，因为排版决定了网页内容是否易读、美观。本文将介绍一些入门级别的 CSS 排版样式。

设置文本样式

在网页中，文本样式是最基本的元素。CSS 可以为文本属性设置各种属性，如字体、大小、行高、颜色等。

1. 设置字体

   字体属性可以设置网页中文本的字体。通过设置 font-family 属性，可以在盒子内设置不同的字体。例如：

   .box1 {
     font-family: "Arial";
   }
   .box2 {
     font-family: "Times New Roman";
   }
   .box3 {
     font-family: "Courier New";
   }
   

   这些样式将为网页中三个不同的盒子设置不同的字体。

2. 设置字体大小

   字体大小属性 font-size 可以为文本设置不同的大小。这个属性指定字体大小的测量单位可以是像素、点或百分比。例如：

   h1 {
     font-size: 36px;
   }
   h2 {
     font-size: 28px;
   }
   p {
     font-size: 16px;
   }
   

   这些样式为网页中的标题（h1, h2）和段落 (p) 设置不同的字体大小。

3. 设置行高

   行高指的是垂直空间，可以通过 line-height 属性设置。例如：

   .box {
     line-height: 1.5;
   }
   

   这个样式将为 box 类添加 1.5 倍的行高。

4. 设置颜色

   想要为文本添加颜色，可以使用 color 属性。例如：

   h1 {
     color: red;
   }
   p {
     color: blue;
   }
   

   这个样式将为网页中的标题（h1）设置红色字体，段落（p）设置蓝色字体。

设置布局

除了文本样式，还可以通过 CSS 控制网页的布局。CSS 中有两种主要的布局方式：盒模型和浮动。

1. 盒模型

   盒模型是一种网页布局技术，指网页由若干个盒子组成。CSS 中使用的盒模型包括内容区、内边距、边框和外边距。内边距指包围内容的空间，边框指边框线的宽度和样式，外边距指包围元素的空间。

   .box {
     width: 300px;
     height: 200px;
     padding: 20px;
     border: 1px solid black;
     margin: 20px;
   }
   

2. 浮动

   浮动是一种网页布局方式，指浮动元素本身不占用父元素的空间。CSS 中使用的浮动包括左浮动和右浮动。例如：

   .float-left {
     float: left;
   }
   .float-right {
     float: right;
   }
   

这就是一些入门级别的 CSS 排版样式。希望本文能够帮助程序员更好地掌握 CSS。