کار با ستون های CSS

کار با ستون های CSS مختصر برای خواص عرض ستون و تعداد ستون ها است:

.news1 {
    -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 100px 3;
}

.news2 {
    -webkit-columns: 50px 4; /* Chrome, Safari, Opera */
    -moz-columns: 50px 4; /* Firefox */
    columns: 50px 4;
}

نحو این ویژگی نسبتاً شهودی است:

ستون ها: شمارش عرض

ما ویژگی های عرض ستون و تعداد ستون را در بخش های زیر توضیح خواهیم داد.

تعریف عرض ستون در CSS

برای تعیین عرض ستون CSS بهینه ، از ویژگی عرض ستون استفاده کنید:

div {
    -webkit-column-width: 200px; /* Opera, Chrome, Safari */
    -moz-column-width: 200px; /* Firefox */
    column-width: 200px;
}

نحو ساده است ، زیرا فقط باید یک مقدار تعریف کنید:

عرض ستون: مقدار ؛

شما می توانید از مقدار پیش فرض خودکار استفاده کنید که محتوا را به راحتی به تعداد ستونهای تعیین شده با تعداد ستونها به طور مساوی تقسیم می کند ، یا عرض را در هر واحد CSS (مثلاً px یا ems) تعیین کنید.

تنظیم تعداد ستون

با استفاده از ویژگی CSS تعداد ستون ها ، می توانید تعداد ستون هایی که یک عنصر باید به آن ها تقسیم شود را تعیین کنید:

div {
    -webkit-column-count: 2; /* Opera, Chrome, Safari */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

درست مانند عرض ستون ، تعداد ستون ها نیز فقط یک مقدار می گیرد:

تعداد ستون: مقدار؛

مقدار پیش فرض تعداد ستون CSS خودکار است ، که به شما امکان می دهد تعداد ستون ها را تعریف کند. مرورگر پنجره را به ستون هایی با عرض مشخص تقسیم می کند.

اگر به تعداد دقیق ستون نیاز دارید ، یکی را در یک عدد بدون واحد تعریف کنید.

دستکاری قانون ستون CSS

درست مانند ستون ها ، ویژگی ستون-قانون در واقع خلاصه ای برای سه زیر خاصیت است:

• عرض ستون – قانون
• به سبک ستون
• ستون-قانون-رنگ

div {
    -webkit-column-rule: 10px outset green; /* Opera, Chrome, Safari */
    -moz-column-rule: 10px outset green; /* Firefox */
    column-rule: 10px outset green;  	
}

قانون ستون CSS نوعی حاشیه است که ستون های CSS را از یکدیگر جدا می کند.

با استفاده از این مختصر می توانید سه مقدار برای آن تعریف کنید:

column-law: رنگ سبک عرض

در بخش های بعدی ، جزئیات بیشتری درباره هر زیرمجموعه توضیح خواهیم داد.

عرض قاعده ستون

از ویژگی CSS ستون قاعده عرض برای تعیین عرض قاعده بین ستون ها استفاده می شود:

div {
    -webkit-column-rule-width: 5px; /* Opera,Chrome, Safari */
    -moz-column-rule-width: 5px; /* Firefox */
    column-rule-width: 5px;
}

نحو فقط نیاز به تعریف یک مقدار دارد:

column-law-width: مقدار؛

Description	Value
عرض به صورت نازک ، متوسط یا ضخیم تعریف شده است	Keywords
عرض در واحدهای طول CSS	Length

سبک قاعده ستون

برای سبک دادن به قانون ستون ، از ویژگی CSS-column-rule استفاده کنید:

div {
    -webkit-column-rule-style: dashed; /* Opera, Chrome, Safari */
    -moz-column-rule-style: dashed; /* Firefox */
    column-rule-style: dashed;
}

برای این ویژگی فقط باید یک مقدار تعریف کنید:

column-law-style: value؛

تمام مقادیر موجود در جدول زیر ذکر شده است:

Description	Value
مقدار پیش فرض هیچ حاشیه ای نمایش داده نمی شود	none
هیچ حاشیه ای نمایش داده نمی شود	hidden
حاشیه نقاط گرد نمایش داده می شود	dotted
حاشیه ای از خط تیره کوتاه نمایش داده می شود	dashed
یک مرز جامد واحد نمایش داده می شود	solid
یک مرز دوتایی نمایش داده می شود	double
یک مرز منحنی رو به داخل نمایش داده می شود	groove
یک مرز منحنی به سمت خارج نمایش داده می شود	ridge
حاشیه تعبیه شده نمایش داده می شود	inset
یک حاشیه برجسته نمایش داده می شود	outset

رنگ آمیزی قانون ستون

از ویژگی CSS ستون-قانون-رنگ برای رنگ آمیزی قانون بین ستون ها استفاده می شود:

div {
    -webkit-column-rule-color: green; /* Opera, Chrome, Safari */
    -moz-column-rule-color: green; /* Firefox */
    column-rule-color: green;
}

نحو به شرح زیر است:

column-law-color: مقدار؛

شما می توانید رنگ را در نام رنگها ، مقادیر RGB ، RGBA ، HEX ، HSL یا HSLA مشخص کنید.

نکته: برای بدست آوردن مقدار تن رنگ دقیق موردنیاز ، از انتخابگر رنگ Pickeristic استفاده کنید.

تعریف شکاف کار با ستون های CSS

از ویژگی ستون شکاف برای تعیین شکاف ستون در CSS استفاده می شود:

div {
    -webkit-column-gap: 50px; /* Opera, Chrome, Safari */
    -moz-column-gap: 50px; /* Firefox */
    column-gap: 50px;
}

شما می توانید فاصله را با استفاده از کلمه کلیدی normal یا تعیین طول دقیق تعریف کنید:

gap-column: مقدار؛

مقدار پیش فرض طبیعی است که برابر با 1em است. برای تعیین عرض سفارشی برای شکاف ستون ، از هر واحد طول CSS (به عنوان مثال ، پیکسل یا EM) استفاده کنید.

دهانه ستون CSS

ویژگی CSS-span span مشخص می کند که یک ستون باید چند ستون را طی کند:

h1 {
    -webkit-column-span: all; /* Opera, Chrome, Safari */
    column-span: all;
}

دو کلمه کلیدی وجود دارد که می توانید به عنوان مقادیر برای تعریف دهانه ستون CSS استفاده کنید:

span-span: هیچکدام؛ / column-span: همه؛

مقدار پیش فرض هیچ است ، به این معنی که عنصر در یک ستون می ماند و در چندین ستون قرار نمی گیرد. برای اینکه دهانه عنصر در تمام ستون های جدول قرار گیرد ، از همه استفاده کنید.

پشتیبانی از مرورگر

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.