للمبتدئين : طريقة استخدام CSS in VS-ASP.net

تاريخ التسجيل : 16/08/2009

CSS لغة التصميم المستخدمة لتخطيط وتنسيق
وإضافة جماليات إلى صفحات الويب ، والتي تقرر استخدامها في السنوات الأخيرة
كبديل عن استخدام الجداول المعتادة في تخطيط صفحات الويب ، وقد تطورت هذه
اللغة من الإصدار CSS1 إلى الإصدار CSS2 وأخيرًا في عام ٢٠١٠ تمّ الإعلان
عن إصدار CSS3 المتقدم جدًا إلى الدرجة التي ساعد فيها مصممي الويب على
استبدال الفلاش بأكواد HTML5 وjQuery .

لو سبق لك وأن قمت بتخطيط صفحات الويب
باستخدام الجداول ستجد هناك فارقاً كبيراً بين التخطيط باستخدام css و
الجداول ، فالتصميم عن طريق الـ CSS أسهل و أرقى في كل الأحوال ، لا سيما
إن كنت تعاني من ظهور تلك الفراغات ( العجيبة الغريبة ) التي لا تظهر إلا
وقت استعراض الصفحة و تختفي طور التصميم ،و هذه المشاكل تستمر في ظهورها من
متصفح لآخر .. عناء فوق عناء ، أما باستخدام هذه لغة الـ CSS فقد تجنّب
المصممون الكثير من هذا عناء تخطيط الصفحة بالجدول ، و أقول : إذا كان هناك
من يستخدم الجداول كمبدأ أساسي في التخطيط فأنت “مسكين و متعب نفسك ” .

و هذا القول أعني به نفسي قبل أي أحد .

تدوينتي تتمحور حول : كيفية استخدام css بداخل بيئة فيجوال ستديو ، أثناء تخطيط صفحة aspx ، خطوات سهلة و لن تأخذ من وقتك الكثير ، لنتابع إذن :
1: عند الشروع بعمل جديد في asp.net و لو نفرض أننا اخترنا:

للمبتدئين : طريقة استخدام CSS in VS-ASP.net 1-150x98

2: بالوقوف عند مجلد المشروع ، و بزر الماوس الأيمن نختار : add new item
3: ستظهر النافذة التالية ، نختار منها كالتالي :

للمبتدئين : طريقة استخدام CSS in VS-ASP.net 2-150x104

4: بعد إضافة ملف css للمشروع ستظهر لنا بالشكل التالي :

للمبتدئين : طريقة استخدام CSS in VS-ASP.net 3-150x150

5: الآن و صلنا إلى أول سطر في كتابة كود التصميم لملف css ، و كل
الخصائص التي ستكتب في وسم body سيتم تطبيقها على كا مل الصفحة ، بإمكانك
كتابة أكثر من خاصية لهذا الوسم ، مثلاً : نوع الخط- حجمه – لونه
–المحاذاة…..، بإمكانك هنا كتابته ككود مباشرةً كالتالي :

1
2
3
4

background-color:#939393;
font-family:Tahoma, Geneva, sans-serif ;
font-size: 12pt;
text-align:right;

وهناك الكثير من الخصائص ، كارتفاع النص و كيفية ظهوره و ….و …. و….
6: لكن هناك طريقة مختصرة جداً بداخل بيئة فيجوال استديو ، تتيح بناء
الخصائص بطريقة أسهل ، و هي : عن طريق الوقوف بزر الماوس الأيمن و أنت تقف
بعد الوسم body و تختار : build style
7: ستظهر النافذة التالية أمامك و بإمكانك بناء التصميم كما يحلو لك :

للمبتدئين : طريقة استخدام CSS in VS-ASP.net 4-150x150

فكما تلاحظ بإمكانك تحديد نوع الخط ، و لونه ، و حجمه و كل خاصية
متعلقة بالخط font و كذلك الخلفية و الحدود والمكان و ما إلى ذلك ، سأختار
بعضا من الخصائص ، و نقوم بالضغط على OK لنرى .. ما ذا سيحدث ؟
بعد النقر على زر الموافقة ، سنجد أن الكود قد كتب تلقائياً طبقاً للخصائص المختارة كما في الشكل التالي :

للمبتدئين : طريقة استخدام CSS in VS-ASP.net 5-150x150

و بإمكانك أيضاً ، إنشاء div أو class جديد و إضافة خصائصه بنفس الطريقة السابقة .
تطبيق موفق للجميع للمبتدئين : طريقة استخدام CSS in VS-ASP.net Icon_smile

» مصطلحات الكمبيوتر للمبتدئين
» ~~ أساسيات الفوتوشوب للمبتدئين ( شرح بالصور ) ~~
» شرطة بلغاريا تنفي استخدام قوة مفرطة ضد مشجعي تشسكا صوفيا
» شرح استخدام بلجنز ACamd لتشغيل الشيرنج النيوكامد على كروت - اخر نسخه Acamd_0618
» المرجع الشامل فى استخدام الاعتمادات "تعلم كل ما يخص الاعتمادات

للمبتدئين : طريقة استخدام CSS in VS-ASP.net

للمبتدئين : طريقة استخدام CSS in VS-ASP.net

مواضيع مماثلة

مواضيع مماثلة