سلام دوستان، صادق جعفری هستم و به قسمت چهارم از دوره آموزش CSS خوش اومدید! در این قسمت قراره با یه سری ویژگی‌های خیلی جذاب و کاربردی آشنا بشیم که کمک می‌کنن صفحات وبمون حرفه‌ای‌تر و شیک‌تر به نظر برسن.
اول از همه، می‌خوایم درباره‌ی خصوصیت opacity صحبت کنیم که چطور می‌تونیم شفافیت عناصر رو تنظیم کنیم. بعدش نوبت به ساختن navbar های افقی و عمودی می‌رسه تا منوهای زیبایی برای سایت‌هامون بسازیم. همچنین، طراحی dropdown ها و ایجاد گالری عکس رو یاد می‌گیریم تا صفحاتمون دینامیک‌تر و کاربرپسندتر بشن.
در ادامه، با مفهوم image sprites و سلکتورهای attribute آشنا می‌شیم و نحوه‌ی استایل‌دهی به فرم‌ها رو یاد می‌گیریم. همچنین، درباره‌ی شمارنده‌ها و اولویت‌بندی سلکتورها صحبت می‌کنیم تا بتونیم بهتر CSS رو مدیریت کنیم. در نهایت، واحدهای اندازه‌گیری مختلف رو بررسی می‌کنیم، مفهوم !important رو توضیح می‌دیم و نگاهی به توابع ریاضی در CSS می‌ندازیم.
همراه من باشید تا با هم قدم به قدم این مفاهیم رو یاد بگیریم و به یک طراح وب حرفه‌ای تبدیل بشیم. آماده‌اید؟ بریم که شروع کنیم!
خصوصیت Opacity
خصوصیت opacity یکی از ویژگی‌های جذاب و کاربردی در CSS است که به شما امکان می‌دهد شفافیت عناصر HTML را کنترل کنید. این خصوصیت باعث می‌شود عناصر شما نیمه‌شفاف یا کاملاً شفاف شوند و تأثیرات بصری جذابی ایجاد کنند.
نحوه استفاده از Opacity
مقدار opacity می‌تواند بین 0 و 1 باشد. مقدار 0 یعنی عنصر کاملاً شفاف و دیده نمی‌شود، و مقدار 1 یعنی عنصر کاملاً کدر است و هیچ شفافیتی ندارد. مقادیر بین 0 و 1 باعث می‌شوند که عنصر به‌صورت نیمه‌شفاف نمایش داده شود.
شفافیت کامل
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full transparency</title>
<style>
.transparent {
opacity: 0;
}
</style>
</head>
<body>
<div class="transparent">This text must be completely transparent and not visible.</div>
</body>
</html>
در این مثال، مقدار opacity برابر با 0 است، بنابراین متن درون div کاملاً شفاف و ناپیدا خواهد بود.
شفافیت نیمه‌شفاف
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Translucent transparency</title>
<style>
.semi-transparent {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="semi-transparent">This text is semi-transparent.</div>
</body>
</html>
در این مثال، مقدار opacity برابر با 0.5 است، بنابراین متن درون div به‌صورت نیمه‌شفاف نمایش داده می‌شود.
شفافیت متفاوت برای چند عنصر
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Different transparency</title>
<style>
.transparent {
opacity: 0.2;
}
.semi-transparent {
opacity: 0.6;
}
.opaque {
opacity: 1;
}
</style>
</head>
<body>
<div class="transparent">This text is almost transparent.</div>
<div class="semi-transparent">This text is semi-transparent.</div>
<div class="opaque">This text is completely opaque.</div>
</body>
</html>
در این مثال، سه div با مقادیر مختلف opacity داریم. اولین div با مقدار 0.2 تقریباً شفاف است، دومین div با مقدار 0.6 نیمه‌شفاف است و سومین div با مقدار 1 کاملاً کدر است.
نکات مهم
- استفاده از
opacityباعث شفاف شدن تمام محتوای درون عنصر نیز می‌شود. اگر بخواهید تنها بخشی از عنصر شفاف شود، باید از روش‌های دیگر مانند استفاده از رنگ‌های RGBA یا فیلترها استفاده کنید. - توجه داشته باشید که
opacityبر روی تمامی مرورگرهای مدرن پشتیبانی می‌شود، اما ممکن است در نسخه‌های قدیمی‌تر برخی مرورگرها نیاز به پیشوندهای مخصوص (مانند-moz-یا-webkit-) داشته باشید.
با استفاده از opacity می‌توانید جلوه‌های بصری جذابی به صفحات وب خود اضافه کنید و تجربه کاربری بهتری برای بازدیدکنندگان ایجاد کنید. این ویژگی به شما کمک می‌کند تا طراحی‌های خود را پویا و زیبا کنید.
Navbar (افقی و عمودی)
Navbar یا نوار ناوبری یکی از عناصر حیاتی در طراحی وب است که به کاربران کمک می‌کند تا به راحتی به بخش‌های مختلف سایت دسترسی پیدا کنند. نوار ناوبری می‌تواند به دو صورت افقی و عمودی طراحی شود. در این بخش، نحوه ساخت هر دو نوع نوار ناوبری را با استفاده از CSS بررسی می‌کنیم.
Navbar افقی
نوار ناوبری افقی به‌طور معمول در بالای صفحات وب قرار می‌گیرد و لینک‌های ناوبری را به‌صورت افقی در کنار هم نمایش می‌دهد.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal navigation bar</title>
<style>
body {
font-family: Arial, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">home</a>
<a href="#services">services</a>
<a href="#about">about us</a>
<a href="#contact">contact us</a>
</div>
</body>
</html>
شرح کد:
.navbarکلاسی است که به div مربوط به نوار ناوبری اعمال شده است.overflow: hiddenباعث می‌شود محتوای اضافی نمایش داده نشود وbackground-color: #333رنگ پس‌زمینه را تنظیم می‌کند..navbar aبرای لینک‌های درون نوار ناوبری استفاده شده است.float: leftلینک‌ها را به‌صورت افقی در کنار هم قرار می‌دهد.display: blockوpadding: 14px 20pxاندازه و فاصله هر لینک را تنظیم می‌کنند..navbar a:hoverاستایل لینک‌ها را هنگام هاور شدن تغییر می‌دهد.
Navbar عمودی
نوار ناوبری عمودی به‌طور معمول در سمت چپ یا راست صفحات وب قرار می‌گیرد و لینک‌های ناوبری را به‌صورت عمودی در زیر هم نمایش می‌دهد.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical navigation bar</title>
<style>
body {
font-family: Arial, sans-serif;
}
.navbar-vertical {
width: 200px;
background-color: #333;
position: fixed;
height: 100%;
overflow: auto;
}
.navbar-vertical a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar-vertical a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="navbar-vertical">
<a href="#home">home</a>
<a href="#services">services</a>
<a href="#about">about us</a>
<a href="#contact">contact us</a>
</div>
<div style="margin-left:200px; padding:20px;">
<h2>Page content</h2>
<p>This is an example of a web page with a vertical navigation bar.</p>
</div>
</body>
</html>
شرح کد:
.navbar-verticalکلاسی است که به div مربوط به نوار ناوبری عمودی اعمال شده است.width: 200pxعرض نوار ناوبری را تنظیم می‌کند.position: fixedنوار ناوبری را در محل ثابت می‌کند.height: 100%وoverflow: autoارتفاع و قابلیت اسکرول را تنظیم می‌کنند..navbar-vertical aبرای لینک‌های درون نوار ناوبری استفاده شده است.display: blockلینک‌ها را به‌صورت عمودی در زیر هم قرار می‌دهد.padding: 14px 20pxاندازه و فاصله هر لینک را تنظیم می‌کنند..navbar-vertical a:hoverاستایل لینک‌ها را هنگام هاور شدن تغییر می‌دهد.divباmargin-left: 200pxمحتوای اصلی صفحه را از نوار ناوبری عمودی جدا می‌کند.
با استفاده از CSS می‌توانید نوارهای ناوبری افقی و عمودی زیبا و کارآمدی ایجاد کنید که تجربه کاربری بهتری برای بازدیدکنندگان سایت شما فراهم می‌کند. هر دو نوع نوار ناوبری با توجه به نیاز و طراحی سایت شما قابل استفاده هستند. استفاده از این تکنیک‌ها به شما کمک می‌کند تا صفحات وب حرفه‌ای‌تر و سازمان‌یافته‌تری بسازید.
Dropdown ها در CSS
Dropdown یا منوی کشویی یکی از عناصر پرکاربرد در طراحی وب است که به کاربران امکان می‌دهد تا به‌طور مؤثر از میان گزینه‌های مختلف انتخاب کنند. با استفاده از CSS می‌توانید منوهای کشویی جذاب و کاربرپسندی ایجاد کنید.
ساختار HTML
ابتدا ساختار HTML پایه یک منوی کشویی را ایجاد می‌کنیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu</title>
<style>
/* We will add CSS later */
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
</div>
</div>
</body>
</html>
در این ساختار، یک div با کلاس dropdown داریم که شامل یک دکمه و یک div دیگر با کلاس dropdown-content است که حاوی لینک‌های منوی کشویی است.
استایل‌دهی با CSS
اکنون، به استایل‌دهی منوی کشویی با استفاده از CSS می‌پردازیم.
/* Menu button style */
.dropbtn {
background-color: #3498db;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* style container dropdown */
.dropdown {
position: relative;
display: inline-block;
}
/* The dropdown-content style is hidden first */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links in dropdown-content */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Changing the style of links when hovering */
.dropdown-content a:hover {background-color: #ddd;}
/* Display dropdown-content when hovering over the dropdown */
.dropdown:hover .dropdown-content {
display: block;
}
/* Changing the style of the menu button when hovering */
.dropdown:hover .dropbtn {
background-color: #2980b9;
}
شرح کد:
استایل دکمه منو
background-colorرنگ پس‌زمینه دکمه را تنظیم می‌کند.colorرنگ متن دکمه را سفید می‌کند.paddingوfont-sizeاندازه و فاصله درونی دکمه را تنظیم می‌کنند.borderرا حذف می‌کنیم وcursorرا بهpointerتغییر می‌دهیم تا نشانگر ماوس هنگام هاور تغییر کند.
استایل container dropdown
position: relativeباعث می‌شود محتوای کشویی نسبت به دکمه منو تنظیم شود.display: inline-blockباعث می‌شود dropdown به‌صورت خطی در کنار عناصر دیگر قرار بگیرد.
استایل dropdown-content
display: noneمحتوای کشویی را پنهان می‌کند.position: absoluteباعث می‌شود محتوای کشویی به‌صورت شناور نمایش داده شود.background-colorوbox-shadowاستایل ظاهری محتوای کشویی را تنظیم می‌کنند.z-index: 1باعث می‌شود محتوای کشویی بالاتر از سایر عناصر قرار گیرد.
استایل لینک‌های درون dropdown-content
colorرنگ متن لینک‌ها را تنظیم می‌کند.paddingفاصله درونی لینک‌ها را تنظیم می‌کند.text-decoration: noneخط زیرین لینک‌ها را حذف می‌کند.display: blockلینک‌ها را به‌صورت بلوکی نمایش می‌دهد.
تغییر استایل لینک‌ها هنگام هاور شدن
background-color: #dddرنگ پس‌زمینه لینک‌ها را هنگام هاور تغییر می‌دهد.
نمایش dropdown-content هنگام هاور شدن بر روی dropdown
display: blockمحتوای کشویی را هنگام هاور شدن نمایش می‌دهد.
تغییر استایل دکمه منو هنگام هاور شدن
background-color: #2980b9رنگ پس‌زمینه دکمه منو را هنگام هاور تغییر می‌دهد.
با استفاده از CSS، شما می‌توانید منوهای کشویی زیبا و کاربرپسندی ایجاد کنید که تجربه کاربری بهتری برای بازدیدکنندگان سایت شما فراهم می‌کند. منوهای کشویی به شما این امکان را می‌دهند که محتوای بیشتری را در فضای کم‌تری نمایش دهید و دسترسی به بخش‌های مختلف سایت را آسان‌تر کنید. این تکنیک‌ها به شما کمک می‌کنند تا صفحات وب حرفه‌ای‌تر و سازمان‌یافته‌تری بسازید.
گالری عکس در CSS
ایجاد یک گالری عکس زیبا و کاربرپسند در وب‌سایت با استفاده از CSS می‌تواند تجربه کاربری را بهبود بخشد و بازدیدکنندگان را جذب کند. در این آموزش، نحوه ایجاد یک گالری عکس ساده و زیبا با CSS را بررسی می‌کنیم.
ساختار HTML
ابتدا، ساختار HTML پایه گالری عکس را ایجاد می‌کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
/* We will add CSS later */
</style>
</head>
<body>
<div class="gallery">
<div class="gallery-item">
<img src="image1.jpg" alt="image 1">
</div>
<div class="gallery-item">
<img src="image2.jpg" alt="image 2">
</div>
<div class="gallery-item">
<img src="image3.jpg" alt="image 3">
</div>
<!-- Add more images -->
</div>
</body>
</html>
در این ساختار، یک div با کلاس gallery داریم که حاوی چندین div با کلاس gallery-item است. هر gallery-item شامل یک تصویر است.
استایل‌دهی با CSS
حالا، به استایل‌دهی گالری عکس با استفاده از CSS می‌پردازیم.
/* General style of the gallery */
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
/* Style of gallery items */
.gallery-item {
flex: 1 1 calc(25% - 10px);
box-sizing: border-box;
overflow: hidden;
position: relative;
}
/* Style pictures in the gallery */
.gallery-item img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
/* Hover effect on images */
.gallery-item:hover img {
transform: scale(1.1);
}
شرح کد:
استایل کلی گالری
display: flexبرای ایجاد یک گالری انعطاف‌پذیر.flex-wrap: wrapبرای پیچیدن آیتم‌ها در خطوط جدید.gap: 10pxبرای ایجاد فاصله بین آیتم‌ها.justify-content: centerبرای مرکز کردن آیتم‌های گالری.
استایل آیتم‌های گالری
flex: 1 1 calc(25% - 10px)برای تعیین عرض هر آیتم و ایجاد انعطاف‌پذیری.box-sizing: border-boxبرای در نظر گرفتن پدینگ و مرزها در عرض و ارتفاع.overflow: hiddenبرای پنهان کردن بخش‌های اضافی تصاویر.position: relativeبرای استفاده در افکت‌ها.
استایل تصاویر در گالری
width: 100%برای تنظیم عرض تصاویر به اندازه آیتم‌ها.height: autoبرای حفظ نسبت تصویر.display: blockبرای جلوگیری از فضای اضافی زیر تصاویر.transition: transform 0.3s easeبرای ایجاد افکت تغییر اندازه نرم.
افکت هاور بر روی تصاویر
transform: scale(1.1)برای بزرگ‌تر کردن تصاویر هنگام هاور شدن.
با استفاده از CSS می‌توانید گالری عکس‌های زیبا و جذابی ایجاد کنید که تجربه کاربری را بهبود بخشد. این تکنیک‌ها به شما امکان می‌دهند تا تصاویر خود را به‌صورت سازمان‌یافته و جذاب نمایش دهید. ایجاد افکت‌های هاور باعث می‌شود که گالری شما دینامیک‌تر و جذاب‌تر به نظر برسد. این روش‌ها به شما کمک می‌کنند تا وب‌سایت‌های حرفه‌ای‌تر و کاربرپسندتری بسازید.
معرفی Image Sprites
Image sprites یک تکنیک در طراحی وب است که به کمک آن می‌توان چندین تصویر کوچک را در یک فایل تصویر بزرگ‌تر ترکیب کرد و سپس با استفاده از CSS، تنها بخش‌های مورد نظر از این تصویر بزرگ‌تر را نمایش داد. این تکنیک به کاهش تعداد درخواست‌های HTTP به سرور کمک می‌کند و باعث افزایش سرعت بارگذاری صفحات وب می‌شود.
ساختار HTML
ابتدا، ساختار HTML پایه برای نمایش دکمه‌های ناوبری با استفاده از image sprites را ایجاد می‌کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Sprites در CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sprite-container">
<div class="home"></div>
<div class="about"></div>
<div class="contact"></div>
</div>
</body>
</html>
در این ساختار، یک div با کلاس sprite-container داریم که حاوی سه div با کلاس‌های home، about و contact است. هر کدام از این divها نمایش‌دهنده یک بخش از تصویر sprite هستند.
استایل‌دهی با CSS
حالا، به استایل‌دهی image sprites با استفاده از CSS می‌پردازیم.
/* General style for container */
.sprite-container {
display: flex;
gap: 10px;
}
/* General styling for sprite items */
.sprite-container div {
width: 50px;
height: 50px;
background: url('sprite.png') no-repeat;
}
/* Dedicated style for each part of the sprite */
.home {
background-position: 0 0;
}
.about {
background-position: -50px 0;
}
.contact {
background-position: -100px 0;
}
شرح کد:
استایل کلی برای container
display: flexبرای ایجاد یک container انعطاف‌پذیر.gap: 10pxبرای ایجاد فاصله بین آیتم‌ها.
استایل کلی برای آیتم‌های sprite
width: 50pxوheight: 50pxبرای تنظیم ابعاد هر آیتم.background: url('sprite.png') no-repeatبرای استفاده از تصویر sprite و جلوگیری از تکرار تصویر.
استایل اختصاصی برای هر بخش از sprite
background-position: 0 0برایhome، که بخش بالای سمت چپ تصویر sprite را نمایش می‌دهد.background-position: -50px 0برایabout، که 50 پیکسل از سمت چپ تصویر sprite را نمایش می‌دهد.background-position: -100px 0برایcontact، که 100 پیکسل از سمت چپ تصویر sprite را نمایش می‌دهد.
ایجاد فایل Sprite
فایل sprite شما باید شامل تصاویر مختلف در یک فایل باشد. به عنوان مثال، فایل sprite.png ممکن است به صورت زیر باشد:
این فایل شامل سه آیکون با عرض 50 پیکسل است که به صورت افقی کنار هم قرار گرفته‌اند.
با استفاده از image sprites در CSS، می‌توانید سرعت بارگذاری صفحات وب خود را بهبود بخشید و تعداد درخواست‌های HTTP را کاهش دهید. این تکنیک به ویژه برای نمایش آیکون‌ها و دکمه‌های ناوبری کاربرد دارد و باعث می‌شود وب‌سایت شما کارآمدتر و حرفه‌ای‌تر به نظر برسد.
سلکتورهای Attribute
سلکتورهای attribute در CSS به شما امکان می‌دهند عناصر HTML را بر اساس ویژگی‌های (attributes) خاص آنها انتخاب کنید. این سلکتورها بسیار قدرتمند هستند و می‌توانند به شما کمک کنند تا استایل‌دهی بهتری برای عناصر مختلف وب‌سایت خود ایجاد کنید.
انواع سلکتورهای Attribute
سلکتور [attribute]
این سلکتور تمامی عناصری که دارای یک ویژگی خاص هستند را انتخاب می‌کند.
/* Selection of all elements that have the title attribute */
[title] {
color: blue;
}
سلکتور [attribute="value"]
این سلکتور تمامی عناصری که دارای یک ویژگی با مقدار خاص هستند را انتخاب می‌کند.
/* Select all elements that have the type attribute with the value "button". */
[type="button"] {
background-color: green;
color: white;
}
سلکتور [attribute^="value"]
این سلکتور تمامی عناصری که مقدار ویژگی آنها با مقدار مشخصی شروع می‌شود را انتخاب می‌کند.
/* Select all elements whose href attribute value starts with "https". */
[href^="https"] {
text-decoration: none;
}
سلکتور [attribute$="value"]
این سلکتور تمامی عناصری که مقدار ویژگی آنها به مقدار مشخصی ختم می‌شود را انتخاب می‌کند.
/* Select all elements whose src attribute value ends in ".jpg". */
[src$=".jpg"] {
border: 2px solid red;
}
سلکتور [attribute="value"]*
این سلکتور تمامی عناصری که مقدار ویژگی آنها شامل مقدار مشخصی است را انتخاب می‌کند.
/* Select all elements whose class property value contains "highlight". */
[class*="highlight"] {
background-color: yellow;
}
سلکتور [attribute~="value"]
این سلکتور تمامی عناصری که مقدار ویژگی آنها شامل یک کلمه خاص (جدا شده با فضای خالی) است را انتخاب می‌کند.
/* Select all elements whose class property value contains the word "active". */
[class~="active"] {
font-weight: bold;
}
سلکتور [attribute|="value"]
این سلکتور تمامی عناصری که مقدار ویژگی آنها با یک مقدار مشخص یا مقدار مشخصی که با خط تیره دنبال می‌شود، شروع می‌شود را انتخاب می‌کند.
/* Selects all elements whose lang attribute value starts with "en" or "en-". */
[lang|="en"] {
font-style: italic;
}
مثال عملی
فرض کنید یک صفحه HTML داریم که شامل تعدادی لینک و دکمه است. می‌خواهیم با استفاده از سلکتورهای attribute به آنها استایل دهیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute selectors in CSS</title>
<style>
/* We will add CSS later */
</style>
</head>
<body>
<a href="http://example.com" title="Example">Link to Example</a>
<a href="https://example.com" title="Secure Example">Link to Secure Example</a>
<img src="image.jpg" alt="Sample image">
<button type="button" class="btn highlight">button</button>
<button type="submit" class="btn active">submit</button>
</body>
</html>
حالا، استایل‌دهی با استفاده از سلکتورهای attribute را انجام می‌دهیم.
/* Selection of all elements that have the title attribute */
[title] {
color: blue;
}
/* Selecting all elements that have the type attribute with the value "button".*/
[type="button"] {
background-color: green;
color: white;
}
/* Select all elements whose href attribute value starts with "https". */
[href^="https"] {
text-decoration: none;
font-weight: bold;
}
/* Select all elements whose src attribute value ends with ".jpg". */
[src$=".jpg"] {
border: 2px solid red;
}
/* Selecting all elements whose class property value contains "highlight".*/
[class*="highlight"] {
background-color: yellow;
}
/* Selecting all elements whose class attribute value contains the word "active". */
[class~="active"] {
font-weight: bold;
}
استفاده از سلکتورهای attribute در CSS به شما امکان می‌دهد استایل‌دهی‌های دقیق‌تری را بر اساس ویژگی‌های خاص عناصر انجام دهید. این ابزار قدرتمند به شما کمک می‌کند تا کنترل بیشتری بر استایل‌دهی وب‌سایت خود داشته باشید و بهینه‌سازی‌های بیشتری در کد خود انجام دهید. با تمرین و استفاده از این سلکتورها می‌توانید وب‌سایت‌های جذاب و کارآمدتری ایجاد کنید.
استایل‌دهی فرم‌ها
فرم‌ها یکی از مهم‌ترین بخش‌های هر وب‌سایت هستند و استایل‌دهی آنها می‌تواند تأثیر زیادی بر تجربه کاربری (UX) داشته باشد. در این بخش، با استفاده از CSS، به شما نشان می‌دهیم که چگونه فرم‌های خود را زیباتر و کاربرپسندتر کنید.
ابتدا، به سراغ برخی تنظیمات پایه می‌رویم که معمولاً در هر فرم استفاده می‌شوند:
تنظیم عرض و مارجین فرم
form {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
در این مثال، عرض فرم به 100% صفحه تنظیم شده و یک حداکثر عرض 600 پیکسل دارد. مارجین‌های اتوماتیک باعث می‌شوند فرم در مرکز صفحه قرار گیرد. همچنین، padding به فرم اضافه شده تا محتوای آن از لبه‌ها فاصله داشته باشد، و یک رنگ پس‌زمینه روشن و گوشه‌های گرد شده به آن داده‌ایم. یک سایه کوچک نیز برای فرم اضافه کرده‌ایم تا ظاهر بهتری داشته باشد.
استایل‌دهی به عناصر ورودی (input)
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
border-color: #66afe9;
outline: none;
box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}
در اینجا، عرض فیلدهای متنی، ایمیل، پسورد و تکست‌اریا به 100% تنظیم شده است تا تمام عرض فرم را بگیرند. padding برای فضای داخلی فیلدها و margin برای فاصله بین فیلدها اضافه شده است. همچنین، برای حالت focus (وقتی کاربر روی فیلد کلیک می‌کند) یک رنگ حاشیه آبی و سایه‌ای زیبا اضافه شده است.
استایل‌دهی به دکمه‌های ارسال (submit)
input[type="submit"],
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover,
button:hover {
background-color: #45a049;
}
در این مثال، دکمه‌های ارسال و دکمه‌های معمولی به رنگ سبز با متن سفید استایل داده شده‌اند. padding و border-radius برای زیبایی بیشتر اضافه شده‌اند و در حالت hover (وقتی کاربر روی دکمه قرار می‌گیرد) رنگ پس‌زمینه کمی تیره‌تر می‌شود.
مثال کامل یک فرم استایل‌دهی شده
حالا، با استفاده از کدهای بالا، یک فرم کامل را استایل‌دهی می‌کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylized form</title>
<style>
form {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
border-color: #66afe9;
outline: none;
box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}
input[type="submit"],
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover,
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form action="/submit" method="post">
<label for="name">name:</label>
<input type="text" id="name" name="name" required>
<label for="email">email:</label>
<input type="email" id="email" name="email" required>
<label for="password">password:</label>
<input type="password" id="password" name="password" required>
<label for="message">message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<input type="submit" value="submit">
</form>
</body>
</html>
در این مثال، یک فرم ساده شامل فیلدهای نام، ایمیل، رمز عبور و پیام را مشاهده می‌کنید. با استفاده از CSS، این فرم به شکلی زیبا و کاربرپسند استایل‌دهی شده است.
شمارنده‌ها در CSS
شمارنده‌ها در CSS به شما این امکان را می‌دهند که به راحتی لیست‌ها و عناصر دیگری که به نوعی شماره‌گذاری نیاز دارند، استایل‌دهی و سفارشی‌سازی کنید. با استفاده از ویژگی‌های شمارنده می‌توانید شماره‌گذاری خودکار برای عناصر ایجاد کنید و ظاهر آنها را مطابق با نیاز خود تنظیم کنید.
ایجاد شمارنده‌ها
برای استفاده از شمارنده‌ها در CSS، ابتدا باید یک شمارنده را ایجاد و مقداردهی اولیه کنید. سپس می‌توانید با استفاده از ویژگی‌های counter-increment و counter-reset آنها را کنترل کنید.
مثال 1: شمارنده ساده
/* Counter definition and initialization */
ol {
counter-reset: item;
}
ol li {
counter-increment: item;
}
/* Use a counter to list items */
ol li::before {
content: counter(item) ". ";
font-weight: bold;
}
در این مثال، ابتدا شمارنده‌ای به نام item را تعریف و مقداردهی اولیه می‌کنیم. سپس برای هر عنصر li، شمارنده را افزایش می‌دهیم. در نهایت، از شمارنده برای شماره‌گذاری آیتم‌های لیست استفاده می‌کنیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counters in CSS</title>
<style>
ol {
counter-reset: item;
}
ol li {
counter-increment: item;
}
ol li::before {
content: counter(item) ". ";
font-weight: bold;
}
</style>
</head>
<body>
<ol>
<li>The first case</li>
<li>second item</li>
<li>The third case</li>
</ol>
</body>
</html>
شمارنده‌های تو در تو
شما می‌توانید شمارنده‌ها را برای لیست‌های تو در تو نیز استفاده کنید. برای این کار، باید شمارنده‌های مختلفی را تعریف و مدیریت کنید.
مثال 2: شمارنده‌های تو در تو
/* Define counters for parent list and nested list */
ol {
counter-reset: main-item;
}
ol li {
counter-increment: main-item;
}
ol li::before {
content: counter(main-item) ". ";
font-weight: bold;
}
ol li ol {
counter-reset: sub-item;
list-style: none;
}
ol li ol li {
counter-increment: sub-item;
}
ol li ol li::before {
content: counter(main-item) "." counter(sub-item) " ";
font-weight: normal;
}
در این مثال، دو شمارنده به نام‌های main-item و sub-item تعریف شده‌اند. شمارنده main-item برای لیست اصلی و شمارنده sub-item برای لیست تو در تو استفاده می‌شود.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested counters in CSS</title>
<style>
ol {
counter-reset: main-item;
}
ol li {
counter-increment: main-item;
}
ol li::before {
content: counter(main-item) ". ";
font-weight: bold;
}
ol li ol {
counter-reset: sub-item;
list-style: none;
padding-left: 20px;
}
ol li ol li {
counter-increment: sub-item;
}
ol li ol li::before {
content: counter(main-item) "." counter(sub-item) " ";
font-weight: normal;
}
</style>
</head>
<body>
<ol>
<li>The first case
<ol>
<li>The first sub-item</li>
<li>The second sub-item</li>
</ol>
</li>
<li>second item</li>
<li>The third case</li>
</ol>
</body>
</html>
استفاده از شمارنده‌ها در عناصر غیر لیستی
شمارنده‌ها فقط برای لیست‌ها نیستند و می‌توان آنها را برای هر عنصر HTML به کار برد. به عنوان مثال، می‌توانید از شمارنده‌ها برای شماره‌گذاری تیترها در یک سند استفاده کنید.
مثال 3: شماره‌گذاری تیترها
body {
counter-reset: section;
}
h2 {
counter-increment: section;
}
h2::before {
content: "part" counter(section) ": ";
font-weight: bold;
}
در این مثال، شمارنده‌ای به نام section برای شماره‌گذاری تیترهای h2 تعریف شده است.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counters for headings in CSS</title>
<style>
body {
counter-reset: section;
}
h2 {
counter-increment: section;
}
h2::before {
content: "part" counter(section) ": ";
font-weight: bold;
}
</style>
</head>
<body>
<h2>Introduction</h2>
<p>This section is the introduction.</p>
<h2>The first part</h2>
<p>This is the first part.</p>
<h2>The second part</h2>
<p>This is the second part.</p>
</body>
</html>
شمارنده‌ها در CSS ابزار قدرتمندی برای شماره‌گذاری خودکار و سفارشی‌سازی ظاهر آنها هستند. با استفاده از شمارنده‌ها می‌توانید لیست‌ها، تیترها و هر عنصر دیگری را به راحتی شماره‌گذاری کنید و ظاهر آنها را مطابق با نیازهای خود تنظیم کنید. تمرین و تجربه با ویژگی‌های مختلف شمارنده‌ها می‌تواند به شما کمک کند تا در طراحی وب‌سایت‌های حرفه‌ای‌تر و جذاب‌تر مهارت پیدا کنید.
اولویت‌بندی سلکتورها
در CSS، هنگامی که چندین قانون سبک برای یک عنصر تعریف می‌شوند، مرورگر باید تصمیم بگیرد کدام یک از این قوانین را اعمال کند. این تصمیم‌گیری با استفاده از یک مفهوم به نام اولویت‌بندی (specificity) انجام می‌شود. اولویت‌بندی مشخص می‌کند که کدام قوانین CSS بیشتر وزن دارند و باید اجرا شوند.
محاسبه اولویت‌بندی
اولویت‌بندی CSS بر اساس یک سیستم وزن‌دهی چهار قسمتی انجام می‌شود که به صورت (a, b, c, d) محاسبه می‌شود:
a: تعداد سلکتورهای ID (#id)b: تعداد سلکتورهای کلاس (.class)، سلکتورهای pseudo-class (:hover،:focus)، و سلکتورهای attribute ([type="text"])c: تعداد سلکتورهای نوع (tag) (div,p,span)d: تعداد سلکتورهای جهانی (*)
هر کدام از این مقادیر به صورت عددی محاسبه و در نهایت با هم مقایسه می‌شوند. اگر دو سلکتور دارای اولویت‌بندی یکسان باشند، سلکتوری که در آخرین مرحله در CSS آمده باشد، اعمال می‌شود.
مثال‌هایی از اولویت‌بندی
مثال 1: اولویت‌بندی سلکتورهای ID، کلاس و نوع
/* Selector ID */
#myId {
color: blue;
}
/* Class selector */
.myClass {
color: red;
}
/* Type selector */
p {
color: green;
}
در این مثال، اگر یک عنصر دارای هر سه سلکتور باشد، رنگ آن به ترتیب زیر اعمال می‌شود:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prioritizing selectors in CSS</title>
<style>
#myId {
color: blue; /* top priority */
}
.myClass {
color: red; /* Medium priority */
}
p {
color: green; /* Low priority */
}
</style>
</head>
<body>
<p id="myId" class="myClass">This is a paragraph.</p>
</body>
</html>
در اینجا، متن پاراگراف به رنگ آبی در می‌آید زیرا سلکتور #myId بیشترین اولویت را دارد.
مثال 2: ترکیب سلکتورها
/* Combination of type and class selector */
div.myClass {
color: purple;
}
/* Combination of ID and class selector */
#myId.myClass {
color: orange;
}
در این مثال، اولویت‌بندی ترکیبی نیز مد نظر است:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combined prioritization of selectors in CSS</title>
<style>
div.myClass {
color: purple; /* Lower priority */
}
#myId.myClass {
color: orange; /* More priority */
}
</style>
</head>
<body>
<div id="myId" class="myClass">This is a paragraph.</div>
</body>
</html>
در اینجا، متن به رنگ نارنجی در می‌آید زیرا ترکیب #myId.myClass اولویت بیشتری دارد.
اهمیت !important
ویژگی !important در CSS برای اولویت‌بندی نهایی استفاده می‌شود و باعث می‌شود که این قانون خاص بالاترین اولویت را داشته باشد، حتی اگر سلکتورهای دیگری دارای اولویت‌بندی بالاتری باشند.
/* Type selector */
p {
color: green;
}
/* Class selector with !important */
.myClass {
color: red !important;
}
در اینجا، حتی اگر یک پاراگراف دارای کلاس myClass باشد، رنگ آن قرمز خواهد بود.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Importance (!important) in CSS</title>
<style>
p {
color: green; /* Lower priority */
}
.myClass {
color: red !important; /* top priority */
}
</style>
</head>
<body>
<p class="myClass">This is a paragraph.</p>
</body>
</html>
در این مثال، رنگ متن پاراگراف قرمز خواهد بود زیرا !important بالاترین اولویت را به خود اختصاص داده است.
درک صحیح اولویت‌بندی سلکتورها در CSS به شما کمک می‌کند که استایل‌های پیچیده‌تری را به طور موثر و با کنترل بیشتری ایجاد کنید. با تمرین و تجربه، می‌توانید به درک بهتری از نحوه اعمال اولویت‌بندی‌ها برسید و از مشکلات ناشی از تضاد قوانین CSS جلوگیری کنید.
واحدهای اندازه‌گیری در CSS
در CSS، برای تعیین ابعاد، فاصله‌ها، اندازه فونت و سایر خواص مرتبط با اندازه‌گیری، از واحدهای مختلفی استفاده می‌شود. این واحدها به دو دسته اصلی تقسیم می‌شوند: واحدهای مطلق و واحدهای نسبی.
واحدهای مطلق
واحدهای مطلق اندازه‌هایی ثابت هستند که به دستگاه یا صفحه نمایش وابسته نیستند. این واحدها شامل موارد زیر می‌شوند:
- px (پیکسل): پیکسل یک نقطه روی صفحه نمایش است. اندازه آن ممکن است بر اساس وضوح صفحه نمایش متفاوت باشد.
- cm (سانتی‌متر): یک سانتی‌متر.
- mm (میلی‌متر): یک میلی‌متر.
- in (اینچ): یک اینچ برابر با 2.54 سانتی‌متر است.
- pt (پوینت): یک پوینت برابر با 1/72 اینچ است.
- pc (پیکا): یک پیکا برابر با 12 پوینت است.
مثال:
.box {
width: 100px;
height: 2cm;
border: 1mm solid black;
}
در این مثال، جعبه‌ای با عرض 100 پیکسل، ارتفاع 2 سانتی‌متر و یک خط مرزی 1 میلی‌متری تعریف شده است.
واحدهای نسبی
واحدهای نسبی به ابعاد دیگری در صفحه وابسته هستند و می‌توانند با توجه به محیط اطراف تغییر کنند. این واحدها شامل موارد زیر می‌شوند:
- % (درصد): نسبت به اندازه عنصر والد خود محاسبه می‌شود.
- em: نسبت به اندازه فونت عنصر والد. اگر اندازه فونت عنصر والد 16 پیکسل باشد، 1em برابر با 16 پیکسل است.
- rem (ریشه em): نسبت به اندازه فونت عنصر ریشه (html).
- vw (واحد عرض صفحه): 1vw برابر با 1% از عرض viewport است.
- vh (واحد ارتفاع صفحه): 1vh برابر با 1% از ارتفاع viewport است.
- vmin: 1vmin برابر با 1% از کوچکترین بعد viewport (عرض یا ارتفاع).
- vmax: 1vmax برابر با 1% از بزرگترین بعد viewport (عرض یا ارتفاع).
مثال:
.container {
width: 80%; /* 80% of the width of the parent element */
height: 50vh; /* 50% of the viewport height */
}
.text {
font-size: 2em; /* 2 times the font size of the parent element */
margin: 1rem; /* 1 times the font size of the root element */
}
در این مثال، container دارای عرضی برابر با 80 درصد از عنصر والد خود و ارتفاعی برابر با 50 درصد از ارتفاع viewport است. اندازه فونت text برابر با 2 برابر اندازه فونت عنصر والد خود و حاشیه‌ای برابر با 1 برابر اندازه فونت عنصر ریشه دارد.
مثال ترکیبی
بیایید مثالی ترکیبی از واحدهای مختلف را بررسی کنیم:
body {
font-size: 16px;
}
.wrapper {
width: 60vw;
height: 80vh;
padding: 1em;
}
.content {
width: 50%;
margin: 0 auto;
font-size: 1.5rem;
border: 0.5cm solid #333;
}
در این مثال:
- اندازه فونت بدن 16 پیکسل است.
wrapperدارای عرضی برابر با 60 درصد از عرض viewport و ارتفاعی برابر با 80 درصد از ارتفاع viewport است.contentدارای عرضی برابر با 50 درصد از عنصر والد خود، حاشیه‌ای خودکار برای مرکز شدن، اندازه فونت برابر با 1.5 برابر اندازه فونت عنصر ریشه (24 پیکسل)، و یک خط مرزی 0.5 سانتی‌متری است.
واحدهای اندازه‌گیری در CSS به شما انعطاف‌پذیری و قدرت کنترل بیشتری بر طراحی وب سایت‌ها می‌دهند. با استفاده صحیح از واحدهای مطلق و نسبی، می‌توانید طراحی‌های پاسخگو و پویا ایجاد کنید که به طور مؤثر در دستگاه‌ها و محیط‌های مختلف نمایش داده شوند. برای دستیابی به بهترین نتایج، همیشه واحدها را بر اساس نیازهای خاص پروژه و دستگاه‌های هدف انتخاب کنید.
توابع ریاضی در CSS
توابع ریاضی در CSS به شما امکان می‌دهند تا با استفاده از محاسبات ریاضی، مقادیر مختلفی را برای خواص CSS تعیین کنید. این توابع برای ایجاد طراحی‌های پویا و انعطاف‌پذیر بسیار مفید هستند. چند تابع ریاضی مهم در CSS شامل calc(), min(), max(), و clamp() می‌شوند.
calc()
تابع calc() به شما اجازه می‌دهد تا محاسبات ریاضی را برای تعیین مقادیر خواص CSS انجام دهید. می‌توانید از عملیات جمع (+), تفریق (-), ضرب (*), و تقسیم (/) استفاده کنید.
.box {
width: calc(100% - 50px);
height: calc(100vh - 2em);
}
در این مثال، عرض box برابر با 100 درصد عرض والدش منهای 50 پیکسل و ارتفاع آن برابر با 100 درصد ارتفاع صفحه منهای 2 برابر اندازه فونت است.
min()
تابع min() کمترین مقدار از چندین مقدار داده شده را انتخاب می‌کند.
.container {
width: min(50%, 300px);
}
در این مثال، عرض container برابر با کمتر از 50 درصد عرض والد یا 300 پیکسل، هر کدام که کمتر باشد، خواهد بود.
max()
تابع max() بیشترین مقدار از چندین مقدار داده شده را انتخاب می‌کند.
.container {
width: max(50%, 300px);
}
در این مثال، عرض container برابر با بیشتر از 50 درصد عرض والد یا 300 پیکسل، هر کدام که بیشتر باشد، خواهد بود.
clamp()
تابع clamp() یک مقدار را در یک محدوده مشخص قفل می‌کند. این تابع سه آرگومان می‌گیرد: مقدار حداقل، مقدار مطلوب و مقدار حداکثر.
.text {
font-size: clamp(1rem, 2.5vw, 2rem);
}
در این مثال، اندازه فونت text بین 1rem و 2rem خواهد بود، اما در حالت ایده‌آل به 2.5 درصد از عرض viewport تنظیم می‌شود.
مثال ترکیبی
بیایید مثالی از استفاده ترکیبی از این توابع را بررسی کنیم:
body {
font-size: 16px;
}
.wrapper {
width: calc(100% - 2em);
max-width: 1200px;
padding: 1em;
}
.box {
width: clamp(200px, 50%, 600px);
height: min(400px, 50vh);
margin: 0 auto;
border: calc(1rem + 2px) solid #333;
}
در این مثال:
wrapperعرضی برابر با 100 درصد والدش منهای 2em دارد و حداکثر عرض آن 1200 پیکسل است.boxعرضی بین 200 پیکسل و 600 پیکسل دارد، اما به طور ایده‌آل 50 درصد والد خود است. ارتفاع آن برابر با کمتر از 400 پیکسل یا 50 درصد ارتفاع صفحه خواهد بود. همچنین، حاشیه آن خودکار (برای مرکز شدن) و خط مرزی برابر با 1rem به اضافه 2 پیکسل است.
استفاده از توابع ریاضی در CSS به شما امکان می‌دهد تا طراحی‌های پیچیده‌تر و انعطاف‌پذیرتری ایجاد کنید. این توابع به خصوص برای طراحی‌های پاسخگو و پویا بسیار مفید هستند، زیرا می‌توانید به سادگی اندازه‌ها و مقادیر را بر اساس شرایط مختلف صفحه تنظیم کنید. با یادگیری و استفاده از این توابع، می‌توانید کنترل بیشتری بر طراحی وب‌سایت‌های خود داشته باشید و تجربه کاربری بهتری را ارائه دهید.
خب دوستان عزیز، تا اینجای کار با مباحث مهمی در CSS آشنا شدیم که هر کدوم به نحوی می‌تونن ظاهر و کاربرد سایت‌هامون رو تحت تاثیر قرار بدن. از آشنایی با خصوصیت opacity برای تنظیم شفافیت المان‌ها، تا ساختن منوهای navbar افقی و عمودی و ایجاد dropdownهای زیبا. همچنین، یاد گرفتیم چطور با CSS گالری‌های عکس جذاب بسازیم و از تکنیک‌های پیشرفته‌ای مثل image sprites استفاده کنیم تا عملکرد سایتمون رو بهینه کنیم.
سلکتورهای attribute، استایل‌دهی به فرم‌ها، استفاده از شمارنده‌ها و اولویت‌بندی سلکتورها، مباحث مهمی بودن که باعث میشن کنترل بیشتری روی طراحی و استایل‌دهی به المان‌های مختلف داشته باشیم. در نهایت، با واحدهای اندازه‌گیری مختلف و توابع ریاضی در CSS آشنا شدیم که به ما این امکان رو میده تا طراحی‌های دقیق‌تر و انعطاف‌پذیرتری داشته باشیم.
امیدوارم این قسمت از آموزش براتون مفید بوده باشه و حالا با اعتماد به نفس بیشتری بتونید از این ویژگی‌ها و تکنیک‌ها در پروژه‌های وب خودتون استفاده کنید. منتظر ادامه آموزش‌ها باشید، چون هنوز چیزهای زیادی برای یادگیری داریم. با من همراه باشید و هر سوالی داشتید، حتما بپرسید. موفق باشید!
صادق جعفری
از کودکی به کامپیوتر و دنیای دیجیتال علاقه داشتم، به همین دلیل ترک تحصیل کردم و تمام تلاش خودم را صرفا برای یادگیری کامپیوتر، طراحی، برنامه نویسی و ... به کار گرفتم. در کنار مشاغل مختلفی که مجبور به انجامشان بودم برنامه نویسی را یاد گرفتم و از سال 1390 وارد بازار کار شدم و همیشه در تلاش هستم تا چالش های روبرو را با موفقیت پشت سر بگذارم.
شبکه های اجتماعی من