البرمجة في 7 أيام

لغة CSS

ستتعلم في هذا اليوم أساسيات لغة CSS والتي تقوم بتحسين المظهر والألوان وجماليات الموقع

كيف أبدأ
قم بمشاهدة الفيديوهات مع متابعة الخطوات بالأسفل خطوة بخطوة
ابدأ من هنا

خطوة رقم 1

التعريف بلغة CSS

خطوة رقم 2

تجهيز وترتيب المجلدات والملفات
أنشئ مجلد جديد مجاور لمجلد اليوم الأول ، وقم بتسميته : اليوم الثاني css

خطوة رقم 3

بداخل مجلد اليوم الثاني
أنشئ ملف جديد بواسطة برنامج ++notepad ويفضل تسميته بـ index
وتكون صيغة الملف html. كما في المثال التالي

index.html

خطوة رقم 4

بداخل مجلد اليوم الثاني أيضا
أنشئ ملف جديد بواسطة برنامج ++notepad ويفضل تسميته بـ style
وتكون صيغة الملف css. كما في الشكل التالي

style.css

خطوة رقم 5

انسخ الكود التالي وألصقه بداخل ملف index.html
تنبيه : تأكد من نسخ الكود بشكل كامل

<html>
	<head>
		<meta charset="UTF-8">
	</head>
	
	<body>
		
		<button> 1 اضغط هنا </button>
		<button> 2 اضغط هنا </button>
		
		<br>
		<br>
		
		<table>
			<tr>
				<td>محرم</td>
				<td>1</td>
			</tr>
			<tr>
				<td>صفر</td>
				<td>2</td>
			</tr>
		</table>
		
		<h1> عنوان كبير </h1>
		<h3> عنوان متوسط </h3>
		<h6> عنوان صغير </h6>
		
		<div>
			<img src="https://www.w3docs.com/uploads/media/book_gallery/0001/01/thumb_139_book_gallery_share.png"/>
			<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5abzBeS5cqdY9EIxa3lYl5oZJiWv79K5hmJz1M5Sa8XCkUk6gOA"/>
		</div>
		
		<h1> عنوان كبير </h1>
		<h3> عنوان متوسط </h3>
		<h6> عنوان صغير </h6>
		
		<hr>
		
		<input type="text"/>
		
		<br>
		
		<a href="https://www.google.com"> محرك البحث قوقل </a>
		
		<br>
		<br>
		
		<div>
			<br>
			<br>
		</div>
		
		<ul>
			 <li>قائمة 1</li>
			 <li>قائمة 2</li>
		</ul>
		
		
	</body>
</html>

خطوة رقم 6

نقوم الآن بربط ملف style.css بملف index.html
وذلك من خلال إضافة الكود التالي في ملف index.html بداخل الـ head
مع بقاء منطقة الـ body و الـ head كما كانت

<html>
	<head>
	    ...
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		...
	</body>
</html>

خطوة رقم 7

كيف تعمل لغة css
أولا: بالوصول إلى العنصر كما في المثال التالي

body { }
h1 { }

ثانيا: بإعطاء العنصر الخصائص المطلوبة

body { background : red }
h1 { font-size : 20px }

خطوة رقم 8

لاستدعاء عنصر بواسطة اسم الوسم

body { }
h1 { }
img { }

خطوة رقم 9

لتغيير لون الخلفية
قم بنسخ الكود التالي وألصقه داخل ملف style

body {
	background : pink ;
}

ثم قم بنسخ الكود التالي وألصقه داخل ملف style

h1 {
	background : red ;
}

خطوة رقم 10

لإضافة معرف خاص (id) للعنصر : يتم كتابة ما يلي قبل نهاية الوسم الأول للعنصر في ملف html

id = "example"

ثم يتم استدعاؤه من ملف style بالطريقة التالية

#example { }

قم بنسخ المعرف التالي وإضافته للعنوان رقم 6 في ملف html

id = "title6"
<h6> عنوان 6 صغير </h6>

ليصبح بهذا الشكل

<h6 id = "title6" > عنوان 6 صغير </h6>

خطوة رقم 11

الوصول إلى العنصر بواسطة الـ id
ثم قم بنسخ الكود التالي وإضافته إلى ملف style

#title6 { 
	background: green ;
}

خطوة رقم 12

لإضافة معرف لمجموعة من العناصر (class) : يتم كتابة ما يلي قبل نهاية الوسم الأول

class = "example"

ثم يتم استدعاؤه من ملف style بالطريقة التالية

.example { }

قم بنسخ الـ class التالي ولصقه على عدة عناصر في ملف html

class = "group1"
<button> اضغط هنا 1 </button>
<h3> عنوان 2 متوسط </h3>
<a href="https://www.google.com"> محرك البحث قوقل </a>

لتصبح العناصر بهذا الشكل

<button class = "group1"> اضغط هنا 1 </button>
<h3 class = "group1"> عنوان 2 متوسط </h3>
<a class = "group1" href="https://www.google.com"> محرك البحث قوقل </a>

خطوة رقم 13

الوصول إلى العناصر بواسطة الـ class
ثم قم بنسخ الكود التالي وإضافته إلى ملف style

.group1 { 
	background: gold ;
}

خطوة رقم 14

مراجعة طرق الوصول إلى العناصر
1- بواسطة اسم الوسم tag

h2 { background: gold }

2- بواسطة إضافة id للعنصر واستدعاؤه باسم هذا الـ id

<img id="bigIMG" src="logo.png" >
#bigIMG { background: gold }

3- بواسطة إضافة class للعنصر واستدعاؤه باسم هذا الـ class

<h1 class="left" > عنوان كبير </h1>
<button class="left"> اضغط هنا </button>
.left { background: gray }

خطوة رقم 15

طريقة اختيار ألوان أخرى
من خلال الرابط التالي
https://htmlcolorcodes.com

background: #2936BB ;

خطوة رقم 16

لتغيير لون الخط

color : #8AFEC7 ;

خطوة رقم 17

لتغيير حجم الخط

font-size : 50px ;

خطوة رقم 18

لإضافة إطار للعنصر

border: 5px solid red;

لإضافة إطار للجدول

<table border = "1" >

خطوة رقم 19

للتحكم في العرض والارتفاع

width : 100px ;
width : 100% ;
width : 80% ;

height : 50px;

خطوة رقم 20

لاستدعاء جميع العناصر

* {
	
}

خطوة رقم 21

للتحكم في اتجاه النص من اليمين إلى اليسار أو العكس

* {
	direction: rtl;
	direction: ltr;
}

خطوة رقم 22

للتحكم في محاذاة أغلب العناصر

text-align: center ;
text-align: left ;
text-align: right ;

خطوة رقم 23

للتحكم في محاذاة بعض العناصر التي لا تستجيب للتنسيق السابق
للتوسيط

margin : auto ;

وللمحاذاة إلى اليمين أو اليسار

float: right ;
float: left ;

تنبيه : عند استعمال flout قد تحدث مشكلة للعنصر الذي يليه، والحل: بإضافة التنسيق التالي لهذا العنصر

clear: both ;

خطوة رقم 24

للتحكم في الأبعاد الخارجية للعنصر

margin : 50px ;

margin-top : 80px ;
margin-left : 80px ;
margin-right : 40px ;
margin-bottom : 40px ;

خطوة رقم 25

للتحكم في الأبعاد الداخلية للعنصر

padding : 60px ;

padding-top : 50px ;
padding-left : 50px ;
padding-right : 110px ;
padding-bottom : 110px ;

خطوة رقم 26

لإخفاء العنصر

display : none ;

خطوة رقم 27

لإظهار العنصر

display : block ;

خطوة رقم 28

مراجعة لغة Css

خطوة رقم 29

تمرين عملي على لغة css
قم بإنشاء مجلد جديد باسم تمرين على لغة css
ثم بداخل هذا المجلد أنشئ ملف جدبد ياسم

التمرين.html

ثم قم بنسخ الكود التالي كاملا ، وألصقه في هذا الملف

<html>

	<head>
	</head>


	<body>
	
		<div>
			<img src="http://images.all-free-download.com/images/graphicmedium/html_logo_55909.jpg"/>
			<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5abzBeS5cqdY9EIxa3lYl5oZJiWv79K5hmJz1M5Sa8XCkUk6gOA"/>
		</div>
		
		<br>
		
		<div>
			<table>
				<tr>
					<td>
						<a href=""> الرئيسية </a>
					</td>
					<td>
						<a href=""> من نحن </a>
					</td>
					<td>
						<a href=""> الرؤية والرسالة </a>
					</td>
					<td>
						<a href=""> معرض الصور </a>
					</td>
					</td>
					<td>
						<a href=""> اتصل بنا </a>
					</td>
				</tr>
			</table>
		</div>
		
		<div>
			
			<input type="text">
			<h1>تدريب على لغة css</h1>
		</div>
		
		<button> اضغط هنا </button>
		<button> اضغط هنا </button>
		<br>
		<br>
		
	</body>
</html>

ثم قم بإنشاء ملف جديد باسم style.css
قم الآن بالتنسيق على هذه الأكواد ليصبح مثل الصورة التالية ولو بشكل مقارب
اضغط على الصورة للتكبير

الخطوة الأخيرة

الاطلاع على المراجع المهمة
موقع w3schools
موقع رواق
دورات CSS من اليوتيوب
ضع سؤالك هنا في مجموعة : فون جاب - كوردوفا - آيونك