خصائص css

خصائص تنسيق النصوص


الخط و الحجم و الزخرفة



النوعالخصائصالقيم

نوع الخط	font-family	أنواع الخط الممكنة بالأفضلية: Code : CSS مثلا ;font-family: "Arial Black", Arial, Verdana, serif
حجم الكتابة	font-size	تشير إلى حجم الكتابة ، و هناك العديد من الإمكانيات. px (بكسيل) ، % (النسبة المائوية, 100% = عادي) ، em (الحجم النسبي, 1.0 = حرف عادي "د". 1.0 = عادي) إسم الحجم : xx-small : صغير جداَجداَ x-small : صغير جداَ small : صغير medium : متوسط large : كبير x-large : كبير جداَ xx-large : كبير جداَ جداَ
عريض	font-weight	bold : عريض bolder : عريض جداَ lighter :رفيع normal : عادي(لإعتباطي)
مائل	font-style	italic : أحرف مائلة oblique : أحرف مائلة normal :عادي (إعتباطي)
زخرفة النصوص	text-decoration	underline : سطر تحت overline : سطر فوق line-through : تشطيب blink : وميض none : عادي (إعتباطي)
الخاصية الضخمة للأحرف	font	بإمكانك وضع قيمها بالترتيب الذي تريد إلا font-family يجب أن تكون دائماَ في أخر الترتيب font-weight, font-style, font-size, font-variant, font-family. يمكنك أن تعط عدة قيم لخاصية واحدة و تفصل بينها بالفاصلة . مثال: Code : CSS مثلا ;font : bold ,16px ,Arial

وضع النص



النوعالخصائصالقيم

رصف أفقي	text-align	left : على اليسار (إعتباطي) center : في الوسط right : على اليمين justify :طريقة السرد(الطريقة التي تكتب بها الصحف)
رصف عمودي	vertical-align	للكتابة في الجداول, أو في عناصر على الخط هي نفسها في عناصر على الخط. top : فوق middle : في الوسط bottom : تحت
علو الخط	line-height	نعطي القيمة بالبكسيل (px) أو النسبة المائوية (%)
بداية الفقرات	text-indent	نعطي القيمة بالبكسيل (px) لتحديد بداية الفقرة. النصوص تبتدأ بعد المسافة المحددة للتحييد.
الكتابة المتواصلة	white-space	normal :الرجوع إلى السطر تلقائي (إعتباطي) nowrap : ليس هناك رجوع إلى السطر تلقائياَ, إلا إذا كانت هناك علامة مثال (</br >)مثلا pre : الرجوع إلى السطر كما في الكتابة الأصلية( <pre>)

خصائص صورالأرضيات و الألوان


صور الأرضيات



النوعالخصائصالقيم

صورة الأرضية	background-image	قيمتها ,رابط الصورة (نسبي كان أو مطلق) Code : CSS /* رابط نسبي */;("background-image:url("images/fond.png Code : CSS background-image:url مثلا ;("http://www.site.com/images/fond.png") /* رابط مطلق */
أرضية متوقفة	background-attachment	fixed : الأرضية تبقى متوقفة عندما ندير الصفحة scroll : الأرضية تدور مع النص (إعتباطي)
تكرار الأرضية	background-repeat	repeat : الأرضية تتكرر (إعتباطي) repeat-x : تكرر الأرضية على خط واحد ,أفقي repeat-y : الأرضية تتكرر على عمود واحد , عمودي no-repeat : الأرضية لا تتكرر تبقى متوقفة
وضعية الأرضية	background-position	هناك طريقتان : نضع المسافة بال px أو %, مقارنة بالزاوية اليسرى العلوية. نستعمل القيم مسبقاَ , واحدة عمودية و أخرى أفقية : top :فوق عمودياَ center : في الوسط أعمودياَ bottom : في الأسفل أعمودياَ left :على اليسار أفقياَ center :في الوسط أفقياَ right : على اليمين أفقياَ Code : CSS مثلا;background-position : bottom right /* يمين تحت*/
الخاصية الضخمة للأرضيات	background	تشير على واحدة أو أكثر من قيم الخصائص background-image, background-repeat, background-attachment, background-position. لست في حاجة إلى ترتيب أو وضع كل القيم(واحدة على الأقل تكفي) Code : CSS background:url("images/fond.png")no-repeat fixed مثلا;top right /* الصورة تبقى ظاهرة فوق على اليمين و لا تتكرر. */

إستخراج اللون


النوعالخصائصالقيم

لون النصوص	color	نضع اللو بإحدى هذه الطرق: نكتب إسم اللون الإنجليزية(black, blue, green, white, red...). نشير إلى اللون بالطرقة الستة عشرية (#CC48A1) نضع اللون بطريقة أحمر لأخضر أزرق:(r, g, b).
لون الأرضية	background-color	تعمل بطريقة مشابهه ل color. نضع إحدا طرق إستخراج اللون كما رأينا فوق

خصائص المحوفات


الأبعاد


النوعالخصائصالقيم

العرض	width	قيمها البكسيل px, أو%, أو" ذاتية" (إعتباطية)
علو	height	نفس الشيء
العرض الأدنى	min-width	ونشير إليه بالبكسيل.
العرض الأقصى	max-width	نفس السيء
العلو الأدنى	min-height	نفس الشيء
العلو الأقصى	max-height	نفس الشيء

هوامش داخلية


النوعالخصائصالقيم

هامش داخلي فوق	padding-top	و القيم التي تتماشا معهانشير إليها بالبكسيل 20px مثلا, أوبالنسبة 1.5em...
هامش داخلي يسار	padding-left	نفس الشيء
هامش داخلي يمين	padding-right	نفس الشيء
هامش داخلي تحت	padding-bottom	نفس الشيء

الحواف


النوعالخصائصالقيم

سمك الحافة	border-width	قيمتها بال بكسيل px.
لون الحافة	border-color	قيمتها اللون.
نوع الحافة	border-style	none: بدون حافة(إعتباطي) hidden : حافة غير ظاهرة solid : خط واضح double : خط مزدوج (لابد من تحديد حجمه في 3px كحد أدنى) dashed : خط متقطع dotted : خط منقط inset :ثلاثي الأبعاد 3D "مضغط" outset : ثلاثي الأبعاد 3D "له أثر" ridge : أبعاد ثلاثية 3D
حافة يسار	border-left	يجب توضيح لون وحجم و نوع الحافة يسار. Code : CSS /* حافة زرقاء 2px أبعاد ثلاثية 3D "مضغط" */; border-left: 2px inset blue
حافة فوق	border-top	نفس الشيء
حافة يمين	border-right	نفس الشيء
حافة تحت	border-bottom	نفس الشيء
حافة من جميع الجهات	border	من اليمين و الشمال و فوق و تحت.

خصائص تحديد المكان و الإظهار


الإظهار


النوعالخصائصالقيم

العنصر	display	none : لا يظهر أي شيء block : العنصر يصير من نوع قاطع "كتلة"(<p>) مثلا inline : العنصر يصير من نوع على الخط (<strong>) مثلا list-item : العنصر يصير من نوع بقة القائمة (مثال <li>)
ظهور	visibility	hidden : مستترة visible : واضحة (إعتباطي)
تحديد الأبعاد	overflow	visible : إظهار كل العناصر (إعتباطي). hidden : العناصر تقطع إذا تجاوزت الحد المحدد بالعلو و العرض. لانستطيع رؤية الجزء المقطوع من النص. scroll : هذه المرة المبحر يضع قضبان التنقل حتى نتمكن من متابعة رؤية النص. auto : هنا المبحر يقرر وضع القضبان أم لا.

تحديد المكان


النوعالخصائصالقيم

عائم	float	left : عائم على الشمال right :عائم على اليمين none : (إعتباطي)
وقف العائم	clear	left : حذف أثر العائمة على اليسار سابقاَ right : حذف أثر العائمة على اليمين سابقاَ both : حذف أثر العائمة على سابقاَ, سواءَ كانت على اليسار أو على اليمين none : لاحذف للعائمة(إعتباطي)
نوع الوضعية	position	absolute : وضع مطلق بالنسبة للزاوية اليسرى فوق fixed : وضع ثابت (العنصر يضل في مكانه). كما في الوضع المطلق. relative : وضع نسبي, بالنسبة للوضع العادي للعنصر static : وضع عادي (إعتباطي)
الوضع بالنسبة لفوق	top	القيمة بالبكسيلpx, أو النسبة المئوية%, أونسبيem... أكان الوضع نسبي أو مطلق.
الوضع بالنسبة لتحت	bottom	نفس الشيء
الوضع بالنسبة اليسار	left	نفس الشيء
الوضع بالنسبة لليمين	right	نفس الشيء

خصائص القوائم



النوعالخصائصالقيم

صنف القائمة	list-style-type	القوائم الغير منتظمة (<ul>) : disc : قرص أسود (إعتباطي). circle : دائرة. square : مربع. none : بدون. </li> القوائم المنتظمة(<ol>) : decimal : أرقام 1, 2, 3, 4, 5... (إعتباطي) decimal-leading-zero : أرقام تبتدء بالصفر (01, 02, 03, 04, 05...). upper-roman : أعداد رومانية كبيرة (I, II, III, IV, V...) lower-roman : أعداد رومانية صغيرة (i, ii, iii, iv, v...) upper-alpha : ترتيب بأحرف كبيرة (A, B, C, D, E...) lower-alpha : ترتيب بأحرف صغيرة (a, b, c, d, e...) lower-greek :ترتيب يوناني. </li>
وضع الإنسحاب	list-style-position	inside : بدون إنسحاب outside : مع إنسحاب (إعتباطي)
بقات خاصة	list-style-image	تضع رابط الصورة المستخدمة كبقة :أنظر هذا الكود Code : CSS مثلا;("list-style-image: url("images/puce.png

خصائص الجداول


النوعالخصائصالقيم

صنف الحافة	border-collapse	collapse :حواف الجدول ملتصقة ببعضها. separate : حواف الجدول مفترقة عن بعضها (إعتباطي).
خانات فارغة	empty-cells	show : حواف الخانات الفرغة ظاهرة. collapse : حواف الخانات الفارغة مستترة (إعتباطي).
وضع العناون	caption-side	تحديد مكان عنوان الجدول بعلامة, <caption>كقيمة top : فوق الجدول bottom :تحت الجدول left : على يسار الجدول right :على يمين الجدول

و قيمها التي ستكونون في حاجة اليها لبناء صفحاتكم إذاَ كانت هذه أهم الخصائص CSSوصلنا إلى نهاية أهم خصائص ال
المتداولة تستطيعون الرجوع إليها كلما دعت الضرورة إلى ذالك ...حظ سعيد