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


فهاد الجزء الثاني من دورة css للمبتدئين غادي نكملو داكشي لي بدينا فالجزء السابق غادي نشوفوا كيفاش نزيدو background-color ول background-image ل document ديالنا بالإضافة ل des  propriétés css أخرين. 


1- إضافة ل background-color ل document html

باش نزيد ل background-color ل document html  عندي tag body لي كنسترجعها فالملف style.css وكنزيدلها ل propriété background-color لي كتاخد ل color لي يمكن يكون بالإسم ...red,blue,yellow,green  أو sous forme hexadécimal لي كتكون على هاد الشكل FFFFFF# يمكنلك تشوف هاد الموقع هنا للمزيد من المعلومات  فالكود باش زدنا ل background-color :

                                body{
	background-color: whitesmoke;
}
                            

2- إضافة ل background-image ل document html

فل background-color كيف شفنا قبل كتزيد لون ل arrière plan ل document html كاين background-image لي كتزيد صورة فهنا درنا تغيير على الكود زدنا ل header لي سبق شفنا فدروس سابقة  فالكود css زدنا ل header ل background-image لي هي صورة خصك تزيدها ف dossier ديالك وهدا موقع كيقدم صور مجانية من هنا منبعد كنعطيها background-attachement:fixed باش كتعطينا واحد ل effet ملي كنتحركوا ب la souris وعطيناه ايضا background-size:cover ولي كيمكنا باش الصورة تاخد ل espace كامل ول background-position:center لي كتحدد ل position ديال الصورة ف centre الكود لي زدنا هو :   

                                //index.html

    <header>
        
    </header>

//style.css

header{
	background-image: url(bg.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	height: 100vh;
}
                            

3- إضافة border ل document html

فباش نزيد ل border زدنا h3 مرة أخرى وباش نزيدلها ل border عندي ل propriété border لي كتاخد الحجم en px هنا عطيناها 3 px وايضا type ديال ل border هنا عطيناه solid وايضا كنعطيه ل couleur لي كياخد الإسم أو ل code hex كيف شفنا قبل وفل commentaire زدت des types اخرين الكود لي زدنا هو:  

                                //index.html

 <h3 id="title">Titre rouge</h3>

//style.css

/*********border:solid dashed dotted double***********/
h3{
	border: 3px solid #000;
	padding: 5px 5px 5px 5px;
}
                            

4- كيفاش تخدم بل hover

ل hover هو ملي ل curseur ديال la souris كيدوز فوق شي  élément فمثلا هنا زدنا واحد  lien لي ف style.css كنسترجعو ب tag a ولي فل hover ديالو ولي كنوصلولو بهاد الطريقة a:hover كنبدل ل couleur ديالو وكنحيد داك texte لي كيكون تحتو : 

                                    //index.html

<a href="#">CSS</a>

//style.css

a:hover{
	text-decoration: none;
	color: orange;
}
                                

5- كيفاش تخدم بل opacity

ل opacity هي واحد propriété لي كتزيدنا transparence للصور ديالنا ولي كتاخد القيمة من 0.0 ل 1 فمثلا هنا زدنا image ف document html وف style.css عطيناها فل hover ديالها ل opacity 0.5 فيمكنلك تجرب فالمتصفح باش تشوف النتيجة متنساش بلي الصورة خص تكون عندك فنفس dossier الكود لي زدنا هو :

                                    //index.html

<img src="bg.jpg" height="200" width="200" alt="">

//style.css

img:hover{
	opacity: 0.5;
}