دورة css للمبتدئين الدرس السادس


فهاد الدرس السادس من دورة CSS للمبتدئين غادي نشوفوا d'autres propriétés css ولي غادي يمكنونا باش نتعاملو مع العديد من الحالات لي كنطيحوا فيهم ف design ديالنا  بحال display وfloat والعديد من الإضافات الأخرى لي غادي نشوفوها طيلة هاد الدرس.


1- كيفاش نخدم ب float

فل propriété float كتمكن باش نوجه واحد ل élément لواحد الإتجاه مثلا هنا فالكود المرفق عندي paragraphe مع image وباش ل image توجه لليسر ول paragraphe يجي حداها فسطر واحد كنخدم ب float لي كنعطيها left لي كتعني ليسر ويمكن انها تاخد حتى right لي هي ليمن الكود لي زدنا هو : 

                                //index.html code

<div class="post">
        <img src="bg.jpg" width="200" height="200">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente at earum, dicta quis quidem consequuntur nemo laboriosam accusantium distinctio rem adipisci nisi mollitia? Reiciendis placeat provident magni accusamus asperiores sit?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. A consectetur odit eum aliquid cum ut facilis autem? Laudantium earum saepe accusamus doloribus beatae ratione, expedita aliquam, doloremque at, voluptas debitis!
        </p>
    </div>

//style.css

img{
	float: left;
	margin-right: 20px;
}
                            

2- كيفاش نخدم ب display

فكيف سبق وشفنا فل menu لي قادينا قبل display كتاخد مجموعة من القيم فسبق شفنا inline-block لي كتمكن من عرض des éléments فسطر واحد دبا غادي نشوفوا  display:none  لي كتمكن من إخفاء un élément فهنا فالكود احتفظنا بنفس الكود السابق فقط زدنا ل img فالكود css display:none لي غادي تمكن من حجب الصورة الكود لي زدنا هو :

                                //style.css code

img{
	float: left;
	margin-right: 20px;
	display: none;
}
                            

3- كيفاش نخدم ب border-radius

ل propriété border-radius كتمكنا باش يكونو عندنا حواف معقوفة يعني ل border لي كنزيد لشي élément كيكون عندو الجوانب دايرة وانا لي كنحدد هادشي بل px فعندي الجاتب الأيمن الأيسر الأيمن السفلي والأيسر العلوي ففالمثال لي عندنا ولي هو نفس الكود السابق كنزيد ل border ل div منبعد كنزيد ل border-radius لجميع الجوانب ديال div الكود css لي زدت هو :

                                //style.css code

div {
	border: 3px solid #4CAF50;
	border-radius: 5px 5px 5px 5px;
        padding: 5px;
}
                            

4- كيفاش نخدم ب text-shadow

ل propriété text-shadow كتمكنا باش نزيدو الظل ل texte ديالنا فهنا فالكود المرفق ولي هو نفس الكود html لي شفنا قبل فكنزيدو text-shadow لل paragraphe ديالنا ب css فقط كنحدد الظل الأفقي والعمودي بل px بالإضافة للون الكود لي زدنا هو :

                                    //style.css code

p{
	line-height: 30px;
	text-shadow: 2px 2px yellow;
}
                                

5- كيفاش نخدم ب box-shadow

ل propriété box-shadow كتمكنا باش نزيدو الظل ل élément ديالنا فهنا فالكود المرفق ولي هو نفس الكود html لي شفنا قبل فكنزيدو box-shadow لل paragraphe ديالنا ب css فقط كنحدد الظل الأفقي والعمودي بل px بالإضافة للون الكود لي زدنا هو :

                                    //style.css code

p{
	line-height: 30px;
	background-color: yellow;
	box-shadow: 12px 12px black;
}