ما هي لغة css ؟

**علاء** · 08-06-2008 09:18 PM

السلام عليكم

لمحة عن لغة css

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

ماهي اللغة css؟

تعني (css) لغة الأنماط القياسية أو الإنسيابية
وهي اختصار لـ Cascading Style Sheets
ومن كتاب الاخت تهاني السبيت (تعلم PHP)...
""تم تطوير هذه التقنية بعد اهتمام المتصفحات الشهيرة مثل (الاكسبلورر – والنتسكيب) بإضافة وسوم هتمل إضافية هي الوسوم الخاصة بتنسيق النص. قامت الجمعية W3C
(World Wide Web Consortium) وهي الجمعية المسؤولة عن إصدار نسخ قياسية من لغة HTML، باعتماد هذه التقنية لتساعد على نقل المواقع قديمة الطراز –تلك التي تحتوي على وسوم التنسيق – إلى الطراز الجديد من صفحات إنترنت"".
الصيغة العامة لنمط:
لابد وان تعرف كيفية كتابة وسوم لغة css فهي كما التالي
} "القيمة" : المتغير {:وسوم الهتمل
مثال على ذلك:
<p style="{color : red"}>www.saven7.com</p>
ماذا نلاحظ؟
نلاحظ أن القيمة http://www.saven7.com تغير لونها إلى اللون الأحمر بمجرد كتابة النمط الخاص بها (القيمة التي بين علامتي التنصيص)
وهو {color : red"} كما بإمكانك تغيير اللون إلى وضع كود الهكس Hex وهو الكود الذي يحتوي على ستة خانات قبلها علامة #. ليصبح {color : #f11"}.
الدرس القادم سيكون عن كيفية إدراج الأنماط بإذن الله تعالي وبمشيئته وقدرته، فنحن إلى الآن نعمل في وضع الأساس والتعريف بهذه التقنية.

طريقة إدراج الأنماط..

إدراج الأنماط
هناك ثلاث طرق لإدراج الأنماط ..
طريقتان لإدراجها في نفس الصفحة
الطريقة الأولى: في نفس وسم الهتمل وهي أسهل الطرق.
مثال:
كود:

<p style="{color : red}">www.saven7.com</p>
<center style="{font-size:30px}">www.saven7.com</center>

-------------------------------------------------------------------------
الطريقة الثانية: بين وسمي <head> </head> وهي المتوسطة.
مثال:
كود:

<head>
<style type="********************/css">
a.red {color : "#900000"}
</style>
</head>

-----------------------------------------------------------------------
الطريقة الثالثة: في ملف خارج ذي امتداد css (style.css) وهي المتقدمة.
مثال: (الأنماط في الملف الخارجي)

الطريقة الأولى: وضع الأوامر بين أوسمة الهتمل..

الطريقة الأولى: وضع الأوامر بين أوسمة الهتمل.
هذه الطريقة هي الأسهل من بين الطرق الثلاث لإدراج الإنماط
وفي نفس الوقت أصعب.
الأسهل لإنها تتيح لك التحكم في كل وسم على حدة.
الأصعب لإنك إذا أردت تعديل كل الأوسمة (اوسمة الهتمل) ستظطر إلى تعديلها كلها ولاتعلم فقد يكون لديك 100 فقرة وخط وصورة وارتباط. وبالرغم من ذلك فهي سهلة وليست صعبة من حيث الأوامر.
مثال:

<
كود:

p style="{color : red}">www.saven7.com</p>
<center style="{font-size:30px}">www.saven7.com</center>

لاحظ أوامرcss في وسم p (وهذا الوسم يضيف سطر مع وجود فراغ)
تبدأ أوامر css بكتابة style ثم علامة المساواة (يساوي=) ثم علامة التنصيص(") ثم الأقواس المعقوفة ({}) وما بين الأقواس المعقوفة المتغير ثم نقطتان رأسيتان ثم القيمة وأخيرًا علامة التنصيص(").
يتم استخدام هذه الاوامر على حسب الوسم. بمعنى لو كان لدينا صورة فإن أوامر css المستخدمة للخط لا تصلح لأن تكون أوامر لهذه الصورة وشتان ما بين هذا وذاك.

نأتي الآن إلى جزء من هذه الأوامر والمتغيرات..

أوامر(خصائص) الخط والنصوص:
font-family = لتغيير نوع الخط ويقابله أمر font face في الهتمل.
font-size = لتغيير حجم الخط إما بالنقطة (px) أو بالنسبة المئوية (pt) ويقابها أمر size في الهتمل.
font-style = تحدد نمط الخط إما عادي (normal) أو مائل (italic)
أو عريض (bold).
font-weight = لتغيير سمك الخط إما خفيف (extralight) أو سميك (extrabold).
Color = غنية عن التعريف وهي لتغيير لون النص وتتم بكتابة لون النص (red,green,etc..) أو بكتابة كود الهكس (#dfcdfc,#900000,etc..)

background = لتمييز النص بوضع لون خلفية له.
********************-align = لتغيير محاذاة الخط إما يمين (right) أو توسيط (center) أو يسار (left) أو ضبط (justify)
********************-indent = يحدد المسافة البادئة للنص إما مسافة ثابتة أو بالنسبة المئوية
********************-decoration = إذا أردت تمييز الإرتباط التشعبي بوضع خط تحته (underline) أو وضع خط في منتصفه(strikethrough) أو أعلاه(overline) أو بلا تسطير (none).
--------------------------------
*ملاحظة: قد تجد بعض الأحيان أن نوع خطك قد يختلف من مستعرض لأخر
فقد حددت نوع خطك Tahoma وأنت تستعمل الاكسبولرر مثلا وتأتي في متصفح آخر وتجده قد انقلب إلى الخط Times New Roman، وهذا يرجع إلى أن بعض المتصفحات لا تدعم مثل هذه الخطوط فتحدد نوع خط معين من عندها ولكن إذا أردت تفادي هذه المشكلة قم بوضع ما بين الأقواس(,) وهي الفاصلة التي تخبر المتصفح أنه إذا لم يوجد عنده هذا الخط (الذي قبلها) فاعرض لي النص بالخط الذي بعده.
-------------------------------
مثال:

كود:

<p style="{font-family: Tahoma , Arial}">

والآن تم جمع الأوامر في وسم واحد
مثال:

كود:

<p style="{font-family: tahoma , Arial;
font-size:30px; font-style: italic;
color:#990000; background :#efefef;
********************-align: center;
********************-decoration: </p>منتديات سفن التعليمة underline}">

*ملاحظة: النص ذو اللون الأخضر أي القيمة والنص ذي اللون الأزرق هو الأمر أو المتغير

أوامر الإرتباط التشعبي(link) والجسم (body)..

أوامر الإرتباط التشعبي(link):
a:link = يحدد لون النص ذي الارتباط التشعبي.
a:visited = يحدد لون النص الذي نقر عليه المستخدم بالفعل.
a:active = يحد لون النص ذو الارتباط التشعبي أثناء تشغيله.
a:hover = وهذا الأمر وهو أهم جزء حيث بإمكانك تغيير لون النص أثناء مرور الماوس للتمييز بين بقية النصوص، فيعرف المستخدم أن هذا الرابط سينقله إلى صفحة معينة.
background = لوضع لون لخلفية الرابط.
==================================
==================================

أوامر الجسم(body):
نحن نعلم أن الصفحة تنقسم إلى قسمان رئيسيان في الهتمل
الرأس(head) و الجسم (body)
ففي الرأس يتم كتابة عنوان الصفحة واللغة وغيرها.
أما بالنسبة للجسم فيتم كتابة النصوص فيها والصور وغيرها.

إذا ماهي أوامر css في الجسم حتى تستثمر جهدك ووقتك بدلا من تنسيق كلٌعلى حده. الأوامر هي:

font-family = تم شرحه مسبقا وهو يحدد نوع الخط.
font-size = تم شرحه ايضا وهو يحدد حجم الخط.
color = كذلك تم شرحه وهو لتغيير لون الخط المستخدم.
background-color = يقوم هذا المتغير بوضع لون للخلفية تحدده أنت.
background-image = هل ترغب بأن تكون خلفية صفحتك عبارة عن صورة لتزداد جمالا وإبراقا هذا المتغير يقوم بذلك
مثال:

كود:

<style>
body {background-image: url(' x.gif ')}
</style>

مع ملاحظة أن x.gif هي الصورة وامتدادها المراد تعيينها كخلفية للصورة.
background-repeat = بهذا المتغير تستطيع التحكم في صورة الخلفية إما أن تكون صورة الخلفية على شكل خط أفقي في الأعلى وهذه قيمته(repeat-x)، أو خط رأسي-عمودي- يظهر على يسار الصفحة وقيمته هي (repeat-y) أو عادي وله القيمة
(repeat)أو تظهر كصورة واحدة عادية في الركن الأفقي
(no-repeat)
---------------------------------------------------
مثال:

كود:

body {background-image: url('x.gif'); background-repeat: repeat-y}

في المثال السابق يوضح بأن صورة الخلفية هي x.gif وأنها ستكون على شكل خط عمودي يظهر على يسار الصفحة.
=======================================
اتمنى ألا أحد يرد حتى أكتمل بإذن الله..

يتبع...

**علاء** · 08-06-2008 09:24 PM

لمزيد من المتغيرات

أوامر الأشرطة:

scrollbar-face-color = يحدد لون الواجهة لشريط التمرير.
scrollbar-base-color = لتغيير لون القاعدة الأساسية لشريط التمرير سواء كان افقي أم عمودي.
scrollbar-track-color = يحددلون الخلفية لشريط التمرير.
scrollbar-arrow-color = لتغيير لون الأسهم الموجود في شريط التمرير.
scrollbar-highlight-color = يحدد لون الإضاءة للشريط حسب اللون المستخدم.
scrollbar-3dlight-color = يؤثر على الشريط بوضع تأثير ثلاثي الأبعاد.
scrollbar-darkshadow-color = لوضع لون يكون كظل للشريط.
scrollbar-shadow-color = مثل المتغير السابق لكن مع اختلاف بسيط جدا.
--------------------
مثال:

كود:

scrollbar-base-color: #990000;
scrollbar-face-color: #024B79;
scrollbar-arrow-color: #FFF000;
scrollbar-track-color: #117A00;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #FF7F01;
scrollbar-darkshadow-color: #FFF000;
scrollbar-shadow-color: #900000;

بهذه الصورة ستعرف كيف هي الألوان في أشرطة التمرير

المزيد من الأوامر

أوامر الأشرطة:

scrollbar-face-color = يحدد لون الواجهة لشريط التمرير.
scrollbar-base-color = لتغيير لون القاعدة الأساسية لشريط التمرير سواء كان افقي أم عمودي.
scrollbar-track-color = يحددلون الخلفية لشريط التمرير.
scrollbar-arrow-color = لتغيير لون الأسهم الموجود في شريط التمرير.
scrollbar-highlight-color = يحدد لون الإضاءة للشريط حسب اللون المستخدم.
scrollbar-3dlight-color = يؤثر على الشريط بوضع تأثير ثلاثي الأبعاد.
scrollbar-darkshadow-color = لوضع لون يكون كظل للشريط.
scrollbar-shadow-color = مثل المتغير السابق لكن مع اختلاف بسيط جدا.
--------------------
مثال:

كود:

scrollbar-base-color: #990000;
scrollbar-face-color: #024B79;
scrollbar-arrow-color: #FFF000;
scrollbar-track-color: #117A00;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #FF7F01;
scrollbar-darkshadow-color: #FFF000;
scrollbar-shadow-color: #900000;

بهذه الصورة ستعرف كيف هي الألوان في أشرطة التمرير

أوامر الجدول والقوائم

أوامر الجداول (table):

font-family, font-size, color = هذه الثلاثة أوامر قد تم شرحها.
background-image = تحديد صورة كخلفية للجدول.
background-color = تغيير لون الخلفية للجدول.
border-color = لتغيير لون حدود الجدول الأربعة:
border-width = يحدد سمك الحدود إما نحيل(thin) أو متوسط (medium) أو سميك(thick) أو حجم تضعه أنت من عندك.
border-style = يحدد شكل الإطارات الأربعة للجدول فإما حد عادي(solid) أو خط مزدوج (double) أو خط منقط (dotted) أو خط متقطع(dashed) أو مخفي(hidden) أو محفور(Inset) أو بارز(outset) أو بلا حجم (none).
border-left-color = يحدد لون الحد الأيسر من الجدول.
border-left-width = يحدد حجم الحد الأيسر من الجدول.
border-right-color = يحدد لون الحد الأيمن من الجدول.
border-right-width = يحدد حجم الحد الأيمن من الجدول.
border-top-color = يحدد لون الحد الأعلى من الجدول.
border-top-width = يحدد حجم الحد الأعلى من الجدول.
border-bottom-color = يحدد لون الحد الأسفل من الجدول.
border-bottom-width = يحدد حجم الحد الأسفل من الجدول.

أوامر القوائم:

نقصد بالقوائم هنا أي موضوع أو أرتباط على شكل نقط مرتبة ومنظمة مثل هذه:
●الرئيسية. ●البرامج.
●الأخبار. ●اتصل بنا.
ماهي هذه الأوامر والمتغيرات الخاصة بـ[list=1],<ul>؟ هي كالتالي:

font-family, font-size, color = قد تم شرحها مسبقا.
list-style-image = يحدد صورة بدلا من النقط وقيمته مسار الصورة
list-style-position = يحدد موضع القائمة (relative) أو (absolute)
list-style-type = إذا أردت شكل محدد للقوائم إما (square) أو دائرة (circle) أو(decimal, disc, lower-alpha, upper-alpha, lower-latin, upper-latin) أو بلا (none).
وغدا سنكمل بقية الأوامر والمتغيرات بإذن الله وبمشيئته وقدرته..

أوامر النماذج

أوامر النماذج والإدخال:
font-family, font-size, color = كما قلنا لتغيير نوع الخط وحجمه ولونه في أزرار الأمر ومربع النص وغيرها من النماذج.
border = يحدد حجم الإطار وشكله ولونه، ويتم جمعها بهذا الكود
(border:1px solid #900000)
فلون حد النموذج هنا أحمر غامق ونوع الحد متصل وحجمه 1 بيكسل كما يمكنك تغيير شكل الحد (انظر إلى border-style في أوامر الجدول(.
background-color = معروف وهو لتغيير لون خلفية النموذج.

لطريقة الثانية: وضع الأوامر بين وسمي الهيد.

الطريقة الثانية: وضع الأوامر بين وسمي الهيد.
وتستخدم هذه الطريقة إذا أردت أن يكون التنسيق على هذه الصفحة فقط وكما قلنا هي متوسطة الصعوبة.
وتبدأ من بعد وسم<head> بإضافة وسم <style>
مثال:

كود:

<head>
<style type="********************/css">
p.red { color: green}
p.blue { color: #efefef font-weight: extrabold}
a.a { font-family: MS sans serif; font-size : 100px; font-weight: extrabold; color: red}
center.center { dir: "rtl"}
</style>
</head>

ولكن هل إذا أضفنا هذه الوسوم والمتغيرات سيتغير كل شيء حسبها.ما رأيك أنت..تتكون السطور أعلاه من وسم الهتمل
p, a, center ثم النقطة دوت (.)ثم القوس المعقوف ثم المتغير أو الأمر ثم النقطتان الرأسيتان ثم القيمة ثم إغلاق القوس المعقوف.
بحيث انك لو كتبت وسم الهتمل مثل

, <a>, etc.. في الجسم-أي بين اوسمة <body>x</body> ويشير x إلى أوسمة الهتمل- وربطها بالمتغير فإنه سيعمل.إذًا ماهو هذا الأمر الذي يربط لك بين وسم الهتمل وأمر css.
يتم الربط عن طريق كتابة class بعد وسم الهتمل محتويا على المتغير(x متغير تضعه أنت، أيا كان).
مثال كامل:
كود:

<head>
<style type="********************/css">
يسمى هذا الفئاتp.x { color: #990000 }
</style>
</head>
<body>
<p class="x">www.saven7.com</p>
</body>

وهكذا يتم كتابة أوامر css بين وسمي الهيد وربطها عن طريق class وتستخدم جميع الأوامر السابقة الموجودة في الردود. كما يمكن ربطها عن طريق المعرف وهو درسنا القادم بإذن الله.

**علاء** · 08-06-2008 09:43 PM

لمعرف ID
يستخدم لحفظ تنسيق معين ويتم استدعاءه عن طريق id
ولكن كيف يتم ذلك؟
يتم عن طريق كتابة# ثم المتغير ولنفرض أنه x بين أوسمة الهيد
ثم ربط وسم الهتمل بهذا المتغير عن طريق id .
مثال:

كود:

<head>
<style type="********************/css">
#x {
********************-align: center
}
</style>
</head>
<body>
<p id="x">www.saven7.com</p>
</body>

نلاحظ في المثال السابق أن المتغيرx يحمل القيمة (توسيط)
ثم ربطنا وسم الهتمل

بالمتغيرx عن طريق المعرف id
مثال آخر:

كود:

<head><style type="********************/css">
#x {
font-fmaily: MS sans serif;font-size:10px
}
</style></head><body>
</font></body>منتديات سفن التعليمية<font id="x">

تحول النص السابق (منتديات سفن التعليمية) إلى الخط الجديد
ويحمل حجم مقداره 10px، وتم ذلك كما قلنا عن طريق الربط بـid

**bousaid0118** · 17-12-2008 06:12 PM

ألف شكر ... و شرح موفق

فعلاً اللغة جميلة و سهلة جداً ... فقد جربتها مؤخراً في توزيع بعض ستايلات منتديات الـvb و طلعت رووعة و آخر حلاوة

**HMFouad** · 18-12-2008 09:05 AM

[center:1zargycr]Merciiiiiiiiiiiiiiiiiiiiiiiiiii
[/center:1zargycr][center:1zargycr] :| [/center:1zargycr]

**حسين** · 18-12-2008 06:06 PM

شكراااااااااا

**GHQ1103** · 11-01-2009 08:37 AM

merci

الموضوع: ما هي لغة css ؟

أدوات الموضوع

عرض

ما هي لغة css ؟

Re: ما هي لغة css ؟

Re: ما هي لغة css ؟

رد: ما هي لغة css ؟

Re: ما هي لغة css ؟

Re: ما هي لغة css ؟

Re: ما هي لغة css ؟

معلومات الموضوع

الأعضاء الذين يشاهدون هذا الموضوع

مواقع النشر (المفضلة)

مواقع النشر (المفضلة)

ضوابط المشاركة