CSS 实例学习笔记

本文档主要介绍 CSS 的实例应用,旨在帮助读者更深入地了解 CSS 的使用。以下是一些常见 CSS 样式及其实例应用。

1. 文字样式

1.1 字体大小

Copy Code
font-size: 16px;

上述代码将文字的大小设置为 16 像素。可以根据需要自行调整字体大小。

1.2 字体颜色

Copy Code
color: #333333;

上述代码将文字的颜色设置为 #333333,即深灰色。同样可以根据需要自行调整颜色。

1.3 排版样式

Copy Code
text-align: center;

上述代码将文字水平居中排版。其他排版样式包括 left、right 和 justify。

2. 图片样式

2.1 图片大小

Copy Code
width: 100px; height: 100px;

上述代码将图片的宽度和高度都设置为 100 像素。可以根据需要自行调整大小。

2.2 图片边框

Copy Code
border: 1px solid #cccccc;

上述代码将图片的边框设置为 1 像素宽的实线,颜色为 #cccccc。同样可以根据需要自行调整边框样式。

2.3 图片对齐

Copy Code
float: left;

上述代码将图片向左对齐。其他对齐方式包括 right 和 none。

3. 列表样式

3.1 有序列表

Copy Code
ol { list-style: decimal; }

上述代码将有序列表的标记符号设置为数字,从 1 开始。其他标记符号包括 lower-alpha、upper-alpha、lower-roman 和 upper-roman。

3.2 无序列表

Copy Code
ul { list-style: square; }

上述代码将无序列表的标记符号设置为正方形。其他标记符号包括 disc、circle 和 none。

结语

本文档介绍了 CSS 的实例应用,包括文字样式、图片样式和列表样式等。希望对读者有所帮助。