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

و

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

آموزش گام به گام CSS قسمت دهم: Display و Max-width

در جلسه گذشته درباره استایل های جداول نکاتی آموختیم امروز می خواهیم با دو خاصیت پرکاربرد دیگر آشنا شویم پس با من همراه باشید!

حالت های نمایش یا Display: قالب نمایشی عناصر وب عمدتا یکسان هستند, اما گاهی اوقات باید تغییر کنند. پیش از اینکه وارد دستورات مورد نظر شوم می خواهم چند تعریف از شیوه های نمایش عنصر در صفحه وب را به شما بیاموزم.

• حالت اول block: خیلی اوقات یک عنصر وب بدون باقی گذاشتن فضا یک خط را کاملا اشغال می کنند. تصویر زیر می تواند بهتر نمایانگر این قضیه باشد.

آموزش گام به گام  CSS قسمت دهم: Display و Max-width

بعضی از عناصر وب به صورت پیشفرض در این حالت نمایش داده می شوند مثل:

1. div

2. h1 – h6

3. p

4. form

5. section

• حالت دوم inline: در این حالت عنصر مورد نظر فقط به بخشی از خط مورد نظر دسترسی پیدا می کند. تصویر زیر می تواند بهتر نمایانگر این قضیه باشد.

آموزش گام به گام  CSS قسمت دهم: Display و Max-width

بعضی از عناصر وب به صورت پیشفرض در این حالت نمایش داده می شوند مثل:

1. <span>

2. <a>

3. <img>

نکته: تگ هایی که معرفی کردم صرفا به صورت پیش فرض اینگونه هستند اما این بدان معنا نیست که نتوان مقدارهایشان را تغییر داد. خیلی راحت می توان توسط خاصیت display مقدار block یا inline آنها را تغییر دهید.

a {
    display: block;
}

مخفی کردن عناصر وب: برای آنکه عنصری در صفحه وب مخفی شود می توانید از این عنصر استفاده کنید. یک مثال از این کاربرد, زیر منوها هیچوقت در حالت عادی نباید نمایش یابند, تا زمانی که روی منوی اصلی hover کرد. برای اینکار باید ابتدا زیر منوها را مخفی کنید. برای مخفی کردن می توانید از خاصیت display و یا visibility استفاده کنید. به دو مثال زیر توجه کنید.

p
{
	visibility:hidden;
}

یا

p
{
	display:none;
}

اگر مقدار خاصیت visibility را برابر visible قرار دهید عنصر مورد نظر به حالت پیشفرض باز می گردد.

p
{
	visibility:visible;
}

تعیین بیشترین عرض با Max-width: در درس های قبلی اشاره کردم که زمانی بخواهید یک عنصر به صورت دقیق در هر صورتی وسط صفحه قرار بگیرد باید از خاصیت margin:auto استفاده کند. در شرایطی هم که اندازه صفحه مرورگر تغییر کند عنصر مورد نظر باز هم در وسط صفحه جایی می گیرد. اما این خاصیت زمانی کار ساز خواهد بود که عنصر مورد نظر دارای عرض مشخصی باشد. اما باز هم به مشکل برخواهیم خورد, در صورتی که عرض مشخص باشد دیگر حالت واکنشگرا مفهومی ندارد. اینجاست که باید بجای خاصیت width باید از max-width استفاده کنید. در واقع این خاصیت به اندازه مرورگر تا اندازه مشخصی اجازه تغییر می دهد. مثال زیر را اجرا کنید و سپس اندازه مرورگر را تغییر دهید:

<!doctype html>
<html>
<head>
<title>Example ITPRO</title>
<style>
.Box
{
	border:solid 1px #22dd33;
	max-width: 400px;
	margin:auto;
}
</style>
</head>
<body>
<div class="Box">
<p>Hello, People. I am Arastoo. A user from earth! :)
</div>
</body>
</html>

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

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

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

#آموزش_گام_به_گام_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 نظر

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

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

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