آموزش طرح بندی در CSS

4 سال پیش

امتیاز دهید post

آموزش طرح بندی در CSS

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش طرح بندی در CSS خواهیم پرداخت.

امیدوارم با جداول HTML بسیار راحت باشید و در طراحی صفحه آرایی با استفاده از جداول HTML کارآمد باشید. اما می دانید CSS همچنین کنترل های زیادی برای موقعیت یابی عناصر در یک سند فراهم می کند. از آنجا که CSS موج آینده است ، چرا نمی توان CSS را به جای جدول برای اهداف طرح بندی صفحه یاد گرفت و از آن استفاده کرد؟

لیست زیر به چند مزایا و معایب هر دو فناوری را اشاره می کند –

اکثر مرورگرها از جداول پشتیبانی می کنند، در حالی که پشتیبانی CSS به آهستگی پذیرفته می شود.

جداول هنگام تغییر اندازه پنجره مرورگر، بخشنده تر هستند – محتوای آنها را تغییر شکل می دهند و متناسب با آنها تغییر می یابند. موقعیت یابی CSS دقیق و نسبتاً انعطاف پذیر است.

یادگیری و دستکاری جداول بسیار آسان تر از قوانین CSS است.

اما هر یک از این استدلال ها قابل برگشت است –

CSS برای آینده اسناد وب مهم است و توسط اکثر مرورگرها پشتیبانی می شود.

CSS دقیقتر از جداول است و به شما اجازه می دهد بدون توجه به پنجره مرورگر ، سند شما همانطور که مد نظر دارید مشاهده شود.

پیگیری جدول های تو در تو می تواند بسیار مشکل باشد. قوانین CSS به خوبی سازمان یافته است، به راحتی خوانده می شوند و به راحتی تغییر می یابند.

در آخر، ما به شما پیشنهاد می کنیم از هر کدام از فن آوری ها برای شما منطقی باشد استفاده کنید و از آنچه می دانید یا اسناد شما را به بهترین شکل ارائه می دهد استفاده کنید.

CSS همچنین ویژگی جدول آرایی را فراهم می کند تا جداول شما خیلی سریعتر بارگیری شوند. مثال زیر است –

&lt;table style = "table-layout:fixed;width:600px;"&gt;
   &lt;tr height = "30"&gt;
      &lt;td width = "150"&gt;CSS table layout cell 1&lt;/td&gt;
      &lt;td width = "200"&gt;CSS table layout cell 2&lt;/td&gt;
      &lt;td width = "250"&gt;CSS table layout cell 3&lt;/td&gt;
   &lt;/tr&gt;
&lt;/table&gt;

<td width = "150">CSS table layout cell 1</td>

<td width = "200">CSS table layout cell 2</td>

<td width = "250">CSS table layout cell 3</td>

</tr>

</table>

با استفاده از HTML، مرورگر مجبور بود قبل از ارائه جدول، هر سلول را محاسبه کند. هنگامی که الگوریتم طرح جدول را روی ثابت تنظیم می کنید ، فقط باید قبل از ارائه کل جدول به ردیف اول نگاه کند. این بدان معنی است که جدول شما باید عرض ستون و ارتفاع ردیف ثابت داشته باشد.

طرح بندی ستون

در اینجا مراحل ایجاد یک طرح بندی ساده ستون با استفاده از CSS آورده شده است –

حاشیه و پر کردن سند کامل را به صورت زیر تنظیم کنید –

&lt;style style = "text/css"&gt;
   &lt;!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   --&gt;
&lt;/style&gt;

<!--

body {

margin:9px 9px 0 9px;

padding:0;

background:#FFF;

}

-->

</style>

اکنون، یک ستون با رنگ زرد تعریف می کنیم و بعداً ، این قانون را به یک <div> پیوست می کنیم –

&lt;style style = "text/css"&gt;
   &lt;!--
      #level0 {
         background:#FC0;
      }
   --&gt;
&lt;/style&gt;

<!--

#level0 {

background:#FC0;

}

-->

</style>

تا این مرحله ، ما سندی با بدنه زرد خواهیم داشت ، بنابراین اجازه دهید اکنون تقسیم دیگری را در سطح 0 تعریف کنیم

&lt;style style = "text/css"&gt;
   &lt;!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   --&gt;
&lt;/style&gt;

<!--

#level1 {

margin-left:143px;

padding-left:9px;

background:#FFF;

}

-->

</style>

اکنون، ما یک بخش دیگر درون سطح 1 تودرتو می کنیم و فقط رنگ پس زمینه را تغییر می دهیم –

&lt;style style = "text/css"&gt;
   &lt;!--
      #level2 {
         background:#FFF3AC;
      }
   --&gt;
&lt;/style&gt;

<!--

#level2 {

background:#FFF3AC;

}

-->

</style>

سرانجام ، ما از همان تکنیک استفاده می کنیم ، یک بخش level3 را در داخل level2 قرار می دهیم تا طرح بصری ستون سمت راست را بدست آوریم

&lt;style style = "text/css"&gt;
   &lt;!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   --&gt;
&lt;/style&gt;

<!--

#level3 {

margin-right:143px;

padding-right:9px;

background:#FFF;

}

#main {

background:#CCC;

}

-->

</style>

در نهایت خروجی به صورت زیر می باشد

&lt;style style = "text/css"&gt;
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
    
   #level0 {background:#FC0;}
    
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
    
   #level2 {background:#FFF3AC;}
    
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
    
   #main {background:#CCC;}
&lt;/style&gt;
&lt;body&gt;
   &lt;div id = "level0"&gt;
      &lt;div id = "level1"&gt;
         &lt;div id = "level2"&gt;
            &lt;div id = "level3"&gt;
               &lt;div id = "main"&gt;
                  Final Content goes here...
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/body&gt;

body {

margin:9px 9px 0 9px;

padding:0;

background:#FFF;

}

#level0 {background:#FC0;}

#level1 {

margin-left:143px;

padding-left:9px;

background:#FFF;

}

#level2 {background:#FFF3AC;}

#level3 {

margin-right:143px;

padding-right:9px;

background:#FFF;

}

#main {background:#CCC;}

</style>

<body>

Final Content goes here...

</div>

</body>

به همین ترتیب ، می توانید یک نوار ناوبری بالا یا یک نوار تبلیغاتی در بالای صفحه اضافه کنید.

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش طرح بندی در CSS

آموزش طرح بندی در CSS

طرح بندی ستون

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش طرح بندی در CSS

طرح بندی ستون

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه