تعرف على كيفية تعريف خصائص لقواعد CSS مثل خط النص، وصورة الخلفية ولونها، وخصائص التباعد والتخطيط، ومظهر عناصر القائمة.

يمكنك تعريف خصائص لقواعد CSS مثل خط النص، وصورة الخلفية ولونها، وخصائص التباعد والتخطيط، ومظهر عناصر القائمة. قم أولاً بإنشاء قاعدة جديدة، ثم تعيين أي من الخصائص التالية.

تعريف خصائص نوع CSS

ها هو وصف لبعض خصائص أنواع CSS التي يمكنك تعيينها.

Font-family

لتعيين عائلة الخطوط (أو مجموعات العائلات) للنمط. تعرض المستعرضات النصوص بالخط الأول الموجود في المجموعة المثبّتة على نظام المستخدم. للتوافق مع مستعرض Internet Explorer، اسرد أحد خطوط نظام التشغيل Windows أولاً. يدعم كلا المستعرضين سمة الخط.

Font-style

لتحديد Normal، أو Italic، أو Oblique كنمط للخط. الإعداد الافتراضي هو Normal. يدعم كلا المستعرضين سمة النمط.

Line-height

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

Text-decoration

تقوم بإضافة تسطير، أو خط علوي، أو خط يخترق السطر إلى النص، أو تجعل النص يومض. الإعداد الافتراضي للنص العادي هو None. الإعداد الافتراضي للارتباطات هو Underline. عند تعيين إعداد الارتباطات على None، يمكنك إزالة التسطير من الارتباطات عبر تعريف فئة معينة. يدعم كلا المستعرضين سمة الزخرفة.

Font-weight

لتطبيق مقدار معين أو نسبي من اللون الغامق على الخط. يعادل Normal 400؛ بينما يعادل Bold 700. يدعم كلا المستعرضين سمة الوزن.

Font-variant

لتعيين متغير الأحرف الصغيرة بالنص. لا يعرض Dreamweaver هذه السمة في النافذة Document. يدعم مستعرض Internet Explorer سمة المتغير، في حين لا يدعمها مستعرض Navigator.

Text-transform

لكتابة الحرف الأول من كل كلمة في التحديد بأحرف كبيرة أو تعيين كتابة النص على أحرف صغيرة أو أحرف كبيرة بالكامل. يدعم كلا المستعرضين سمة حالة الأحرف.

Color

لتعيين لون النص. يدعم كلا المستعرضين سمة اللون.

Font-size

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

تعريف خصائص الخلفية لنمط CSS

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

ها هو وصف لبعض خصائص خلفية CSS التي يمكنك تعيينها.

Background Image

لتعيين صورة الخلفية للعنصر. يدعم كلا المستعرضين سمة صورة الخلفية.

Background Repeat

لتحديد تكرار صورة الخلفية وكيفية تكرارها. يدعم كلا المستعرضين السمة Repeat.

  • تعرض الخاصية No Repeat الصورة مرة واحدة في بداية العنصر.

  • تقوم الخاصية Repeat بعمل تجانب للصورة أفقيًا ورأسيًا خلف العنصر.

  • تعرض الخاصيتان Repeat‑x وRepeat‑y نطاقًا أفقيًا ورأسيًا للصور، على التوالي. يتم اقتصاص الصور لكي تتناسب داخل حدود العنصر.

ملاحظة: استخدم الخاصية Repeat لإعادة تعريف علامة body‎ وقم بتعيين صورة خلفية لا تتجانب أو تتكرر.

Background Attachment

لتحديد ما إذا كانت صورة الخلفية ثابتة في موضعها الأصلي أو يتم تمريرها مع المحتوى. لاحظ أن بعض المستعرضات قد تتعامل مع الخيار Fixed بوصفه Scroll. يدعم مستعرض Internet Explorer هذه الخاصية، في حين لا يدعمها مستعرض Netscape Navigator.

Background Position (X) وBackground Position (Y)

لتحديد الموضع المبدئي لصورة الخلفية بالنسبة للعنصر. يمكن استخدام هاتين الخاصيتين لمحاذاة صورة خلفية بمنتصف الصفحة، رأسيًا (Y) وأفقيًا (X). إذا كانت خاصية المرفق هي Fixed، يكون الموضع نسبيًا إلى النافذة Document، وليس إلى العنصر.

Background Color

لتعيين لون الخلفية للعنصر. يدعم كلا المستعرضين سمة لون الخلفية.

تعريف خصائص الكتلة لنمط CSS

يمكنك تعريف إعدادات المسافات والمحاذاة للعلامات والخصائص.

Letter Spacing

لزيادة المسافة بين الأحرف أو تقليلها. لتقليل المسافة بين الأحرف، حدد قيمة سالبة، على سبيل المثال (‑4). تتجاوز إعدادات تباعد الأحرف إعدادات النص المضبوطة. يدعم مستعرض Internet Explorer 4 والإصدارات الأحدث ومستعرض Netscape Navigator 6 السمة Letter Spacing.

Text Indent

لتحديد بعد السطر الأول للمسافات البادئة للنص. يمكن استخدام قيمة سالبة لإنشاء مسافة نهاية، ولكن يعتمد عرضها على المستعرض. لا يعرض Dreamweaver هذه السمة في النافذة Document سوى في حالة تطبيق العلامة على عناصر مستوى الكتلة. يدعم كلا المستعرضين السمة Text Indent.

Vertical Align

لتحديد المحاذاة الرأسية للعنصر الذي يتم تطبيقها عليه. لا يعرض Dreamweaver هذه السمة في النافذة Document سوى في حالة تطبيقها على العلامة <img>.

Text Align

لتعيين كيفية محاذاة النص داخل العنصر. يدعم كلا المستعرضين السمة Text Align.

Whitespace

لتحديد كيفية التعامل مع المسافة البيضاء داخل العنصر. حدد من بين ثلاثة خيارات: Normal لطي المسافة البيضاء؛ أو Pre للتعامل معها كما لو كان النص مضمنًا بين علامتي pre (أي، يتم الحفاظ على جميع أنواع المسافة البيضاء، بما في ذلك المسافات، وعلامات الجدولة، والإعدادات)؛ أو Nowrap لتحديد التفاف النص فقط في حالة مصادفة علامة br. لا يعرض Dreamweaver هذه السمة في النافذة Document. يدعم مستعرض Netscape Navigator ومستعرض Internet Explorer 5.5 السمة Whitespace.

Display

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

Word Spacing

لتعيين التباعد بين الكلمات. لتعيين قيمة معينة، حدد Value من القائمة المنبثقة، ثم أدخل قيمة رقمية. من القائمة المنبثقة الثانية، حدد وحدة قياس (على سبيل المثال، بكسل، أو نقاط، وما إلى ذلك).

ملاحظة: يمكنك تحديد قيم سالبة، ولكن يعتمد عرضها على المستعرض. لا يعرض Dreamweaver هذه السمة في النافذة Document.

تعريف خصائص المربع لنمط CSS

يمكنك استخدام الفئة Box بمربع الحوار CSS Rule Definition لتعريف الإعدادات الخاصة بالعلامات والخصائص التي تتحكم في إدراج العناصر بالصفحة.

يمكنك تطبيق الإعدادات على جوانب مفردة من العنصر عند تطبيق إعدادات المساحة المتروكة والهامش، أو استخدام الإعداد Same For All لتطبيق نفس الإعداد على جميع جوانب العنصر.

Float

لتحديد الجانب الذي تتدفق حوله العناصر الأخرى حول العنصر العائم. يكون العنصر العائم ثابتًا في جانب العوم، وتتدفق العناصر الأخرى حوله على الجانب المقابل.

على سبيل المثال، تكون الصورة العائمة إلى اليمين ثابتة على الجانب الأيمن، ويتدفق المحتوى الذي تضيفه في وقت لاحق إلى الجانب الأيسر من الصورة.

لمزيد من المعلومات، راجع http://css-tricks.com/all-about-floats/

Clear

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

Padding

لتحديد مقدار المسافة بين محتوى العنصر والحد الخاص به (أو الهامش في حالة عدم وجود حدود). قم بإلغاء تحديد الخيار Same For All لتعيين المساحة المتروكة لجوانب مفردة من العنصر.

Same For All

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

Margin

لتحديد مقدار المسافة بين حد العنصر (أو المساحة المتروكة في حالة عدم وجود حدود) والعنصر الآخر. لا يعرض Dreamweaver هذه السمة في النافذة Document سوى في حالة تطبيقها على عناصر مستوى الكتلة (الفقرات، والعناوين، والقوائم، وما إلى ذلك). قم بإلغاء تحديد الخيار Same For All لتعيين الهامش لجوانب مفردة من العنصر.

Width and Height

لتعيين عرض العنصر وارتفاعه.

تعريف خصائص الحد لنمط CSS

يمكنك استخدام الفئة Border بمربع الحوار CSS Rule Definition لتعريف إعدادات، مثل العرض، واللون، والنمط، للحدود حول العناصر.

Width

لتعيين سمك الحد الموجود حول العنصر. يدعم كلا المستعرضين السمة Width. قم بإلغاء تحديد الخيار Same For All لتعيين عرض الحد لجوانب مفردة من العنصر.

Same For All

لتعيين نفس خصائص نمط الحد على الجوانب العليا، واليمنى، والسفلى، واليسرى للعنصر الذي يتم تطبيقها عليه.

Color

لتعيين لون الحد. يمكنك تعيين اللون الخاص بكل جانب على حدة، ولكن يعتمد عرضه على المستعرض. قم بإلغاء تحديد الخيار Same For All لتعيين لون الحد لجوانب مفردة من العنصر.

Type

لتعيين مظهر النمط للحد. تعتمد طريقة ظهور النمط على المستعرض. قم بإلغاء تحديد الخيار Same For All لتعيين نمط الحد لجوانب مفردة من العنصر.

تعريف خصائص القائمة لنمط CSS

تعرّف الفئة List بمربع الحوار CSS Rule Definition إعدادات القائمة، مثل حجم الرموز النقطية ونوعها، بالنسبة لعلامات القائمة.

List style type

لتعيين مظهر الرموز النقطية أو الأرقام. يدعم كلا المستعرضين السمة Type.

List style position

لتعيين التفاف نص عنصر القائمة والمسافة البادئة له (بالخارج) أو التفاف النص إلى الهامش الأيسر (بالداخل).

List style image

يتيح لك تحديد صورة مخصصة للرموز النقطية. انقر فوق Browse (في نظام التشغيل Windows) أو Choose (في نظام التشغيل Macintosh) للاستعراض إلى صورة، أو اكتب مسار الصورة.

تعريف خصائص تعيين الموضع لنمط CSS

تحدد خصائص النمط Positioning كيفية تعيين موضع المحتوى المتعلق بنمط CSS المحدد في الصفحة.

اترك أيًا من الخصائص التالية فارغة إذا لم تكن مهمة بالنسبة للنمط:

Position

لتحديد الكيفية التي ينبغي للمستعرض من خلالها تعيين موضع العنصر المحدد كما يلي:

  • Absolute يقوم بإدراج المحتوى باستخدام الإحداثيات التي يتم إدخالها في المربعات Placement بالنسبة لأقرب عنصر أصل ذي تعيين مطلق أو نسبي للموضع، أو، في حالة عدم وجود عنصر أصل ذي تعيين مطلق أو نسبي للموضع، الركن العلوي الأيسر من الصفحة.

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

  • Fixed يقوم بإدراج المحتوى باستخدام الإحداثيات التي يتم إدخالها في المربعات Placement، بالنسبة إلى الركن العلوي الأيسر من المستعرض. يظل المحتوى ثابتًا في هذا الموضع مع تمرير المستخدم للصفحة.

  • Static يقوم بإدراج المحتوى في موضعه في انسياب النص. يمثل ذلك الموضع الافتراضي لجميع عناصر HTML القابلة لتحديد مواضعها.

Z‑Index

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

Overflow

لتحديد الإجراءات التي تحدث في حالة تجاوز محتويات حاوية (على سبيل المثال، DIV أو P) حجمها. تتحكم الخصائص التالية في التوسعة على النحو التالي:

  • Visible لزيادة حجم الحاوية بحيث تكون جميع محتوياتها مرئية. يتم توسيع الحاوية لأسفل وإلى اليمين.

  • Hidden للحفاظ على حجم الحاوية واقتصاص أي محتوى غير مناسب لها. لا تتوفر أشرطة تمرير.

  • Scroll لإضافة أشرطة تمرير إلى الحاوية بصرف النظر عما إذا كانت المحتويات تتجاوز حجم الحاوية. يعمل توفير أشرطة تمرير بشكل خاص على تجنب الالتباس الذي يسببه ظهور أشرطة تمرير واختفائها في البيئات الديناميكية. لا يتم عرض هذا الخيار في النافذة Document.

  • Auto لجعل أشرطة التمرير تظهر فقط في حالة تجاوز محتويات الحاوية للحدود الخاصة بها. لا يتم عرض هذا الخيار في النافذة Document.

Clip

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

Placement

لتحديد موقع كتلة المحتوى وحجمها. يعتمد تفسير المستعرض للموقع على الإعداد الخاص بالسمة Type. يتم تجاوز قيم الحجم في حالة تجاوز المحتوى الخاص بكتلة المحتوى للحجم المحدد.

يمثل البكسل الوحدة الافتراضية للموقع والحجم. يمكنك كذلك تحديد الوحدات التالية: pc (بيكا)، أو pt (نقاط)، أو in (بوصات)، أو mm (ملليمترات)، أو cm (سنتيمترات)، أو (ems)، أو (exs)، أو % (النسبة المئوية لقيمة عنصر الأصل). يجب أن تلي الاختصارات القيمة دون مسافة: على سبيل المثال، 3mm.

Visibility

لتحديد حالة العرض الأولية للمحتوى. إذا لم تقم بتحديد خاصية لإمكانية الرؤية، يرث المحتوى افتراضيًا قيمة العلامة الأصلية. يكون الإعداد الافتراضي لإمكانية الرؤية بالنسبة للعلامة body هو مرئي. حدد أحد خيارات إمكانية الرؤية التالية:

  • Inherit لوراثة خاصية إمكانية الرؤية للعنصر الأصل للمحتوى.

  • Visible لعرض المحتوى، بصرف النظر عن قيمة العنصر الأصل.

  • Hidden لإخفاء المحتوى، بصرف النظر عن قيمة العنصر الأصل.

تعريف خصائص الامتداد لنمط CSS

تشمل خصائص نمط الامتدادات خيارات عوامل التصفية، وفاصل الصفحة، والمؤشر.

Cursor

لتغيير صورة المؤشر عند تحريك المؤشر فوق الكائن الذي يتم التحكم فيه بواسطة النمط. حدد الخيار الذي تريد تعيينه من القائمة المنبثقة. يدعم مستعرض Internet Explorer 4.0 والإصدارات الأحدث ومستعرض Netscape Navigator 6 هذه السمة.

Filter

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

Page break before

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

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت