M.nshawaty

39

2,138

بعضاً من مصطلحات Css المهمة

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
موضوعنا اليوم

هو عن مصطلحات Css المهمة
وراح تفيد كل شخص يتعلم الـCss

: نبدأ على بركة الله :

Statements الأوامر : هي البيانات أو الأوامر التي يحتوي عليها ملفات css

- rules القواعد : هي نوع من الأوامر Statement و التي تستخدم غالبا .. و هي تنقسم إلى
- Selector العنصر المختار : يخبر المتصفح أي عنصر في الصفحة h1 او h2 أو table …. الخ … سينطبق عليه هذه القواعد ..
- declaration بيان : و التي تحدد الخواص Properties التي تحدد شكل العنصر مثل اللون و الخط و الحجم .. الخ

----------------------------------------------------


- Classes

هي تعار يف تحددها أنت لإعطائها خصائص مختلفة ..!! مثلا نحن في المثال السابق اعطينا محتويات الوسم p الحجم 15 .


----------------------------------------------------


- ID

هي تعريفات تشبة في طبيعة عملها class مع فرق واحد أن ليس من المفترض استخدامه في نفس المستند اكثر من مرة واحدة و بدل من ان يبدأ بالنقطة فهو يبدأ بعلامة # .


----------------------------------------------------


- 1-Background Color

حدد لون الخلفية للعنصر .
القيم المتاحة:

- color name :اسم اللون مثلا red , green …الخ
- hexadecimal number : مثلا #fffffff , #000000
- transparent : شفاف.

----------------------------------------------------


- 2-Background Image

اختر وضع صورة للخلفية .

القيمة المتاحة :
path_to_image = مسار و اسم الصورة
- اسم الصورة
- none : بدون صورة

----------------------------------------------------

- 3-Background Position

تحديد مكان الخلفية للعنصر
القيم المتاحة :

- top = أعلى left =يسار
- center= وسط right = يمين
- bottom=أسفل



- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
- x-% y-% نسبة المئوية بالنسبة للمحور السيني و الصادي
- x-pos y-pos الإحداثي السيني و الصادي ..
- كما يمكن دمج أي من القيمة مثلا اختيار top 50%

----------------------------------------------------------------

- 4-Background Repeat

هل يتم تكرار الخلفية أم لا و إذا أردت تكرارها هل تريد تكرارها في كل اتجاه أم في اتجاه واحد فقط
القيم المتاحة :

- no-repeat : بدون تكرار
- repeat : تكرار
- repeat-x : تكرار على المستوى السيني فقط ( أفقيا )
- repeat-y تكرار على المستوى الصادي ( عموديا )

----------------------------------------------------------------

- 5-Background Attachment

تحرك الخلفية مع الصفحة أم بقائها ثابتة حتى لو حركنا الصفحة بواسطة شريط المتصفح..
القيم المتاحة:

- fixed : ثابت
- scroll : متحرك

---------------------------------------------------------------

- 6- Background

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

- background-color : لون الخلفية
- background-image : الصورة
- background-repeat : تكرار الخلفية
- background-attachment : ثبات الصورة
- background-position: موقع الخلفية

-----------------------------------------------------------------

- Color

لون النص ..

القيم المتاحة:

- اسم اللون مثلا red, green
- بالنظم السداس عشر مثلا #0000000
- الألوان بنظام RGB مثلا rgb(255, 0, 0)

-----------------------------------------------------------------

- Letter Spacing

المسافة بين الأحرف .. يمكنك استخدام القيمة صفر كما يمكنك استخدام القيمة السالبة ..

القيم المتاحة :

- normal : عادي اي بالمسافة العادية
- المسافة أو فقيمة المسافة .


-----------------------------------------------------------------



- Text Align


محاذاة النص ( يمين – يسار – وسط )




القيم المتاحة :


- left : يسار
- right :يمين
- center : وسط
- justify : ضبط

-----------------------------------------------------------------

- Text Decoration


ديكور النص ..



القيم المتاحة :



- none : بدون
- underline : خط اسفل النص
- overline : خط في وسط النص
- line through :

----------------------------------------------------------------------


- Text Indent


يمكنك تحريك النص في أول سطر من الفقرة مسافة معينة باستخدام التالي :




القيم المحتملة :


- طول بالبكسيل أو em .. الخ
- نسبة مئوية

-----------------------------------------------------------------

- Text Transform


في النص اللاتيني يمكنك تحديد حالة و حجم الحرف استخدام الحروف الكبيرة Capital أو الصغيرة Small



القيم المتاحة:


- none : بدون قيمة
- capitalize : تكبير أول حرف .
- lowercase : الحروف الصغير
- uppercase : كامل الجملة بالحروف الكبيرة .

-----------------------------------------------------------------

- White Space


التحكم في المسافة البيضاء قبل النص



القيم المحتملة :


- normal : تجاهل المسافة البيضاء بواسطة المتصفح
- pre : يتم الاحتفاظ بالمسافة البيضاء كما في وسم pre في html
- nowrap : الفقرة لا تنقل إلى سطر جديد يتم مهما كان على نفس السطر و يتوقف حتى ظهور الوسم

-----------------------------------------------------------------

- Word Spacing


التحكم في المسافة بين الكلمات . كما يمكنك استخدام قيم سالبة .


القيم المحتملة:


- normal : عادي
- length : المسافة بالبكسل أو النسبة المئوية أو em .. الخ

-----------------------------------------------------------------


- Font-Family


اسم الخط الذي تريد ظهور العنصر به



القيم المحتملة:


- اسم الخط
- عائلة الخط


كما يفضل عن وضع اسم الخط أن تتبعه بعائلة أو أصل الخط ففي حال عدم توفرالخط لدى المستخدم يمكن استخدام خط بديل من نفس المجموعة أو العائلة .لو كان اسم الخط يحتوي على مسافةضع اسم الخط بين علامتي تنصيص


-----------------------------------------------------------------




- Font Size


حجم الخط الذي تريد تحديده للعنصر .



القيم المحتملة :


- xx-large : ضخم
- x-large : كبير جدا
- larger : أكبر
- large: كبير
- medium: متوسط
- small : صغير
- smaller : أصغر
- x-small : صغير جدا
- xx-small : صغير جدا جدا
- length : الطول ( بالبكسل أو em .. الخ)
- % نسبة مئوية .

-----------------------------------------------------------------

- Font Style


نمط الخط الذي تريد تحديده للعنصر



القيم المحتملة :


- normal : عادي
- itailc : مائل
- oblique :

-----------------------------------------------------------------

- Font Variant


عرض النص في صورة عادية أو صورة صغيرة .


قيم محتملة :


- normal : حروف عادية
- small-caps : حروف صغيرة

-----------------------------------------------------------------

- Font Weight


ثقل أو غلظ النص ( نص غامق أو عادي )




قيم محتملة:


- lighter : اقل اغمقاقا
- normal : عادي
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- bold : غامق
- bolder : أغمق

-----------------------------------------------------------------

- font-stretch


تمديد أو تقليص الخط أفقيا فقط .



القيم المحتملة:


- normal :عادي
- wider : اعرض
- narrower : اضيق
- ultra-condensed : المسافة الأضيق
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded : المسافة الأوسع .

-----------------------------------------------------------------

- Font


هو اختصار لعدد من الخواص السابقة في سطر واحد

المثال السابق يعطي النص حجم صغير و ارتفاع نص 0.99em و يجعل النص غامق و مائل و نوع الخط تاهوما كل هذا من خلال سطر واحد بدلا تضيع الوقت في كتابة أكثر من سطر .

القيم المحتملة :


- font-style
- font-varian
- font-weight
- font-size/line-height
- font-family

-----------------------------------------------------------------



- border-color


لون الإطار



القيم المتاحة:


- اسم اللون ( green, blue … الخ )
- رقم اللون بالنظام السادس عشر
- رقم اللون بصيغة RGB
- transparentشفاف

-----------------------------------------------------------------


- border-style


شكل الإطار


القيم المتاحة :


- خطوط مقطعة dashed
- dotted منقط
- double خط مزدوج
- groove خط اخدودي
- hidden مخفي
- inset نافر للخارج
- none بدون
- outset نافر للخارج
- ridge نافر
- solid صلب

-----------------------------------------------------------------

- Border-width


سمك الإطار .


القيم المتاحة :


- يمكن تحديد القيم بالبكسل أو بالقيمة التي تفضل أو
- استخدام

- Thin : خط رفيع
- Medium : خط متوسط
- Thick : خط سميك .

-----------------------------------------------------------------



- Border


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


-----------------------------------------------------------------


- كل خط على حدى


يمكنك أن تحدد خواص كل خط من الإطار على حدى مثلا خط الإطار الأعلى أو خط الإطار الأسفل و هكذا .و كل خط له اسم


- border-top :الخط العلوي من الإطار
- border-bottom : الخط السفلي من الإطار .
- border-right : الخط الأيمن من الإطار .
- border-left : الخط الأيسر من الإطار.

-----------------------------------------------------------------

الإطار العلوي :




- border-top-color: لون الخط العلوي
- border-top-style: شكل الخط العلوي
- border-top-width:حجم الخط العلوي .

-----------------------------------------------------------------

الإطار السفلي :




- border-bottom-color: اللون
- border-bottom-style: الشكل أو النوع
- border-bottom-width : حجم الخط

-----------------------------------------------------------------


الإطار الايمن :




- border-right-color: اللون
- border-right-style: الشكل
- border-right-width: الحجم

-----------------------------------------------------------------


الإطار الأيسر :



- border-left-color: اللون
- border-left-style: الشكل
- border-left-width: الحجم .


القوائم هي التي تستخدم الأوسمة ul , ol , li

-----------------------------------------------------------------

- list-style-image


الصورة المستخدمة لعناصر القائمة . بدل من ان تظهر القائمة منقطة أو مرقمة بمكنك نحديد صورة خاصة لك للقائمة .


-----------------------------------------------------------------


- list-style-position


لتحديد مكان القائمة في الداخل أو الخارج

القيم المتاحة :


- inside : داخل
- outside : خارج

-----------------------------------------------------------------

- list-style-type


شكل الرمز بجانب القائمة ( مربع / دائرة / دائرة مفرغة .. الخ )



القيم المتاحة :


- disc
- circle
- square
- decimal
- lower-roman
- upper-roman
- lower-alpha
- upper-alpha
- none بدون

-----------------------------------------------------------------

- list-style


الطريقة المختصرة لتحديد جميع الخصائص السابقة في سطر واحد .

مثلا قائمة مربعة داخلية

التعليقات (3)

منهـل     



منهـل     



الزعيم بدر