تعيين خصائص CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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