در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش گام به گام CSS قسمت دوازدهم: جهت ها, تراز ها و غلظت

در یک صفحه وب همه المنت ها نباید در جهت یا تراز پیش‌فرض مرورگر باشد, شما می‌توانید متن ها, تصاویر و… را به هر سمتی که دوست دارید ببرید. البته برای المنت های مختلف باید راههای متفاوتی را امتحان کرد.

تراز بندی متون: برای آنکه جهت گیری متون را تغییر دهید به صورت منحصر به فرد می‌توانید از خاصیت text-align استفاده کنید. به مثال زیر توجه کنید:

p
{
	text-align: center;
}

البته توجه کنید برای اینکه متن را به صورت راست به چپ یا چپ به راست قرار دهید نباید از این خاصیت استفاده کنید بلکه باید به خاصیت‌های تگ body برگردید. یکی از مهمترین خاصیت‌های تگbody خاصیت dir بود که مقادیر ltr , rtl را دریافت می کرد. مثال زیر برای یک متن راست به چپ اشتباه است:

<p style="text-align:right;">
		این یک متن راست به چپ است.
</p>

راه درست برای نمایش یک متن راست به چپ به دو صورت است:

۱- از خاصیت dir در تگ body استفاده کنید. در این صورت تمامی متون از طرف راست به چپ قرار می گیرند. به مثال زیر توجه کنید:

<body dir="rtl">
</body>

۲- از خاصیت direction در CSS بهره ببرید. برای مثال زمانی که می‌خواهید فقط یک متن مشخص به صورت راست به چپ باشد باید از این حالت استفاده کنید.

p
{
direction: ltr;
}

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

جهت وسط: اگر می خواهید یک تصویر و یا هر چیز دیگر بغیر از متن در وسط صفحه قرار بگیرد می توانید به دو روش اینکار را انجام دهید.

۱- روش استاندارد: اگر یک المنت در صفحه وب دارای مقدار عرض باشد می توان با مقدار دهی margin:auto در هر شرایطی المنت را در وسط صفحه قرار دهید. حتی اگر مرورگرتان را کوچک یا بزرگ کنید. مثال زیر را اجرا کنید:

.box
{
	width: 500px;
	height: 100px;
	background: #000000;
	margin: auto;
}

۲- روش غیر اصولی: می توانید مقدار صفحه وب را اندازه گیری کرده و سپس مقدار margin-left یا margin-right را برابر یک دوم اندازه صفحه قرار دهید. البته این روش کاملا اشتباه است.

جهت راست و چپ: برای اینکه جهت یک تصویر را به سمت راست یا چپ ببرید می توانید از روش دوم که در بالا ذکر کردم استفاده کنید اما باز هم این روش کاملا غیر اصولی می باشد. روش استاندارد این است که از مقادیر position:absolute استفاده کنید.همانطور که می دانید در این روش می توانید از مقادیر right,left,top , bottom استفاده کنید.برای مثال اگر مقدار right:0; باشد تصویر مورد نظر به سمت راست تغییر مکان می دهد. به این مثال توجه کنید:

.box
{
	width: 500px;
	height: 100px;
	background: #000000;
	position: absolute;
	right: 0px;
}

جهت گیری عمودی: اگر یک کادر را در نظر بگیرید می توانید متن خود را در هر کجای این کادر قرار دهید البته نه با position و یا margin بلکه با padding اگر یادتان باشد گفتیم اگر بخواهیم المنت داخلی را تراز بندی کنیم باید از padding استفاده کنیم. به مثال زیر توجه کنید:

.center {
    padding: 70px 0;
    border: 3px solid green;
}

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_گام_به_گام_css #آموزش_css #آموزش_سی_اس_اس #آموزش_مقدماتی_css
عنوان
1 آموزش گام به گام CSS قسمت اول : معرفی و آشنایی با نوشتن دستورات رایگان
2 آموزش گام به گام CSS قسمت دوم: شیوه های استفاده از CSS رایگان
3 آموزش گام به گام CSS قسمت سوم : رنگ ها و پشت زمینه ها رایگان
4 آموزش گام به گام CSS قسمت چهارم: حاشیه ها رایگان
5 آموزش گام به گام CSS قسمت پنجم: Margin , Padding , height , Width رایگان
6 آموزش گام به گام CSS قسمت ششم: متون رایگان
7 آموزش گام به گام CSS قسمت هفتم : فونت‌ و قالب‌های متنی رایگان
8 آموزش گام به گام CSS قسمت هشتم: لینک ها و لیست ها رایگان
9 آموزش گام به گام CSS قسمت نهم: جداول رایگان
10 آموزش گام به گام CSS قسمت دهم: Display و Max-width رایگان
11 آموزش گام به گام CSS قسمت یازدهم: موقعیت ها , Overflow رایگان
12 آموزش گام به گام CSS قسمت دوازدهم: جهت ها, تراز ها و غلظت رایگان
13 آموزش گام به گام CSS قسمت سیزدهم: شفافیت رایگان
14 آموزش گام بە گام CSS: قسمت چهاردهم: واکنشگرایی چیست؟ رایگان
15 آموزش گام بە گام CSS: قسمت پانزدهم: Viewport چیست؟ رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....