آموزش چند ستونی در CSS3

saber

4 سال پیش

امتیاز دهید post

آموزش چند ستونی در CSS3

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

CSS3 از چند ستونی پشتیبانی می کند تا متن را به عنوان ساختار مقاله خبری تنظیم کند.

برخی از متداول ترین خواص چند ستونی مورد استفاده به شرح زیر است –

column-count

برای شمارش تعداد ستونهایی که آن عنصر باید تقسیم شود استفاده می شود.

column-count

برای تصمیم گیری، نحوه پر کردن ستون ها استفاده می شود.

column-gap

برای تصمیم گیری در مورد فاصله بین ستون ها استفاده می شود.

column-rule

برای مشخص کردن تعداد قوانین استفاده می شود.

column-rule

برای تعیین رنگ قانون ستون استفاده می شود.

style

برای تعیین قانون سبک برای ستون استفاده می شود.

rule-width

برای مشخص کردن عرض استفاده می شود.

rule-width

برای مشخص کردن فاصله بین ستون ها استفاده می شود.

مثال

مثال زیر چیدمان متن را به عنوان ساختار جدید کاغذ نشان می دهد.

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         .multi {
            /* Column count property */
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            
            /* Column gap property */
            -webkit-column-gap: 40px; 
            -moz-column-gap: 40px; 
            column-gap: 40px;
            
            /* Column style property */
            -webkit-column-rule-style: solid; 
            -moz-column-rule-style: solid; 
            column-rule-style: solid;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
   
      &lt;div class = "multi"&gt;
         Tutorials Point originated from the idea that there exists a class 
         of readers who respond better to online content and prefer to learn 
         new skills at their own pace from the comforts of their drawing rooms.
         The journey commenced with a single tutorial on HTML in 2006 and elated 
         by the response it generated, we worked our way to adding fresh tutorials
         to our repository which now proudly flaunts a wealth of tutorials and 
         allied articles on topics ranging from programming languages to web 
         designing to academics and much more.
      &lt;/div&gt;
      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

.multi {

/* Column count property */

-webkit-column-count: 4;

-moz-column-count: 4;

column-count: 4;

/* Column gap property */

-webkit-column-gap: 40px;

-moz-column-gap: 40px;

column-gap: 40px;

/* Column style property */

-webkit-column-rule-style: solid;

-moz-column-rule-style: solid;

column-rule-style: solid;

}

</style>

</head>

<body>

Tutorials Point originated from the idea that there exists a class

of readers who respond better to online content and prefer to learn

new skills at their own pace from the comforts of their drawing rooms.

The journey commenced with a single tutorial on HTML in 2006 and elated

by the response it generated, we worked our way to adding fresh tutorials

to our repository which now proudly flaunts a wealth of tutorials and

allied articles on topics ranging from programming languages to web

designing to academics and much more.

</div>

</body>

</html>

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

Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more

Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more

فرض کنید، اگر کاربر بخواهد متن خود را به صورت کاغذ جدید و بدون خط بسازد، می توانیم این کار را با حذف نحو سبک مانند تصویر زیر انجام دهیم

.multi {
   /* Column count property */
   -webkit-column-count: 4;
   -moz-column-count: 4;
   column-count: 4;
   
   /* Column gap property */
   -webkit-column-gap: 40px; 
   -moz-column-gap: 40px; 
   column-gap: 40px;
}

.multi {

/* Column count property */

-webkit-column-count: 4;

-moz-column-count: 4;

column-count: 4;

/* Column gap property */

-webkit-column-gap: 40px;

-moz-column-gap: 40px;

column-gap: 40px;

}

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

Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more

منبع.

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

امتیاز دهید post

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

آموزش چند ستونی در CSS3

آموزش چند ستونی در CSS3

مثال

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

دیدگاه شما

بدون دیدگاه

آموزش چند ستونی در CSS3

مثال

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

دیدگاه شما

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

بدون دیدگاه