سلام دوستان! من صادق جعفری هستم و خوشحالم که با هم به قسمت سوم از دوره آموزش CSS رسیدیم. توی این بخش، قراره با هم وارد دنیای حرفه‌ای‌تر CSS بشیم و مباحث پیشرفته‌تری رو یاد بگیریم. از خصوصیت display و max-width گرفته تا position و z-index، همه این‌ها ابزارهایی هستن که به ما کمک می‌کنن تا کنترل بیشتری روی طراحی و چیدمان عناصر وب‌سایت داشته باشیم.
علاوه بر این، با خصوصیت‌های overflow، float و clear آشنا می‌شیم که به ما اجازه می‌دن تا نحوه‌ی نمایش محتوای اضافه و تراز کردن عناصر رو مدیریت کنیم. همچنین، در مورد ترکیب‌کننده‌ها، شبه‌کلاس‌ها و شبه‌عنصرها صحبت می‌کنیم که ابزارهای قدرتمندی برای انتخاب و استایل‌دهی به عناصر خاص در CSS هستن. آماده‌اید؟ بریم که با هم این مباحث جذاب رو یاد بگیریم!
Display در CSS
خصوصیت display یکی از مهم‌ترین و پرکاربردترین خصوصیت‌ها در CSS است که تعیین می‌کند یک عنصر چگونه در صفحه نمایش داده شود. این خصوصیت به ما اجازه می‌دهد تا نحوه نمایش عناصر HTML را کنترل کنیم و به شیوه‌ای که نیاز داریم آن‌ها را تنظیم کنیم.
مقادیر اصلی display:
block: عناصر با display: block; به‌صورت بلوک نمایش داده می‌شوند. این عناصر به‌طور پیش‌فرض تمام عرض موجود را اشغال می‌کنند و یک خط جدید برای خود ایجاد می‌کنند.
مثال:
<style>
.block-element {
display: block;
background-color: lightblue;
margin: 10px 0;
}
</style>
<div class="block-element">I am a block element</div>
<div class="block-element">I am also a block element</div>
inline: عناصر با display: inline; به‌صورت درون‌خطی نمایش داده می‌شوند. این عناصر تنها به‌اندازه محتوای خود جا می‌گیرند و در یک خط با دیگر عناصر درون‌خطی قرار می‌گیرند.
مثال:
<style>
.inline-element {
display: inline;
background-color: lightgreen;
margin: 10px;
}
</style>
<span class="inline-element">I am an inline element</span>
<span class="inline-element">I am also an inline element</span>
inline-block: عناصر با display: inline-block; ترکیبی از رفتارهای بلوک و درون‌خطی را دارند. آن‌ها در یک خط با دیگر عناصر درون‌خطی قرار می‌گیرند اما می‌توانند عرض و ارتفاع خود را تنظیم کنند.
مثال:
<style>
.inline-block-element {
display: inline-block;
background-color: lightcoral;
width: 150px;
height: 50px;
margin: 10px;
}
</style>
<div class="inline-block-element">I is an inline-block element</div>
<div class="inline-block-element">I am also an inline-block element</div>
none: عناصر با display: none; به‌طور کامل از صفحه حذف می‌شوند و هیچ فضایی اشغال نمی‌کنند.
مثال:
<style>
.none-element {
display: none;
}
</style>
<div class="none-element">I can't be seen</div>
<div>I am a normal element</div>
flex و grid: این دو مقدار پیشرفته‌تر برای ایجاد چیدمان‌های پیچیده‌تر استفاده می‌شوند. flex برای ایجاد چیدمان‌های انعطاف‌پذیر و grid برای ایجاد چیدمان‌های شبکه‌ای کاربرد دارند.
مثال برای flex:
<style>
.flex-container {
display: flex;
background-color: lightgray;
}
.flex-item {
background-color: lightblue;
margin: 10px;
padding: 20px;
}
</style>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-item">item 3</div>
</div>
مثال برای grid:
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightgray;
}
.grid-item {
background-color: lightgreen;
padding: 20px;
}
</style>
<div class="grid-container">
<div class="grid-item">item 1</div>
<div class="grid-item">item 2</div>
<div class="grid-item">item 3</div>
<div class="grid-item">item 4</div>
<div class="grid-item">item 5</div>
<div class="grid-item">item 6</div>
</div>
خصوصیت max-width
خصوصیت max-width در CSS یکی از ابزارهای قدرتمند برای کنترل عرض عناصر در صفحات وب است. این خصوصیت به ما اجازه می‌دهد تا حداکثر عرض یک عنصر را تعیین کنیم، به‌طوری‌که عرض عنصر از مقدار مشخصی بیشتر نشود. این ویژگی به‌ویژه در طراحی‌های واکنش‌گرا بسیار مفید است، زیرا کمک می‌کند تا عناصر وب‌سایت در ابعاد مختلف صفحه نمایش به‌طور مناسب نمایش داده شوند.
تعریف max-width
selector {
max-width: value;
}
value می‌تواند یک مقدار ثابت (مانند 500px)، درصد (مانند 50%)، یا حتی مقدارهای نسبی دیگر (مانند em، rem و غیره) باشد.
مثال‌ها
تنظیم عرض ثابت برای یک عنصر
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example max-width</title>
<style>
.container {
width: 80%;
max-width: 600px;
background-color: lightblue;
margin: 0 auto;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
This is an example of using max-width. The width of this section will never exceed 600px.
</div>
</body>
</html>
در این مثال، عرض بخش با کلاس container به 80% عرض صفحه تنظیم شده است، اما هرگز بیشتر از 600px نخواهد شد. این به ما کمک می‌کند که در صفحات نمایش بزرگتر، محتوا کنترل‌شده‌تر و خواناتر نمایش داده شود.
تنظیم عرض به صورت درصدی
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example max-width</title>
<style>
.box {
width: 100%;
max-width: 90%;
background-color: lightcoral;
margin: 0 auto;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
This is another example of max-width. The width of this box will be at most 90% of the page width.
</div>
</body>
</html>
در این مثال، عرض جعبه به 100% عرض صفحه تنظیم شده است، اما حداکثر عرض آن 90% خواهد بود. این به ما کمک می‌کند تا اطمینان حاصل کنیم که جعبه در صفحات نمایش بزرگتر هم به‌طور متناسب نمایش داده می‌شود.
نکات مهم
- واحدهای مختلف:
max-widthمی‌تواند از واحدهای مختلفی مانند پیکسل (px)، درصد (%)، em، rem و غیره استفاده کند. - طراحی واکنش‌گرا: استفاده از
max-widthدر کنارwidthو سایر خصوصیت‌های اندازه‌گیری می‌تواند به شما کمک کند تا طراحی‌های واکنش‌گراتری ایجاد کنید که در دستگاه‌های مختلف به‌خوبی نمایش داده شوند. - کنترل بهتر: با تنظیم
max-widthمی‌توانید کنترل بهتری بر روی عناصر داشته باشید و از ایجاد مشکلات در چیدمان و نمایش اجتناب کنید.
خصوصیت position
خصوصیت position یکی از قدرتمندترین و انعطاف‌پذیرترین ابزارها در CSS است که به ما امکان می‌دهد تا کنترل دقیقی بر مکان و چیدمان عناصر در صفحه وب داشته باشیم. این خصوصیت تعیین می‌کند که یک عنصر چگونه نسبت به عناصر دیگر و همچنین صفحه وب قرار گیرد. در این مطلب، به توضیح جامع و جذابی درباره position و نحوه استفاده از آن با مثال‌های کاربردی می‌پردازیم.
مقادیر position
static: مقدار پیش‌فرض position است. عناصری که موقعیت آن‌ها به‌صورت static است، در جریان عادی صفحه قرار می‌گیرند و نمی‌توانند با استفاده از خصوصیات بالا (top)، پایین (bottom)، چپ (left) و راست (right) جابه‌جا شوند.
مثال:
<style>
.static-element {
position: static;
background-color: lightblue;
margin: 10px;
}
</style>
<div class="static-element">I am a static element</div>
<div class="static-element">I am also a static element</div>
relative: عناصر با position: relative; نسبت به موقعیت عادی خود جابه‌جا می‌شوند. می‌توان با استفاده از خصوصیات بالا (top)، پایین (bottom)، چپ (left) و راست (right) آن‌ها را جابه‌جا کرد.
مثال:
<style>
.relative-element {
position: relative;
top: 20px;
left: 30px;
background-color: lightgreen;
margin: 10px;
}
</style>
<div class="relative-element">I am a relative element</div>
absolute: عناصر با position: absolute; نسبت به اولین عنصر والد با position غیر static موقعیت می‌گیرند. اگر چنین عنصری وجود نداشته باشد، نسبت به بدنه (body) صفحه موقعیت می‌گیرند.
مثال:
<style>
.absolute-container {
position: relative;
width: 200px;
height: 200px;
background-color: lightgray;
}
.absolute-element {
position: absolute;
top: 50px;
left: 50px;
background-color: lightcoral;
padding: 10px;
}
</style>
<div class="absolute-container">
<div class="absolute-element">I am an absolute element</div>
</div>
fixed: عناصر با position: fixed; نسبت به پنجره مرورگر موقعیت می‌گیرند و حتی با اسکرول کردن صفحه، موقعیت آن‌ها تغییر نمی‌کند.
مثال:
<style>
.fixed-element {
position: fixed;
top: 10px;
right: 10px;
background-color: lightyellow;
padding: 10px;
}
</style>
<div class="fixed-element">I am a fixed element</div>
<p>Lots of content here...</p>
sticky: عناصر با position: sticky; ترکیبی از رفتارهای relative و fixed را دارند. آن‌ها تا رسیدن به یک مقدار مشخص در حالت relative باقی می‌مانند و سپس به حالت fixed تبدیل می‌شوند.
مثال:
<style>
.sticky-element {
position: sticky;
top: 0;
background-color: lightpink;
padding: 10px;
}
</style>
<div class="sticky-element">I am a sticky element</div>
<p>Lots of content here...</p>
خصوصیت position به ما این امکان را می‌دهد که عناصر را با دقت و انعطاف بیشتری در صفحه وب قرار دهیم. با استفاده از مقادیر مختلف این خصوصیت، می‌توانیم چیدمان‌های پیچیده‌تر و کنترل بیشتری بر نمایش عناصر داشته باشیم. هر کدام از مقادیر static، relative، absolute، fixed و sticky کاربرد خاص خود را دارند و بسته به نیاز طراحی می‌توان از آن‌ها استفاده کرد.
خصوصیت z-index
خصوصیت z-index در CSS یکی از مهم‌ترین ابزارها برای کنترل لایه‌بندی (stacking) عناصر در صفحات وب است. این ویژگی به ما اجازه می‌دهد تا ترتیب نمایش عناصر را تعیین کنیم و مشخص کنیم کدام عناصر بر روی دیگران قرار بگیرند. z-index تنها در عناصری که موقعیت آن‌ها position غیر از static (یعنی relative، absolute، fixed یا sticky) است، مؤثر می‌باشد.
تعریف z-index
selector {
z-index: value;
}value می‌تواند یک عدد صحیح باشد. اعداد بالاتر به معنای لایه بالاتر و نمایش در جلوتر از اعداد پایین‌تر است.
مثال‌ها
مثال ساده برای z-index
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example z-index</title>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
top: 50px;
left: 50px;
z-index: 1;
}
.box2 {
background-color: blue;
top: 70px;
left: 70px;
z-index: 2;
}
.box3 {
background-color: green;
top: 90px;
left: 90px;
z-index: 3;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</body>
</html>در این مثال، سه عنصر با کلاس‌های box1، box2 و box3 داریم که هر کدام با مقادیر z-index متفاوت تعریف شده‌اند. box3 که مقدار z-index برابر 3 دارد، بالاتر از box2 با مقدار z-index 2 و box1 با مقدار z-index 1 نمایش داده می‌شود. به این ترتیب، ترتیب نمایش عناصر از نظر عمقی مشخص می‌شود.
مثال کاربردی‌تر برای z-index
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practical example of z-index</title>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: yellow;
z-index: 10;
}
.content {
position: absolute;
top: 50px;
left: 0;
width: 100%;
height: 250px;
background-color: lightblue;
z-index: 5;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: orange;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>در این مثال، یک container داریم که شامل سه عنصر header، content و footer است. با استفاده از z-index، header با مقدار 10 بالاترین لایه را دارد، سپس content با مقدار 5 و در نهایت footer با مقدار 1. به این ترتیب، ترتیب لایه‌بندی این عناصر به‌درستی کنترل می‌شود.
نکات مهم
- مقدار
z-indexمنفی: می‌توانید از مقادیر منفی نیز استفاده کنید تا عناصر به پشت دیگر عناصر بروند. - زمینه تودرتو: اگر یک عنصر والد دارای
z-indexخاصی باشد، تمام عناصر فرزند آن نیز نسبت به والد خود و نه به بقیه صفحه تنظیم می‌شوند. - تداخل با
position:z-indexتنها در عناصری که دارایpositionغیرstaticهستند مؤثر است.
خصوصیت z-index ابزاری قدرتمند برای کنترل لایه‌بندی و ترتیب نمایش عناصر در صفحات وب است. با استفاده از z-index می‌توانید تعیین کنید که کدام عناصر در جلوی دیگران قرار بگیرند و ترتیب نمایش آن‌ها را کنترل کنید. این ویژگی به‌ویژه در طرح‌های پیچیده و چندلایه بسیار مفید است و کمک می‌کند تا طراحی‌های زیبا و کاربرپسندی ایجاد کنید.
خصوصیت overflow
خصوصیت overflow در CSS به ما اجازه می‌دهد کنترل کنیم که محتویات یک عنصر وقتی از محدوده‌ی اندازه‌ی تعریف‌شده برای آن عنصر خارج می‌شوند، چگونه نمایش داده شوند. این خصوصیت برای مدیریت اسکرول و برش محتوا بسیار کاربردی است.
مقادیر overflow
- visible (پیش‌فرض): محتوا از محدوده‌ی عنصر بیرون می‌زند و نمایش داده می‌شود.
- hidden: محتوا خارج از محدوده‌ی عنصر برش داده می‌شود و قابل مشاهده نیست.
- scroll: یک نوار اسکرول برای مشاهده‌ی محتواهای پنهان شده ایجاد می‌شود، حتی اگر نیاز به اسکرول نباشد.
- auto: اگر محتوا از محدوده‌ی عنصر خارج شود، نوار اسکرول ظاهر می‌شود.
مثال‌ها
مثال ساده برای overflow: visible
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example overflow: visible</title>
<style>
.box {
width: 150px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
overflow: visible; /* Assumption */
}
</style>
</head>
<body>
<div class="box">
This is a long text that will be displayed outside the bounds of the element.
</div>
</body>
</html>
در این مثال، محتوا از محدوده‌ی عنصر خارج می‌شود و به‌طور کامل نمایش داده می‌شود، چون مقدار پیش‌فرض overflow برابر visible است.
مثال برای overflow: hidden
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example overflow: hidden</title>
<style>
.box {
width: 150px;
height: 100px;
background-color: lightgreen;
border: 2px solid green;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
This is long text that extends beyond the element's scope but is not displayed.
</div>
</body>
</html>
در این مثال، محتوایی که از محدوده‌ی عنصر خارج می‌شود، برش داده می‌شود و نمایش داده نمی‌شود.
مثال برای overflow: scroll
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example overflow: scroll</title>
<style>
.box {
width: 150px;
height: 100px;
background-color: lightcoral;
border: 2px solid red;
overflow: scroll;
}
</style>
</head>
<body>
<div class="box">
This is a long text that extends beyond the element and can be viewed by scrolling.
</div>
</body>
</html>
در این مثال، نوارهای اسکرول برای مشاهده‌ی محتوای پنهان‌شده ایجاد می‌شوند، حتی اگر محتوا کمتر از اندازه‌ی عنصر باشد.
مثال برای overflow: auto
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example overflow: auto</title>
<style>
.box {
width: 150px;
height: 100px;
background-color: lightyellow;
border: 2px solid yellow;
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
This is a long text that extends beyond the element and is only displayed when the scrollbar is needed.
</div>
</body>
</html>
در این مثال، نوار اسکرول تنها در صورتی ظاهر می‌شود که محتوا از محدوده‌ی عنصر خارج شود.
خصوصیت overflow یکی از ابزارهای مهم برای کنترل نمایش محتوا در عناصر HTML است. با استفاده از مقادیر مختلف آن، می‌توانیم نحوه نمایش محتوای خارج از محدوده‌ی عناصر را مدیریت کنیم. انتخاب مقدار مناسب برای overflow بسته به نیاز و طراحی صفحه می‌تواند تجربه کاربری بهتری را فراهم کند.
خصوصیت float و clear
خصوصیت‌های float و clear در CSS ابزارهای قدرتمندی برای مدیریت چیدمان عناصر در صفحات وب هستند. این خصوصیت‌ها به ما اجازه می‌دهند تا نحوه قرارگیری عناصر را به‌صورت افقی یا عمودی تنظیم کنیم.
خصوصیت float
خصوصیت float به عنصری اعمال می‌شود که باید در سمت چپ یا راست محتوای جاری قرار گیرد و محتوای دیگر به دور آن جریان یابد.
مقادیر float
- left: عنصر در سمت چپ قرار می‌گیرد و محتوای دیگر در سمت راست آن جریان می‌یابد.
- right: عنصر در سمت راست قرار می‌گیرد و محتوای دیگر در سمت چپ آن جریان می‌یابد.
- none: پیش‌فرض. عنصر در محل عادی خود در جریان قرار می‌گیرد.
- inherit: مقدار
floatرا از عنصر والد به ارث می‌برد.
مثال‌ها
مثال ساده برای float: left
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example float: left</title>
<style>
.box {
width: 150px;
height: 150px;
background-color: lightblue;
float: left;
margin: 10px;
}
.content {
background-color: lightgrey;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">Left floating box</div>
<div class="content">
This is a long text that wraps around the hover box. This is a long text that wraps around the hover box.
</div>
</body>
</html>
در این مثال، جعبه آبی با خصوصیت float: left در سمت چپ قرار می‌گیرد و متن اطراف آن جریان می‌یابد.
مثال ساده برای float: right
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example float: right</title>
<style>
.box {
width: 150px;
height: 150px;
background-color: lightgreen;
float: right;
margin: 10px;
}
.content {
background-color: lightgrey;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">Right floating box</div>
<div class="content">
This is a long text that wraps around the hover box. This is a long text that wraps around the hover box.
</div>
</body>
</html>
در این مثال، جعبه سبز با خصوصیت float: right در سمت راست قرار می‌گیرد و متن اطراف آن جریان می‌یابد.
خصوصیت clear
خصوصیت clear مشخص می‌کند که یک عنصر باید در زیر عناصر شناور قرار گیرد و از برخورد با آن‌ها جلوگیری کند.
مقادیر clear
- left: عنصر نباید در سمت چپ عناصر شناور قرار گیرد.
- right: عنصر نباید در سمت راست عناصر شناور قرار گیرد.
- both: عنصر نباید در سمت چپ یا راست عناصر شناور قرار گیرد.
- none: پیش‌فرض. عنصر بدون توجه به عناصر شناور قرار می‌گیرد.
- inherit: مقدار
clearرا از عنصر والد به ارث می‌برد.
مثال‌ها
مثال برای clear: both
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example clear: both</title>
<style>
.box {
width: 150px;
height: 150px;
background-color: lightcoral;
float: left;
margin: 10px;
}
.clear {
clear: both;
background-color: lightyellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">floating box 1</div>
<div class="box">floating box 2</div>
<div class="clear">Deleted content</div>
</body>
</html>
در این مثال، دو جعبه شناور داریم که در کنار هم قرار گرفته‌اند. محتوای با کلاس clear با خصوصیت clear: both بعد از جعبه‌های شناور قرار می‌گیرد و از برخورد با آن‌ها جلوگیری می‌کند.
خصوصیت‌های float و clear در CSS ابزارهای مهمی برای مدیریت چیدمان و جریان عناصر در صفحات وب هستند. با استفاده از float می‌توانید عناصر را به سمت چپ یا راست شناور کنید و با استفاده از clear می‌توانید از برخورد عناصر با عناصر شناور جلوگیری کنید. این خصوصیت‌ها به ویژه در طراحی‌های پیچیده و چیدمان‌های چندستونی بسیار مفید هستند.
خصوصیت align
خصوصیت‌های align در CSS برای تنظیم و تراز کردن عناصر و محتویات آن‌ها استفاده می‌شوند. این خصوصیت‌ها به ما امکان می‌دهند تا نحوه قرارگیری عناصر در صفحه و همچنین تراز بندی محتویات داخلی آن‌ها را کنترل کنیم.
text-align
خصوصیت text-align برای تراز کردن متن داخل یک عنصر استفاده می‌شود.
مقادیر text-align
- left: تراز به سمت چپ (پیش‌فرض)
- right: تراز به سمت راست
- center: تراز به مرکز
- justify: تراز به دو طرف
مثال‌ها
مثال برای text-align: left
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example text-align: left</title>
<style>
.left-align {
text-align: left;
background-color: lightgrey;
padding: 10px;
}
</style>
</head>
<body>
<div class="left-align">
This text is aligned to the left.
</div>
</body>
</html>
مثال برای text-align: center
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example text-align: center</title>
<style>
.center-align {
text-align: center;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="center-align">
This text is centered.
</div>
</body>
</html>
vertical-align
خصوصیت vertical-align برای تنظیم تراز عمودی یک عنصر inline، inline-block یا table-cell استفاده می‌شود.
مقادیر vertical-align
- baseline: تراز با خط مبنای متن (پیش‌فرض)
- top: تراز به بالای عنصر
- middle: تراز به وسط عنصر
- bottom: تراز به پایین عنصر
مثال‌ها
مثال برای vertical-align: top
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example vertical-align: top</title>
<style>
.top-align {
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
background-color: lightgreen;
}
.text {
display: inline-block;
width: 200px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="top-align">Top align</div>
<div class="text">This text is placed next to the top align element.</div>
</body>
</html>
مثال برای vertical-align: middle
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example vertical-align: middle</title>
<style>
.middle-align {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background-color: lightyellow;
}
.text {
display: inline-block;
width: 200px;
height: 100px;
background-color: lightpink;
}
</style>
</head>
<body>
<div class="middle-align">Middle align</div>
<div class="text">This text is placed next to the Middle align element.</div>
</body>
</html>
align-items و align-content
این خصوصیت‌ها در Flexbox و Grid CSS برای تنظیم تراز عمودی آیتم‌ها و محتویات استفاده می‌شوند.
مقادیر align-items و align-content
- stretch: کشیدن آیتم‌ها برای پر کردن محور (پیش‌فرض)
- flex-start: تراز آیتم‌ها به ابتدای محور
- flex-end: تراز آیتم‌ها به انتهای محور
- center: تراز آیتم‌ها به مرکز محور
- baseline: تراز آیتم‌ها به خط مبنای متن
مثال برای Flexbox
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example align-items: center</title>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: lightgrey;
align-items: center;
}
.flex-item {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-item">item 3</div>
</div>
</body>
</html>
در این مثال، آیتم‌های داخل کانتینر Flex به مرکز محور عمودی تراز شده‌اند.
ترکیب کننده ها در CSS (سلکتور ها)
ترکیب کننده‌ها در CSS به ما امکان می‌دهند تا با دقت بیشتری عناصر HTML را انتخاب کنیم و استایل دهیم. این ترکیب کننده‌ها شامل ترکیب سلکتورهای ساده با عملگرها برای ایجاد سلکتورهای پیچیده‌تر هستند. در اینجا چند نمونه از مهم‌ترین ترکیب کننده‌ها را بررسی می‌کنیم.
1. سلکتور فرزندی (>)
این ترکیب کننده فقط فرزندان مستقیم یک عنصر خاص را انتخاب می‌کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child selector</title>
<style>
.parent > .child {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<p class="child">This paragraph is a direct child and will be red.</p>
<div>
<p class="child">This paragraph is not a direct child and will not be styled.</p>
</div>
</div>
</body>
</html>
در این مثال، تنها پاراگراف فرزند مستقیم عنصر والد قرمز می‌شود.
2. سلکتور فرزندان ( )
این ترکیب کننده تمام فرزندان یک عنصر خاص را انتخاب می‌کند، نه فقط فرزندان مستقیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selector of children</title>
<style>
.ancestor .descendant {
color: blue;
}
</style>
</head>
<body>
<div class="ancestor">
<p class="descendant">This paragraph is a child and will be blue.</p>
<div>
<p class="descendant">This paragraph is also a child and will be blue.</p>
</div>
</div>
</body>
</html>
در این مثال، هر پاراگرافی که داخل عنصر والد قرار دارد آبی می‌شود، بدون توجه به سطح آن.
3. سلکتور همسایه‌ی مجاور (+)
این ترکیب کننده تنها عناصر همسایه‌ی مجاور بعدی را انتخاب می‌کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nearest neighbor selector</title>
<style>
.first + .second {
color: green;
}
</style>
</head>
<body>
<p class="first">This is the first paragraph.</p>
<p class="second">This is the second paragraph and it will be green.</p>
<p class="second">This is the third paragraph and will not have a style.</p>
</body>
</html>
در این مثال، تنها پاراگراف دوم که بلافاصله بعد از پاراگراف اول می‌آید سبز می‌شود.
4. سلکتور همسایه‌ی عمومی (~)
این ترکیب کننده تمام عناصر همسایه‌ی بعدی را انتخاب می‌کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General neighbor selector</title>
<style>
.first ~ .second {
color: purple;
}
</style>
</head>
<body>
<p class="first">This is the first paragraph.</p>
<p class="second">This is the second paragraph and it will be purple.</p>
<p class="second">This third paragraph will also be purple.</p>
</body>
</html>
در این مثال، هر پاراگرافی با کلاس second که بعد از پاراگراف اول می‌آید، بنفش می‌شود.
5. سلکتور گروهی (,)
این ترکیب کننده به ما امکان می‌دهد تا چندین سلکتور را با هم گروه بندی کنیم تا همه آن‌ها یک استایل مشترک داشته باشند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Group selector</title>
<style>
.class1, .class2, .class3 {
color: orange;
}
</style>
</head>
<body>
<p class="class1">This paragraph will be orange.</p>
<p class="class2">This paragraph will also be orange.</p>
<p class="class3">This one will also turn orange.</p>
</body>
</html>
در این مثال، همه پاراگراف‌هایی که دارای یکی از کلاس‌های class1، class2 یا class3 هستند، نارنجی می‌شوند.
شبه‌کلاس‌ها در CSS
شبه‌کلاس‌ها در CSS به شما این امکان را می‌دهند که به وضعیت‌های خاص عناصر HTML استایل دهید، بدون نیاز به افزودن کلاس‌های اضافی به کد HTML. این ویژگی‌ها به شما کمک می‌کنند تا تعاملات و وضعیت‌های مختلف عناصر را به سادگی مدیریت کنید. در اینجا چند نمونه از شبه‌کلاس‌های پرکاربرد را بررسی می‌کنیم.
1. :hover
شبه‌کلاس :hover زمانی اعمال می‌شود که کاربر موس خود را روی یک عنصر می‌برد.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pseudo-classes: hover</title>
<style>
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="#">Take this link</a>
</body>
</html>
در این مثال، زمانی که کاربر موس را روی لینک می‌برد، رنگ لینک به قرمز تغییر می‌کند.
2. :active
شبه‌کلاس :active زمانی اعمال می‌شود که یک عنصر در حال فعال شدن است، مثلاً وقتی یک دکمه فشرده شده است.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pseudo-classes: active</title>
<style>
button:active {
background-color: green;
}
</style>
</head>
<body>
<button>Press this button</button>
</body>
</html>
در این مثال، زمانی که دکمه فشرده می‌شود، رنگ پس‌زمینه آن به سبز تغییر می‌کند.
3. :focus
شبه‌کلاس :focus زمانی اعمال می‌شود که یک عنصر فوکوس دارد، مثلاً وقتی یک کاربر روی یک فیلد ورودی کلیک می‌کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pseudo-classes: focus</title>
<style>
input:focus {
border-color: blue;
}
</style>
</head>
<body>
<input type="text" placeholder="click on me">
</body>
</html>
در این مثال، وقتی کاربر روی فیلد ورودی کلیک می‌کند، رنگ حاشیه آن به آبی تغییر می‌کند.
4. :nth-child
شبه‌کلاس :nth-child به شما امکان می‌دهد که به nامین فرزند یک عنصر والد استایل دهید. این شبه‌کلاس بسیار قدرتمند است و می‌تواند با مقادیر مختلف استفاده شود.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pseudo-classes: nth-child</title>
<style>
li:nth-child(odd) {
background-color: lightgray;
}
</style>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</body>
</html>
در این مثال، تمامی آیتم‌های فرد لیست دارای رنگ پس‌زمینه خاکستری روشن می‌شوند.
5. :not
شبه‌کلاس :not به شما امکان می‌دهد که عناصری که یک شرط خاص را ندارند انتخاب کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pseudo-classes: not</title>
<style>
input:not([type="submit"]) {
border: 2px solid red;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="name">
<input type="password" placeholder="password">
<input type="submit" value="submit">
</form>
</body>
</html>
در این مثال، تمامی فیلدهای ورودی که نوع آن‌ها submit نیست، دارای حاشیه قرمز می‌شوند.
شبه‌عنصرها در CSS
شبه‌عنصرها در CSS به شما این امکان را می‌دهند که به بخش‌های خاصی از یک عنصر استایل دهید. این ویژگی‌ها به شما کمک می‌کنند تا بدون نیاز به تغییر ساختار HTML، بخش‌های مختلف یک عنصر را هدف قرار دهید. در اینجا چند نمونه از شبه‌عنصرهای پرکاربرد را بررسی می‌کنیم.
1. ::before
شبه‌عنصر ::before محتوای دلخواهی را قبل از محتوای اصلی یک عنصر اضافه می‌کند. معمولاً برای افزودن آیکون‌ها، تصاویر یا متن‌های اضافی استفاده می‌شود.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-elements: before</title>
<style>
.example::before {
content: "🔥";
margin-right: 10px;
}
</style>
</head>
<body>
<p class="example">This is a paragraph.</p>
</body>
</html>
در این مثال، یک آیکون آتش قبل از محتوای پاراگراف اضافه می‌شود.
2. ::after
شبه‌عنصر ::after محتوای دلخواهی را بعد از محتوای اصلی یک عنصر اضافه می‌کند. مشابه ::before است اما محتوای اضافی را در انتهای عنصر قرار می‌دهد.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-elements: after</title>
<style>
.example::after {
content: "✔️";
margin-left: 10px;
}
</style>
</head>
<body>
<p class="example">This is a paragraph.</p>
</body>
</html>
در این مثال، یک آیکون تیک بعد از محتوای پاراگراف اضافه می‌شود.
3. ::first-letter
شبه‌عنصر ::first-letter به شما اجازه می‌دهد که اولین حرف از یک عنصر بلوکی (مانند پاراگراف) را استایل دهید. این ویژگی برای طراحی‌های زیبا و جذاب متن‌ها بسیار مفید است.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-elements: first-letter</title>
<style>
.example::first-letter {
font-size: 2em;
color: red;
}
</style>
</head>
<body>
<p class="example">This is a paragraph.</p>
</body>
</html>
در این مثال، اولین حرف پاراگراف به رنگ قرمز و با اندازه بزرگتر نمایش داده می‌شود.
4. ::first-line
شبه‌عنصر ::first-line به شما اجازه می‌دهد که اولین خط از یک عنصر بلوکی را استایل دهید. این ویژگی برای جلب توجه به اولین خط متن مفید است.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-elements: first-line</title>
<style>
.example::first-line {
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<p class="example">This is a paragraph. The text continues and the first line must have a special style.</p>
</body>
</html>
در این مثال، اولین خط پاراگراف به صورت پررنگ و زیرخط‌دار نمایش داده می‌شود.
5. ::selection
شبه‌عنصر ::selection به شما اجازه می‌دهد که استایل محتوای انتخاب‌شده توسط کاربر را تغییر دهید. این ویژگی به شما کمک می‌کند تا تجربه کاربری بهتری ارائه دهید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-elements: selection</title>
<style>
::selection {
background: yellow;
color: black;
}
</style>
</head>
<body>
<p>Select this text to see its style.</p>
</body>
</html>
در این مثال، زمانی که کاربر متنی را انتخاب می‌کند، پس‌زمینه آن به رنگ زرد و متن به رنگ مشکی تغییر می‌کند.
دوستان عزیز، تا اینجا با کلی از خصوصیت‌های مهم و کلیدی در CSS آشنا شدیم. از نحوه نمایش عناصر با display گرفته تا کنترل عرض با max-width و مدیریت موقعیت عناصر با position و z-index، همه و همه به ما کمک می‌کنند تا صفحات وب زیباتری طراحی کنیم. فهمیدیم که با overflow می‌توانیم محتوای اضافی را مدیریت کنیم و با استفاده از float و clear، عناصر را در کنار هم قرار دهیم. همچنین با مفهوم ترکیب‌کننده‌ها و سلکتورها در CSS آشنا شدیم و دیدیم که چطور می‌توانیم با استفاده از شبه کلاس‌ها و شبه‌عنصرها، استایل‌های خاصی به عناصر بدهیم و تعامل کاربر را بهبود ببخشیم.
در قسمت‌های بعدی، عمیق‌تر به دنیای CSS فرو خواهیم رفت و با خصوصیت‌ها و تکنیک‌های پیشرفته‌تری آشنا خواهیم شد. اما همین حالا هم با دانشی که کسب کردید، می‌توانید طراحی‌های حرفه‌ای‌تر و کارآمدتری انجام دهید. منتظر ادامه دوره باشید و همیشه به یاد داشته باشید که تمرین و تجربه، کلید موفقیت در طراحی وب است.
تا قسمت بعدی، موفق باشید!
صادق جعفری
از کودکی به کامپیوتر و دنیای دیجیتال علاقه داشتم، به همین دلیل ترک تحصیل کردم و تمام تلاش خودم را صرفا برای یادگیری کامپیوتر، طراحی، برنامه نویسی و ... به کار گرفتم. در کنار مشاغل مختلفی که مجبور به انجامشان بودم برنامه نویسی را یاد گرفتم و از سال 1390 وارد بازار کار شدم و همیشه در تلاش هستم تا چالش های روبرو را با موفقیت پشت سر بگذارم.
شبکه های اجتماعی من