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


فهاد الدرس الثالت من دورة css للمبتدئين غادي نشوفوا المزيد من les propriétés غادي نشوفو كيفاش يمكن نباعدوا بين الحروف ديال جملة كيفاش نزيدو l'espace ل paragraphe وغادي نشوفوا ايضا كيفاش نحطو texte ف centre بالإضافة ل d'autres propriétés.


1- كيفاش نباعد بين الحروف ديال كلمة باستعمال letter-spacing

فباش نزيد l'espace بين الكلمات ديالي باستعمال css كاين واحد ل propriété سميتها letter-spacing ولي كتمكني باش ندير هادشي ففالكود المرفق عندي tag h3 لي فالملف style.css زدتلها letter-spacing لي كتاخد القيمة بل px هنا عطيتها 5px يمكنلك تجربها ف navigateur ديالك الكود لي زدنا هو :

                                //index.html code
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
        <script src="/js/html5shiv.js"></script>
    <![endif]-->
    <!--titre de la page-->
    <title>Document</title>
    <!--liens css-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>Darija Coding</h3>
    <!--liens javascript-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

//style.css code

h3{
	letter-spacing: 5px;
}
                            

2- كيفاش نباعد بين الأسطر ديال paragraphe باستعمال line-height

فباش نزيد l'espace بين الأسطر ديالي باستعمال css كاين واحد ل propriété سميتها line-height ولي كتمكني باش ندير هادشي ففالكود المرفق عندي tag p لي فالملف style.css زدتلها line-height لي كتاخد القيمة بل px هنا عطيتها 30px يمكنلك تجربها ف navigateur ديالك الكود لي زدنا هو :

                                //index.html code

<p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente modi architecto minus iusto ducimus velit est similique eaque. Aliquid officiis modi incidunt placeat ut in veniam explicabo, a vitae similique.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat asperiores ipsum exercitationem iure necessitatibus porro quasi, incidunt reprehenderit nostrum? Enim dolor excepturi at pariatur blanditiis repudiandae, aliquam molestiae. Voluptatibus, debitis!
    </p>

//style.css

p{
	line-height: 30px;
}
                            

3- كيفاش نحط texte ديالي ف centre ديال la page ب text-align

فباش نحط texte ديالي ف centre عندي واحد ل propriété سميتها text-align  ولي كتاخد left يعني يتحط فليسر أو right يعني ليمن أو center لي كتمكنا باش نحطوه ف centre الكود لي زدنا هو :

                                //style.css 

h3{
	letter-spacing: 5px;
	text-align: center;
}
                            

4- نحول texte لل Majuscule ب text-transform

فباش نحول texte لل Majuscule عندي واحد ل propriété سميتها text-transform ولي كتاخد uppercase يعني حروف كبيرة الكود لي زدنا هو :

                                    //style.css code
h3{
	letter-spacing: 5px;
	text-align: center;
	text-transform: uppercase;
}
                                

5- نحول texte لل Miniscule ب text-transform

فباش نحول texte لل Miniscule كنخدم بنفس ل propriété لي هي  text-transform ولي كتاخد lowercase يعني حروف صغيرة الكود لي زدنا هو :

                                    h3{
	letter-spacing: 5px;
	text-align: center;
	text-transform: lowercase;
}