CSS بسهولة

#1 09-29-2004, 01:37 PM

CSS بسهولة
CSS هي اختصار Cascading Style Sheets، وترجمتها صفحة الأنماط المتعاقبة، وظيفة هذه التقنية هي التحكم بكيفية عرض أوامر html، بمعنى أنها تتحكم الأشكال والألوان والخطوط وكل شيء له علاقة بالمظهر، لكنها لا تتحكم بالمحتويات، وهذا يعني أن المحتويات تصبح منفصلة تماماً عن الشكل الذي يجب أن تظهر عليه، وهذا يسهل من عملية إدارة المواقع، فتعديل ملف CSS واحد سيؤثر على تصميم كافة صفحات الموقع.
CSS تلغي الحاجة إلى استخدام الكثير من أوامر HTML، كأمر font الذي يحدد حجم ونوع ولون الخطوط، كذلك الأمر table الذي يستخدم لإنشاء الجداول، بمعنى آخر يستطيع أي مصمم باستخدام CSS أن يصمم موقعه بالكامل دون استخدام الجداول كما هو متبع في طرق التصميم التقليدية، ولا يعني هذا أن الجداول لن تستخدم أبداً مع CSS، فالجداول لها وظيفة مهمة وهي عرض وتنسيق البيانات التي تحتاج إلى أن تكون ضمن جدول.
CSS تبسط تصميم المواقع وإدارتها، وتحل الكثير من المشاكل التي قد يواجهها أي مطور للمواقع، فمثلاً لو تم تصميم موقع ما باستخدام HTML فقط، ولنقل أن هذا الموقع يحوي 50 صفحة من البيانات، وبعد مدة أراد مطور الموقع أن يغير من تصميم الموقع قليلاً، عليه في هذه الحالة أن يحرر 50 صفحة ويقوم بتعديلها، بينما لو تم تصميم الموقع باستخدام CSS فإنه سيحتاج فقط إلى أن يعدل ملفاً واحداً فقط.
منظمة W3C ابتكرت هذه التقنية وجعلتها كمعيار قياسي لتصميم المواقع، وقد بدأت الكثير من المواقع في الانتقال من الأسلوب التقليدي للتصميم باستخدام الجداول إلى الأسلوب الجديد باستخدام تقنية CSS.
لماذا يجب أن تستخدم CSS؟
لأنها معيار قياسي متفق عليه، والمعايير القياسية تسهل كثيراً من أمور حياتنا، وفي المستقبل القريب ستصبح CSS مدعومة بشكل كامل من كافة الشركات التقنية، وهذا يعني مصنعي الأجهزة المختلفة ومنتجي البرامج، وبالتالي لا بد من كل مطور للمواقع أن يتعلمها منذ الآن حتى يلحق بركب التقنية.
السبب الثاني والأهم هو التوافق مع المستقبل، أي أن الموقع المصمم الآن بتنقية CSS سيكون متوافقاً مع الأجهزة والبرامج المستقبلية، فلا يحتاج عندها مطور الموقع أن يقوم بعمل تغيير ليواكب التقنيات الحديثة، وعندما أذكر الأجهزة فلا أعني هنا الحواسيب الشخصية فقط، بل كل جهاز يرتبط بالشبكة العالمية، مثل الأجهزة الكفية PDA أو الهواتف النقالة، وكذلك الأجهزة المخصصة لذوي الاحتياجات الخاصة وأصحاب الإعاقات البصرية، وربما أجهزة أخرى لا نعرفها اليوم.
فصل المحتويات عن التصميم، وهذا يبسط من عملية إدارة الموقع، لأن التصميم يمكن التحكم به من ملف واحد، فيمكن إضافة وتعديل بعض العناصر في تصميم الموقع دون الحاجة إلى تعديل كل ملفات الموقع.
السبب الرابع هو تصغير حجم الموقع، وهذا يقدم فائدة للموقع ذاته ولزواره، فالموقع سيستهلك سعة موجة (bandwdith) أقل، مما يعني تكاليف تشغيل الموقع ستقل أيضاً، أما من ناحية الزوار فإنهم سيجدون صفحات الموقع تظهر لديهم بشكل أسرع.
كيف تعمل CSS؟
إذا أردت أن تستخدام تقنية CSS في موقعك، فعليك أولاً كتابة أوامر css ثم ربط ملفات html بهذه الأوامر، وهكذا يتم تطبيق css، الأمر سهل وبالطبع يحتاج إلى المزيد من الشرح، لنتعرف أولاً على أوامر css:
selector {property: value;}
تتكون أوامر css من جزئين، selector وترجمتها المنتقي، الجزء الثاني وهو ما يقع بين القوسين، ويحوي property وترجمتها الصفة، ولكل صفة هناك value أي قيمة، أعيد شرح ذلك بأسلوب آخر، أوامر css تتكون من منتقي، ولكل منتقي هناك صفة وقيمة، ويمكن أن يحوي المنتقي الواحد على أكثر من صفة:
selector {
property: value;
property: value;
property: value;
}
ربط CSS بأوامر html
تستطيع تطبيق تقنية CSS في ملفات html بثلاثة طرق.
الطريقة الأولى وهي وتسمى inline، هذه الطريقة تطبق مباشرة على أوامر html، فيمكنك مثلاً أن تختار فقرة ما في صفحة html، لتكون بلون معين مختلف عن باقي فقرات الصفحة.
<p style="color: blue;">text here</p>
في المثال السابق قمت بإنشاء فقرة عن طريق الأمر p في html، وضمن الأمر p وضعت خاصية style، والتي تتحكم في شكل الفقرة عن طريق أوامر css، سنشرح أوامر css في دروس لاحقة، وإن كان من السهل فهمها، ففي المثال اخترت الأمر color والذي يحدد لون الخط للفقرة، ثم اخترت القيمة blue له وتعني الأزرق! أي أن لون الخط المستخدم في الفقرة سيكون أزرقاً! أليست css سهلة؟
يمكنك تضمين أوامر CSS في رأس صفحة html، باستخدام الأمر style في html والذي يجب أن يستخدم ضمن رأس الصفحة "head".
<html><heade><title>embedded style sheet</title>
<style type="text/css">
p {color: blue;}
</style>
</head>

<body>
<p>text here</p>
</body>
</html>
لاحظ كيف أن أوامر css تم تضمينها في رأس الصفحة "head"، وتحديداً في الأمر "style"، وفي هذه الطريقة هناك اختلاف بسيط عن طريقة inline السابقة، وهي إضافة الأقواس { }.
الطريقة السابقة تسمى embedded style sheets، أما الطريق الثالثة فهي باستخدام ملف css، هذه الطريقة نجمع كل أوامر css في ملف نصي يتم استدعاءه من خلال ملف html عن طريق الأمر link ومرة أخرى يجب أن يتم ذلك في رأس الصفحة "head".
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
ماذا سيحدث لو تم تطبيق الطرق الثلاث جميعها في صفحة واحدة؟ الذي سيحدث أن المتصفح سيطبق أولاً أوامر css التي هي ضمن html أو ما سميناه inline، ثم سيطبق embedded style sheet أي أوامر css ضمن رأس الصفحة، ثم سيطبق أوامر css في الملف الخارجي، هذه هي أولوية التنفيذ، يجب أن تتذكرها دائماً.
أنواع المنتقي
المنتقي (selector) له عدة أنواع، ولن أتطرق إلى جميع هذه الأنواع فهي كثيرة، إنما سأذكر الأساسية منها، النوع الأول هي أوامر HTML، فمثلاً لو أردت أن يكون لون خلفية الصفحات أسوداً فإن عليك أن تطبق ذلك على الأمر body:
body {background-color: black;}
ويمكن وضع أي أمر آخر من أوامر html في المنتقي، مثل p للفقرات، و a للروابط، و table للجداول وغيرها كثير.
النوع الثاني من أنواع المنتقي هو الفئات "Class"، لو أردت أن تطبق منتقي ما على مجموعة من أوامر html فعليك أن تجعله فئة تستطيع تطبيقها على أكثر من أمر واحد، لنأخذ مثالاً، تصور أنك تريد جعل نص العناوين باللون الأزرق وكذلك نص الفقرات، كل ما عليك القيام به أن تقوم بإنشاء الفئة أولاً وتضع لها الصفة والقيمة:
.bluetext {color: blue;}
تستطيع أن تختار أي اسم تشاء للفئات، وهنا اخترت أن أسمي الفئة bluetext، واخترت الصفة color والتي تتحكم بلون النص ووضعت لها القيمة blue أي الأزرق، حسناً كيف يتم تطبيق الفئة في أوامر html؟ هكذا:
<h1 class="bluetext">العنوان هنا</h1>
<p class="bluetext">محتويات الفقرة هنا</p>
النوع الثالث من المنتقي هو ID وهو مشابه للمنتقي class في كل شيء إلا أمرين، الأول أنك تضع علامة # قبل اسم المنتقي أما class فتضع نقطة . قبل الاسم، الاختلاف الثاني أن ID يجب ألا تطبق إلى على أمر واحد فقط من أوامر html، فمثلاً لو أردت أن تكون هناك فقرة واحدة يكون لون خلفيتها رمادي، فعليك أن تكتب المنتقي بهذه الطريقة:
#grayp {background-color: gray;}
والتطبيق في html يكون بهذا الأسلوب:
<p id="grayp">محتويات الفقرة هنا</p>
القيم في CSS
هناك العديد من أنواع القيم في css، وكل صفة تقبل نوعاً معيناً من القيم، بالطبع هذا يحتاج إلى تدريب حتى تتعرف على كل صفة وما تقبله من قيم، ولكن سأسرد هنا أنواع القيم لكي تأخذ فكرة عامة عنها.
الكلمات المفتاحية، وهي قيم تكتب على شكل كلمات واضحة ومفهومة المعنى، فمثلاً إذا أردت تحديد لون معين لأي نص في الموقع فعليك أن تستخدم صفة color وهذه الصفة تقبل كلمات مفتاحية، كأن تضع القيمة blue أو gray أو أي قيمة أخرى يقبلها المتصفح، وهناك كلمات مفتاحية أخرى كثيرة، مثل solid والتي تستخدم للصفة border وهناك auto للصفة margin، علماً بأن هذه الصفات تقبل أيضاً قيماً رقمية سنناقشها في ما بعد.
مقاييس الطول، وهي تحدد حجم عناصر التصميم في الموقع والمسافات الفاصلة بينها والمسافات الفاصلة بين العنصر ومحتوياته، ومنها مقياس px ومقياس pt، وهناك أيضاً المقياس المئوي وتستخدم مثلاً لتحدد عرض جدول ما، مثال: 100% تعني أن الجدول سيأخذ كامل العرض الذي توفره الشاشة، ويستخدم أيضاً المقايس المئوي في تحديد أحجام الخطوط، وفهم هذه المقاييس لا يتم إلا بالتجربة العملية، لذلك لا بد أن تجرب وتفهم بنفسك.
الألوان، يتم تحديد القيمة للون العنصر بثلاثة طرق، إحدها #RRGGBB وهذه تعني تحديد قيمة اللون بستة أرقام، ويمكن تحديد قيمة اللون بثلاثة أرقام أيضاً #RGB ويمكن تحديد اللون أيضاً بكلمات مفتاحية كما أسلفنا.
أخيراً هناك بعض الصفات تحتاج إلى عناوين فمثلاً لو أردت أن تضع صورة ما كخلفية للصفحة فيجب أن تضع عنوان هذه الصورة لتحدد مكانها فيتعرف عليها المتصفح ويظهر الصورة بالشكل الصحيح، وحتى تقوم بذلك يجب أن تستخدم صفة background-image أما القيمة فتتخذ هذا الشكل url(url) فتضع بين القوسين موقع الصورة المراد وضعها كخلفية للصفحة.
صناديق صناديق!
لفهم كيفية عمل CSS لا بد من إدراك أن كل عناصر التصميم في CSS تكون مربعة الشكل أو مستطيلة، وتسمى في الإنجليزية box لذلك وجدت أن أفضل ترجمة هي صناديق! وكل صندوق يحوي مساحة للمحتويات، ويحيط بهذه المساحة إطار، ووهناك مسافة تفصل ما بين مساحة المحتويات والإطار تسمى padding ولم أجد لهذه الكلمة ترجمة مناسبة، ولكل صندوق هوامش خارجية .
نبدأ من الخارج إلى الداخل، الهوامش في css تسمى margin وهي دائماً شفافة لا لون لها، والإطار الخارجي المنقط هو للتوضيح فقط، الإطار المحيط بالصندوق (border) يمكن أن يحدد حجمه وشكله ويمكن جعله مخفياً تماماً، padding هي المساحة التي تفصل ما بين الإطار والمحتويات، وقد جعلت لونها مختلفاً فقط للتوضيح، وإلا فهي تأخذ نفس لون المحتويات.
يمكن تحديد لون خلفية لأي صندوق (background-color) ويمكن أيضاً وضع أي صورة كخلفية، ولكل صندوق ارتفاع (height) وعرض (width)، ويمكن وضع القيمة auto لكل من الهوامش والعرض والارتفاع، ويمكن للهوامش تقبل قيم بالسالب، أما العرض والارتفاع فلا يمكن أن يقبلا قيم سلبية كأن تحدد طول الصندوق بسالب 5px مثلاً.
لفهم كل ما كتب أعلاه لا بد من التطبيق العملي والتجربة حتى يفهم المرء ماذا تعني كل هذه المفاهيم، وهذا تطبيق عملي سريع، سأقوم بإنشاء صندوق وأحدد له بعض الخصائص:
.box {
height: 50px;
width: 100px;
border: 1px solid #000;
margin: 5px;
padding: 5px;
background-color: #DCDCDC;
}
دعوني أشرح الآن الصفات والقيم، أول صفة هي height وهي تحدد ارتفاع الصندوق، وقد حددت الارتفاع بخمسين بكسل، ثم العرض width حددته بمئة بكسل، ثم الإطار border وهو يحوي ثلاث قيم، عرض الإطار هو 1 بكسل وهو solid أي سيكون الإطار متواصلاً غير مقطع أو منقط، ثم حددت له لوناً وهو الأسود، الهوامش margin أعطيت لها القيمة خمس بكسل، و padding أيضاً تم تحديدها بخمس بكسل، ثم حددت لوناً لخلفية هذا الصندوق background-color وهو لون رمادي.
النتيجة لكل هذا ستكون بالشكل التالي:
محتويات
هذه هي الصناديق! وهي أساس CSS وبها تستطيع إنشاء تصاميم المواقع، وهذا يحتاج فقط إلى تدريب وشيء من الإبداع.
اسم الموقع
هذا التصميم هو التطبيق العملي للدرس الثالث في قسم الدروس، وهو عبارة عن أربعة أقسام، القسم الأول وهو الذي يحتوي على عبارة "اسم القسم" حيث يجب أن تضع شعار الموقع واسمه، وربما تضع صورة ما كخلفية بدلاً من اللون الرمادي، القسم الثاني هي المساحة التي تحتوي على الروابط الرئيسية، تستطيع بالتأكيد تغيير ألوانها وموقعها، ثم القسم الثالث وهو القسم المحتويات الرئيسية حيث تقرأ هذه الكلمات! وأخيراً القسم الرابع وهو الذي يحتوي عبارة "جميع الحقوق محفوظة" حيث يمكنك أن تضع هناك بعض الملاحظات وربما عنواناً بريدياً للتواصل مع الزوار.
قسم المحتويات له مقياس مئوي، ويعني ذلك أن حجمه يتغير بحجم نافذة التصفح، وهذا يعطي مرونة للتصميم، فالزائر الذي يملك شاشة صغيرة سيرى المحتويات بحجم يتناسب مع شاشته، وكذلك من يملك شاشة كبيرة ذات دقة عالية، سيرى عرض قسم المحتويات يتلائم مع حجم الشاشة، وبقليل من الجهد يمكنك إضافة قسم للروابط والمحتويات الثانوية ويكون يسار قسم المحتويات أو يمينه.
بإمكانك طبعاً استخدام التصميم كما تريد، أرجو فقط أن تضع رابطاً لموقعي Serdal.com.
ملاحظة: لرؤية أوامر CSS وHTML انقر في متصفح Mozilla على قائمة Edit ثم Page Source، ومن متصفح إنترنت إكسبلورر انقر على قائمة View ثم Source، ستجد أن كل الأوامر وضعت في ملف واحد، عليك أن تفصل أوامر CSS وتضعها في ملف css (مثال: style.css) وقم بربط ملفات HTML مع ملف css من خلال الأمر link (ستجد شرحاً لهذا الأمر في الدرس الأول في قسم الدروس بعنوان CSS بسهولة).

09-30-2004, 12:40 AM

اخي الكريم : ابو الحسن

اشكرك جزيل الشكر على طرح هذه المعلومات

واتمنى ان نرى المزيد 00

تقبل خالص تحياتي

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
طريقة تعلم الانجليزية بسهولة	خربطلي	التربية	7	06-04-2011 05:35 PM

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

الإهداءات