ترتيب CSS : تعلم طرق تقسيم وترتيب صفحات الويب

تتميز CSS ببعض الأدوات الخاصة التي يجب أن تتحكم في طريقة عمل HTML. إحدى هذه الأدوات هي أداة الفرز التي تتيح لنا إعادة ترتيب مظهر العلامات وإعطاء الأولوية في التسلسل.

 

تعريف

يعتمد مبدأ الطلب في CSS على فكرة إعطاء الأولوية للعرض داخل الحاوية الخاصة التي تحتوي على جميع علامات HTML مثل:

.container{
    //Formats
}

.container .one{
    //formats
}

.container .two{
    //formats
}

حيث يتم إنشاء حاوية خاصة ووضع العديد من العلامات بداخلها ثم نبدأ بإعطاء الأولوية للعلامات كما نريد.

 

مثال

من فضلك ، لفهم ترتيب CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

.container{
    width:200px;
    height:500px;
    margin:50px auto;
    background-color:#B6DCEC;
    display:flex;
    flex-wrap:wrap;

}

.container div{
    color:#FFFFFF;
    width:200px;
    height:100px;
    padding:10px;

}

.container .one{
    background-color:#DD3135;
    order: 3
}

.container .two{
    background-color:#83C6E7;
    order:1
}

.container .three{
    background-color:#FFDE59;
    order:2
}

.container .four{
    background-color:#B6DCEC;
    order:4
}



 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title> CSS ordering</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class = "container">
            <div class="one">Div 1</div>
            <div class="two">Div 2</div>
            <div class="three">Div 3</div>
            <div class="four">Div 4</div>
        </div>

    </body>

</html>