1. تعريف DIV
تحليل مثال div للتعريف النموذجي:
#عينة{ الهامش: 10px 10px 10px 10px;
الحشو: 20 بكسل 10 بكسل 10 بكسل 20 بكسل؛
الحدود العلوية: #CCC 2px صلب؛
الحدود اليمنى: #CCC 2px صلب؛
الحدود السفلية: #CCC 2px صلب؛
الحدود اليسرى: #CCC 2px صلب؛
الخلفية: url(images/bg_poem.jpg) #FEFEFE عدم التكرار في الأسفل الأيمن؛
اللون: #666؛
محاذاة النص: المركز؛
ارتفاع الخط: 150%؛ العرض: 60% }
التعليمات هي كما يلي:
اسم الطبقة هو عينة. يمكنك استدعاء هذا النمط باستخدام <div id="sample"> على الصفحة.
يشير الهامش إلى المساحة الفارغة المتبقية خارج حدود الطبقة، والمستخدمة لهوامش الصفحة أو لإنشاء فجوة مع الطبقات الأخرى. يمثل "10px 10px 10px 10px" على التوالي الهوامش الأربعة "أعلى، ويمين، وأسفل، ويسار" (اتجاه عقارب الساعة). إذا كانت جميعها متماثلة، فيمكن اختصارها إلى "MARGIN: 10px;". إذا كان الهامش صفرًا، فاكتب "MARGIN: 0px;". ملاحظة: عندما تكون القيمة صفرًا، باستثناء قيمة لون RGB 0% التي يجب أن تتبعها علامة النسبة المئوية، في حالات أخرى، لا يلزم اتباع الوحدة "px". الهامش عنصر شفاف ولا يمكنه تحديد لون.
تشير الحشوة إلى المسافة بين حدود الطبقة ومحتوى الطبقة. مثل الهامش، حدد المسافة من الحدود العلوية واليمنى والسفلية واليسرى إلى المحتوى على التوالي. إذا كانت جميعها متماثلة، فيمكنك اختصارها إلى "PADDING:0px". لتحديد الجانب الأيسر بشكل فردي، يمكنك كتابة "PADDING-LEFT: 0px;". الحشو هو عنصر شفاف ولا يمكنه تحديد اللون.
يشير BORDER إلى حدود الطبقة "BORDER-RIGHT: #CCC 2px Solid;" يحدد لون الحدود الأيمن للطبقة بـ "#CCC"، والعرض بـ "2px"، والنمط بخط مستقيم "صلب". .
إذا كنت تريد نمط الخط المنقط، يمكنك استخدام "منقط".
BACKGROUND يحدد خلفية الطبقة. يتم تعريفه على مستويين. أولاً، حدد خلفية الصورة واستخدم "url(../images/bg_logo.gif)" لتحديد مسار صورة الخلفية؛ وثانيًا، حدد لون الخلفية "#FEFEFE". "no-repeat" يعني أن صورة الخلفية لا تحتاج إلى التكرار إذا كنت بحاجة إلى تكرارها أفقيًا، استخدم "repeat-x"، لتكرارها عموديًا، استخدم "repeat-y"، ولتكرارها للتغطية. الخلفية بأكملها، استخدم "تكرار". يعني "الأسفل الأيمن" التالي أن صورة الخلفية تبدأ من الزاوية اليمنى السفلية. إذا لم تكن هناك صورة خلفية، فيمكنك فقط تحديد لون الخلفية BACKGROUND: #FEFEFE
يُستخدم اللون لتحديد لون الخط، والذي تم تقديمه في القسم السابق.
يتم استخدام محاذاة النص لتحديد ترتيب المحتوى في الطبقة، حيث يكون المركز في المنتصف، واليسار في اليسار، واليمين في اليمين.
يحدد LINE-HEIGHT ارتفاع الخط بأن 150% يعني أن الارتفاع هو 150% من الارتفاع القياسي ويمكن كتابته أيضًا على النحو التالي: LINE-HEIGHT:1.5 أو LINE-HEIGHT:1.5em، والتي لها نفس المعنى.
WIDTH هو عرض الطبقة المحددة، والذي يمكن أن يكون قيمة ثابتة، مثل 500 بكسل، أو نسبة مئوية، مثل "60%" هنا. تجدر الإشارة إلى أن هذا العرض يشير فقط إلى عرض المحتوى الخاص بك، ولا يشمل الهامش والحدود والحشوة. ولكن لم يتم تعريفه بهذه الطريقة في بعض المتصفحات، لذا عليك تجربة المزيد.
2.نموذج مربع CSS2
منذ إطلاق CSS1 في عام 1996، أوصت منظمة W3C بوضع جميع الكائنات الموجودة على صفحة الويب في صندوق. ويمكن للمصممين التحكم في خصائص هذا الصندوق عن طريق إنشاء تعريفات تتضمن الفقرات والقوائم والعناوين والصور والطبقة <div>. يحدد نموذج الصندوق بشكل أساسي أربع مناطق: المحتوى والحشو والحدود والهامش. طبقة العينة التي تحدثنا عنها أعلاه عبارة عن صندوق نموذجي. بالنسبة للمبتدئين، غالبًا ما يتم الخلط بينهم بشأن المستويات والعلاقات والتأثيرات المتبادلة بين الهامش ولون الخلفية وصورة الخلفية والحشو والمحتوى والحدود. فيما يلي رسم تخطيطي ثلاثي الأبعاد لنموذج الصندوق، وآمل أن يكون من الأسهل عليك فهمه وتذكره.
عند استخدام تخطيط XHTML+CSS، هناك تقنية قد لا تكون معتادًا عليها في البداية، ويجب القول إنها طريقة تفكير تختلف عن تخطيط الجدول التقليدي، أي: يتم تنفيذ جميع الصور المساعدة باستخدامها. الخلفيات. شيء من هذا القبيل:
الخلفية: url(images/bg_poem.jpg) #FEFEFE عدم التكرار في الأسفل الأيمن؛
على الرغم من أنه من الممكن إدراج <img> مباشرة في المحتوى، إلا أنه لا يوصى بذلك. تشير "الصور المساعدة" هنا إلى الصور التي لا تشكل جزءًا من المحتوى المراد التعبير عنه في الصفحة، ولكنها تستخدم فقط للزخرفة والفواصل والتذكير. على سبيل المثال: الصور الموجودة في ألبومات الصور، والصور الموجودة في أخبار الصور، وصور نماذج المربع ثلاثي الأبعاد أعلاه كلها جزء من المحتوى ويمكن إدراجها مباشرة في الصفحة باستخدام العنصر <img>، بينما يشبه البعض الآخر الشعارات والعنوان الصور وصور بادئة القائمة يجب أن يتم عرضها جميعًا باستخدام وضع الخلفية أو طرق CSS الأخرى.
هناك سببان لذلك:
افصل الأداء عن الهيكل تمامًا (راجع قراءة مقال آخر: "فهم فصل الأداء عن الهيكل")، واستخدم CSS للتحكم في كل المظهر والأداء لسهولة المراجعة.
جعل الصفحة أكثر قابلية للاستخدام وأكثر ودية. على سبيل المثال، إذا كان شخص كفيف يستخدم قارئ الشاشة، فلن تتم قراءة الصور التي تم تنفيذها باستخدام تقنية الخلفية بصوت عالٍ.