一些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

    			本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。