MisS sEmSeMa
♥ اداره الكافيه ♥
عــدد مـشـاركــتــي : 632
نــقـــاط خــبــرتـــي : 8162
نــقـاط تـقـيـمـي : 40
العمر : 30
الموقع : فـ قلب حبيبي ونور عيني وحياتي كلها ( متزوجه للزعيم محمد ) admin
العمل/الترفيه : طالبه
مــزاجــي : حياتي فى بعدي عنك مش حياه
اوسمه العضو
اضافات خاص بالعضو:
 | موضوع: مصطلحات Css و معانيها بالعربي + فوائدها و قيمها  الخميس يوليو 07, 2011 8:53 am | |
| السلام عليكم ورحمة الله وبركاته
كيف حالكم إن شاء الله بخير ؟
موضوعنا اليوم
هو عن مصطلحات 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
الطريقة المختصرة لتحديد جميع الخصائص السابقة في سطر واحد .
مثلا قائمة مربعة داخلية
منقول
| |
|
أمير الأحساس
نائب المدير
عــدد مـشـاركــتــي : 540
نــقـــاط خــبــرتـــي : 1128
نــقـاط تـقـيـمـي : 21
العمر : 34
الموقع : شبكه ومنتديات رومانسي الابداع والتميز
العمل/الترفيه : المتحدث بأسم اداره شبكه ومنتديات رومانسي
مــزاجــي : رايق
اوسمه العضو
اضافات خاص بالعضو:
| | موضوع: رد: مصطلحات Css و معانيها بالعربي + فوائدها و قيمها الخميس أكتوبر 27, 2011 2:04 am | |
| تسلمي يا سمسمه على التوووبيك
تقبلي مروري
تحياتي لك | |
|
مواضيع لم
تغذية
rss
أفضل
20عضو
أفضل
اعضاء اليوم
جديد
المواضيع
جروب المنتدي
قانون
المنتدى
قائمة
أصـدقائي