CSS常用声明

目录

前言

一.颜色与背景

二.字体与排版

三.盒模型

四.显示与定位

示例代码

lips：

结语

---

前言

CSS（层叠样式表）通过声明来设置元素的样式。每个声明由一个属性和一个值组成，它们之间用冒号分隔。以下是开发者日常工作中最常用的CSS声明：

一.颜色与背景

  1.color: 设置文字颜色，如 color: red;
  2.background-color: 设置背景颜色，如 background-color: #fff;
  3.background-image: 设置背景图像，如 background-image: url(image.jpg);
  4.background-repeat: 控制图像是否平铺，如 background-repeat: no-repeat;

二.字体与排版

  1.font-size: 设置字体大小，如 font-size: 16px;
  2.font-family: 选择字体族，如 font-family: 'Arial', sans-serif;
  3.line-height: 设置行高，如 line-height: 1.5;
  4.text-align: 对齐文本，如 text-align: center;

三.盒模型

  1.margin: 设置外边距，如 margin: 10px;
  2.padding: 设置内边距，如 padding: 10px 20px;
  3.border: 设置边框，如 border: 2px solid black;
  4.width 和 height: 设定宽度和高度，如 width: auto; height: 200px;

四.显示与定位

  1.display: 控制元素显示方式，如 display: block;
  2.position: 元素定位模式，如 position: relative;
  3.top, right, bottom, left: 定位偏移量。
  4.z-index: 层叠顺序，如 z-index: 1;

示例代码

.box {
  /* 颜色 */
  color: blue;
  background-color: #f0f0f0;

  /* 排版 */
  font-size: 16px;
  line-height: 1.5;

  /* 盒模型 */
  padding: 10px;
  border: 2px dashed gray;

  /* 显示与定位 */
  display: inline-block;
  position: relative;
  top: 20px;

lips：

1.组合使用：利用多种声明创造丰富的视觉效果。

2.响应式设计：利用媒体查询适应不同屏幕尺寸。

3.代码整洁：合理组织CSS文件，保持代码清晰。

结语

通过这些常见的CSS声明，你将能够有效地控制网页的外观，从色彩到布局，每一处细节都尽在掌控之中。随着经验积累，你将逐渐探索更多高级特性，让网站设计更加出众。