CSS-属性

属性

1.字体、文本

  • font-size:字体大小
  • color:文本颜色
  • text-align:对其方式
  • line-height:行高

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>字体属性</title>
        <style>
            
            p{
                color: #FF0000;
                font-size:30px;
                text-align:center;
                line-height:100px;
            }
            
        </style>
    </head>
    <body>
        
        <p>奇闻说今古</p>
        
    </body>
</html>
复制代码

运行结果

2.背景

background:

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>字体属性</title>
        <style>
            
            p{
                color: #FF0000;
                font-size:30px;
                text-align:center;
                line-height:100px;
                
                border: #00008B solid 1px;
            }
            div{
                border: #FF0000 solid 2px;
                width:150px;
                height:150px;
                
                background: url(img/QQ截图20220802162029.png) no-repeat;
            }
            
        </style>
    </head>
    <body>
        
        <p>奇闻说今古</p>
        <div>
            
        </div>
        
    </body>
</html>
复制代码

运行结果

 

 3.边框

  • border:设置边框,符合属性

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>字体属性</title>
        <style>
            
            p{
                color: #FF0000;
                font-size:30px;
                text-align:center;
                line-height:100px;
                
                border: #00008B solid 1px;
            }
            
        </style>
    </head>
    <body>
        
        <p>奇闻说今古</p>
        
    </body>
</html>
复制代码

运行结果

4.尺寸

  • width:宽度
  • height:高度

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>字体属性</title>
        <style>
            
            p{
                color: #FF0000;
                font-size:30px;
                text-align:center;
                line-height:100px;
                
                border: #00008B solid 1px;
            }
            div{
                border: #FF0000 solid 2px;
                width:150px;
                height:150px;
            }
            
        </style>
    </head>
    <body>
        
        <p>奇闻说今古</p>
        <div>
            
        </div>
        
    </body>
</html>
复制代码

运行结果

 

 5.盒子模型:控制布局

  • margin:外边距
  • padding:内边距
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>盒子模型</title>
        
        <style type="text/css">
            
            div{
                border: #FF0000 solid 5px;
            }
            
            #div1{
                width: 50px;
                height:50px;
            }
            #div2{
                width:20px;
                height:20px;
                margin: 10px;
            }
            
        </style>
        
    </head>
    <body>
        
        <div id="div1">
            <div id="div2">
                
            </div>
        </div>
        
        
    </body>
</html>
复制代码

运行结果

posted @ 2022-11-16 17:20  想见玺1面  阅读(22)  评论(0)    收藏  举报