معهد دعم اتش فى اى بى اس لحلول الويب - Powered by vBulletin


 
 
النتائج 1 إلى 2 من 2

الموضوع: Css تصميم وبناء

  1. #1
    المشرف العام
    الصورة الرمزية HVIPS1


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 3
    الدولة: eygpt
    المشاركات: 2,778
    HVIPS1 غير متواجد حالياً

    a Css تصميم وبناء


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



    كود:
    
    
     <table border=0 width=100% cellspacing=0 cellpadding=0> 
     <tr> 
     <td width=100%> 
     <center> 
     <table width=100% border=0 cellspacing=0 cellpadding=0 vspace=0> 
     <tr> 
     <td valign=bottom><font size=2><br></font> 
     <table cellpadding="5" cellspacing="0" border="0" width="203" > 
     <tr><td height="105" valign="top"> 
     <table width=610 cellpadding=0 cellspacing=0  border=0><tr><td width=1><spacer type=block width=1  height=1></td><td width=608 bgcolor=666666  height=1><spacer type=block width=1 height=1></td><td  width=1><spacer type=block width=1  height=1></td></tr><tr><td width=1  bgcolor=666666><spacer type=block width=1  height=1></td><td><table width=100% cellpadding=0  cellspacing=0 border=0 bgcolor=e6e6e6><tr><td> 
     </tr> 
     </table> 
     </td> 
     </tr> 
     </table> 
     </td> 
     </tr> 
     <tr> 
     <td width="179" bgcolor="#ffffff" align="left"> 
     <table width="179"> 
     <tr><td><img src="http://pics.ebay.com/aw/pics/x.gif" height="0" width="0"></td></tr> 
     <tr valign="bottom"> 
     <td valign="bottom" align="left" width="179" height="21"> 
     <table align="left" width="157" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffcc00"> 
     <tr> 
     <td align="left" colspan="2"><img src="http://pics.ebay.com/aw/pics/x.gif" width="157" height="2"></td> 
     <td align="right" rowspan="3" colspan="2"><img src= "http://pics.ebay.com/aw/pics/22x21.gif" 
     width="22" height="21" border="0"></td> 
     </tr>
    انا لا اقول انه سيكون سهلا. قلت فقط انه سيكون من الحقيقة.
    لماذا استخدم XHTML؟

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

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

    حسنا ، سوف أحاول أن تتوقف مع مصفوفة بين الكلام وننكب على العمل.
    أين يجب أن تبدأ عندما تريد إنشاء تصميم CSS يستند؟
    "المحتوى هو الملك". انها بليغ القول المأثور القديم ولكنه صحيح.
    كل شيء يبدأ مع المحتوى. الطبقات هو كل شيء في القمة.
    سوف صفحتك الانتهاء من العرض لديك طبقات مكدسة الواحدة فوق الأخرى. ولكن إذا كنت قشر تلك الطبقات بعيدا ، ما تبقى لكم هو قلب الصفحة : المحتوى.
    المتصفحات المتوافقة مع المعايير سوف نرى العديد من الطبقات جميلة الصفحة. وسوف المتصفحات مع دعم CSS الجزئي انظر صفحة الطبقات جزئيا. وسوف أقدم المتصفحات ومحركات البحث لا ترى طبقات من العرض ولكنها سوف ترى الصفحة.
    وتسمى عملية إضافة هذه الطبقات التحسين التدريجي .
    يسمى نتيجة السماح جردت تلك الطبقات بعيدا دون أن يؤثر ذلك المحتوى تدهور رشيقا .
    الخطوة الأولى والأهم على طريق التصميم CSS يستند إلى وجود علامة المتابعة الصحيحة لغويا.
    هذا مجرد نزوة مصطلح لوصف المحتوى الخاص بك بشكل صحيح.
    تصحيح غويا مارك المتابعة

    وضع العناوين والعناوين الفرعية في <h*> به ، <h1> ، <h2> ، <h3> ، الخ.
    إذا كان جزء من النص الأفعال تسمية ل <input> عنصر في <form> ، ثم تصف على هذا النحو باستخدام <label> العلامة.
    التفاف الفقرات الخاصة بك في <p> العلامات. إذا كان لديك قائمة من الروابط ، ثم وضعهما في قائمة ( <ul> أو <ol> ) وجعل لكل واحد منهم عنصر قائمة ، <li> .
    قد يكون لديك أفكار مسبقة حول كيفية هذه سوف تنظر.
    العرض الافتراضي به هو نتيجة المتصفحات التالية القواعد الأساسية.
    ما الذي يجب أن نتعلمه هو أن هذه القواعد لا تختلف من القواعد لنظام الكمبيوتر. يمكن أن تكون عازمة بعض منها. ويمكن تقسيم الآخرين.
    كنت أعتقد أن جميع <li> عناصر القائمة تظهر عموديا مع النقطة التالية لهم؟ كنت أعتقد أن الجو كنت التنفس الآن؟
    الحرة. الخاص. العقل.
    أنا آسف. وكان أن الإشارة مصفوفة مشاركة : أعدكم.
    <div> و <span>

    سترغب في بعض الأحيان لوصف بعض المحتويات ولكن لن يكون هناك علامة مناسبة متاحة. لا يمكنك تعويض العلامات الخاصة بك ولكن يمكنك الوصول ل <div> و <span> .
    A <div> هو عنصر مستوى الكتلة. وهذا يعني انها قائمة بذاتها ، وتأتي مع خط فاصل المضمنة.
    A <span> عنصر المضمنة. عناصر مضمنة لا تشمل فترة انقطاع الخط ويجب أن تكون موجودة داخل كتلة عنصر مستوى.
    كلا <div> و <span> تشبه قوائم الانتظار فارغة فقط لأنماط الواجب تطبيقها عليهم.
    لا تسرف مع <div> و <span> . إذا كان هناك علامة القائمة التي تصف قطعة من المحتوى الخاص بك بشكل صحيح ثم استخدام هذه العلامة.
    الطبقات والهويات

    إذا كنت تريد تطبيق نمط على كافة مثيلات علامة معينة ، ثم الرجوع ببساطة أن العلامة في ملفك.
    إذا ، من ناحية أخرى ، تريد تطبيق نمط انتقائي ، ثم كنت بحاجة الى الذهاب الى إما إضافة فئة أو معرف إلى العلامة.
    الطبقات هي التي يعاد استخدامها. ويمكن أن الوثيقة تحتوي على أي عدد من البطاقات التي تستخدم نفس الفئة ، على سبيل المثال :
    <p class="myclass">
    هوية فريدة من نوعها. ويمكن أن الوثيقة الوحيدة التي تحتوي على مثيل واحد من <p id="myid"> .
    على الرغم من أننا يمكن أن اسم صفوفنا ومعرفات أي شيء نود ، انها لا تزال فكرة جيدة لمحاولة استخدام مصطلحات وصفية وليس البصرية. تصف فئة بأنها "هامة" بدلا من "bigredbold".
    إذا كان لنا أن الجمع بين قوة <div> ق ومعرفات ، لا يمكننا اتخاذ الوصف الدلالي من وثائقنا إلى أبعد من ذلك من العلامات التي تقدمها سماح XHTML.
    ويمكن تقسيم معظم صفحات الويب إلى أقسام مثل "الملاحة الرئيسية" ، "دون الملاحة" ، "المحتوى الرئيسي" "المواد ذات الصلة" ، الخ.
    XHTML لا يعطينا علامات لوصف هذه القطع من المحتوى. ولكن إذا أخذنا فارغة لائحة على مستوى الكتلة العلامة ( <div> ) وإعطاء كل قسم المعرف الفريد (ID) ، ثم اتخذنا الوصف الدلالي إلى المستوى التالي.
    اذا كنت تصل علامة صفحات موقعك مع مجالات مثل <div id="branding"> ، <div id="footer"> ، الخ ثم لديك وسيلة لقطع تلك الإشارة من المحتوى. ثم سوف تكون قادرة على التأثير مظهرها البصري ، وحتى تغيير كيفية وضعه فيه.
    تطبيق الأنماط

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

  2. #2
    المشرف العام
    الصورة الرمزية HVIPS1


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 3
    الدولة: eygpt
    المشاركات: 2,778
    HVIPS1 غير متواجد حالياً

    رد: Css تصميم وبناء


    أنماط مضمنة

    فمن الممكن لترسيخ أنماط الخاص به جدا داخل أنفسهم على سبيل المثال :
    <p style="text-align: right;">
    ولكن ما هي الفائدة من ذلك؟ نحن نريد للفصل بين العرض التقديمي من المحتوى ، لا نخلط بينها.
    و <style> علامة

    يمكن أن نقدم وثيقة تعليمات تصميمها من داخل علامة <head>بواسطة التفاف كل شيء في <style> </style> العلامات.
    هذا هو أفضل قليلا من أنماط مضمنة لكنه لا يزال يعني المحتوى والعرض الذي قدمناه في المكان نفسه.
    معدات الشكل الخارجي

    عن طريق الحفاظ على أنماط لدينا في وثائق الخارجية نحقق فصل حقيقي من المحتوى والعرض. يمكننا أيضا تغيير العرض ينطبق على العديد من الوثائق من خلال تغيير واحد فقط ملف خارجي.
    أسهل طريقة للإشارة إلى أنماط الخارجية باستخدام <link> العلامة داخل <head> من المستند ، مثل هذا :
    <link rel="stylesheet" type="text/css" media="screen" href="path/to/stylesheet.css" />
    لاحظت أن هناك سمة ودعا "وسائل الاعلام" التي وضعناها على "الشاشة". هذا يعني أنه لن يؤدي إلا إلى أن الأنماط في أنماط يمكن تطبيقها على العرض على الشاشة. يمكننا استخدام أنماط مختلفة تماما لطباعة وثائقنا ، المشار إليه مع "وسائل الاعلام" السمة تعيين إلى "الطباعة".
    و <link> البطاقة هي الوسيلة الأكثر المعترف بها عالميا الرجوع an الأنماط الخارجية. المتصفحات القديمة حتى مع دعم CSS جزئية فقط فهمه.
    المتصفحات المتوافقة مع معايير فهم أيضا @import طريقة الأنماط الرجوع. يمكننا استخدام هذا لصالحنا. يمكننا توفير أنماط أساسية مع أبسط من التعليمات المشار إليها بواسطة <link> . ثم يمكننا أن نضيف المزيد من التعليمات المعقدة في الأنماط المشار إليه بواسطة @import مثل هذا :
    @import url("path/to/stylesheet.css");
    مثل <link> الطريقة ، يمكننا أن نضع لدينا @import القيادة داخل <head> من ثيقتنا (متداخلة في <style> </style> العلامات). ومع ذلك ، هناك طريقة أكثر ذكاء بكثير من الرجوع إلى صفحات الأنماط لدينا أكثر تعقيدا.
    يمكن أن نضع لدينا @import القيادة داخل الأنماط الأساسية التي نقوم باستخدام المشار <link> . هذا يعني فقط ثيقتنا مراجع اي منهما الأنماط الخارجية ، واحدة أساسية جدا ، ولكن هذا في حد ذاته أنماط مراجع تعليمات أكثر تعقيدا.
    الأنماط داخل الأنماط. الأنماط الأساسية للمتصفحات الأساسية. الأنماط المعقدة للمتصفحات أكثر تعقيدا.
    مرة أخرى ، لقد اتخذنا الانفصال إلى مستوى آخر. الآن وقد تم فصل الأنماط الأساسية لدينا في الأنماط والأساليب المعقدة. يمكننا أن نذهب أبعد من ذلك. لجعل الحياة أسهل بالنسبة لنا ، فإننا يمكن أن يكون منفصلا عن الأنماط تحديد المواقع ، والطباعة ، الخ ، متداخلة مثل الدمى الروسية ، واحدة الرجوع إلى أنماط المقبل.
    أسلوب الطباعة

    في ورقة الأنماط الأساسية لدينا ، نحن واحد مع الإشارة <link> ، يمكننا وضع معلومات بسيطة مثل الألوان الأساسية والخطوط نريد استخدامها.
    نبدأ الرجوع إلى <body> العلامة. وهنا كيف يمكننا تحديد الخط بين أفراد الأسرة ونحن نريد أن نكون المستخدمة :
    body {
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    }
    لاحظ كيف يمكننا تحديد الخطوط المختلفة في ترتيب الأفضليات. نريد استخدام فيردانا. إذا تعذر ذلك ، ارييل. إذا لم يتم تثبيت الخط Arial ، ثم هلفتيكا القيام به. أخيرا ، إذا تم تثبيت أي من هذه الخطوط ، ثم نقول إن أي خط بلا الرقيق وسوف نفعل.
    اللون

    الآن يمكننا أن نضيف بعض المعلومات الألوان الأساسية. كلما قمت بتحديد لون من شيء ، وانها دائما فكرة جيدة لتحديد لون الخلفية أيضا.
    نحن يمكن ان تستخدم كلمات رئيسية مثل لون "أبيض" ، "السوداء" ، وما إلى ذلك ولكنهم محدودة إلى حد ما. نحصل على أوسع نطاق من القيم باستخدام قيم RGB مثل # FFFFFF ، # 000000 ، الخ.
    استخدام شبكة الإنترنت آمنة القيم RGB كما يسمح لك لاستخدام طريقة الاختزال في الكتابة خارج القيم. بدلا من كتابة # 6699cc ، يمكن أن نكتب فقط # 69c.
    هنا كيف كنا إضافة إلى أنماط الموجودة لدينا ل <body> علامة لتحديد النص سوداء على خلفية بيضاء :
    body {
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    color: #000;
    background-color: #fff;
    }
    الزائفة الطبقات

    الآن بعد أن قمنا بتعيين محرف ولون للمستند لدينا ، دعونا فقط تأخذ الرعاية من صلاتنا.
    يمكننا نمط صلاتنا للنظر ولكن نريد ، جريئة ، أكد مائل ، أيا كان. يمكننا أيضا تحديد أنماط مختلفة للدول صلة محتملة مختلفة : الارتباط ، زار ، تحوم ونشطة. وتسمى هذه الطبقات الزائفة.
    a:link{
    color: #f93;
    background-color: #fff;
    }
    a:visited{
    color: #c93;
    background-color: #fff;
    }
    a:hover{
    color: #fc6;
    background-color: #fff;
    }
    a:active{
    color: #f96;
    background-color: #fff;
    }
    هذا هو الترتيب الصحيح لتحديد الطبقات الزائفة. وهنا نتذكر ذاكري مفيد للترتيب : أكره الحب.
    أحجام وحدات

    كلما استطعنا تحديد حجم شيء باستخدام CSS ، لدينا عدد من الخيارات المختلفة المتاحة لنا.
    عندما تحجيم النص ، على سبيل المثال ، يمكننا استخدام القيم مئوية ، بكسل ، نقطة أو EMS. يمكننا أن نقول font-size: 15px ، font-size: 120% ، font-size: 12pt أو font-size: 1.5em . الشيء المهم هو أننا دائما تحديد وحدات من نوع ما.
    طبقات العرض

    مرة واحدة لدينا لدينا الطباعة والألوان الأساسية المنصوص عليها والمشار إليها عبر <link> ، يمكننا أن نبدأ في إضافة أنماط أكثر تعقيدا المشار إليه عن طريق @import .
    CSS يسمح لنا لإضافة يزدهر المطبعية التي كان من المستحيل سابقا لتحقيق على شبكة الإنترنت. والمصممين الطباعة أقول لكم مدى أهمية تقنين الرائدة وعندما يتم وضع خارج النص على الصفحة. أي ما يعادل CSS لالرائدة line-height . لتقنين نستخدم letter-spacing :
    .ourclass {
    letter-spacing: 0.5em;
    line-height: 150%;
    }
    ميزة أخرى يدوية من المغلق هو القدرة على إضافة صورة خلفية أي عنصر.
    body {
    background-image: url("path/to/image.file");
    }
    يمكننا أيضا التحكم في مقدار واتجاه تبليط نريد من الصورة الخلفية. يتم ذلك باستخدام background-repeat . إذا كنا لا نريد صورة خلفية البلاط في كل شيء ، أن نعطي هذه قيمة من none . إذا كنا نريد أن البلاط عموديا ولكن ليس أفقيا ، نعطي background-repeat قيمة repeat-y .
    body {
    background-image: url("path/to/image.file");
    background-repeat: repeat-y;
    }
    يمكننا أيضا وضع صورة خلفية لذلك لا تحتاج بالضرورة البدء في الزاوية اليسرى العليا من العنصر الذي يتضمن (الموضع الافتراضي للصور في الخلفية). للقيام بذلك نستخدم background-position ويمكننا تحديد أي من الكلمات الرئيسية ، مثل top ، right ، وما إلى ذلك أو يمكننا استخدام وحدات مثل بكسل أو النسب المئوية. حتى نستطيع أن مزيج الوحدات.
    body {
    background-image: url("path/to/image.file");
    background-repeat: repeat-y;
    background-position: 90% 25px;
    }
    صندوق النموذجي

    كل عنصر له غير مرئي مربع حولها. يحاط مضمون كل عنصر من قبل padding . هذا padding ويرد من border . و border هي محاطة margin .
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

    يمكننا التعامل مع قيم كل ثلاثة من هذه الخصائص. على سبيل المثال ، يمكننا تغيير العرض ، نمط ولون border :
    border-width: 2px;
    border-style: dotted;
    border-color: #000;
    أو نستطيع الجمع بين هذه جميعا مع هذا التدوين الاختزال :
    border: 2px dotted #000;
    عن padding و margin يمكننا تحديد عرض لجميع الجوانب الأربعة. مرة أخرى ، نحن أحرار في استخدام أي وحدات نريد ، ونحن يمكن خلط الوحدات.
    إذا كنت أتساءل عما إذا كان لزيادة padding أو margin عنصر لإضافة مساحة من حوله ، فقط تذكر أن padding تمتد وصولا إلى border ، وسوف ترث القيم من العنصر نفسه مثل background-color . على margin من ناحية أخرى ، تبدأ من خارج الحدود ، والقيم لا يرث من داخل border .
    هنا طريقة واحدة لتحديد كل أربعة margin قيم عنصر :
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    أو يمكن أن نستخدم هذه الرموز الاختزال ، والذهاب في اتجاه عقارب الساعة من أعلى :
    margin: 20px 10px 20px 10px;
    في هذه الحالة ، لأن القيم العليا والدنيا هي نفسها وقيم اليسار واليمين هي نفسها ، يمكننا استخدام المزيد من الاختزال ، وتحديد القيم فقط الرأسي والأفقي :
    margin: 20px 10px;
    إذا أردنا القيمة نفسه على كافة الجوانب الأربعة ، كل ما كنت قد ليعلن هو :
    margin: 20px;
    عناصر كثيرة لديها قيم متأصلة ل margin : إنه ما بين يحدد المسافة بين الفقرات أو المسافة بين حافة الشاشة ، وحيث <body> يبدأ. يمكننا التعامل مع لا تزال هذه القيم. حتى إذا كنت لا تريد مسافة بين حافة الشاشة ، وبداية <body> ، نعلن بكل بساطة :
    body {
    margin: 0;
    }
    ربما كنت قد لاحظت أنني لم يحدد أي وحدات هناك. لا أقول أنه يجب عليك دائما تحديد وحدات؟ حسنا ، هناك استثناء واحد لذلك ، وهذا عندما كنت تعطي قيمة صفر. صفر بكسل هو نفس صفر في المئة هو نفس نقطة الصفر.
    مضيفا أن كل ما يصل

    واحدة من الطرق الأكثر وضوحا من التلاعب ظهور عنصر هو لتغيير حجمها. ونحن نفعل ذلك عن طريق تغيير في width و / أو height . مرة أخرى ، ونحن احرار في استخدام أي وحدات نود :
    width: 50%;
    height: 100px;
    فماذا يحدث عندما نعلن حجم عنصر ولكن نعلن أيضا في أحجام padding ، border و margin ؟
    width: 200px
    padding: 10px;
    border: 10px;
    margin: 10px;
    من الناحية النظرية ، وأضاف كل هذه القيم معا لاعطاء العرض الكلي :
    200 ( width )
    + 10 (من اليسار padding )
    + 10 (الحق padding )
    + 10 (يسار border )
    + 10 (الحق border )
    + 10 (يسار margin )
    + 10 (يمين margin )
    ____
    260 بكسل العرض الكلي

    للأسف ، نسخة ويندوز من برنامج Internet Explorer 5 (واعتمادا على الخاص doctype ، IE 6) يحصل على خطأ.
    إنترنت إكسبلورر يعطي العرض الكلي في إجمالي 220 بكسل. يتم تقليل المحتوى الفعلي للعنصر إلى 160 بكسل نظرا لتطبيق padding و border . فقط margin يتم تطبيقها بشكل صحيح القيم.
    عليك أن تضع في الاعتبار هذا التناقض عندما كنت تركبها التصاميم المغلق ولكن هناك الحلول للالتفاف حول هذا.
    وضع

    CSS تسمح لنا ليس فقط لتغيير مظهر عناصر الصفحة. مع العناصر على مستوى الكتلة يمكننا أن يؤثر أيضا حيث تظهر في الصفحة. يتم ذلك باستخدام position الإعلان مع الإعلانات مثل top ، left ، bottom و right .
    مرة أخرى ، يمكنك استخدام أي وحدة تريد ، وعلى الرغم من بكسل وربما الرهان الأكثر أمانا الخاص.
    افتراضيا ، كل عناصر الصفحة لديها position من static وهو ما يعني ببساطة أن ظهورها حيث ستظهر بشكل طبيعي على أي حال ، دون أي تحايل CSS التطبيقية. عندما نريد معالجة الموقف من عنصر ، مثل <div> ، ثم خيارين أهم المواقع المتاحة لنا هي relative و absolute .
    نسبية

    باستخدام position: relative ، والإعلانات ، مثل top و left الرجوع إلى العنصر (عادي static الموقف) في الوثيقة :
    position: relative;
    top: 10px;
    left: 10px;

    هذا من شأنه أن يضع عنصرا ten بكسل أسفل وإلى اليمين من حيث أنه سيكون من عادة.
    الحكم المطلق

    باستخدام position: absolute ، مثل الإعلانات top و left الرجوع إلى العنصر. في معظم الحالات ، وهذا سيكون <body> :
    position: absolute;
    top: 10px;
    left: 10px;

    هذا من شأنه أن يضع عنصرا ten بكسل أسفل وإلى اليمين من أعلى الزاوية اليسرى من الشاشة.
    بمجرد أن تعلن عنصر لديه position الذي absolute ، يؤخذ هذا العنصر من تدفق المستندات. موقفه لم يعد افتراضيا حيث ستظهر بشكل طبيعي. بدلا من ذلك ، موقفه الافتراضي هو أعلى الزاوية اليسرى للعنصر الذي يتضمن (عادة <body> ).
    وبعبارة أخرى ، فإن ترتيب العناصر المتمركزة على الاطلاق في وثيقة XHTML لم تعد الأمور. مواقفها تعتمد الآن كليا على CSS. يمكن أن يكون المستند <div id="content"> تليها <div id="navigation"> ولكن هل يمكن استخدام CSS لوضع الملاحة قبل المحتوى.
    الموضع المطلق يسمح بكسل مثالية التصاميم لتتحقق على الرغم من أنها أكثر ملاءمة ل"الثابتة" بدلا من تصاميم "السائل". وهي تشكل أيضا الأساس للرسوم المتحركة DHTML. DHTML هو مجرد مزيج من HTML ، CSS ، وجافا سكريبت (يمكن التلاعب بها أساليب تطبيقها على عناصر HTML مع جافا سكريبت).
    عائم

    المواقع على الإطلاق هو كل العناصر بشكل جيد وجيد عندما كنت تعرف بالضبط حجم كل عنصر والموقف بالضبط حيث تريد أن تظهر. لا يمكن أن تساعدك إذا كنت تريد وضع عنصر واحد يعتمد على موقف آخر.
    قد ترغب في أن تعلن ، على سبيل المثال ، "كل ما يتبع هذا العنصر يجب أن يظهر إلى اليمين منه". لأن تؤخذ العناصر المتمركزة على الاطلاق من تدفق الوثيقة ، ليس لديهم السياق إلى أن تتصل.
    لحسن الحظ ، لدينا قوية جدا float الإعلان الذي هو كل شيء عن السياق.
    كما رأينا ، فإن جميع العناصر على مستوى الكتلة لديها خط فاصل في الصنع. سلسلة من العناصر على مستوى الكتلة ، مثل <div> ق ستظهر واحدة تحت الأخرى.
    من خلال تطبيق float اعلان left أو right ، يمكننا تحديد ما يحدث للعنصر الذي يلي. بدلا من الظهور تحت عنصرها السابقة ، فإنه بأعقاب ضدها.
    لالأمثلة التالية ، دعونا نفترض أن كل مربع هو <div> الثابتة width و height .
    دعونا تطبيق float: left الى المربع رقم واحد :
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
    عدد مربع two بأعقاب ضد حق المربع رقم واحد.
    الآن دعونا تطبيق float: left إلى مربعات واحد واثنين :
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
    عدد مربع two بأعقاب ضد حق المربع رقم واحد ورقم المربع three بأعقاب يصل إلى يمين المربع رقم اثنين.
    كما يتم توفير ونحن مع الترياق ل float . انه دعا clear . عن طريق تطبيق clear اعلان left ، right أو both ، يمكننا أن "الخروج" من أي المتاخمة الناجمة عن العناصر السابقة.
    دعونا تطبيق clear: left الى المربع رقم ثلاثة :
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
    على الرغم من عدد two مربع يحتوي على float: left الإعلان ، وعدد مربع three تظهر تحتها بدلا من مهاجمته ضدها. من خلال اعلان clear: left على مربع عدد ثلاثة ، يمكن أن نكون على يقين من أن شيئا لن تظهر إلى اليسار منه.
    وهنا ترتيب معقدة إلى حد ما :
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
    لقد أعلنا float: left على رقم صندوق واحد لذا فان أي شيء بعد ذلك ينبغي أن بعقب ضد جانبها الأيمن. ومع ذلك ، ويتبعه عدد مربع اللذين و float: right أعلن بحيث يبدو قبالة إلى الجانب الأيمن. وينبغي أن عدد شيء مربع التاليين بعقب ضد جانبها الأيسر. ومع ذلك ، في هذه الحالة العنصر التالي ، وعدد مربع three ديه clear: both الإعلان بحيث لا تظهر إلى اليمين أو اليسار من أي شيء.
    Phew!
    وضع كل ذلك معا

    الآن كنت قد رأيت للتو بعض الأشياء التي هي قادرة CSS. هناك العديد من الإعلانات أكثر الأنماط بأنني لا تغطيها ولكن كما شاهدنا في أهم المرتكزات.

    1. تبدأ بشكل صحيح ملحوظ حتى وثائق XHTML.
    2. إضافة أنماط أساسية مع الأنماط المشار إليه مع <link> العلامة.
    3. استخدام @import مرجع الأنماط مع الإعلانات أكثر تعقيدا.
    4. عناصر الصفحة موقف سواء بشكل مطلق أو نسبي.

    اذا كنت بناء المواقع الخاصة بك بهذه الطريقة ، سوف تكون المكافآت متعددة ، مثل :

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

 

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •