رد مع اقتباسدرس رائع ومفيد
استمر في الدورة ونحن من المتابعين
الدرس الثاني .. مقدمة وتعريف عــام عن تقنية css
CSS اختصار للجملة Cascading Style Sheets والتي معناها باللغة العربية صفحات الأنماط
الإنسابية وهي "ليست لغه برمجه" ولكنها تقنية تتهتم بتحديد شكل وتصميم المواقع ، وينطبق ذلك
على الألوان والخطوط والصور والخلفيات التى تستخدم فى الصفحات ، بمرونة وسهولة تامه.
وهذه التقنيه تساعدك جدا على إنشاء وإدارة صفحات المواقع بشكل فريد يتميز عن من يعتمد في
التصميم على html التى تسبب مشكله وهى ان الموقع لا ينفصل عن محتوياته ..
وتعال نتخيل سوياً على أنك قبلت تنفيذ موقع متوسط الحجم لأحد العملاء ، و بطبيعة الحال تحتاج
لبرمجة ما يزيد عن العشر صفحات ـ وفرضاً أيضاً أنك انتهيت من الموقع بعد عمل متواصل ـ وعرضت
الموقع على العميل وتعتقد أنه أصبح جاهز للاستخدام الآن . ماذا لو فاجأك العميل بطلب تغيير حجم
الخط من القيمة "2" إلى القيمة "3" مثلاً هل ستضطر لفتح كل صفحة و التعديل في كل فقرة من
فقراتها لتغير هذه القيمة!
ماذا لو كان الموقع مكوناً من 50 صفحة ؟!
و ماذا لو كان يعمل على المشروع أكثر من شخص بشكل منفصل ؟
في الواقع هذه القصة والعملية المتعبة جدا فى التعديل ستواجهك كثيراً عند التعامل مع عملاءك
وتجعلك تفكر في الإنتقال من استخدام لغة html وحدها إلى أخرى تعطيك مرونة أكبر وتقدم لك
الحل وتوفر الجهد.
الفكرة باختصار تكمن في فصل التنسيق عن المحتوى و من ثم وضع التنسيق فيفوائد إستخدام تقنية CSS
ملف منفصل يمكنك التعديل عليه لتغيير شكل صفحات موقعك بسهولة بعد ذلك دون
الرجوع اليها مرة أخرى.
كيف يتعرف متصفح الإنترنت على هذه التقنية ؟
- فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد بإمتداد css.
- إضافة مزيد من الأحترافية والسهولة لتصميم المواقع والحريه في تصميم مواقع تزيد عن العشرة والعشرين صفحة.
- لن ترهقك بعد اليوم طلبات العملاء والتعديلات الكثيرة التى يطلبوها ويروها سهله ولكنك تراها مرهقه مع كثرة الأعمال.
- تقليل حجم صفحات الموقع، مما يعني أن المستخدم سيقضي وقتاً أقل لكي تظهر له صفحات الموقع بشكل كامل.
- تقليل حجم الموقع الكلي بنسبة تصل إلى 50% مما يعني أن سعة الموجة bandwidth التي يحتاجها الموقع ستقل.
- ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى كالحواسيب الكفية وذلك بفضل فصل المحتوى عن ملف التصميم.
1- Browser Defaults
..في الحقيقة إننا نستخدم نوعاً من أنواع الأنماط الانسيابية في صفحاتنا دون أن ندري . و لنأخذ هذا
المثال:
كود PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
</head>
<body>
<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>
</body>
</html>
لاحظ فلم يتم تحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحة بإستخدام المتصفح ستجد
تنسيقاً معيناً لنوع الخط و حجمه و لونه ـ وهذا التنسيق قد يختلف من جهاز لآخر بحسب الإعدادات
الافتراضية للعرض لدى الزائر.
هنا كأننا نقول بأن المتصفح يحتفظ بملف يحتوي أنماط معينة من التنسيق يستخدمها إذا لم تحدد
التنسيق بشكل واضح في صفحتك او موقعك .
وتقنية css تعتمد نفس المبدأ . وتقريباً لن تكتب أي تنسيق في الصفحة الأساسية لكنك ستحدد في
ملف خارجي واحد التنسيق مفصلاً ـ وبعدها يربط ذلك الملف بالموقع حتى يأخذ المتصفح تنسيق
الصفحات منه دون الاعتماد على إفتراضياته هو ويطبق على جميع الصفحات مما يضمن ظهور
الموقع بنفس الشكل على كل الأجهزة.
طرق تعريف CSS داخل الصفحات
2- External
ملف منفصل بإمتداد css تسمية بإي أسم يحتوى على كافة تنسيقات الموقع ومن ثم تربط به جميع
صفحات الموقع كما في المثال التالي:
الوسم <link /> يكتب فيه مسار ملف css سواء كان بمجلد خاص أو بنفس مكان الصفحات ومن ثمكود PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>
</body>
</html>
يوضع الكود بالكامل برأس كل الصفحات بين الوسم <head>
وهذا الملف المنفصل المربوط به الصفحات تكتب فيه أكواد css مباشرة داخل ملف txt ومن ثمكود PHP:<link href="css/style.css" rel="stylesheet" type="text/css" />
تحفظ بإمتداد css. كما ذكرنا ولو شاهدنا هذا الملف ستجدة يحتوى على الأكواد فقط كالتالي
كود PHP:.me {
color: #FFFFFF;
background-color: #333;
border: 2px solid #666;
font-family: Tahoma;
width: 100px;
}
p.you {
color: #EAEAEA;
background-color: #333;
border: 2px solid #666;
font-family: Tahoma;
width: 50px;
}
3- Internal
فيها يتم إضافة جميع قيم css برأس الصفحه بين وسمين <style> لتعريفهم على المتصفح ومن ثم
توضع ايضا داخل برأس الصفحة بين الوسم <head> كما في الحالة السابقة ومنه تطبق هذه
الأوامر على جميع فقرات الصفحه.
الوسم <style> وهو الوسم الذى من خلالة يتعرف المتصفح على قيم css المختلفة المكتوبةكود PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
<style type="text/css">
<!--
p.you {
color: #FFFFFF;
background-color: #333;
border: 2px solid #666;
font-family: Tahoma;
width: 100px;
}
-->
</style>
</head>
<body>
<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>
</body>
</html>
بداخله ويكتب بهذا الشكل برأس الصفحة
المتصفحات القديمة لا تفهم الوسم style ولا تدعم تقنيه CSS لذا فهى عادة تتجاهلة وتعرض مابينكود PHP:<style type="text/css">
CSS styles here
</style>
هذا الوسم من أوامر على أنه محتوى ضمن الصفحة! ولتفادى هذه العملية في تلك المتصفحات
التعيسة نقوم بوضع جميع أوامر css داخل تعليق comment element حتى إن حدث لا قدر الله
وظهر موقعك لأحد مستخدمي هذه المتصفحات لا تظهر له الأوامر كمحتويات بالصفحة
4- in-lineكود PHP:<style type="text/css">
<!--
CSS styles here
-->
</style>
وفيها تطبق أوامر الـ css مباشرة داخل اوسمه html كما بالمثال التالي:
كود PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
</head>
<body>
<p style="font:normal 12px Tahoma; color:#FF0000; background:#FFDDFF;">تقنية تتهتم بتحديد شكل وتصميم المواقع</p>
</body>
</html>
موضوع مهم يجب قراءته تم انتقال ادارة نيوستايل الى الاخ ahmed_totta
درس رائع ومفيد
استمر في الدورة ونحن من المتابعين
تسلم نيوستايل دروس رائعه
تسلم ايدك
شكراً لك وبارك الله فيك ..
جزيت الفردوس ....
الله يبارك بعمرك استمر ..
درس جميل وبالوفيق
مشكور مشكور مشكور
على الشرح الجميل
الذين يشاهدون الموضوع الآن: 1 (0 من الأعضاء و 1 زائر)
ضوابط المشاركة
مواقع النشر (المفضلة)