ترفندهای
CSS که اکثر وقت ها نمیدانیم! در این مقاله،٢۵ترفند CSS دوچندان موثر مطرح گردیده است که به شما امداد می کند صفحه ها اینترنت فراوان عالی پباده سازی کنید . ممکن میباشد شما برخی یا این که همه ی این ترفند ها را از گذشته بلد باشید، با این حال، این می توانید یک منشا دم دستی برای ترفند های جالب CSS برای شما باشد که باید بدانید .
در این مقاله،٢۵ترفند CSS زیاد موثر مطرح شده میباشد که به شما یاری می نماید صفحات اینترنت بسیار خوب طراحی نمایید . ممکن میباشد شما برخی یا این که همه ی این ترفند ها را از گذشته بلد باشید، با این حال، این می توانید یک مبداء دم دستی برای ترفند های جالب CSS برای شما باشد که می بایست بدانید .
١
- تغییر تحول رنگ نوشته در وضعیت گزینش شده ممکن
نمی باشد که این ترفند را بلد بوده باشید! شما به کمک CSS می توانید رنگ نوشته صفحه های اینترنت را در موقعیت انتخاب گردیده معین کنید . این ترفند دست قلیل در مرورگر های جدید مانند safari و firefox عمل می کند .
/**
* Safari and Opera
*/ ::selection
{
background: #c3effd;
color: #000; }
/**
* Firefox
*/ ::-moz-selection
{
background: #c3effd;
color: #000; }
همانطور که می بینید، با به کار گیری از انتخابگر ::selection می توانید متن های تعیین گردیده را انگیزه قرار دهید .
٢
- جلوگیری از جهش اسکرول فایرفاکس اگر سایز محتوا از سایز پنجره کمتر باشد، معمولا فایرفاکس اسکرول را نهفته می کند .
مشکلی که گاها پیش می آید این میباشد که در صورتی که به هر برهان سایز محتوا تغییر و تحول کند یا این که سایز پنجره نسبت به محتوا تغییر کند، نوار اسکرول مجددا ظواهر می شود و سبب تولید جهش در صفحه می شود .
در
صورتی که می خواهید اسکرول همواره در فایرفاکس نمایان باشد، می توانید از امر تحت استعمال کنید:
html
{
overflow-y: scroll; }
٣
- شکستن صفحه ها و رفتن به کاغذ ی بعد هنگام پرینت گرچه عمده کاربران اینترنت ترجیح می دهند که صفحات وب را به رخ آنلاین مطالعه کنند، البته برخی از کاربران شما ممکن است بخواهند متن مطلب را پرینت بگیرند و آن گاه مطالعه کنند .
به امداد CSS می توانید محل شکسته شدن صفحه های و رفتن به برگه ی آنگاه در هنگام پرینت را در دست گرفتن فرمائید . تنها کافی است که کد CSS تحت را به استایل های خویش طولانی تر فرمائید و آنگاه به هر تگی که می خواهید در برگه ی بعد از آن چاپ شود، کلاس page-break را انتساب دهید .
.page-break
{
page-break-before: always; }
۴
- به کار گیری از فرمان !important
طراحان با تجربه، از کاربرد این فرمان اطلاع دارند، البته معمولا جدید کارها، از این امر !important در CSS بی اطلاع هستند و تعجب می کنند .
با افزودن دستور !important به انتهای فرمان css تان، حق تقدم فرمان زمینه نظر را نسبت به امرها دیگر که با آن در ناهمخوانی هستند، افزایش می دهید .
در
کد زیر، رنگ زمینه، به دلیل وجود !important آبی‌رنگ خواهد بود (و نه قرمز)
.page
{
background-color: blue !important;
background-color: red; }
کاربرد شیوه فوق هنگامی میباشد که شما یک css rule می نویسید، اما متوجه می شوید که هیچ تاثیری ندارد! ادله این زمینه شاید این است که یک فرمان دیگر با اولویت فراتر وجود دارد که اثر فرمان شما را خنثی می نماید .
برای این که امر شما حق تقدم بالا تری داشته باشد و اثر دستورات دیگر را خنثی کند، می توانید از !important استفاده نمائید .
۵
- جایگذاری متن با تصویر این
ترفند در مقاله ی پیشین شرح داده شده است: ۱٠
ترفند CSS که ممکن است تا کنون نمی دانستید!
۶ - ارتفاع دست کم که در همه مرورگر ها کار می نماید .
متاسفانه مرورگر Internet Explorer فرمان min-height در CSS را شعور نمی نماید و لذا نمی توانایی با امر فوق، طول حد اقل را در IE مشخص و معلوم نمود .
برای حل این مشکلی می توانید از ترفند ذیل به کار گیری نمائید .
#container{
/* all browsers except ie6 will respect the !important flag */
height: auto !important;
min-height: 500px;
/* Should have the same value as the min height above */
height: 500px; }
٧ - مشخص کردن لینک هایی که در پنجره ی نو گشوده میگردند .
کد CSS زیر منجر می شود که لینک هایی که در پنجره ی نو گشوده می شوند، را با استایل ویژه نمایان می نماید .
به این ترتیب، بازدیدکنندگان سایت، قبل از این که بر روی لینک کلیک کنند، می دانند که این پیوند در یک پنجره یا این که تب تازه گشوده خواهد شد
a[target="_blank"]:before,
a[target="new"]:before
{
margin: 0 5px 0 0;
padding: 1px;
outline: 1px solid #333;
color: #333;
background: #ff9;
font: 12px "Zapf Dingbats";
content: "279C"; }
در
کد فوق تعدادی نکته وجود دارااست که عالی هست به آنان دقت کنید:
به انتخابگر a[target="_blank"] اعتنا نمایید . در CSS می توان تگ های html را بر اساس مقادیر خواص آن ها غربال کرد . برای این مراد همان گونه که می بینید، اندازه خواص را در درون [] قرار می دهیم . در این امر لینک هایی که دارنده خواص target="_blank" میباشند را تعیین کرده ایم . یعنی لینک و پیوند هایی که در یک تب تازه باز می شوند .
به کلاس کاذب :before و :after اعتنا کنید . این دو کلاس، تگ خاصی را انگیزه نمی گیرند، بلکه فقط یک نقطه ی خالی در قبل یا این که آن گاه تگ ذی‌ربط را گزینش می نمایند .
به امر content در CSS دقت فرمایید . به یاری فرمان content می بضاعت و توان یک کاراکتر یا این که یک نوشته را در قبلی یا این که آنگاه از یک تگ قرار بخشید . دقت نمایید که فرمان content صرفا زمانی قابل استعمال میباشد که از کلاس کاذب :after و یا این که :before استفاده شده باشد .
در کد فوق، ما یک نشانه 279C که به فیس یک حافظه فلش سناریو داده می شود در قبلی و بعد از آن لینک ها قرار داده ایم .
٨
- استایل دهی به لیست های آراسته به راه ی متفاوت
Ordered
list style
استایل دهی به اعداد یک لیست آراسته (شماره گذاری شده) به راه ای مختلف نسبت به باقی نوشته هر مورد از آیتم های لیست .
در کد زیر، همانطور که می بینید، یک فونت را برای تگ ol توصیف کرده ایم و آنگاه برای تگ p ی درون آن، مجددا فونت را تغییر تحول داده ایم . به این ترتیب، استایل خود لیست (شامل اعداد لیست) با محتوای آن (که باید در باطن p قرار گرفته باشد) متفاوت خواهد بود .
ol
{
font: italic 1em Georgia, Times, serif;
color: #999999; }
ol
p { font: normal .8em
Arial, Helvetica, sans-serif;
color: #000000; }
٩
- به کار گیری از حروف تبارک در اولی کلام مقاله
Drop
caps
شما می توانید حرف اول مقاله تان را همانند مجله ها و مجلات، والا کنید! برای ایجاد این جلوه، می توانید از کلاس کاذب :first-letter استفاده نمایید .
p:first-letter
{
display: block;
margin: 5px 0 0 5px;
float: left;
color: #FF3366; font-size: 3 .0em;
font-family: Georgia; }
١٠
- شفافیت به نوع ای که در تمام مرورگر ها کار کند
گرچه CSS 3 خواص جدید opacity را برای شفافیت معرفی کرده است، ولی همه ی مرورگرها از آن پشتیبانی نمی نمایند .
این یک ترفند CSS برای شفافیت در همه ی مرورگرها می باشد
.transparent_class
{
filter: alpha(opacity=50); -moz-opacity: 0 .5;
-khtml-opacity: 0 .5;
opacity: 0 .5;
}
١١
- وضعیت دهی عمودی در میانه با line-height
این
ترفند در مطلب ی پیشین شرح داده گردیده است: ۱٠
ترفند CSS که شاید تا کنون نمی دانستید! ١٢
- طرح ثابت در میانه صفحه این
ترفند در مقاله ی قبل شرح داده گردیده است: ۱٠
ترفند CSS که شاید تا کنون نمی دانستید! ١٣
- حذف اسکرول عمودی در textarea ها در IE
مرورگر Internet Explorer فارغ از توجه به طول متن، یک اسکرول عمودی به کادر های متنی textarea بیش تر مینماید .
با به کارگیری از شیوه پایین می توانید مشکل فوق را برطرف نمایید
textarea{
overflow: auto; }
١۴
- حذف حاشیه از لینک و پیوند های فعال
برخی از مرورگر ها مثل فایرفاکس و IE دور لینک هایی که استفاده کننده کلیک می کند، یک حاشیه ی نقطه چین سناریو می دهند . این یک ویژگی اثرگذار میباشد و به این ترتیب، استفاده کننده می تواند بفهمد که روی کدام لینک و پیوند کلیک کرده میباشد و یا در حال حاضر فوکوس بر روی کدام پیوند قرار دارد . با این حال، این خصوصیت گاها سبب ساز زشت شدن لینک می شود .
برای حذف این لبه می توانید از کد زیر استفاده کنید:
a:active,
a:focus {
outline: none; }
١۵
- پرهیز از مخفی شدن عنصرها در IE
گاهی اوقات مرورگر IE به راه ی خاصی اخلاق می کند و سبب ساز می شود که بعضا موادتشکیل دهنده نهفته شوند . و وقتی که با موس چیزی را انتخاب می کنیم، مجددا عناصر مخفی شده، ظواهر می شوند . این خلل به منجر برخی باگ ها در IE به هنگام بازخورد با عناصر شناور (float) به وجود می آید . این مشکل با اضافه کردن فرمان position: relative به عناصری که نهفته می شوند، قابل حل می باشد .
١۶
- آیکون های یگانه بر شالوده خواص
انتخاب گرهای خاصیت در CSS فراوان قدرمند می باشند و به شما تجهیزات زیادی را برای در دست گرفتن استایل موادسازنده مختلف می دهند . به تیتر مثال شما می توانید بر شالوده میزان href در لینک و پیوند ها (یا به عبارت دیگر، بر شالوده مقصد پیوند ها)، یک آیکون متفاوت را در سمت چپ پیوند ها قرار دهید .
به این منش شما می توانید آیکون های متفاوتی را به پیوند هایی که به یک فولدر pdf یا یک فولدر word اشاره می کنند انتساب دهید و کاربر قبلی از این که کلیک کند، می داند که مقصد این لینک، فولدر pdf است یا تصویر هست یا این که . . .
a[href$=' .doc']
{
padding: 0 20px 0 0; background: transparent url(/graphics/icons/doc .gif)
no-repeat center right; }
١٧
- نشانگر pointer در CSS
با استفاده از خواص cursor می توانید شکل اشاره گر موشواره را تغییر تحول دهید . مقدار cursor: pointer منجر می شود که اشاره گر موشواره شبیه دست (مانند پیوند ها) بشود .
به عنوان مثال فرض فرمایید که می خواهیم اشاره گر موشواره بر روی همه عناصری که توسط کاربر قابل کلیک هستند، مشابه لینک و پیوند ها بشود .
در ذیل کد CSS برای انجام این عمل آمده است:
input[type=submit], label, select, .pointer
{
cursor: pointer; }
١٨
- با حروف درشت نوشتن متن
برای این که تمامی ی حروف یک متن با به کارگیری از حروف تعالی نمایش داده شود، می توانید از دستور text-transform به کارگیری نمائید . این فرمان معمولا برای نمایش دادن عنوان صفحه ها موثر است .
text-transform:
capitalize;
١٩
- حروف درشت کوچک
با
استعمال از دستور زیر، می توانید همه ی حروف متن قضیه نظر را با به کارگیری از حروف گران قدر (capital) بنویسید ولی سایز حروف هر واژه نسبت به حرف نخستین آن کلمه و واژه کوچک خیس خواهد بود (small caps)
font-variant:
small-caps;
٢٠
- برجسته کردن فیلد های محل ورود متنی
با استعمال از شیوه تحت می توانید فیلد های متنی که فوکوس را در اختیار دارا‌هستند را highlight کنیم .
ولی این منش در IE فعالیت نخواهد کرد
input[type=text]:focus,
input[type=password]:focus {
border:2px solid #000; }
٢١
- حذف کناره ی تصویر لینک شده
در تحت لینک های چهره یی (تصاویری که در داخل پیوند قرار گرفته باشند) یک کناره ی آبی رنگ رنگ زشت نمایش داده می شود . بهتر است که این حاشیه ی زائد را برای کلیه ی لینک و پیوند های چهره ای حذف کنیم و در صورتیکه موضوع خاصی را خواستیم با کناره سناریو دهیم، مجددا کناره را به آن بیش تر کنیم .
برای این منظور، از دستور پایین به کار گیری می کنیم:
a
img {
border: none; }
٢٢
- تروتمیز سازی فرم ها سوای استفاده از جدول
Tableless
form
آن زمانی که برای استایل دهی و مرتب سازی فرم ها از جدول ها به کار گیری می شد، گذشت . CSS به شما اجازه می دهد که فرم های قابل دسترس ساخت نمایید که دارنده طرحی مشابه جدول باشند ولی از جدول به هیچ عنوان در آن ها به کار گیری نشده باشد .
برای این خواسته از تگ استفاده می کنیم . با به کارگیری از تگ label می توانیم مطمئن شویم که دسترسی پذیری فرم بخش اعظم خواهد شد .
در ذیل یک مثال کد HTML و CSS مربوطه برای تولید یک فرم سوای به کارگیری از جدول آمده است و می توانید از آن به تیتر سرمشق برای طراحی فرم هایتان به کار گیری کنید:
کد
HTML
method="post" action="#" >
Username
admin
admin
Username
123654
••••••
Submit
کد
CSS
p
label{
width: 100px;
float: left;
margin-right: 10px;
text-align: right; }
به خواص for در تگ label اعتنا نمایید . for در واقع id ی عنصری میباشد که این label برای آن تهیه گردیده میباشد . label ها برچسب هایی هستند که برای فریم های متنی و . . . در برگه قرار می گیرند . بایستی با خاصیت for معین کنیم که این label برای کدام عنصر می باشد .
٢٣
- انتخاب یک سایز پایه‌ی مناسب برای صفحه تهیه و تنظیم سایز فونت به طور مطلوب به 62 .5% در تگ باعث می شود که 1em به نظر سایز هم اندازه 10px باشد . این فعالیت به شما اجازه می دهد که به سادگی و آسانی از واحد em استعمال فرمایید و بدانید که متساوی آن به پیکسل چقدر هست .
body
{ font-size: 62 .5%;
}
٢۴
- مالامال رنگ کردن تگ های acronym و abbr تگ acronym برای تالیف علامات اختصاری سرنام لغات اثر گذار می باشد و تگ abbr برای نوشتن کلمه ها اختصاری می باشد .
تگ های acronym و abbr داده ها مفیدی را برای کاربران، مرورگرها و موتور های کاوش آماده می نمایند . اما اکثر مرورگرها، به جز فایرفاکس، این تگ ها را به طور متفاوتی سناریو نمی دهند .
در ذیل ترفند CSS برای highlight کردن تگ های acronym و abbr آمده هست .
acronym,
abbr{
border-bottom: 1px dotted #333;
cursor: help; }
٢۵
- بازنشانی CSS بوسیله Eric Meyer قطعه کد CSS پایین همگی ی مقادیر پیش فرض مرورگر را بازنشانی می نمایند و سبب ساز می شود که کدهای css شما در همگی مرورگر به مدل ی یکسان عمل نماید و ناسازگاری مرورگر ها را خنثی می کند .
html,
body, div, span, applet, object, iframe, h1,
h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del,
dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b,
u, i, center, dl,
dt, dd, ol, ul, li, fieldset,
form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
body
{
line-height: 1; }
ol,
ul {
list-style: none; }
blockquote,
q {
quotes: none; }
blockquote:before,
blockquote:after, q:before,
q:after {
content: '';
content: none; }
/**
* remember to define focus styles!
*/ :focus
{
outline: 0; }
/**
* remember to highlight inserts somehow!
*/ ins
{
text-decoration: none; }
del
{
text-decoration: line-through; }
/**
* tables still need 'cellspacing="0"' in the markup
*/ table
{
border-collapse: collapse;
border-spacing: 0; }
-
امر کوتاه شده‌ی تنظیم فونت‌ها
برای
تهیه فونت ها در CSS احتمال دارد تا کنون به طریق پایین کار می کردید:
font-weight:
bold; font-style:
italic; font-variant:
small-caps; font-size:
1em; line-height: 1 .5em;
font-family:
verdana,sans-serif;
ولی
نیازی به به کار گیری از کد طولانی فوق نیست، زیرا به آسانی می توانید از کد کوتاه گردیده ی پایین هم استفاده کنید:
font: bold italic small-caps 1em/1 .5em
verdana,sans-serif;
رویه فوق خیلی خوب تر است، اما بایستی تنها به یک نکته اعتنا فرمایید که شیوه فوق فقط هنگامی عمل خواهد کرد که هر دو خواص font-family و font-size را مشخص و معلوم فرمایید . اندازه font-family همواره باید در انتهای خط قرار بگیرد و font-size باید دقیقا قبلی از font-family قرار بگیرد .
به
طور خلاصه می بضاعت چنین نوشت:
font:
FONT-WEIGHT FONT-STYLE FONT-VARIANT FONT-SIZE/LINE-HEIGHT FONT-FAMILY;
نکته ی دیگر این که در‌صورتی‌که مقادیر font-weight و font-style و font-variant را مشخص نکنید، مقادیر کلیه ی این ها به طور پیش فرض برابر normal هست .
٢
- استعمال از دو کلاس با هم
شما
می توانید به هر تگ html بیش از یک کلاس انتساب دهید به این ترتیب که در خواص class یک‌سری تا کلاس را به به کارگیری از space از هم قطع می کنید:
. . .
به این ترتیب، در css همگی ی rule هایی که به هر یک از کلاس های موجود انتساب داده گردیده باشد، برای آن تگ html استفاده خواهد شد .
دقت فرمایید که اگر برای یک عدد از کلاس ها، یک css rule تعریف شده باشد و برای کلاس بعدی rule متضاد آن توصیف شده باشد، کلاسی که در html نخستین آمده باشد، اولویت بیشتری خواهد داشت .
٣
- مقدار پیش‌فرض border در CSS
زمانی که border را برای یک عنصر تعریف می کنید، معمولا مقادیر width و color و style را معلوم می نمائید .
برای نمونه دستور تحت برای شما یک حاشیه‌ی سیاه رنگ یکنواخت به قطر 1 پیکسل تولید می کند:
border:
3px solid #000;
البته در امر فوق، فقط مورد ای که الزامی است، style است .
یعنی border: solid
اگر صرفا بنویسید border: solid برای بقیه ویژگی ها از مقدار پیش فرض به کار گیری خواهد شد .
ولی مقادیر پیش فرض، چه چیزی هستند؟ مقدار
پیش فرض برای پهنا حاشیه (border-width) برابر medium میباشد که نسبتاً متساوی 3 الی 4 پیکسل می باشد مقدار پیش فرض برای رنگ حاشیه (border-color) برابر رنگ نوشته درون حاشیه در نظر گرفته می شود .
در صورتی که مقادیر پیش فرض، برای شما مناسب است، می توانید میزان آن ها را معین نکنید تا از اندازه پیش فرض به کارگیری شود .
۴
- کد CSS مخصوص پرینت
بخش اعظم صفحات اینترنت به مدل ای پباده سازی می شوند که برای سناریو در مانیتور کامپیوتر مناسب باشد . البته اگر تصویر صفحه ی وب را با به کار گیری از پرینتر بر روی برگه چاپ کنیم، دوچندان جذاب نمی شود .
معمولا خوبتر می باشد که در هنگام چاپ یک ورقه ی وب، فقط مطالب حساس آن چاپ شود و همینطور نیازی به جلوه های گرافیکی و رنگ زمینه و . . . نیست . عرض کاغذ باید با پهنا صفحه سازگار باشد و از فضای صفحه به طور باصرفه استفاده شود و . . .
برای رسیدن به این هدف، اکثرا وب وبسایت ها، صفحاتی را به طور منحصر به فرد برای پرینت طراحی می کنندو به این مضمون که هر کاغذ یا مقاله را در یک نسخه ی غیروابسته برای پرینت نیز تهیه می نمایند .
البته
راه دیگری هم وجود داراست و آن این می باشد که کدهای css متفاوتی را برای پرینت بنویسیم
برای
این منظور، باید در تگ head یک پوشه css تازه را برای print مشخص و معلوم کنیم و بایستی خاصیت media را در تگ link با میزان "print" مشخص کنیم
media="screen" /> media="print" />
خواص media مشخص و معلوم می کند که فولدر css فوق برای چه ابزاری قابل استفاده میباشد . screen به معنی ورقه نمایش کامپیوتر می باشد و print به مضمون پرینتر است . با استعمال از دستور فوق، هنگامی که استفاده کننده می خواهد برگه ی وب را پرینت بگیرد، به طور مداد از فایل css دوم استعمال خواهد شد .
ولی در باطن فایل printstyle .css چه کدی بنویسیم؟ کافی میباشد کدهایی بنویسیم که برگه برای ورقه بهینه شود . برای این منطور معمولا می بایست نوارهای کناری سایت را با استفاده از فرمان display:none پنهان کنیم چون معمولا شامل داده ها مفیدی برای چاپ نمی باشند . همچنین باید رنگ مورد ی عناصر را حذف کنیم و همه ی موادتشکیل دهنده و تصاویر گرافیکی که جنبه ی تزئینی دارا‌هستند را حذف کنیم و همینطور می توانیم فونت مطلوب چاپ به کار گیری کنیم و برای سایز فونت ها هم از واحد هایی مانند pt استفاده کنیم . . .
۵
- تکنیک جایگذاری تصویر
همواره توصیه می شود که برای سناریو متن، از کد معمولی html به کارگیری نمائید و از تصویر برای نمایش متن جلوگیری فرمائید .
این سبب ساز می شود که سرعت بار گذاری برگه ی اینترنت بالا برود و همینطور ورقه ی وب بیشتر قابل دسترس باشد (به تیتر مثال برای افراد نا بینا با استفاده از مرورگر های ورقه خوان)
با این حال، گهگاه اوقات ممکن هست بخواهید به جای نوشته از تصویر استفاده نمائید . به عنوان نمونه فرض فرمائید که در بالای تمامی صفحه ها سایتتان، عبارت "خرید آنلاین" وجود داراست و شما می خواهید که این عبارت را با یک فونت خیلی مختص نمایش دهید که هیچ مرورگری از آن پشتیبانی نمی کند . در این صورت، احتمال دارد فقط گزینه ای که وجود دارااست این میباشد که به جای نوشته فوق، یک تصویر قرار دهید .
یک
رویه واضح این خواهد بود که به رخ پایین فعالیت کنید:
alt="Buy online" />
اما شما می خواهید که در موتور های جستجو، برای عبارت فوق، کاغذ ی شما در لیست ظاهر شود . موتور های جستجو هم به متن باطن alt به مقدار ی متن داخل صفحه ها اینترنت اهمیت نمی دهند .
و بهتر میباشد که عبارت به صورت پایین باشد:
Buy
online
برای
حل این اختلال می بضاعت و توان از تکنیک جایگذاری تصویر با متن به کار گیری کرد: نوشته را با کد معمولی html می نویسیم و سپس به امداد css تصویر را با متن جایگزین می کنیم
h1
{ background: url(buy-image .gif)
no-repeat;
height: 100px;
text-indent: -2000px; }
اطمینان حاصل نمایید که اندازه ارتفاع تصویر را به صحت مشخص و معلوم کنید .
با خط مش فوق، متن 2000 پیکسل به سمت کاغذ ی نمایش خواهد رفت و از کاغذ خارج خواهد شد و دیگر سناریو داده نمی شود و به جای آن تصویر سناریو داده می شود .
توجه نمائید که این کار منجر می شود که کاربرانی که نمایش تصویر را در مرورگر خویش غیر فعال کرده اند، حاذق به مشاهده ی متن نخواهند بود .
۶
- جایگزین CSS box model hack
. . .
٧
- شرایط دهی یک عنصر بلوکی در وسط
برای ساخت یک طرح با پهنا اثبات در میانه صفحه، یک رویه این می باشد که کل محتویات ورقه را درون یک
قرار دهید . دقت کنید که
یک عنصر بلوکی است .
برای قرار دادن یک عنصر بلوکی در وسط، کافی است که عرض آن را مشخص و معلوم فرمایید و بعد از آن margin چپ و راست آن را با میزان auto مشخص نمائید .
به تیتر مثال:
div#content
{
width: 700px;
margin: 0 auto }
با استعمال از منش فوق، مرورگر، فاصله ی چپ و راست عنصر بلوکی را به طور خودکار حساب و کتاب می نماید و با نیز برابر قرار می دهد و به این ترتیب عنصر به صورت افقی در میانه قرار می گیرد .
البته راه و روش فوق در ورژن های قدیمی مرورگر IE کار نمی نماید .
برای این که این راه در همه مرورگر ها فعالیت کند، می توانیم از تکنیک پایین استعمال کنیم:
body
{
text-align: center; }
div#content
{
width: 700px;
margin: 0 auto; }
توجه نمایید که text-align را برای عنصر body برابر center در لحاظ گرفتیم . به این ترتیب کلیه ی عناصر در اواسط کاغذ متمرکز می شوند . اما از آن جایی که می خواهیم موادسازنده در سمت چپ باشند، مجددا اندازه text-align را برای div مورد نظرمان اندازه دهی می کنیم .
به این ترتیب روش فوق در مرورگرهای سابق نیز عمل خوهد کرد .
٨
- چیدمان عمودی با CSS
دکوراسیون عمودی با استعمال از table ها یک شیوه ابلهانه بود! در جدول ها، برای این که محتوای یک خانه، به حیث عمودی در اواسط خانه‌ی جدول قرار گیرد، می توانستیم از خاصیت vertical-align با مقدار middle استفاده کنیم .
البته این خط مش در یک طرح مبتنی بر CSS کار نخواهد کرد .
تصور نمایید که یک منوی ناوبری در تارنما دارید که ارتفاع آن به میزان ی 2em اندازه دهی گردیده میباشد . حالا در CSS از دستور vertical-align استفاده می کنید .
البته
به کارگیری از vertical-align هیچ تاثیری نخواهد گذاشت و نوشته کماکان در بالای جعبه قرار خواهد گرفت!
پس
چه باید کرد؟ کافی
میباشد که اندازه line-height را برابر height عنصر موضوع لحاظ قرار دهید! در این جا ارتفاع عنصر مسئله لحاظ ما 2em است، لذا به آسانی کافی هست که اندازه line-height را برابر 2em تهیه و تنظیم کنیم و نوشته در وسط باکس قرار خواهد گرفت .
٩
- شرایط دهی درون یک ظرف
یک عدد از بهترین خصوصیت های CSS این می باشد که می توانید یک عنصر را حتما در هر جایی از صفحه ی اینترنت قرار دهید .
همچنین این قابلیت وجود دارااست (و اغلب سفارش هم می شود) که یک عنصر را در باطن یک ظرف حافظ موفعیت دهی کنید .
برای این مراد کافی میباشد که امر زیر را برای تگ حفظ کننده بنویسید:
#container
{
position: relative; }
از این پس، هر عنصری که در #container قرار بگیرد، وضعیت دهی آن بر اساس حالت ظرف محافظ خواهد بود . (یعنی دیگر بر پایه کل گواهی برگه ی اینترنت موقعیت دهی نمی شود .)
به عنوان نمونه کد HTML تحت را در لحاظ بگیرید:
id="container">
. . .
حال
برای وضعیت دهی یک عنصر دقیقا 30px از سمت چپ و 5px از سمت بالای ظرف نگهدارنده، کافی میباشد کد پایین را بنویسیم:
#navigation
{
position: absolute;
left: 30px;
top: 5px; }
ولی در این مسئله خاص، شما می توانستید، با به کارگیری از فرمان margin: 5px 0 0 30px نیز همین فعالیت را انجام دهید .
با این درحال حاضر در بعضا شرایط، خوبتر میباشد (یا اضطراری است) که از موقیت دهی به راه و روش ی ذکر شده استفاده نمایید
نکته
در‌صورتی‌که
یک عنصر به وضعیت دهی (position) مطلق (absolute) در درون یک عنصر با وضعیت دهی نسبی (relative) قرار بگیرد، مقادیر top و left و bottom و right عنصر درونی، بر مبنا حاشیه ی عنصر بیرونی محاسبه خواهد شد (نه بر اساس پنجره ی مرورگر)
