123 total views, 1 views today
السلام عليكم ورحمة الله تعالى وبركاته . قبل البدء في الشرح نود ان نرحب بزوارنا الأعزاء ونشكركم جزيل الشكر على الثقة التي تضعونها فينا ومتابعة ماننشره، وفي هذا المقال سنقوم بتغطية طريقة تنفيذ لغة التنسيق css و الآن لننتقل إلى الأهم و هو الشرح.
هناك 3 طرق لتنفيذ css:
1- inline style:
inline style هو اسلوب مضمن داخل العنصر بحيث يسمح لنا بوضع قواعد css مباشر في عنصر معين من html, ويتم وضع هذه القواعد في وسم الفتح الخاص بعنصر html, والغرض من وضع هذه القواعد هو التحكم في شكل العنصر.
طريقة كتابة شفرة inline style:
يتم اضافة هذه الشفرة بستخدام سمة تسمى style ثم يضاف بجانبها علامة = ثم “هنا يتم كتابة شفرة css”, تتكون شفرة css من اسم الخاصية وقيمة الخاصية, ويتم فصل بينهما بعلامة : واذا كنت تريد كتابة خاصة اخرى يجب عليك اضافة علامة ;
على سبيل المثال:
<h1 style=”property:value”>title of page</h1>.
<h1 style=”property1:value1;property2:value2″>title of page</h1>.
على سبيل المثال:
انظر الى الصور بشكل جيد قمنا بكتابة الشفرة داخل ستايل,في العنصر الاول تم تغير لون الخط فقط, اما عن العنصر الثاني تم تغير لون الخط ولون الخلفية.
ملاحظة:
لاتركز في اسماء الخاصيات والقيم التي تم وضعها في style, لاننا سنقوم بشرحها بتفصيل, ركز فقط في طريقة الكتابة.
عيوب inline style:
قبل كتابة شفرة css بهذه الطريقة دعونا نتعرف عن عيوب هذا الاسلوب اي inline style:
- لايمكنك التحكم في عنصرين من html بشفرة واحدة.
اذا نظرنا الى الصورة في الاعلى نجد اننا قمنا بالكتابة في كل وسم خاصيات وقيم.
- هو الاسرع لتنفيذ, الان سوف تتساءل وتقول هل هذا عيب ؟؟, دعنا نعرف ماهي المشكلة في هذا.
في الغالب سوف تستعمل الطرق الاخرى, وهذه الطرق قد تستخدمها مع javascript من اجل عمل حدث معين في الصفحة, على سبيل المثال عند النقر يتغير لون محتوى العنصر او حدث اخر, لذلك اذا قمنا باستخدام هذا الاسلوب اي inline style سيتم تجاهل الطريقتين الاخريتين التي لم يتم شرحهم بعد, نحن نعلم ان هذه الطريقة لاتسمح لنا بتنسيق كثير من العناصر باستخدام شفرة css واحدة.
2-inpage style tag:
inpage style tag هو اسلوب مضمن داخل صفحة html, بحيث يسمح لنا بوضع قواعد css مباشر في نفس صفحة html.
طريقة كتابة شفر inpage style tag:
يتم كتابة شفرة inpage style tag بين وسمين <style></style>, ويتم كتابة عنصر style بين وسمين head, نحن نعلم ان وسوم html تتكون من وسم فتح ووسم اغلاق, على سبيل المثال <head></head>, ويتم وضع عنصر style بين وسمين head.
على سبيل المثال:
<head>
<style>
</style>
</head>
نلاجظ ان وسم style داخل وسم head, الان دعونا نتعرف عن الخواص والقيم التي يتم وضعها في العنصر style.
في بداية الامر يجب عليك اختيار العنصر الذي تريد وضع التنسيقات عليه, تذهب الى القسم body وتحظر اسم العنصر الذي تريد وضع التنسيق عليه بدون علامتين <>, ثم نقوم بوضعها بين وسمين style.
لنتخيل انك اخترت العنصر p اي الفقرة, في بداية الامر تكتب p ثم علامتين {} ثم تكتب الخواص والقيم بين علامتين {}
على سبيل المثال:
<style>
p{property:value}
</style>
اذا كنت تريد كتابة اكثر من خاصية وقيمة تفصل بين كل خاصة بعلامة ;
على سبيل المثال:
<style>
p{property1:value1; property2:value2}
</style>
يمكنك جعل التنسيق اسهل للقراءة بجعل التنسيق هكذا:
<style>
p{
property1:value1;
property2:value2;
}
</style>
يمكنك ايضا تنسيق عنصر ثاني تحت العنصر الاول, على سبيل المثال:
<style>
p{
property1:value1;
property2:value2;
}
h1{
property1:value1;
property2:value2;
property3:value3;
}
</style>
صور توضيحية ومع المقارنة بين الطريقة الاولى اي inline style والطريقة الثانية اي inpage style tag:
inline style:
inpage style tag:
انظر الى الفرق الشاسع بين الطريقتين, في الطريقة الاولى قمنا باعطاء كل فقرة property value, اما في الطريقة الثانية قمنا باختيار فقرة واحدة ثم اثرة property value الخاصة بها على الاخرى.
ملاحظة:
لاتنظر الى الفرق بين الصورتين في المتصفح, فتجد اختلاف بينهما, انظر الى الفرق في المحرر لمعرفة الفرق بين الصور.
عيوب inpage style tag:
قبل كتابة شفرة css بهذه الطريقة دعونا نتعرف على عيوب هذا الاسلوب اي inpage style tag.
- لايمكن استخدم الاكواد من الصفحة الى صفحة اخرى في مرحلة التعلم.
في الغالب نحتاج الى تنسيق الصفحات بشكل متشابه لبعضها البعض, وكتابة شفرة css باسلوب inpage style tag قد لا تنفع في بداية تعلمك لcss ياستدعاء التنسيقات من صفحات اخرى, وفي هذه الحالة يتوجب عليك اعادة كتابة القيمة في الصفحة
- الاعتماد بشكل كبير على شفرات css التي تم كتابتها باسلوب inpage style tag قد تزعجك في المستقبل.
اعلم انه كلما زاد حجم العناصر والتنسيقات في الصفحة, اصبح البحث عن عنصر معين امرا صعبا.
3-external style sheet:
external style sheet هو اسلوب خارجي, بحيث يسمح لنا باستخدام قواعد css في اي صفحة من صفحات html.
طريقة كاتبة شفرة external style sheet:
قبل كتابة شفرة external style sheet نحتاج لانشاء ملف بصيغة css اي .css, على سبيل المثال style.css, بعد انشاء الملف نقوم باستدعائه في العنصر head.
طريقة انشاء ملف css على محرر:
تذهب الى file ثم تضغط على new file ثم تعود الى file وتختار save ثم تقوم باختيار مكان حفظ الملف ثم تعطيه اسم ولا تنس .css على سبيل المثال style.css
طريقة استدعاء ملف css:
نحتاج لانشاء عنصر من نوع link دخل العنصر head, يحتوي عنصر link على attributes اي سمات, اول سمة نحتاج اليها تسمى rel ثم = “stylesheet” ثم سمة اخرى تسمى href ثم = اسم ملف الcss مع الامتداد الخاص به.
على سبيل المثال:
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
تنبيه:
عنصر ال link لايحتوي على وسم اغلاق كباقي الوسوم التي تم شرحها مسبقا.
طريقة كتابة شفرة css باسلوب external style sheet:
كتابة شفرة css باسلوب external style sheet شبيه لحد كبير باسلوب inpage style tag,الفرق الوحيد بين الطريقتين, في external style sheet لا تحتاج لاستخدام العنصر style, ما عليك سوى اختيار العنصر الذي تريد وضع التنسيقات عليه. في بداية الامر تذهب الى ملف html الخاص بك بالضبط الى القسم body وتحظر اسم العنصر الذي تريد وضع التنسيق عليه بدون علامتين <>, ثم التوجه الى الملف الذي قمت بانشاء بصغة css.
لنتخيل انك اخترت العنصر p اي الفقرة, في بداية الامر تكتب p ثم علامتين {} ثم تكتب الخواص والقيم بين علامتين {}
على سبيل المثال:
p{property:value}
اذا كنت تريد كتابة اكثر من خاصية وقيمة تفصل بين كل خاصة بعلامة ;
على سبيل المثال:
p{property1:value1; property2:value2}
يمكنك جعل التنسيق اسهل للقراءة بجعل التنسيق هكذا:
p{
property1:value1;
property2:value2;
}
يمكنك ايضا تنسيق عنصر ثاني تحت العنصر الاول, على سبيل المثال:
p{
property1:value1;
property2:value2;
}
h1{
property1:value1;
property2:value2;
property3:value3;
}
صور توضحية:
انظر جيدا الى صور,حيث قمنا بكتابة اكواد css خارج صفحة ال html, في صفحة بصغة css ثم استدعينا صفحة css باستخدام عنصر يسمى link, يسمح لنا العنصر link استخدام صفحة css في اي صفحة html.
على سبيل المثال:
نلاحظ في الصورة اننا قمنا بتنسيق صفحتين html باستخدام صفحة واحدة من css, هذه هي الطريقة الاكثر استعمالا في css.
وهنا نصل الى نهاية المقال و نتمنى أن يكون سهل الفهم بسيط الشرح وفي الأخير لا تنسونا بالدعاء والهداية والتوفيق، وندعوكم للاعجاب بصفحتنا على الفيس بوك فضلا وليس أمرا لتشجيعنا اكثر و السلام عليكم ورحمة الله .
