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


فهاد الدرس الأول من سلسلة css للمبتدئين غادي نشوفوا كيفاش نزيدو css فملف خارجي عوض الطريقة الأولى لي شفنا فالدرس السابق فغادي نشوفوا كيفاش نزيدو une classe ونزيدو un id ولفرق بيناتهم وكيفاش نزيدو des styles متنوعين ل document html ديالنا.


1- إضافة css خارجي ل document html

فغادي يبقى document السابق هو la base ديالنا فيلا مكنتيش تبعتي معانا من اللول غادي تزيد projet جديد فيه زيد ملف index.html وملف style.css وملف script.js الكود ديال الملف index.html هو:

                                <!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">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h3>texte rouge</h3>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos hic quia iure nobis sequi voluptatibus ea iusto doloremque quas, est, repellendus id quaerat fugiat. Saepe eaque accusantium dolorem blanditiis aspernatur?</p>
    </div>
    <!--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>
                            

2- إضافة style css ل h3

فباش نزيد style css كنمشي للملف style.css فعندنا بزاف دالطرق باش نزيدو css للملف html كاين les classes و les ids وles tags فهنا غادي نبداو ب tag مثلا فالكود المرفق كنزيد ل tag h3 ل color : tomato لي هو اللون الأحمر وباش نغير الحجم ديال الخط استعملت font-size لي كتمكني باش نغيرو عطيتها 28px وباش نغير شكل الخط استعملت font-family لي كتاخد مجموعة من الأشكال وباش نزيد السمك ديال texte كنخدم ب font-weight لي كتاخد السمك بالأرقام كاين من 100 ل 900  أو كنعطيها bold أو bolder فالكود css لي زدنا ل h3  هو : 

                                h3{
	color:tomato;
	font-size: 28px;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight:700;
}
                            

3- إضافة style css باستعمال ل class

فباش نخدم بل classe كنزيد ل tag h3 classe سميناها title منبعد فل style.css كنسترجعها بالنقطة ف les classes كنسترجعهم بهاد الطريقة title. فل h3 كنزيد class عطيناها title منبعد فالملف style.css كنزيد نفس ل code css لي زدنا قبل فقط كنغير tag من h3 ل classe title فشوف فالمتصفح ديالك غادي تلقى نفس النتيجة الكود لي غيرنا :

                                //index.html
   <h3 class="title">texte rouge</h3>

//style.css
.title{
	color:tomato;
	font-size: 28px;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight:700;
}
                            

4- إضافة style css باستعمال ل id

الفرق بين les classes و les ids ل classe كيمكن نستعملوها أكثر من مرة بينما ل id كنستعملوه مرة واحدة فباش نخدم بل id كنزيد ل tag h3 id سميناه title منبعد فل style.css كنسترجعوه ب # ف les ids كنسترجعهم بهاد الطريقة title# فل h3 كنزيد id عطيناه title منبعد فالملف style.css كنزيد نفس ل code css لي زدنا قبل فقط كنغير من title. ل title# فشوف فالمتصفح ديالك غادي تلقى نفس النتيجة الكود لي غيرنا :

                                    //index.html
<h3 id="title">texte rouge</h3>

//style.css 
#title{
	color:tomato;
	font-size: 28px;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight:700;
}
                                

5- كيفاش نزيد style css ل les éléments كاملين

الجواب كاين واحد sélecteur  لي كيمكنا باش نديرو هادشي ولي هو * فباستعمال النجمة كيمكن نزيد css ل éléments كاملين وهاد الطريقة كتستعمل فحالة وحدة وهي ملي عاد كنبداو شي projet فالمتصفح كيكون فيه des margins وpadding لي par défaut فباش كنحيدهم كنستعمل هاد الكود ولي فيه * وملي غادي تزيدو غادي تلاحظ بلي ل margin لي هو l'espace ما بين h3 وtop ديال navigateur مبقاش : 

                                    *{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}