التصميم والألوان

في الجزء السابق تحدثنا عن HTML، ولعلك لاحظت أننا لم نتحدث عن الألوان والخطوط وتنسيق النص، يمكنك إنشاء أي موقع باستخدام HTML فقط لكن لكي تضيف بعض اللمسات الجمالية عليك أن تستخدم تقنية CSS.
لماذا CSS؟

تصور أن لديك موقعاً يحوي أكثر من خمسين صفحة HTML وأردت أن تغير لون الصفحات فماذا ستفعل؟ في الماضي كان البعض يستخدم HTML نفسها لإضافة الألوان لعناصر الصفحة وهذه ممارسة غير صحيحة، من المفترض ألا تستخدم HTML إلا لوصف المحتويات كما شرحنا في الجزء السابق، ولو استخدمت هذه الطريقة فعليك أن تغير الخمسين صفحة بنفسك، باستخدام تقنية CSS يمكنك أن تغير لون خلفية الصفحات كلها من خلال تغيير ملف واحد فقط.
كيف؟ ببساطة عليك إنشاء ملف CSS ثم ربط كل صفحة HTML بهذا الملف، بعد ذلك يمكنك أن تتحكم بتصميم كل الموقع من خلال تعديل ملف واحد، قد يبدو هذا معقداً لكن لا تقلق، سنشرح كل هذا ونبسطه.
ملف CSS

لكي تقوم بإنشاء ملف CSS كل ما عليك فعله هو فتح ملف نصي جديد ثم احفظه باسم مثل style.css، لاحظ أنني أضفت اللاحقة css لاسم الملف.
أعلم أن الملف الآن فارغ، سنعود له لاحقاً، الآن قم بإنشاء ملف html وسمه مثلاً firstcss.html وضع فيه هذا القالب:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

<html dir="rtl">

<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>

<body>
</body>
</html>
تذكر أن هذا القالب يجب أن يستخدم في كل الصفحات التي تقوم بإنشاءها، الآن أضف هذا السطر إلى قسم رأس الصفحة:
...
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link href="style.css" type="text/css">
</head>
....
هل خمنت ما يفعله هذا العنصر؟ باستخدام عنصر link يمكننا أن نخبر المتصفح بأن صفحة HTML التي يعرضها مرتبطة بملف آخر، وفي حالتنا هنا الصفحة مرتبطة بملف CSS، وقد وضعنا خاصية جديدة تسمى type وقيمتها text/css وهذه القيمة تخبر المتصفح عن نوع الملف، هكذا يفهم المتصفح أن عليه تطبيق أوامر CSS الموجودة في الملف على صفحة HTML.
ضع محتويات مختلفة للصفحة، ضع عنواناً رئيسياً باستخدام h1، ضع فقرات مختلفة وعناوين فرعية، المهم أن تحوي بضعة عناوين وفقرات.
استعراض ملف firstcss.html في متصفحك، وافتح بفتح ملف style.css في المحرر النصي، ستضيف أوامر CSS للملف وتحفظه ثم عليك أن تعود للمتصفح وتعيد عرض الصفحة أو الضغط على زر F5 لكي ترى تأثير أوامر CSS، وكلما أضفت أمراً جديداً قم بتحديث الصفحة.
تشريح CSS

دعنا نضيف أمراً بسيطاً في ملف CSS أنقل السطر التالي للملف واحفظه وانظر إلى النتيجة في المتصفح:
body {bacground-color: black;}
ماذا وجدت في المتصفح؟ أصبحت الصفحة سوداء، يمكنك أن تفهم عناصر أمر CSS بنفسك إن فكرت قليلاً، فالكلمة الأولى هي body وهذا هو اسم العنصر الذي نستخدمه في ملف HTML، أليس كذلك؟ نحن نقول للمتصفح بأننا نريد تعديل شكل العنصر body، ثم وضعنا قوس { والذي من بعده سنكتب الخصائص التي نريد تغييرها وسنضع لكل خاصية قيمة.
لدينا هنا خاصية واحدة وهي background-color أي لون خلفية الصفحة، وأعطيناها القيمة black أي اللون الأسود، ثم وضعنا فاصلة منقوطة، يمكن بعد الفاصلة أن نضع خاصية أخرى، عدل المثال السابق كما يلي:
body {background-color: lightblue; color: darkblue;}
يمكن أيضاً أن تكتب نفس السطر بهذا الشكل:
body {
background-color: lightblue;
color: darkblue;
}
أليس المثال أكثر وضوحاً الآن؟ في بعض الأحيان قد تضع أكثر من خمسة خصائص، وليس من العملي وضعها كلها في سطر واحد، لذلك بسط الأمر على نفسك وضع كل خاصية في سطر لوحده.
الآن أعد استعراض الصفحة في المتصفح، تغير لون الخلفية والنص، الخاصية color تغير لون النص، وقد اخترنا اللون darkblue للنص، أي الأزرق الغامق، هناك أسماء عديدة للألوان، وهناك طرق مختلفة لوضع قيم الألوان مثل الأرقام، ليس من الضروري أن تحفظ هذه الأسماء أو الأرقام لأن هناك مواقع وبرامج تساعدك على اختيارها بسهولة.
يمكن أن نضع القيمة الرقمية للألوان بدلاً من أسماءها كما في المثال التالي:
body {
background-color: #ADD8E6;
color: #00008B;
}
لن يختلف أي شيء في الصفحة، وليس هناك ما يميز طريقة عن أخرى، بشكل عام الأرقام تستخدم أكثر من الأسماء، وفي بعض الأحيان يمكن اختصار الأرقام، فاللون الأسود مثلاً رقمه 000000 ويمكن اختصاره إلى 000، وأسماء الألوان لا تقدم الكثير من الألوان، هناك ألوان لا يمكنك أن تضعها إلا باستخدام الأرقام.
هذه هي تقنية CSS باختصار، عليك أولاً أن تضع عنصر HTML الذي تريد تغيير شكله، ثم تضع الخصائص ولكل خاصية قيمة، في هذا الكتاب لن نحتاج للحديث عن معظم خصائص CSS، لذلك سأكتفي بشرح هذه الخصائص:

  • الخطوط: font وtext-align وline-height
  • الإطارات: border وpadding
  • المساحة: width وheight

الخطوط

تقنية CSS تعطيك إمكانيات كبيرة للتحكم بالخطوط لكننا هنا سنكتفي بحجم الخط ونوعه، كذلك بالمسافة بين السطور وبمحاذاة النص، ثلاثة خصائص يتكرر استخدامها كثيراً ويمكنها أن تجعل أي نص سهل القراءة.
أفترض أن لديك في ملف firstcss.html فقرة واحدة أو أكثر، سنتحكم بهذه الفقرات ونعدل خطوطها، دعنا أولاً نحدد حجم ونوع الخط:
p {font: 16px sans-serif;}
يمكنك أن تضع للخاصية font أكثر من أربعة قيم لكنني أكتفي هنا باثنتين، الأولى هي لحجم الخط والثانية لنوعه، sans-serif ليس بالضرورة اسم خط محدد بل نوع من الخطوط تسهل قراءته في شاشات الحواسيب، لنعدل القيم قليلاً:
p {font: 16px Tahoma, sans-serif;}
لدينا الآن نوعان من الخطوط، عندما يقرأ المتصفح ملف CSS سيبحث في الحاسوب عن خط Tahoma لكي يعرض النص بهذا الخط، فإن لم يجده سيعرض الخط التالي وهو sans-serif، يمكنك أن تضع عشرات الخطوط هنا إذا أرد، إفصل بين كل خط وآخر بفاصلة، لكن أنصحك بأن تكتفي بثلاثة خطوط لا أكثر.
في بعض الأحيان قد ترغب بزيادة المسافة بين السطور لكي تجعل عملية القراءة أكثر سهولة ولا تتعب عيني الزائر، لفعل ذلك أنت بحاجة لخاصية line-height:
p {
font: 16px Tahoma, sans-serif;
line-height: 1.5;
}
أنظر إلى النتيجة في المتصفح بعد إضافة هذا السطر إلى ملف CSS، سترى أن المسافة ازدادت بين سطور الفقرات لأننا وضعنا القيمة 1.5 لخاصية line-height، جرب أن تزيد الرقم أو تنقصه، جرب مثلاً أن تضع القيمة صفر، أو 0.5 أو 3.
أخيراً لدينا الخاصية text-align وهي مختصة بمحاذاة النص، ولها أربع قيم:

  • اليمين: right
  • اليسار: left
  • التوسيط: center
  • المحاذاة من الجانبين: justify

القيمة الأخيرة تحتاج إلى أن تشاهد تأثيرها لكي تفهمها، جرب أن تضع هذا السطر إلى ملف css:
p {
font: 16px Tahoma, sans-serif;
line-height: 1.5;
text-align: center;
} أنظر إلى النتيجة، ستجد أن نصوص الفقرات أصبحت في منتصف الصفحة، غير القيمة من center إلى القيم الأخرى وشاهد الاختلاف.
الإطارات

يمكنك من خلال CSS أن تضع إطاراً حول كل عنصر في HTML، تخيل معي أن كل عنصر في HTML هو عبارة عن صندوق، هذا الصندوق يمكنك أن تضع له إطاراً، كيف؟ افترض أن لديك في ملف firstcss.html عنوان h1 واحداً على الأقل، كيف يمكنك أن تضع له إطاراً؟ أضف السطر التالي إلى ملف css:
h1 {border: 1px solid black;}
خاصية border تعني الإطار، ولها ثلاث قيم، بعض خصائص CSS تحتاج إلى أكثر من قيمة واحدة، القيمة الأولى لدينا هي 1px وتعني أن سمك الإطار سيكون بمقياس 1 بكسل، حرفي px هما اختصار pixel، ثم لدينا القيمة solid وهي تعني أن خط الإطار سيكون بدون أي تأثير وبدون أي فراغات، يمكنك أن تضع قيماً أخرى بدلاً من solid مثل:

  • dotted
  • dashed
  • double

جرب كل واحدة وانظر إلى النتائج، ثم لدينا القيمة black هي تعني لون الإطار ويمكننا أن نضع القيمة الرقمية بدلاً من اسم اللون:
h1 {border: 1px solid #000;}
ماذا لو أردت أن تزيد المساحة بين العنوان والإطار؟ لعلك تريد مساحة فارغة أكبر، فكيف تفعل ذلك؟ لدينا الخاصية padding:
h1 {
border: 1px solid black;
padding: 30px;
}
ضع هذا السطر في ملف CSS وانظر إلى النتيجة في متصفحك، ستجد أن العنوان الآن يحوي مساحة أكبر بينه وبين الإطار، لكنك تستطيع أن تضيف المزيد من القيم لخاصية padding فتتحكم بالمسافة بين العنوان والإطار العلوي، وكذلك بالمساحة بين العنوان والإطار الأيمن، وبالتأكيد المسافة بين العنوان والإطار السفلي والأيسر:
h1 {
border: 1px solid black;
padding: 0 10px 20px 30px;
}
ما فعلناه هو إضافة أربع قيم لخاصية padding، كل قيمة تتحكم بجانب ما من المساحة بين العنوان والإطار، الأولى للجانب العلوي، والثانية للجانب الأيمن، والثالثة للجانب السفلي والرابعة للجانب الأيسر، يمكنك أن تحفظ هذا الترتيب بأن تتذكر دوران عقارب الساعة: الأعلى، الأيمن، الأسفل، الأيسر.
هذه القيم الأربع بهذا الترتيب ستتكرر مرات عديدة عندما تبدأ في تعلم المزيد من خصائص CSS.
المساحة

مع تعلمك المزيد من خصائص CSS ستحتاج إلى خاصية تحدد مساحة عناصر HTML، فقد ترغب في أن يظهر النص في مساحة صغيرة بدلاً من أن يغطي كل الصفحة، فكيف تفعل ذلك؟ لدنيا الخاصية width والتي تحدد عرض أي عنصر:
p {width: 400px;}
في المثال أعلاه وضعنا الخاصية width للعنصر p أي الفقرات، ووضعنا القيمة 400 بكسل للخاصية، أي أننا نريد أن يبلغ عرض الفقرة 400 بكسل، جرب أن تضع هذا السطر في ملف CSS وانظر إلى النتيجة، يمكنك أن تزيد القيمة أو تنقصها كما تشاء، لكن تذكر ألا تجعلها تزيد عن عرض نافذة المتصفح لديك.
هناك خاصية height التي تعمل بنفس الطريقة لكنها تتحكم بارتفاع العنصر، من النادر أن تحتاج لاستخدام هذه الخاصية، لكن من الجيد أن تجربها وتتعلمها، لست بحاجة إلى أن أريك كيف، فهي لا تختلف عن خاصية width.