一些css示例代码

2024-01-02 10:19:37
  1. 设置文本样式:

 

css复制代码

p {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
line-height: 1.5;
text-align: justify;
}
  1. 设置背景样式:

 

css复制代码

body {
background-color: #f2f2f2;
background-image: url('background.jpg');
background-position: center;
background-repeat: no-repeat;
}
  1. 设置边框样式:

 

css复制代码

div {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
  1. 设置边距和填充样式:

 

css复制代码

div {
margin: 10px;
padding: 20px;
}
  1. 设置盒模型样式:

 

css复制代码

div {
width: 200px;
height: 100px;
border: 1px solid #ccc;
padding: 20px;
margin: 10px;
}
  1. 设置定位和显示样式:

 

css复制代码

div {
position: absolute;
top: 50px;
left: 50px;
display: block;
}
  1. 设置动画和过渡样式:

 

css复制代码

@keyframes example {
0% {background-color: red;}
50% {background-color: blue;}
100% {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

文章来源:https://blog.csdn.net/elirlove1/article/details/135261158
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。