قسم الدروس

درس مبسط في لغة CSS

ماهي CSS:
اختصار لـ Cascading Style Sheets
صفحات كودية تتحكم بشكل عرض صفحات الـ HTML
يتم تخزين الستايلات عادة ضمن صفحات ستايلات CSS ويأخذ الملف إلإمتداد .css ويمكن كتابة الستايلات ضمن صفحة الـ HTML ذاتها ولاتأخذ امتداد .css لإنها تعتبر جزء من صفحة الـ HTML وتكون على شكل كود ضمني.
تمت إضافة هذه النوع من الصفحات في الـ HTML إصدار 4 لحل العديد من المشاكل ولتسهيل العمل على الموقع وجعله متناسقا.
يمكن لصفحات الستايلات الخارجية أن توفر عليك الكثير من الوقت
يتم تخزين صفحات الـ CSS الخارجية ضمن ملفات CSS وهي كما ذكرنا ذات الإمتداد .css
يمكن تجميع العديد من الستايلات في ملف .css واحد

ماهو عملها:
تتحكم صفحات الستايلات بشكل الموقع. وتستخدم لإعطاء الموقع صيغة منتاسقة حيث يمكنها تحديد:
ذات الخلفية لكل صفحات الموقع من حيث اللون أو الصورة
اشكال الجداول لتكون متناسقة ومتشابهة في الموقع بأكمله
بألوان وأشكال وأحجام الخطوط بحيث يتم تحديد ستايل لكل حجم من الخطوط
تحديد اشكال الديكور الخاصة بالروابط التشعبية Hyperlinks
تحديد الفعل الذي يحصل عند تحريك الفأرة فوق احد الروابط التشعبية

ويمكن لصفحات الستايلات أن تقوم بأشياء عديدة اخرى ولكننا سنبدأ بالأساسيات.

مثال لسبب استخدام صفحات الستايلات:
لنفترض بأن في موقعك مئات الصفحات، وقد اعتمدت في موقعك على وضع العنوان الرئيسي في الأعلى، في المنتصف، بحجم خط <H1> بلون ازرق وتحته سطر. وقد قمت بعمل ذلك يدويا أو بواسطة فرنت بيج أوغيره. وهذا يعني بأنك كررت هذه العملية مئات المرات على الأقل. لو افترضنا بأنك تعتمد ذات الشكل لجميع العناوين بهذا الحجم. مافعلته ليس بخطأ ولكنه تكرار غير لازم. وعند تكوين صفحات جديدة ستقوم بعمل الشيء ذاته.

المشكلة لا تكمن هنا، بل تكمن إن اردت أن تبدل اللون في هذه العناوين من أزرق إلى أحمر غامق. والمشكلة هي بأنك ستقوم بفتح كل صفحة على حدة، ثم الذهاب إلى العناوين بهذا الحجم، ثم تغييرها يدويا. يحتاج هذا التبديل الى الكثير من الوقت.

مارأيك لو قمنا بتغيير بسيط لايأخذ أكثر من 5 ثوان. وسيقوم هذا التغيير البسيط باستبدال جميع الصفحات تلقائيا وبشكل تراتبي.

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

نقوم بتكوين صفحة جديدة نكتب فيها بأن علامة الـ HTML الخاصة بحجم الخط <H1> ستكون باللون الأحمر وتحتها سطر ونوع الخط Arial. ثم نخزن هذه الصفحة بملف ذو امتداد .css

بعد ذلك نضع رابط صفحة الـ css هذه في أعلى كل صفحة HTML عندم تكوين الصفحات. وتكون بين علامات <HEAD>.

عندما تحدد في صفحة الـ HTML بأن الخط عبارة عن <H1> لاتفعل شيئا سوى كتابة:
<H1>Welcome to My Website</H1>
وعند إظهار الصفحة هذه بواسطة المتصفح ستجد بأن اللون أحمر وتحته سطر ونوع Arial بدون أن تقوم أنت بتحديد ذلك. ولنفترض بأنك قمت بهذا العمل في المئات من الصفحات. وأردت بعد ذلك تبديل اللون الأحمر إلى أزرق، فماعليك سوى فتح ملف css ثم تبديل اللون إلى أزرق ثم إعادة تخزين الملف. افتح الآن موقعك وستجد بأن مئات الصفحات الأن (الصفحات المرتبطة بملف الستايل) وقد تغير العنوان الكبير من أحمر إلى أزرق. دون الحاجة إلى فتح صفحات الـ HTML كل على حدة للقيام بالعمل يدويا.

كم من الوقت والجهد ستوفر في هذه العملية.

أنواع صفحات الستايلات:
Inline أي داخل الصفحة وتكون بين العلامتين <body> </body>
Embedded أي مضمنة، وتكون بين العلامتين <head></head> ولكن بشكل كود
External أي خارجي، وتكون الصفحة بين العلامتين <head></head> ولكن بشكل رابط

اعتقد بأننا الآن اكتفينا من الكلام حول الموضوع ونريد أن نرى شيئا عمليا:

تكوين ملف css
افتح ملف جديد في برنامج NotePad أو أي برنامج Text Editor آخر تستخدمه، ثم قم بتخزين الصفحة بإسم MyStyle.css
ضع الملف في موقعك في المكان الذي تريد
احفظ الرابط التشعبي الخاص بهذا الملف لأننا سنقوم باستخدامه في كل صفحة.

طريقة الربط مع ملف ستايل خارجي:
والمقصود بخارجي هنا: خارج صفحة الـ HTML أو خارج الفهرس الرئيسي للموقع أو خارج الموقع كليا "هنا يجب الملاحظة بأن خارج الموقع كليا تعني موقع آخر لك أو موقع ليس لك ولكن ليس لديهم أي مانع بأن تستخدم الستايلات الخاصة بهم.

<link rel="STYLESHEET" type="text/css" href="http://www.yourwebsite/yourstylesheet.css" />

أو

<link rel="STYLESHEET" type="text/css" href="MyStyle.css" />

معنى هذا الرابط

<link ربط
Rel علاقة
=STYLESHEET صفحة ستايلات
type النوع
Text/css صفحة خاصة بستايلات
Href الرابط التشعبي
MyStyle.css اسم الفعلي لملف الستايل

وهذا يعني بأنني اخبر صفحة الـ HTML بأنني أريد ان اقوم بربط هذه الصفحة بصفحة ستايل موجودة في المكان التالي. وهنا يفهم المتصفح بأنك تريد تطبيق ستايل من الخارج فيقوم بقراءة الكود الموجود في الرابط الخارج وبعد ذلك يطبق هذا الكود على الصفحة التي تلي الرابط.

إذا كانت صفحة الستايل ضمن مجلد فرعي في موقعك فسيكون الرابط على الشكل التالي: لنفترض بأن اسم المجلد الفرعي هو StyleFolder

<link rel="STYLESHEET" type="text/css" href="StyleFolder/MyStyle.css" />

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

كما ذكرت سابقا فإن الستايل css يكون في داخل الصفحة ويؤثر فقط على الصفحة التي هو فيها أو يكون خارج الصفحة ويؤثر على الصفحات المرتبطة به أو على الموقع ككل إن كانت جميع الصفحات مرتبطة به.

الفرق في الكود بين الإثنين :
الكود المتضمن في الصفحة يجب أن يتم احتوائه ضمن علامات <style></style> ليفهم المتصل بأن هناك كود للستايل ولكن هو موجود هنا داخل الصفحة: مثال:

هذا الكود سيجعل جميع الخطوط ذات الحجم <H2> باللون الأسود، وبنوع Arial وبحجم 14 نقطة. وبما أن الكون مضمن داخل علامات <Style></Style> فسيكون تأثيره فقط على الصفحة التي هو فيها.

إذا قمنا بوضع هذا الكود بين العلامات <head></head> فإنه سيؤثر على الصفحة بأكملها كلما ذكر حجم الخط <h2>

أما إذا تم وضعها ضمن علامات <body></body> وفي المكان المحدد سيكون تأثيرها على هذا المكان وليكن مقطعا معينا من الصفحة.

يتكون أمر الستايلات من ثلاث أقسام (المعرف، الخاصية والقيمة). مثال:
body {color: black}
body هو المعرف
Color هو الخاصية
Black هو القيمة

إذا كانت الخاصية تتكون من أكثر من كلمة، يجب عليك وضع الكلمات ضمن " " مثال على ذلك اسماء الخطوط:

p {font-family: "sans serif"}

وتعني بأن الخط الموجود في هذا المقطع هو نوع sans serif

إذا أردت تخصيص أكثر من خاصية ، يجب عليك تفرقة الخواص بفواصل منقوطة: مثال:

p {text-align:center;color:red}

وضع النص في المنتصف، واللون أحمر، والخاصيتين المفرقتين بالفاصلة المنقوطة هما:
Text-align:center
Color:red
من الأفضل وضع الخواص المتعددة على أسطر متفرقة كما في المثال التالي:

p
{
text-align: center;
color: black;
font-family: arial
}

إذا أردت التأثير على مجموعة يمكنك تحديد ذلك عوضا عن ذكر نفس الكود لكل معرف. مثال:

h1,h2,h3,h4,h5,h6
{
color: green
}

في هذا المثال نخبر المتصفح بأن جميع احجام الخطوط خضراء.

أضف إلى المفضلة

إطبع هذا المقال