مقالات طراحي سايت

طرحبندي CSS3 اذن مي‌دهد كه به راحتي يكسري  طراحي سايت در مشهد   رديف از موادتشكيل دهنده در يك ورقه از وبسايت تان داشته باشيد، صحيح مثل تعدادي رديف متني در خبرنامه.
خصوصيت هاي يك سري ستوني در CSS3 درين پست با اين خاصيت مرتبط با يك سري ستوني در CSS3 آشنا خواهيد شد:
► column-count
► column-gap
► column-rule-style
► column-rule-width
► column-rule-color
► column-rule
 ►column-width
column-span►
چگونگي ساخت و ساز يك‌سري رديف در CSS3خصوصيت  column-count تعداد ستونهايي را كه عنصر مي بايست به آن تعداد تقسيم گردد را معلوم مي نمايد.
نمونه تحت متن عنصر div را به سه رديف تقسيم ميكند:
div {    -webkit-column-count: ۳; /* Chrome, Safari, Opera */    -moz-column-count: ۳; /* Firefox */    column-count: ۳;}معلوم كردن مسافت دربين ستونهاخواص column-gap مسافت در ميان رديف ها را مشخص و معلوم مي نمايد.
نمونه ذيل شكافي به اندازه ۴۰ پيكسل دربين ستونهاي عنصر ساخت ميكند (ستونها به اندازه ۴۰ پيكسل از هم مسافت خواهند داشت):
div {    -webkit-column-gap: ۴۰px; /* Chrome, Safari, Opera */    -moz-column-gap: ۴۰px; /* Firefox */    column-gap: ۴۰px;}ضوابط رديف 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: ۱px; /* Chrome, Safari, Opera */    -moz-column-rule-width: ۱px; /* Firefox */    column-rule-width: ۱px;}خواص 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: ۱px solid lightblue; /* Chrome, Safari, Opera */    -moz-column-rule: ۱px solid lightblue; /* Firefox */    column-rule: ۱px solid lightblue;}معلوم كردن رديف هاي پايين پوشش يك عنصرخصوصيت column-span معلوم مي نمايد كه يك عنصر بايستي چه تعداد از ستونها را پوشش دهد.
در نمونه ذيل عنصر H2 مجموع ستونها را پوشش مي‌دهد:
h2 {    -webkit-column-span: all; /* Chrome, Safari, Opera */    column-span: all;}مشخص و معلوم كردن پهنا رديفخواص  column-width پهنا توصيه گرديده و با صرفه براي رديف را انتخاب مي كند.
نمونه پايين معلوم ميكند كه پهنا ستونهاي عنصر مي بايست ۱۰۰ پيكسل باشد:
h2 {    -webkit-column-width: ۱۰۰px; /* Chrome, Safari, Opera */    column-width: ۱۰۰px;}