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 @   baimingze  阅读(32)  评论(0)  编辑  收藏  举报
相关博文：
· CSS-语法格式和基础选择器
· HTML-标签学习
· CSS-属性
· css属性
· CSS属性、CSS盒子模型
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示