小程序入门学习笔记css_小程序 css 入门-CSDN博客

本文链接：https://blog.csdn.net/qq_43751489/article/details/108218814

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css-demo</title>
    <style>
      p{color: red;font-size-adjust: 20px;}
    </style>
</head>

<body>  
    <p>红色的p元素中的文字，20号</p>
</body>

</html>

如果要定义多个样式声明，则需要用分号将每个声明分开
，但是最后一条规则是不需要加分号的。
    每行只描述一个属性，这样可以增强样式定义的可读性，部分IDE
    会自动格式化代码

    p{
        text-align: center;
        color:red;
        font-size: 20px;
    }

    大多数样式表包含不止一条规则，而大多数规则不止一个声明。
    多重声明和空格的使用使得样式表更容易被编辑，并且不止
    一个声明。多重声明使得空格使用使得样式表更容易被编辑，
    并且使得样式表更容易被编辑，并且增加代码的可读性，比如。
    body{
        color:#000;
        background: #fff;
        margin: 0;
        padding: 0;
        font-family: Georgia, 'Times New Roman', Times, serif

    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            background-color: red;
        }
        .div2{
            background-color: blue;
        }
    </style>
</head>
<body >
<div  class="div1">这是一个红色背景 </div>
<div  class="div2">这是一个蓝色背景 </div>
</body>
</html>









<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1415281275,1495068353&fm=26;&gp=0.jpg");
        }
    </style>
</head>
<body>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            height: 500px;
            width: 500;
            background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1415281275,1495068353&fm=26;&gp=0.jpg");
            background-repeat: no-repeat;
            background-position: top;
        }
    </style>
</head>
<body>
    <div>
        
    </div>
</body>
</html>

在这里插入图片描述
文本样式缩进
css提供了text-index
下面规则会使所有段落首行缩进-5em
p{text-index：5em}
p{text-index：-5em}

为了防止出现显示问题，设置一个外边距或内边距
p{text-index:-5em;padding-left:5em}
文本除了绝对定位，同样可以使用百分比值进行相应的动态布局。
即text-indent可以使用全部的长度单位
百分比缩放
div{width：500px；}
p{text-indent:20%}

this is a paragragh

这是因为以上标记继承了id为inner的div元素


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer{ width:500px}
        #inner{text-indent: 10%;}
        p{width: 200px;}
    </style>
</head>
<body>
 <div id="outer">
     <div id="inner">这个是inner
         <p>内部p元素</p>
     </div>

 </div>   
</body>
</html>