advertise laitec sharif univercity تبلیغات در سایت سورس کد تبلیغات در سایت سورس کد
دانلود مجموعه 100 سورس ساده و ابتدایی با سی پلاس پلاس

دانلود مجموعه 100 سورس ساده و ابتدایی با سی پلاس پلاس

5000 تومان
دانلود سورس هوش مصنوعی رنگ آمیزی گراف با ژنتیک در #C

دانلود سورس هوش مصنوعی رنگ آمیزی گراف با ژنتیک در #C

4800 تومان
دانلود مقاله ای در مورد الگوریتم  کرم شب تاب FireFly در هوش مصنوعی

دانلود مقاله ای در مورد الگوریتم کرم شب تاب FireFly در هوش مصنوعی

3000 تومان
پروژه پایانی PHP وب سایت فروشگاه کامپیوتری

پروژه پایانی PHP وب سایت فروشگاه کامپیوتری

23000 تومان
دانلود پروژه آموزش چندرسانه ای با دایرکتور Director

دانلود پروژه آموزش چندرسانه ای با دایرکتور Director

3000 تومان

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

طرحبندی CSS3 اجازه می دهد که به راحتی چندین ستون از عناصر در یک صفحه از وب سایت تان داشته باشید. ویژگی های چند ستونی در CSS3 عبارتنداز: column-count، column-gap،column-rule-style،column-rule،column-span و column-width
آموزش چیدمان چندین ستون در CSS3

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

طرحبندی CSS3 اجازه می دهد که به راحتی چندین ستون از عناصر در یک صفحه از وب سایت تان داشته باشید، درست مثل چندین ستون متنی در روزنامه.

 

ویژگی های چند ستونی در CSS3

 در این پست با این خواص مربوط به چند ستونی در CSS3 آشنا خواهید شد: 

 column-count

► column-gap

► column-rule-style

► column-rule-width

► column-rule-color

► column-rule

► column-span

► column-width

 

چگونگی ایجاد چند ستون در CSS3

ویژگی  column-count تعداد ستونهایی را که عنصر باید به آن تعداد تقسیم شود را مشخص می کند.

مثال زیر متن عنصر div را به سه ستون تقسیم میکند:

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

 

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

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

مثال زیر شکافی به اندازه 40 پیکسل بین ستونهای عنصر ایجاد میکند (ستونها به اندازه 40 پیکسل از هم فاصله خواهند داشت):

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

 

قوانین ستون CSS3

خاصیت column-rule-style استایل قاعده بین ستونها را تعیین میکند.

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

 

ویژگی column-rule-width عرض قاعده بین ستونها را مشخص میکند.

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

 

خاصیت column-rule-color رنگ قانون بین ستونها را مشخص می نماید.

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

 

خاصیت column-rule یک ویژگی مختصرنویسی شده از تمام خواص قانون ستون ها برای تنظیم همزمان تمام خواص گفته شده در بالا می باشد.

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

 

مشخص کردن ستون های تحت پوشش یک عنصر

ویژگی column-span مشخص می کند که یک عنصر باید چه تعداد از ستونها را پوشش دهد.

در مثال زیر عنصر H2 تمام ستونها را پوشش میدهد:

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

 

مشخص کردن عرض ستون

خاصیت  column-width عرض پیشنهاد شده و بهینه برای ستون را تعیین می نماید.

مثال زیر مشخص میکند که عرض ستونهای عنصر باید 100 پیکسل باشد:

h2 {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

 

 

 

 



0
نظرات

نظر خود را ارسال کنید



نام:
ایمیل:
دیدگاه:
captcha
کد امنیتی :


advertise
قوانین ستون سی اس اس3multiple Columns in CSS3چگونگی ایجاد چند ستون در CSS3کاربرد خاصیت column-width در سی اس اس3ویژگی های چند ستونی در CSS3مشخص کردن فاصله بین ستونهای عناصر با css3آشنایی با چیدن چندین ستون در سی اس اس3چگونه در HTML عناصر چند ستونی طراحی کنیم؟نحوه چندستونی کردن عناصر با سی اس اس3معرفی خاصیت column-span در CSS3معرفی ویژگی های CSS3 برای داشتن چندین ستون لیست برچسب ها
تمامی حقوق این سایت اعم از محتوی ، تصاویر ، قالب و ... متعلق به گروه مهندسی وب سایت سورس کد می باشد.
SourceCodes.ir ، افقی روشن برای برنامه نویسان ، از مبتدی تا حرفه ای

سفارش پروژه در سورس کد

پیشنهادات ویژه سورس کد

پکیج ویژه پروژه پایانی رشته کامپیوتر دانلود مجموعه 70 پروژه کاربردی سی شارپ وب سایت فروشگاه با php