全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

css样式大全

发布时间:2023-05-30 14:50:00
发布人:zyh

  以下是一些 CSS 样式大全:

  文本样式

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

/* 文本大小 */
font-size: 14px;

/* 字体 */
font-family: Arial, sans-serif;

/* 字体加粗 */
font-weight: bold;

/* 上、下、左、右文本边距 */
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;

/* 上、下、左、右外边距 */
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

/* 行高 */
line-height: 1.5;

/* 文本对齐方式 */
text-align: center;

/* 文本装饰 */
text-decoration: underline;

/* 字母间隔 */
letter-spacing: 2px;

/* 单词间隔 */
word-spacing: 5px;

/* 斜体 */
font-style: italic;

      背景样式

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

/* 背景图片 */
background-image: url('bg.jpg');

/* 背景大小 */
background-size: cover;

/* 背景重复 */
background-repeat: no-repeat;

/* 背景固定 */
background-attachment: fixed;

/* 背景位置 */
background-position: left top;

/* 单独设置四个角的圆角 */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

/* 设置所有角的圆角 */
border-radius: 5px;

/* 盒子阴影 */
box-shadow: 0 0 10px #888888;

/* 模糊背景 */
backdrop-filter: blur(5px);

      常见元素样式

/* 设置链接样式 */
a {
color: blue;
text-decoration: none;
}

/* 设置按钮样式 */
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}

/* 设置输入框样式 */
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

/* 设置下拉列表样式 */
select {
font-size: 16px;
padding: 12px 20px;
border: none;
border-radius: 4px;
background-color: #f2f2f2;
}

        动画样式 

/* 位移动画 */
.move {
animation: move 2s ease;
}

@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}

/* 旋转动画 */
.rotate {
animation: spin 2s linear infinite;
}

@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

/* 缩放动画 */
.zoom {
animation: zoomInOut 2s linear 1s;
}

@keyframes zoomInOut {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}

      以上是一些 CSS 样式大全,这些样式可以帮助你快速实现常见的样式效果。但是需要根据具体的页面或应用进行进行调整和改进。

相关文章

什么叫做app应用分发?

什么叫做app应用分发?

2023-10-15
VAE、GAN和transformer有什么区别?

VAE、GAN和transformer有什么区别?

2023-10-15
EDAS是什么?

EDAS是什么?

2023-10-15
云数据库是什么?

云数据库是什么?

2023-10-15

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取