CSS常用声明

hyh2023090208

于 2024-10-08 21:46:33 发布

阅读量154

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/qy_hell/article/details/142770077

版权

前言

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;