css代码大全

css代码大全详细介绍

以下是一些常见的CSS代码示例：

文本设置

- 字体： font-family: Arial, sans-serif;  设置字体为Arial，若用户电脑无此字体则显示无衬线字体.

- 字号： font-size: 16px;  设置字体大小为16像素.

- 颜色： color: #333;  设置字体颜色为深灰色.

- 文本对齐： text-align: center;  使文本居中对齐.

- 文本缩进： text-indent: 2em;  首行缩进2个字符.

背景设置

- 背景颜色： background-color: #f5f5f5;  设置背景颜色为浅灰色.

- 背景图片： background-image: url('bg.jpg');  设置背景图片，需填写图片路径.

- 背景图片重复： background-repeat: no-repeat;  背景图片不重复平铺.

- 背景图片固定： background-attachment: fixed;  背景图片固定不动.

边框设置

- 边框样式： border-style: solid;  设置边框为实线.

- 边框宽度： border-width: 1px;  设置边框宽度为1像素.

- 边框颜色： border-color: #ccc;  设置边框颜色为浅灰色.

列表设置

- 无序列表样式： list-style-type: disc;  无序列表的项目符号为实心圆.

- 有序列表样式： list-style-type: decimal;  有序列表的项目符号为数字.

鼠标样式设置

-  cursor: pointer;  鼠标指针变为手形.

-  cursor: text;  鼠标指针变为文本形.

布局设置

- 浮动： float: left;  使元素向左浮动.

- 清除浮动： clear: both;  清除左右两侧的浮动影响.

- 元素居中： margin: 0 auto;  使块级元素在水平方向居中.

动画效果设置

- 过渡效果： transition: all 0.3s ease;  所有属性变化在0.3秒内以缓动效果过渡。

- 动画关键帧：

@keyframes myAnimation {

0% { opacity: 0; }

50% { opacity: 0.5; }

100% { opacity: 1; }

}

定义一个名为myAnimation的动画，从透明到半透明再到完全不透明.