دورة CSS – الدرس الثاني

قياسي

السلام عليكم ..

صباح جميل لكم جميعًا 🙂

أعترف بأنِّي تأخرتُ كثيرًا كثيرًا في كتابة هذا الدرس ، بسبب ظرفٍ برمجيٍ طارئ ، وبسبب انشغالي بمشروع تخرجي – ادعوا لي كثير 😦 – ، فأتمنى أن يعذرني الَّذين قرأوا الدرس الأول ، وتحمسوا للدورة .

تحدَّثنا في الدرس السابق عن هيكل الـCSS وقلنا بأنَّ ملف الـCSS يتكون من عددٍ من المحددات ( Selectors ) تجتوي على عددٍ من الخصائص ( Attributes ) لها قيم ( Values ) معينة ، وخصصنا جزء للحديث عن المحددات Selectors ، واليوم إن شاء الله سوف نتحدَّث عن الخصائص .. الَّتي هيَ أساس بناء الـCSS .

.

.

أولاً : ما هو الفرق بين خصائص الـCSS وخصائص الـHTML ؟ – عندما أذكر الـHTML فإني أعني الـHTML و XHTML –

الكثير – وربَّما أغلب – خصائص الـCSS موجودةٌ أصلاً ضمن خصائص الـHTML ، ويتساءل المبتدؤون – وقد تساءلتُ 🙂 – عن السبب الَّذي يدعو W3C والمصممين إلى الإهتمام بالـCSS بهذه الطريقة رغم إمكانية تصميم مواقع لا تعتمد عليها ، هناك الكثير من الأسباب الَّتي تدعو المصمم إلى ” مقاطعة ” خصائص الـHTML تمامًا منها :

1- استخدامك للـCSS يرسخ في موقعك مبدئ الفصل التام بين المحتوى والتصميم كما ذكرنا في الدرس الأول .

2- القيم المتاحة لخصائص الـCSS قياسية ، من المفترض أنَّ المتصفحات الحديثة تفهمها جيدًا ، بحيث تتوحد طريقة عرضها للمواقع .

3- خصائص الـCSS أكثر مرونة ، مثال : نعرف خاصية border التي تتيح التحكم بعرض الحدود بالبكسل في وسوم لغة HTML ، ذات الخاصية في CSS تمكنك من التحكم بعرض كلٍّ من الإطارات اليمنى واليسرى والعليا والسفلى على حدا ، وتتيح لك أيضًا التحكم بشكل هذا الإطار .

.

.

الخصائص Attributes :

يمكننا تصنيف خصائص الـCSS – تصنيفًا إجتهاديًا منِّي لا علميًا – فنقول ، هناك خصائص مباشرة تحمل قيمة واحدة فقط ، وخصائص غير مباشرة تحمل أكثر من قيمة .

الخصائص المباشرة :

أمثلة :

;width:90%
height:500px;
display:block;

الخصائص غير المباشرة :

أمثلة:

background-color:#BCE7FA;
background-image:url(birds.jpg);
font-family:tahoma,arial;

بمعنى ، هناك خصائص تحمل قيمة واحدة فقط مثل الطول والعرض ، وهناك خصائص تحمل أكثر من قيمة مثل الخط والخلفية ، فنحن نحدد للخلفية : لون – صور – طريقة تكرار … إلخ ، ونحدد للخط : نوع – حجم – سمك …. إلخ .

.

.

لن أستعرض معكم جميع خصائص css ، فذلكـ شيء مستحيل أولاً ، وموجودٌ على شبكة الإنترنت بكثرة ثانيًا ، سأضع لكم بعض الروابط الَّتي تعرفكم بخصائص css عن قرب ،من السهل جدًا فهمها وفهم وظائفها ، ليس المطلوب منك أن تحفظ هذه الخصائص وإنما أن تعرف كيف تستفيد منها ، وفي الدرس الثالث إن شاء الله سوف أبدأ بتصميم موقعٍ بشكلٍ حي ، بحيث أشرح كيف تستخدم وتستفيد و” تتلاعب ” بخصائص الـCSS لتنتج تصميمًا جيدًا .

الروابط :

http://www.w3schools.com

طبعًا ، هذا الموقع غني جدًا عن التعرف ، يمكن القول بأنَّه الموقع الأول لمصممي ومطوري الويب على اختلاف مستوياتهم .

http://ar.html.net/tutorials/css/

موقع عربي متخصص في تعليم الـHTML و CSS ، رائع جدًا ومنظم.

http://qatardr.net/

موقع الدكتور نت ، أول المواقع الَّتي شدتني لأتعلم من خلالها CSS .

.

.

شيءٌ عن خصائص CSS :

1- كما لاحظتم ، نفصل بين كل خاصية وأخرى بفاصلة منقوطة مثل هذه ; ، وإذا كانت بعض الأمثلة التي وضعتها هنا قد قلبت الفاصلة فجعلتها أعلى النقطة ، فهذا لعدم تمكني من تنسيق الكود بالشكل الصحيح مع الأسف .

2-القيم في الـCSS أكثر مرونة ، يمكنكـ استخدام وحدات عديدة لتعيين قيم لهذه الخصائص :

1- حجم الخط :

خاصية حجم الخط هيfont-size ، وقيمها تأخذ عدة أنماطٍ منها :

;font-size:12pt

font-size:100%;

font-size:1em;

font-size:16px;

كل الأحجام السابقة متساوية ، هي فقط مختلفة في الوحدات .. كما نلاحظ أكبر وحدة للخط هي em ، تُستخدم غالبًا في خاصيةٍ أخرى هي line-height المسؤولة عن تحديد المسافة بين كل سطرٍ وسطر .

2- اللون

هناك 3 طرقٍ لتعريف اللون :

1- عن طريق اسمه.   2- عن طريق الرمز السادس عشري له .    3- عن طريق أرقام الـRGB .

مثال :

background-color:red;
background-color:#ff0000;
background-color: RGB(225,0,0);


جميع القيم السابقة سوف تعطيك نتيجة واحدة ، وهي اللون الأحمر للخلفية .

3- الطول والعرض :

تعرفون بأنَّ هيكلة المواقع تُصنف إلى قسمين ، المواقع الممتدة على كامل الشاشة ، والمواقع الثابتة التي تحمل قياس عرض 800px ، يعتقد الكثيرون بأنَّ المواقع الممتدة هي الأفضل ، وقد قرأتُ بأنَّ ذلك أمرٌ خاطئ وأنَّ تصميم مواقع الـ800px أفضل للزائر وللمتصفح .

عمومًا إذا كنتَ تُفضل استخدام النوع الأول فـ :

1- طول وعرض الغلاف الكبير للموقع سوف يحدد بالنسبة المئوية ” غالبًا 100% وأحيانًا 95% ” .

2- اختبر التصميم دومًا على شاشة بدقة 800 * 600 ، ولا تقل : لن يستخدم أحدٌ شاشةً بهذه الدقة اليوم ، قالتها محدثتك يومًا ، والنتيجة التعرض لشاشة بهذه الدقة يوم مناقشة مشروع الويب 😦 .

أمَّا إذا كنتَ تفضل مواقع ذات عرض 800px ” وهي الأفضل من وجهة نظري 😉 – فـ :

1- عرض الغلاف الخارجي للموقع لن يكون 800px، احذر من أن تقع في هذا المطب ، بل سيكون غالبًا 760px .

2- احرص على إظهار لمسةٍ إبداعية في خلفية الموقع ، واختر ألوان مناسبة ومريحة لها ، إذ هي تحتل الجزء الأكبر من نظر الزائر .

.

.

بقيت نقطة واحدة قبل أن أختم هذا الدرس القصير ، تصميم المواقع سهل جدًا ، الصعب هو أن تجعل تصاميمكـ مناسبة لجميع المتصفحات معًا ، الأمر هذا يدعو للجنون فعلاً كما عبَّر أحد المصممين الأجانب ، قمتُ مرة بتصميم موقعٍ واختباره فقط على الفايرفوكس ، وعندما جربته على avant و Flock وIE6 ظهرت فروقات عجيبة جدًا بالذات مع الـIE6 المتخم بثغرات الـCSS ” لا أعلم لما يستخدمه البعض حتى الآن رغم ظهور نسختين بعده ” ، أنصح من أراد تعلم تصميم المواقع بجدية بعدم الإكتفاء لإخضاع تصاميمه للمواصفات القياسية للـW3C ، يجب أن تثبت في جهازك  3 متصفحاتٍ لتجرب عليها تصميمك ، شخصيًَا .. أجرب التصميم على Flock وFireFox و IE ، من المستحيل بالنسبة لي أن أوحد ظهور التصميم فيها جميعًا لكني أحاول أن أجعلها تبدو مناسبة ومنسقة على الأقل ، ودون أخطاء .

يوم سعيد ، الدرس القادم بإذن الله سوف أعرض لكم صفحةً ، نقوم معًا بتصميمها من الألف إلى الياء ، تلك هي الطريقة الأفضل لتعلم CSS كما رأيت 🙂

بالتوفيق للجميع …

إحسان

Advertisements

10 responses »

  1. والله يا إعصار يسعدني جدًا إنك اتحمست لدراسة الـCSS ..
    بالفعل هي سهلة جدًا ، تعتمد على إبداع المصمم أكثر من اعتمادها على الدراسة الأكاديمية بكثير 🙂 .
    أساسًَا ما أذكر أحد عندنا في الجامعة أُعجب بلغة css مع الأسف 😦

    .
    .

    بالنسبة لسؤالك :
    وحدات الخط والطول والعرض مثل وحدات القياس العادية على الحياة الواقعية : سم – م – كم … إلخ .
    لكن هذي الوحدات تعتمد على الشاشة ، أساسها البكسل px ، لأنَّ البكسل يعنـي : أصغر مربع مكون للشاشة ، بالنسبة للـem هذي أكبر من الـpx ، ومثل ما ذكرنا تساوي 16 بكسل ، وهي المعتمدة مئويًا في الـcss ، يعني إذا قرأت حجم خط = 76% .. فهذا يعني 76% من الـواحد em .

    بالنسبة للوحدة pt ، هي وحدة قياس الخط الي بتشوفها في برامج الأوفيس ..

    أتمنى أكون أفدتك يا مهندس الإلكترونيات 🙂

  2. انا مالي بهالشغلات ياإحسان بس حبيت احييك على روعة تفاعلك وعطاءك ماشاءلله يعطيك العافيه
    يسلمو ياقمر

  3. السلام عليكم ورحمة الله وبركاته..
    شكرا لك أختي الكريمة إحسان على كل ما تقدمينه من دروس مهمة، فليس هناك أروع من أن نعلم الغير ما علمناه رب العزة..
    هلا سمحت لي أختاه أن أصحح لك بعض الأمور البسيطة المتعلقة بالمتصفحات؟
    استوقفتني جملتك التالية:
    “قمتُ مرة بتصميم موقعٍ واختباره فقط على الفايرفوكس ، وعندما جربته على avant و Flock وIE6 ظهرت فروقات عجيبة جدًا بالذات مع الـIE6″
    ويمكن اختزال اختبارك لذلك الموقع في متصفحين فقط هما الفايرفوكس والأنترنت إكسبلورر، ذلك أن Flock ليس متصفحا ببرمجة خاصة بل مبني على الفايرفوكس وبالتالي ستجدين فيه النتيجة نفسها في الغالب كما في الفايرفوكس، ومن جهة أخرى فإن متصفح Avant مبني على الأنترنت إكسبلورر، وبالتالي فالنتيجة فيه هي نفسها على الأنترنت إكسبلورر، لذلك فلا داعي برأيي لتضييع وقتك في تجربة صفحة ما على الفايرفوكس ثم على الفلوك، او على الإنترنت إكسبلورر ثم على الأفانت، فهذا تكرار فقط برأيي..
    من نفسش المنطلق فإن جملتك هذه ” أجرب التصميم على Flock وFireFox و IE” أقدم بصددها نفس الملاحظة، وشخصيا أنصح كل متصفح بالتوفر على المتصفحات التالية:
    – الفايرفوكس
    – ألأنترنت إكسبلورر (يجب أن يكون مثبتين بنسختيه 6 و 7)
    – أوبرا
    – سفاري
    تلك المتصفحات مختلفة من حيث البناء، اما ما عداها فغالبا لا يعدو أن يكون مبينيا على أحدها (avant و maxthon مبني على الأنترنت إكسبلورر و Flock على الفايرفوكس مثلا)..
    ملاحظة: لعل البعض يتساءل عن إمكانية تثبيت كل من ie6و ie7 جنبا إلى جنب في نفس الحاسوب، والحل يكمن في Internet Explorer Standalone والذي يمكن تحميله من الصفحة التالية:
    http://tredosoft.com/IE7_standalone
    آمل أن يكون مروروي خفيفا عليكم، وأن أكون قدمت إفادة، وعذرا أختي إحسان على إطالتي كالعادة ^_^
    موفقة ومني لك أرق تحية..

  4. أ.عبد الهادي :

    مرحبا بكـ أستاذنا الكريم ، وشكرًا لمعلوماتك الَّتي أغنيتَ بها الصفحة ..
    بالنسبة للفلوك ، فأنا أواجه مشاكل معه لا أواجهها مع الفايرفوكس ، وعن الآفانت فهو يقدم الموقع بطريقة أفضل من الإكسبلور ! .
    لا أدري ما هو السبب ..
    ربَّما من جهازي 🙂

  5. التنبيهات: دورة CSS - الدرس الثالث « [ إحســــان ]

  6. السلام عليكم

    الله يجزاك بالخير

    اذا ما فيه مانع رايح اخذ دروسك بالتحديد واضعها للمتعلمين لهذا الإبداع في موقعي

    شبكة عيون الويب التعليمية

    اذا حاب تزورنا فهو شرف لنا لانه هناك دوره اقوم بعملها وسوف اتطرق للـ CSS ورايح اجعلهم يزرون المدونه الاكثر من رائعه

    ابوشوق

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s