网页设计css常用代码(css代码大全)

CSS (Cascading Style Sheets) 是一种样式表语言，用于描述 HTML 或 XML 文档的呈现样式。

以下是一些常用的 CSS 代码示例，涵盖了布局、颜色、文本样式等方面。

1、选择器：用于选择需要应用样式的 HTML 元素。

/* 标签选择器 */
p {
  color: blue;
}

/* 类选择器 */
.center {
  text-align: center;
}

/* ID 选择器 */
#main-title {
  font-size: 24px;
}

2、文本样式：

/* 字体样式 */
font-family: 'Arial', sans-serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
text-decoration: underline;

/* 文本颜色 */
color: #333;

/* 文本对齐 */
text-align: left;
text-align: center;
text-align: right;
text-align: justify;

/* 文本间距 */
letter-spacing: 2px;
word-spacing: 4px;
line-height: 1.5;

3、背景：

/* 背景颜色 */
background-color: #f1f1f1;

/* 背景图片 */
background-image: url('path/to/image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;

/* 简写 */
background: #f1f1f1 url('path/to/image.jpg') no-repeat center cover;

4、盒模型：

/* 外边距 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

/* 内边距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

/* 边框 */
border-width: 1px;
border-style: solid;
border-color: #333;

/* 简写 */
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
border: 1px solid #333;

5、布局与定位：

/* 显示类型 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;
display: none;

/* 浮动 */
float: left;
float: right;

/* 定位 */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;

/* 弹性布局 */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: space-between;

这只是 CSS 常用代码的简要概述，实际上 CSS 功能非常丰富，你可以为网页元素设置各种样式。

要了解更多关于 CSS 的信息，可以参考 MDN Web 文档：https://developer.mozilla.org/en-US/docs/Web/CSS。