ماهي تقنية css
تقنية Css مختصره من ” Cascading Style Sheets ” وتقنية css ليست بلغة برمجية أنما تقنيه كما يخطئ البعض انها لغة برمجية.
تهتم بشكل كبير وبشكل أوسع على أشكال تصميم وأنسيابات صفحات الويب,كمثل أنماط الصفحه وشكلها من الألوان والخطوط والخلفيات والصور وغيرهم ..
كمثل هذه التدوينه وتصميم المدونه بأكملها ..
ترتبط دائم وتكون مع HTML ونقول أنهم أحبو بعض بشكل كبير .. وببساطه دمجهم مع بعض ..
سلطان : أنت ذكرت أن HTML ترتبط على css والعكس اليس هذا ما تقصد !!
نعم : حيث ان HTML و css اذا تم ربطهم بشكل صحيح سوف تكون صفحة الويب او صفحات الويب افضل بكثير.
حيث ان التصميم سوف يكون أخف, أجمل, أسرع, وأفضل.لمصدر صفحة خاليه من الاخطاء.
هل تستطيع أن توضح أكثر ؟
HTML و css ترتبط الوثاقه بينهم حيث كما ذكرت انها تهتم بشكل الخطوط والصور والألوان والجداول وصور لخلفية الموقع,والأيطارات وأيضاًَ توزيع وتقسيم الصفحه بشكل سليم وطبعاًَ هنالك أشياء كثيره ترتبط بينهم
وهذه البعض منها .!
وعلى أهمها بشكل أساسي مشكلة بعض أكواد HTML, على سبيل المثال كود
حيث انها كانت تعتمد على متصفحات معدودة الأصابع حينها.
أتت تقنية Css وحلت هذه المشكله بجميع المتصفحات من خلال أكوادها و تطويرها من المصممين والمطورين المشهورين بشكل أفضل وبشكل سليم خالي من الأخطاء.
نستطيع أن نقول انها حل كبير لمشكله تناسق الصفحات وتصميمها والبعض لآيعرف عنها أي شئ ..
ماذا استفيد وكيف تعمل تقنية css
سوف تستفيد أشياء كثيره وأهمها .
أن تقنية css يمكنك من خلاله تحكم بتصميم موقعك بالكامل من خلال ملف واحد فقط .!
الملف يكون بصيغة .css
دقه بالتفاصيل الممله وتحكمك في تصميمك حيث ماتريده بشكل سليم وصحيح.
سرعة وخفه بالتصفح وتقدم هذه التقنيه بشكل واسع.
تعمل تقنية css على أكثر وأشهر المتصفحات العالمية,وتعمل أيضاًَ مع وثوق HTML حيث انهما أيضاًَ متقاربين بين الخصائص وطبعاًَ فيها اختلافات.
تعمل css بأبسط طرق تتوقعها وليس صعبة جداًَ لنرى كيف تعمل هذه التقنية..
لنفرض أننا نريد لون ان يكون خلفية الصفحة .!
في HTML يكون الاكواد هكذا..
وفي css يكون الكود هكذا ..
body {background-color: #CCCCCC;}
طيب هل تريد ان توضح لنا ماهي هذه الأكواد ؟
Body هو وسم من وسوم HTML, وهو (Selector) الأختيار الذي سوف يتم تطبيق أكواد css عليه.
background-color هي الخاصيه (Property) حيث ستكون خاصية وسم الاختيار.
# CCCCCC هي القيمة (Value) حيث سوف تكون قيمةوهنا القيمة هي اللون.
كيف أستطيع ان اضعها في صفحتي وهل سوف أحصل على أخطاء ومشاكل مع هذه التقنيه ؟
بالطبع لا توجد مشاكل اذا أتقنتها واتبعت طرقها الصحيحة
وتستطيع عمل ذالك في عدة خيارات وأفضلها رقم 1 .
1. ملف خارجي
كيف وماهو الملف الخارجي ؟؟
على سبيل المثال راح يكون على صفحة index لنقم بفتح النوته او اي ملف تحرير نصي ونحفظه ونعطية اسم ملف التصميم وبصيغة style-index.css
لنقوم بصنع ملف بنفس الاسم في الأعلى ونصنع صفحة index.html وعلى سبيل المثال.
css تجربة
هذه صفحة تجريبيه
الآن نظيف سطر عليها لكي نجلب css الى الصفحة.
طبعاًَ لازم يكون مابين الوسمين %u0648
هنا
كهذه
css تجربة
هذه صفحة تجريبيه
لنحفظ الصفحة الآن.
نذهب الآن الى ملف style-inde.css. الآن نظيف أكواد Css علية
body{
background-color:#736F6E;
}
p{
color:#FFFFFF;
}
نحفظه الآن وسوف أقوم بترجمة الكودين بين الوسمين.
في وسم body طلبنا منه ان تكون لون للخلفيه وهو 736F6E. وفي وسم p طلبنا منه ان يكون اللون ابيض FFFFFF .!
بسيطه اليس كذالك .!
2. من خلال وسوم HTML .
css تجربة
هذه صفحة تجريبيه
3. ضمن صفحة HTML بوسم style الطريقة تختلف عن وسوم HTML لنرى هذا الوسم كيف يكون.
body {background-color:#736F6E;}
p{color:#FFFFFF;}
css تجربة
هذه صفحة تجريبيه
الان عرفنا كيف نربطها وكيف نستخدمها,وخصائص css كثيره ومفيده وجميله.