آموزش CSS

Cascading-Style-Sheets
دسته بندی ها: آموزش CSS

تراز کردن عمودی متن در CSS

مشخصه vertical-align مشخص می کند که متن به صورت عمودی نسبت به دیگر عناصر مانند متن های دیگر یا یک تصویر چگونه باید قرار بگیرد.

می توانید یکی از هشت مقدار توصیفی زیر را به مشخصه vertical-align نسبت دهید:

  • bottom (پایین)
  • baseline (خط مبنا)
  • middle (وسط)
  • sub (حالت ساب اسکریپت مانند H2)
  • super (حالت سوپراسکریپت مانند C2)
  • text-top (بالای متن)
  • top (بالا)

یا می توانید یک اندازه را برحسب پیکسل وارد کرده و مقدار جابه جایی متن از خط مبنا را مشخص کنید. به عنوان مثال مقدار ۴px باعث می شود تا متن چهار پیکسل بالای خط مبنا قرار بگیرد.

به خاطر داشته باشید

خط مبنا (baseline) یک خط فرضی است که تمام متن ها روی آن قرار می گیرند و مانند خط درون دفترها عمل می کند.

ترازبندی نسبت به مشخصه line-height انجام می شود که توسط متن مورد استفاده قرار می گیرد. اغلب مقادیری که می توانید برای vertical-align استفاده کنید، دارای عملکرد واضحی هستند اما text-bottom به معنی این است که از خط مبنا چشم پوشی شده و از خط فرضی استفاده می شود که در پایین حرف های قرار می گیرد که بیشترین ارتفاع از پایین را دارند (مانند یک خط در پایین حروف p و y که دارای پایین ترین مکان هستند).

همیشه از خط مبنا برای تراز کردن عمودی حروف استفاده می شود مگر این که با مشخصه vertical-align حالت دیگری را مشخص نمایید.

atelier-sololearn-une-application-apprendre-coder_0

ایجاد یک طرح بندی صفحه با مشخصه های float و clear

بعد از این که مشخص های float و clear آشنا شده و به راحتی از آنها استفاده کردید، می توانید از آنها در طراحی صفحه وب خود استفاده کرده و متوجه قدرت CSS شوید. فرض کنید که می خواهید یک طرح بندی صفحه سه ستونی با یک سر صفحه و پا صفحه ایجاد نمایید. با استفاده از عنصرهای div، کد HTML به این صورت است:

<html>
<head>
<title>Three Column Liquid Layout</title>
</head>
<body>
<div id="header">
Header</div>
<div id="leftcolumn">
Left column</div>
<div id="rightcolumn">
Right column</div>
<div id="bodytext">
Main page text goes here.</div>
<div id="Footer">
Footer</div>
</body>
</html>

بدون CSS، این عناصر سطح بلاک به صورت پیش سرهم نمایش داده می شوند یعنی از بالا به پایین صفحه. اما با استفاده از مشخصه های float و clear می توانید این ساختار ساده را به یک طرح بندی زیبا تبدیل کنید.

برای شروع کار، تمام تنظیمات پیش فرض margin و padding را برابر صفر قرار دهید:

body {
margin: 0px;
padding: 0px;
}

پس، عناصر div با نام header و footer باید پهنای کل صفحه را اشغال کنند (یعنی پهنای ۱۰۰ درصد). اما به دلیل این که عنصر footer آخرین مورد است، باید به صورت صریح از clear:both استفاده کنید تا مطمئن شوید که همیشه در پایین عنصرهای leftcolumn، rightcolumn و bodytext قرار دارد. در این جا قانون های لازم برای این عنصرها را می بینید:

#header {
width: 100%;
background-color: #CCCCCC;
}
#footer {
width: 100%;
clear: both;
background-color: #CCCCCC;

عنصرهای div وسط حاوی محتویات صفحه هستند. شما پهنای این سه بلاک را تغییر می دهید و از مقادیر درصدی استفاده می کنید: ستون bodytext پهنای برابر با ۶۰ درصد و ستون های leftcolumn و rightcolumn پهنای برابر با ۲۰ درصد را به دست می آورند. در اینجا کد برای این موارد را می بینید:

#leftcolumn {</p>
float: left;
width: 20%;
height: 600px;
background-color: #999999;
}
#rightcolumn {
float: right;
width: 20%;
height: 600px;
background-color: #999999;
#bodytext {
float: left;
background: #fff;
width: 60%;
height: 600px;
}

به خاطر داشته باشید

به دلیل این که طرح بندی صفحه شما نسبت به اندازه پنجره مرورگر تغییر می کند، به همین خاطر به آن طرح بندی مایع (Liquid Layout) می گویند. اگر می خواهید تا اندازه ستون ها ثابت باشد، می توانید مقادیر درصد پهنا را تغییر داده و از یک واحد ثابت (مانند پیکسل یا em) استفاده کنید. انجام این کار یک طرح بندی ثابت ایجاد می کند که به اندازه پنجره مرورگر بستگی ندارد، بنابراین اندازه آن تغییر نمی کند.

کدهای کامل برای این مثال به شرح زیر است:

طرح بندی مایع سه ستونی

<html></p>
<head>
<title>Three Column Liquid Layout</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#header {
width: 100%;
background-color: #CCCCCC;
}
#footer {
width: 100%;
clear: both;
background-color: #CCCCCC;
}
#leftcolumn {
float: left;
width: 20%;
height: 600px;
background-color: #999999;
}
#rightcolumn {
float: right;
width: 20%;
height: 600px;
background-color: #999999;
}
#bodytext {
float: left;
background: #fff;
width: 59%;
height: 600px;
}
</style>
</head>
<body>
<div id="header">
Header</div>
<div id="leftcolumn">
Left column</div>
<div id="rightcolumn">
Right Column</div>
<div id="bodytext">
Main page text goes here.</div>
<div id="footer">
Footer</div>
</body>
</html>
1023

استفاده از مشخصه clear روی عنصر شناور

وقتی از مشخصه float استفاده می کنید، بعضی وقت ها لازم است که کنترل بیشتری روی چگونگی جریان سند دور عنصر شناور داشته باشید. می توانید از مشخصه clear برای جلوگیری از ظاهر شدن یک عنصر در فضای افقی یکسان با کادر شناور، استفاده کنید. مقادیر این مشخصه: left، rifht، both و none می باشد.

وقتی یک عنصر دارای مقدار left، right یا both (هر دو) برای مشخصه clear باشد، در پایین عنصر شناور قرار گرفته و در خط موجود بعدی نمایش داده می شود.

بعنوان مثال فرض کنید که می خواهید مطمئن شوید یک تیر در پایین یک تصویر شناور نمایش داده شود:

<img src=monkey_sighting.gif" height="230" width="40" style="float: right"></p>
<p dir="ltr" style="text-align: left;"><h1 style="clear: right">Monkey Sighted at Church</h1>

وقتی لازم است چند تصویر یا بخش div را در بالای یکدیگر شناور کنید (به جای این که کنار یکدیگر قرار بگیرند) استفاده از مشخصه clear بسیار مفید است. برای نمایش سه تصویر در سمت راست یک صفحه، من یک class با نام floatMonth به آنها اضافه می کنیم:

<html></p>
<p dir="ltr" style="text-align: left;"><head></p>
<p dir="ltr" style="text-align: left;"></head></p>
<p dir="ltr" style="text-align: left;"><body></p>
<p dir="ltr" style="text-align: left;"><img src="nov.png" class="floatMonth"></p>
<p dir="ltr" style="text-align: left;"><img src="dec.png" class="floatMonth"></p>
<p dir="ltr" style="text-align: left;"><img src="jan.png" class="floatMonth"></p>
<p dir="ltr" style="text-align: left;"><p>These images show the results of the last three months of the last three months of the sales performance for orange computers</p></p>
<p dir="ltr" style="text-align: left;"></body></p>
<p dir="ltr" style="text-align: left;"></head>

سپس یک شیوه CSS برای کلاس floatMonth ایجاد می کنم که از clear و float استفاده میکند:

img.floatMonth {</p>
<p dir="ltr" style="text-align: left;">float: right;</p>
<p dir="ltr" style="text-align: left;">clear: right;</p>
<p dir="ltr" style="text-align: left;">margin: 5px;</p>
<p dir="ltr" style="text-align: left;">}

مشخصه clear باعث می شود که تصاویر از بالا به پایین نمایش داده شده در حالی که متن پاراگراف عادی در سمت چپ ظاهر می شود.

badges_iPhone_CrystalBall_Stage6

شکستن جریان عادی با عناصر شناور در CSS

اغلب عناصر صفحه ای که می خواهید فرمت هایی روی آنها اعمال کنید – مانند پاراگراف ها یا divها – در حقیقت عناصر سطح بلاک هستند. وقتی آنها را به صفحه خود اضافه می کنید، آنها به “جریان” (Flow) عادی از بالا به پایین سند اضافه می شوند. یک عنصر سطح بلاک پهنای کامل مخفظه ای که در آن است را اشغال کرده و با یک خط بعد و قبل از خود، از دیگر عناصر سند جدا می شود.

اما دقت کنید که می توانید از مشخصه float برای شکستن جریان عادی متن بدنه استفاده کنید. وقتی مشخصه float را به یک عنصر نسبت می دهید، تبدیل به یک عنصر وصل نشده (“شناور”) می شود، می توانید مشخص کنید که باید به چپ یا راست خط کنونی برود. مقادیر ممکن برای این مشخصه عبارتند از right، left و none.

وقتی یک عنصر را شناور می کنید، مرورگر عنصر را تا حد امکان به چپ ترین یا راست ترین مکان خط کنون که عنصر در آن تعریف شده است می فرستد. بنابراین عنصرهای سطح بلاک که در بالای عنصر شناور تعریف شده اند تاثیر نمی پذیرند. اما عناصر سطح بلاک که در زیر عنصر شناور هستند در اطراف آن پخش می شوند.

به خاطر داشته باشید

برای شناور کردن یک عنصر، باید به صورت صریح پهنای آن را تعریف کنید. وگرنه هنگام نمایش صفحه در مرورگر، نتایج غیرعادی ظاهر می شوند.

برای درک بهتر، من کار را با یک مثال کوچک شروع می کنم تا به شما نشان دهم که چگونه شناور کردن عناصر کار می کند و سپس به سراغ یک مثال کامل تر می رویم.

در اینجا یک سند کوچک HTML را می بینید:

<html></p>
<head>
</head>
<body>
<div id="sidebar">
<h2>Sidebar</h2>
<p>Sidebar text.</p>
</div>
<h1>Main Content</h1>
<p>Regular document text.</p>
</body>
</html>

در این مثال، می خواهم تا div را در سمت راست صفحه شناور کنم تا همانند یک سایدبار رفتار کند. برای انجام این کار، من شیوه CSS زیر را تعریف می کنم:

#sidebar {</p>
float: right;
width: 150px;
margin: 0px 20px 5px 10px;
}

این قانون جریان را به سمت راست شناور می کنم و پهنای عنصر سطح بلاک را برابر با ۱۵۰px قرار داده و سپس یک حاشیه روی آن اعمال کرده تا فاصله بین عنصر شناور و بقیه صفحه را تعیین کند.

نکته: وقتی پهنای کلی که عنصر روی یک صفحه اشغال می کند را تعیین می کنید، مطمئن شوید که حواستان به فاصله، حاشیه، خط دور و پهنای خود محتویات است.

badges_css_basics_stage1

وسط قرار دادن عناصر روی یک صفحه با CSS

می توانید با استفاده از حاشیه های چپ و راست یک عنصر و برابر قرار دادن آنها با auto، یک عنصر را وسط صفحه به صورت افقی قرار دهید. فرض کنید که یک عنصر div با پهنای ثابت دارید (با یک id=”main”) که بعنوان محفظه برای همه عناصر درون صفحه عمل می کند. به صورت پیش فرض خود div از حالت چپ چین استفاده می کند. اما اگر حاشیه های چپ و راست را برابر با auto قرار دهید، عنصر در وسط مرورگر ظاهر می شود. بعد از این که یک حاشیه صفر در بالا قرار دادید، کد به این صورت می شود:

#main {</p>
<p dir="ltr" style="text-align: left;">width: 796px;</p>
<p dir="ltr" style="text-align: left;">margin-left: auto;</p>
<p dir="ltr" style="text-align: left;">margin-right: auto;</p>
<p dir="ltr" style="text-align: left;">margin-top: 0;</p>
<p dir="ltr" style="text-align: left;">} 

در این جا یک روش سریع برای فشرده کردن این سه مشخصه درون یک کد را می بینید:

#main {</p>
<p dir="ltr" style="text-align: left;">width: 796px;</p>
<p dir="ltr" style="text-align: left;">margin: 0 auto;</p>
<p dir="ltr" style="text-align: left;">}

با این که این تکنیک روش مناسب تر برای استفاده از CSS به منظور وسط قرار دادن افقی یک عنصر است، اما یک باگ در نسخه قدیمی تر اینترنت اکسپلورر باعث می شود که استفاده از آن سخت باشد. باید قوانینی برای این باگ وارد کنید. به خصوص، همه چیز در بدنه را با text-align:center در وسط قرار داده و سپس مشخصه text-align در عنصرهای فرزند را با استفاده از text-align دوباره مقدار بدهید. در اینجا ظاهر کد را می بینید:

body {</p>
<p dir="ltr" style="text-align: left;">text-align: center; /* IE workaround */</p>
<p dir="ltr" style="text-align: left;">}</p>
<p dir="ltr" style="text-align: left;">#main {</p>
<p dir="ltr" style="text-align: left;">width: 796px;</p>
<p dir="ltr" style="text-align: left;">margin: 0 auto;</p>
<p dir="ltr" style="text-align: left;">text-align: left; /* IE workaround */</p>
<p dir="ltr" style="text-align: left;">}

Mouse-cursor-hand-pointer.svg

تغییر شکل ماوس

می خواهم در این بخش یک مشخصه CSS دیگر را نیز معرفی کنم. با این که نسبت به دیگر مشخصه های قبل که درباره آنها صحبت کردم این مشخصه دارای کاربرد کمتری است اما در بعضی مواقع کمک مناسبی برای شما است. مشخصه cursor در CSS به شما اجازه میدهد تا وقتی ماوس روی یک عنصر درون صفحه وب قرار گرفت. شکل نشانگر آن را تغییر دهید. لیست مقادیر معمول برای مشخصه cursor عبارتند از:

کلمه کلیدی چیزی که نمایش می دهد
auto,default نشانگر عادی ماوس
wait نشانگر ساعت شنی
crosshair نشان گر شبیه به نشانه تفنگ
text. نشانگر انتخاب متن به شکل I
pointer نشانگر به شکل دست
help نشانگر به شکل علامت سوال

برای مثال به منظور تغییر دادن نشانگر به یک شکل علامت سوال در زمانی که ماوس روی یک لینک قرار می گیرد از این قانون استفاده می کنید :

a { cursor : help ; }
css-background-position

اضافه کردن یک پس زمینه

هر عنصر دارای یک مشخصه پس زمینه است که به صورت پیش فرض شفاف بوده اما میتوان آن را با مشخصه های background تغییر داد. پس زمینه یک عنصر در پشت محتویات آن قرار می گیرد اما دارای هیچ حاشیه یا خط دوری نیست. پس زمینه همیشه روی کادر عنصر اعمال میشود حتی اگر یک عنصر درون خطی باشد.

می توانید یک رنگ یا تصویر را به عنوان پس زمینه برای یک عنصر مورد استفاده قرار دهید. برای این کار از مشخصه های background-color(برای رنگ پس زمینه و background-image (برای تصویر پس زمینه) مشخصه های استفاده می کنید:

  • مشخصهbackground-color

می تواند هر مقدار رنگی را دریافت کند یا می توانید از مقدار transparent (برای حالت شفاف) برای آن استفاده نمایید. برای مثال، به منظور سیاه کردن پس زمینه body  از خط زیر استفاده کنید:

body{background_color : #000000; }
  • مشخصه background-image

    به شما اجازه میدهد تا یک تصویر را به عنوان پس زمینه عنصر مورد استفاده قرار دهید. برای مشخص کردن مکان فایل تصویر از یک تابع ( url استفاده کرده یا از کلمه کلیدی none استفاده می نمایید(تا تصویری برای پس زمینه اعمال نشود). برای مثال به منظور اعمال یک تصوری به عنوان پس زمینه بدنه یک صفحه وب، از قانون زیر استفاده می کنید:

body{
background-image :url("/images/bg.gif");
}

می توانید مقدار تابع url را درون کوتیشن مارک قرار دهید. با این که این کوتیشن مارکها دلخواه هستند. بنابراین کد زیر نیز به خوبی کار می کند:

body{
background-image : url(/images/bg.gif);
}
  • مشخصه background-repeat

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

    مقدار تصویری به این صورت نمایش داده می شود
    repeat تصویر را در راستای افقی و عمودی تکرار می کند.
    repeat-x تصویر تنها در راستای افقی تکرار می کند.
    repeat-y تصویر را تنها در راستای عمودی تکرار می کند.
    no-repeat تصویر تکرار نمی شود.

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

body{
background-image : url ("../images/bg.gif");
background-repeat : repeat-y ;
}
4

تعیین حاشیه به صورت خودکار

وقتی اندازه محتویات یا یک حاشیه را تعیین میکنید، می توانید از اندازه های دقیق مانند ۱ernیا ۱۵px استفاده نمایید. روش دیگر استفاده از کلمه کلیدی auto است که به مرورگر اجازه میدهد تا اندازه صحیح را حساب کند. فرض کنید که می خواهید یک حاشیه ثابت برابر با ۱۵ پیکسل را در سمت راست یک پاراگراف مورد استفاده قرار داده امامی خواهید حاشیه سمت چپ به صورت خودکار توسط مرورگر تعیین شود تا حاشیه ۱۵ پیکسلی سمت راست همیشه ثابت نگه داشته شود. کد برای این کار دارای چنین ظاهری خواهد بود:

{</p>
<p dir="ltr" style="text-align: left;">margin_right:15px;</p>
<p dir="ltr" style="text-align: left;">margin-left: auto ;</p>
<p dir="ltr" style="text-align: left;">}

در عمل این شیوه پاراگراف را در یک مکان افقی در پنجره مرورگر ثابت نگه میدارد (یعنی در فاصله ۱۵ پیکسلی از سمت راست)، حتی اگر کاربر اندازه پنجره مرورگر را تغییر دهد بازهم وضعیت به این شکل خواهد بود.

همان طور که در این مثال نشان داده شد، اگر شما حاشیه های سمت چپ و راست را تعیین کرده اما پهن یک عنصر را تعیین نکنید، پهنای عنصر تغییر داده شده تا حاشیه های مشخص شده ثابت نگه داشته شوند.

اخطار

با این که اگر تمام سه مشخصه مربوط به فضای افقی را تعیین کنید (یعنی مشخصه margin-leftوwidthو margin-right) و آنها را برابر با یک مقدار مطلق (ما ۲۵۰px) قرار دهید، به آسانی می توانید یک قانون ایجاد کنید که مرورگر نتواند آن را صورت منطقی اعمال کند. به عنوان نتیجه، یکی از این سه اندازه گیری باید حذف شود بتوان بقیه را نگه داشت. مشخصه  margin-rightتنها مشخصه ای است که توسط مرورگر حذف میشود و مقدار آن برابر با auto قرار داده می شود.

boxmodel

صفر کردن تنظیمات حاشیه و فاصله گذاری

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

{margin:0 ; padding:0 ; }

fig-margin-top@2x

اضافه کردن حاشیه ها به دور یک عنصر

شما از مشخصه margin برای اضافه کردن فاصله بین کادر یک عنصر و عنصر دیگر استفاده می کنید. می توانید این مشخصه را برحسب واحدهای طول(پیکسل یا em) بیان کنید یا از یک مقدار درصدی استفاده نمایید یا از کلمه کلیدی auto برای تعیین خودکار حاشیه استفاده نمایید.

  • margin-top
  • margin-left
  • margin-right
  • margin-bottom

فرض کنید که می خواهید مقدار کمی فاصله بعد از هر تیر h1  قرار دهید. برای انجام این کار، حاشیه را با کد زیر وارد می کنید:

h1{ margin-bottom: .75em}

نکته :

حاشیه همیشه شفاف است که باعث می شود پس زمینه پدر همیشه نمایش داده شود.

از تابت auto برای وسط قرار دادن افقی یا عمودی یک عنصر استفاده می کنید. به دلیل این که margins:auto; مربوط به موقعیت است، چگونگی کار کردن با آن را در ادامه توضیح خواهیم داد .