CSS در Layoutاستفاده از
از layout و تنظیمات آن برای کنترل بهتر محتوای سایت استفاده می شود. المان هایی که برای این کار مورد استفاده قرار می گیرند در دو دسته block و یا inline قرار می گیرند.
تگ های مربوط به بلاک
المان های گروه بلاک همگی این خاصیت را دارند که اولا عرضشان اندازه عرض کل صفحه است، دوما اینکه در خط جدید شروع می شود. از جمله تگ های گروه block می توان به تگ های div، p، form، header، footer، section
اما برای اینکه اندازه عرض المان های این گروه را تحت کنترل داشته باشیم می توانیم از width یا max-width استفاده کنیم. استفاده از width این امکان را به ما می دهد که اندازه عرض بلاک را مشخص کنیم اما در استفاده از max-width ماکزیمم اندازه مدنظرمان برای بلاک را مشخص می کنیم که این مقدار براساس اندازه مرورگر ممکن است کمتر شود درواقع اندازه عرض بلاک داینامیک و متغیر خواهد بود.
در مثال پیش رو استفاده از div در سه حالت استفاده از width، max-width و عدم استفاده از اندازه عرض نمایش داده شده است.
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex3 {
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class=“ex1”>This div element has width: 500px;</div>
<br>
<div class=“ex2”>This div element has max-width: 500px;</div>
<br>
<div class=“ex3”>This div element</div>
</body>
</html>
Inline تگ های مربوط به
المان های گروه inline هرجا فراخوانی شوند نمایش داده می شوند و لزوما در خط جدید شروع نمی شوند و عرض آن اندازه محتوای آن است. ازجمله تگ های این گروه img، a و span است.
Inline-Blockاستفاده از
- اولین تفاوت inline-block با inline این است که inline طول و عرضی متناسب با محتوایش دارد و این طول عرض را نمی توان به صورت دستی تغییر داد اما در حالت inline-block می توانیم طول و عرض مورد نظرمان را اعمال کنیم.
- همچنین در inline-block فاصله استاندارد کادر با محتوای خارجی حفظ می شود اما در حالت inline فاصله استانداردی درنظر گرفته نمی شود و ممکن است کادر با محتوای خارجی هیچ فاصله ای نداشته باشد.
- درمورد تفاوت بین inline-block و block می توان گفت که block همیشه در خط جدیدی شکل می گیرد اما inline-block می تواند در ادامه المان های دیگر نشان داده شود.
- ازجمله کاربردهای inline-block می توان به این موضوع اشاره کرد که با استفاده از آن می توان اجزای لیست را به جای نمایش عمودی به صورت افقی نمایش داد.
مثال:
<html> <head> <style> .nav { background-color: yellow; list-style-type: none; text-align: center; margin: 0; padding: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; } </style> </head> <body> <ul class=“nav”> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ul> </body> </html>
CSS در Displayاستفاده از
display در واقع نحوه نمایش محتوا را مشخص می کند.
- display: none باعث می شود محتوای موردنظر نمایش داده نشود.
مثال:
<html> <head> <style> li {display: none;} </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>
- display:block باعث می شود متون در قالب block نمایش داده شوند. در مثال زیر در قسمت style تعیین شده که هر span به شکل یک بلاک نمایش داده شوند به همین دلیل از آنجایی که متن در قالب سه span قرار گرفته است بنابراین متن در سه خط و سه بلاک نمایش داده شده است.
<html> <head> <style> span {display: block;} </style> </head> <body> <span>A display property with</span> <span>a value of “block” results in</span> <span>a line break between each span elements.</span> </body> </html>
- display: inline نیز به منظور نمایش متن در قالب inline به کار می رود. در مثال پیش رو نحوه نمایش اجزای لیست inline درنظر گرفته شده است به همین دلیل اجزای لیست همگی در یک خط و پشت سر هم نمایش داده می شوند.
<html> <head> <style> li {display: inline;} </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>
- دستورات display: none و visibility: hidden هر دو می توانند برای مخفی کردن یکسری المان مورداستفاده قرار بگیرند اما یک تفاوت با هم دارند، در دستور visibility: hidden المان ها نمایش داده نمی شوند اما فضای خالی آن ها نمایش داده می شود و در دستور display: none نیز هم المان ها نمایش داده نمی شوند هم فضای خالی آن ها نمایش داده نمی شود.
<html> <head> <style> h1.hidden {visibility: hidden;} h2.none {display: none;} </style> </head> <body> <h1>This is a visible heading</h1> <h1 class=“hidden”>This is a hidden heading</h1> <p>Notice that the hidden heading still takes up space.</p> <h2 class=“none”>This is a none heading</h2> <p>Notice that the h2 element with display: none; does not take up any space.</p> </body> </html>
Layout تعیین محل قرارگیری
با استفاده از دستور position می توان حالت های مختلفی برای جایگاه layout درنظر گرفت ازجمله: static، relative، fixed، absolute، sticky
position: static
به صورت پیش فرض تمامی المان های html از حالت استاتیک پیروی می کنند. در این حالت المان ها در محل مخصوصی قرار نمی گیرند و نمی توان تنظیمات سفارشی برای آن ایجاد کرد. همه المان ها در حالت استاتیک در محل های استاندارد خود قرار می گیرند.
به عنوان مثال در نمونه زیر با وجود اینکه برای div فاصله 100 پیکسلی از حاشیه چپ درنظر گرفته شده است اما div این مقدار را نادیده گرفته و در مکان استاندارد خودش قرار می گیرد.
<html> <head> <style> div.static { position: static; border: 3px solid #73AD21; left:10px; } </style> </head> <body> <div class=“static”> This div element has position: static; </div> </body> </html>
position: relative
در این حالت برخلاف حالت static می توانیم فاصله div از کادر اصلی را مشخص کنیم و این فاصله نسبت به حالت استاندارد اعمال می شود. یعنی در مثال زیر که 30 پیکسل فاصله از چپ درنظر گرفته شده، div نسبت به فاصله استانداردش از سمت چپ 30 پیکسل فاصله خواهد گرفت.
<html> <head> <style> div { position: relative; left: 30px; border: 3px solid #73AD21; } </style> </head> <body> <div> This div element has position: relative; </div> </body> </html>
position: fixed
وقتی از ویژگی position:fixed استفاده کنیم div در موقعیت تعیین شده که میزان فاصله از viewport است fix می شود حتی اگر صفحه scroll داشته باشد div در موقعیت خودش باقی می ماند.
مثال:
<html>
<head>
<style>
div {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class=“fixed”>
This div element has position: fixed;
</div>
</body>
</html>
position: absolute
در این مورد مختصات div نسبت به صفحه والد خودش تعیین می شود و تفاوتش با حالت fixed این است که در fixed مختصات نسبت به viewport تعیین می شود.
مثال:
<html> <head> <style> div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; }
div.absolute { position: absolute; top: 20px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; } </style> </head> <body> <div class=“relative”>This div element has position: relative; <div class=“absolute”>This div element has position: absolute;</div> </div> </body> </html>
position: sticky
اگر برای div موقعیت sticky درنظر گرفته شود آن div حتی هنگام scroll کردن صفحه سر جایش باقی می ماند و فقط صفحه زیرین و محتویات صفحه زیرین با scroll بالا و پایین می شوند.
مثال:
<html> <head> <style> div.sticky { position: sticky; position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } </style> </head> <body> <div class=“sticky”>I am sticky!</div> <div style=“padding-bottom:2000px”> <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p> </div>
</body> </html>
z-index
z-index به منظور قرار دادن یک المان پشت المان دیگر و یا قرار دادن المانی روبروی المان دیگر به کار می رود. اگر مقدار z-index را 1- قرار دهیم المان موردنظر پشت المان دیگر قرار می گیرد و اگر مقدار آن را 0 قرار دهیم المان موردنظر بر روی المان دیگر قرار می گیرد.
در مثال پیش رو image در لایه زیرین قرار گرفته و متن روی image قرار می گیرد.
<html> <head> <style> img { position: absolute; left: 0px; top: 0px; z-index: -1; } </style> </head> <body> <h1>This is a heading</h1> <img src=“myimage.png”> <p>Because the image has a z-index of -1, it will be placed behind the text.</p> </body> </html>