CSS برای مبتدیها شروعی ساده برای طراحی وب حرفهای
پشتیبان جلیلور


فهرست مطالب
📌آموزش استایلدهی با CSS (اصول اولیه CSS)
📌آموزش استایلدهی با CSS (استایلدهی به عناصر)
📌آموزش استایلدهی با CSS (چطور با CSS تگها رو استایل بدیم؟)
📌چطور سایت رو برای دستگاههای مختلف بهینه کنیم؟
شروع طراحی وب با CSS
مقدمه
CSS چیه؟
CSS یا Cascading Style Sheets، زبان استایلدهی به صفحات وب است. به عبارت سادهتر، CSS به شما این امکان رو میده که ظاهر صفحات وب رو کنترل کنید. وقتی یک صفحه وب رو باز میکنید، HTML ساختار اون رو تعریف میکنه، اما CSS به شما این امکان رو میده که ظاهر و طراحی اون رو بر اساس سلیقه و نیاز خودتون تغییر بدید. مثلاً میتونید رنگ پسزمینه صفحه رو تغییر بدید، فونتها رو تنظیم کنید، اندازه عناصر رو مشخص کنید و حتی چیدمان صفحه رو تعیین کنید.
چرا باید CSS یاد بگیریم؟
در دنیای امروز، طراحی وب به یک مهارت ضروری تبدیل شده. CSS نه تنها به شما کمک میکنه که ظاهر سایتها رو حرفهایتر و جذابتر کنید، بلکه به شما این امکان رو میده که صفحات وب خود رو واکنشگرا (responsive) بسازید؛ یعنی صفحات شما در دستگاههای مختلف مثل موبایل، تبلت و دسکتاپ به درستی نمایش داده بشن. در مرکز آموزش از راه دور ماراد، ما به شما یاد میدهیم که با استفاده از CSS به راحتی طراحی سایتهای زیبا و کاربردی انجام بدید که همه کاربران تجربه خوبی از اون داشته باشن. بنابراین، یادگیری CSS یک گام مهم برای تبدیل شدن به یک طراح وب حرفهای است.
آموزش استایلدهی با CSS
اصول اولیه CSS
چطور استایلها رو به صفحات اضافه کنیم؟
برای اضافه کردن استایلها به صفحات وب، سه روش اصلی وجود داره که هرکدوم کاربرد خاص خودش رو داره.
- استایل درونخطی (Inline): این روش سادهترین روش برای اضافه کردن استایل به یک عنصر خاص است. در این روش، شما استایلها رو مستقیماً داخل تگ HTML با استفاده از ویژگی style مینویسید. به عنوان مثال، میتوانید رنگ متن یک پاراگراف رو به این صورت تغییر بدید:
html
CopyEdit
<p style="color: red;">این متن قرمز است.</p>
این روش برای تغییر سریع و موقت استایلها مناسب است، ولی در پروژههای بزرگ توصیه نمیشود.
- استایل داخلی (Internal): این روش به شما این امکان رو میده که استایلها رو داخل خود صفحه HTML بنویسید. شما از تگ <style> در قسمت <head> استفاده میکنید. این روش مناسب مواقعی است که میخواهید استایلها فقط برای یک صفحه خاص اعمال بشه:
html
CopyEdit
<head>
<style>
p {
color: blue;
}
</style>
</head>
در ماراد، این روش زمانی که میخواهید استایلهای صفحهای خاص رو تنظیم کنید، میتونه مفید باشه.
- استایل خارجی (External): این روش حرفهایترین و مقیاسپذیرترین روش است. شما استایلها رو در یک فایل جداگانه با پسوند .css مینویسید و سپس این فایل رو به صفحه HTML خود لینک میکنید. این روش برای پروژههای بزرگ و زمانی که میخواهید استایلهای مشابه رو در چندین صفحه استفاده کنید، بهترین گزینه است:
html
CopyEdit
<link rel="stylesheet" type="text/css" href="styles.css">
این روش در ماراد برای پروژههای بزرگتر و سازماندهی بهتر توصیه میشه.
انتخابگرها (Selectors)
انتخابگرها در CSS ابزارهایی هستند که به شما کمک میکنند تا تگها یا گروهی از تگها رو انتخاب کنید و به اونها استایل بدید. انتخابگرها میتوانند بسیار ساده یا پیچیده باشند:
- انتخابگرهای تگ (Tag Selectors): برای اعمال استایل به همهی تگهای خاص، مثل:
css
CopyEdit
p {
color: green;
}
انتخابگرهای کلاس (Class Selectors): برای اعمال استایل به عناصر با کلاس مشخص. کلاسها با نقطه (.) مشخص میشوند:
css
CopyEdit
.highlight {
font-weight: bold;
}
- انتخابگرهای شناسه (ID Selectors): برای اعمال استایل به یک عنصر خاص با شناسه منحصر به فرد. شناسهها با # مشخص میشوند:
css
CopyEdit
#header {
background-color: orange;
}
ویژگیها و مقادیر: در CSS، شما استایلها رو با ویژگیها (Properties) و مقادیر (Values) مشخص میکنید. به عنوان مثال، برای تغییر رنگ متن از ویژگی color استفاده میکنید و مقدار اون رو تعیین میکنید:
• color: red; برای رنگ قرمز
• font-size: 16px; برای اندازه فونت
• background-color: #f0f0f0; برای رنگ پسزمینه
در ماراد، ما به شما آموزش میدهیم که چطور با استفاده از ویژگیها و مقادیر مختلف، صفحات وب خود رو زیبا و حرفهای کنید. از تنظیم رنگها و اندازهها گرفته تا کار با فونتها و فاصلهها، همهچیز در طراحی وب با CSS قابل تنظیم است.
آموزش استایلدهی با CSS
استایلدهی به عناصر
اندازهگیریها: در CSS، برای تعیین ابعاد و اندازهها از واحدهای مختلف استفاده میکنیم که هرکدوم کاربرد خاص خود رو دارند. این واحدها به شما کمک میکنن که اندازهها رو به شکلی دقیق و انعطافپذیر تعیین کنید.
px (پیکسل): پیکسل واحدی ثابت است که معمولاً برای تعیین اندازهها در طراحیهای دقیق استفاده میشود. به عنوان مثال، وقتی میخواهید اندازه فونت یک متن رو دقیقاً به 16 پیکسل تعیین کنید:
css
CopyEdit
p {
font-size: 16px;
}
em: این واحد به اندازه فونت والد (parent) بستگی داره. هر em برابر با اندازه فونت عنصر والد خود است. به این صورت میتونید انعطافپذیری بیشتری در طراحی ایجاد کنید.
css
CopyEdit
p {
font-size: 2em;
}
این کد باعث میشه اندازه فونت پاراگراف دو برابر اندازه فونت والدش بشه.
rem (Root em): برخلاف em که به اندازه فونت والد بستگی داره، rem همیشه به اندازه فونت ریشه (عنصر <html>) بستگی داره. این واحد برای ایجاد اندازههای ثابت و یکنواخت در سراسر صفحه کاربرد داره.
css
CopyEdit
p {
font-size: 1.5rem;
}
% (درصد): درصد برای تعیین اندازهها به صورت نسبی استفاده میشه. این واحد معمولاً برای تنظیم عرض، ارتفاع، و فضای داخلی (padding) استفاده میشه.
css
CopyEdit
div {
width: 50%;
}
آموزش استایلدهی با CSS
چطور با CSS تگها رو استایل بدیم؟
تغییر رنگ، اندازه، و فونت تگها: یکی از ابتداییترین و متداولترین تغییرات در CSS، استایلدهی به رنگها، اندازهها و فونتهاست. شما میتوانید با استفاده از ویژگیهایی مثل color، font-size، و font-family به راحتی ظاهر متنها رو تغییر بدید:
css
CopyEdit
p {
color: #333; /* رنگ متن */
font-size: 18px; /* اندازه فونت */
font-family: 'Arial', sans-serif; /* انتخاب فونت */
}
در ماراد، یادگیری این استایلها به شما این امکان رو میده که محتواهای متنی رو جذابتر و خواناتر کنید.
کار با تصاویر پسزمینه: تصاویر پسزمینه یکی از راههای جذاب برای تزئین صفحات وب هستند. شما میتوانید با استفاده از ویژگی background-image تصویری را به پسزمینه یک عنصر اضافه کنید و از ویژگیهای دیگر برای تنظیم موقعیت و اندازه تصویر استفاده کنید:
css
CopyEdit
div {
background-image: url('background.jpg');
background-size: cover; /* تصویر به طور کامل فضا رو پوشش میده */
background-position: center; /* تصویر در وسط قرار میگیره */
}
این ویژگیها به شما کمک میکنه که صفحات وب خودتون رو با استفاده از تصاویر زیبا و متناسب طراحی کنید. در مرااد، ما به شما یاد میدهیم که چطور با تنظیمات مختلف تصویر پسزمینه، صفحات خودتون رو به شکلی حرفهایتر و چشمنوازتر در بیارید.
Flexbox و Grid پیشرفتهتر
Flexbox: یکی از قدرتمندترین ابزارهای CSS برای ساخت چیدمانهای انعطافپذیر (flexible layouts) است. Flexbox به شما این امکان رو میده که طراحیهای پیچیده رو با کنترل دقیقتری نسبت به چیدمان عناصر، حتی در اندازههای مختلف صفحه، انجام بدید. به جای استفاده از ویژگیهای قدیمیتر مثل float یا position، Flexbox به راحتی برای چینش عناصر در ردیف یا ستونها، با توجه به فضای موجود، عمل میکنه.
اصول پایه Flexbox: برای شروع کار با Flexbox، ابتدا باید روی کانتینر والد ویژگی display: flex; رو اعمال کنید. سپس میتوانید نحوه چیدمان عناصر رو با استفاده از ویژگیهای مختلف Flexbox تنظیم کنید.
css
CopyEdit
.container {
display: flex;
justify-content: space-between; /* فاصله بین عناصر */
align-items: center; /* ترازبندی عمودی */
}
در اینجا، justify-content فاصله بین عناصر رو کنترل میکنه و align-items برای ترازبندی عمودی استفاده میشه.
چیدمان در Flexbox: شما میتوانید برای هر عنصر درون Flexbox خواص خاصی مثل اندازه و ترتیب رو تعریف کنید. به عنوان مثال، برای تعیین ترتیب عناصر در Flexbox، از order استفاده میکنید:
css
CopyEdit
.item {
order: 2;
}
این ویژگی به شما این امکان رو میده که ترتیب نمایش عناصر رو بدون نیاز به تغییر در HTML تغییر بدید. این ویژگی در مرااد به شما کمک میکنه که چیدمان صفحات رو حتی در صفحات موبایل به راحتی و بدون نیاز به تغییر کدهای زیاد تنظیم کنید.
CSS Grid :CSS Grid یکی از قدرتمندترین ابزارهای CSS برای ساخت شبکههای پیچیده و منظم است. با استفاده از Grid میتوانید صفحات وب خود رو به راحتی به شبکههایی منظم و ساختارمند تقسیم کنید، بدون اینکه نیاز به استفاده از تگهای اضافی یا پیچیده داشته باشید. Grid به شما این امکان رو میده که طراحیهای پیچیدهای بسازید که در آن هر عنصر به صورت مستقل و دقیق در موقعیت خود قرار بگیره.
اصول پایه CSS Grid: برای شروع کار با CSS Grid، ابتدا باید از display: grid; برای کانتینر والد استفاده کنید. سپس، با استفاده از ویژگیهایی مثل grid-template-columns و grid-template-rows میتوانید تعداد و اندازه ستونها و ردیفها رو مشخص کنید.
css
CopyEdit
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* سه ستون با اندازههای متفاوت */
grid-template-rows: auto; /* ردیفها به صورت خودکار تنظیم میشوند */
}
در اینجا، fr یک واحد نسبی است که به شما این امکان رو میده که فضای موجود رو به نسبت تقسیم کنید. به طور مثال، ستون وسط دو برابر ستونهای کناری فضای بیشتری خواهد داشت.
چیدمان در CSS Grid: شما میتوانید عناصر رو در شبکه Grid با استفاده از ویژگیهایی مثل grid-column و grid-row در موقعیتهای خاص قرار بدید. مثلاً:
css
CopyEdit
.item {
grid-column: 2 / 4; /* این عنصر در ستونهای ۲ تا ۴ قرار میگیره */
grid-row: 1 / 2; /* این عنصر در ردیف ۱ قرار میگیره */
}
این روش به شما این امکان رو میده که صفحات وب پیچیده و مرتب بسازید، که در مرااد میتونید از این تکنیکها برای ساخت طرحهای پیچیده برای سایتهای آموزشی استفاده کنید.
استفاده از Flexbox و Grid در طراحی صفحات وب باعث میشه که چیدمانها به شکل حرفهایتر و منعطفتری تنظیم بشن. این ابزارها نه تنها کار رو برای طراحی راحتتر میکنن، بلکه به شما این امکان رو میدهند که بدون نیاز به تغییرات پیچیده در کد، صفحات واکنشگرا و منظم بسازید. در مرااد، ما به شما کمک میکنیم که از این تکنیکهای پیشرفته برای طراحی صفحات وب خود استفاده کنید و تجربیات کاربری بهتر و جذابتری ایجاد کنید.
طراحی واکنشگرا
مفهوم طراحی واکنشگرا (Responsive Design): طراحی واکنشگرا به معنای ایجاد وبسایتی است که به طور خودکار و بر اساس ابعاد و ویژگیهای صفحهنمایش دستگاههای مختلف (موبایل، تبلت، دسکتاپ و...) تغییر میکند. هدف از طراحی واکنشگرا این است که کاربران، حتی از دستگاههایی با اندازههای مختلف، تجربه کاربری یکسان و مناسبی داشته باشند. به این ترتیب، سایت شما به خوبی روی هر دستگاهی نمایش داده میشود و نیاز به طراحی چندین نسخه جداگانه از سایت برطرف میشود.
برای ایجاد طراحی واکنشگرا، به شما توصیه میشود که از ویژگیهای CSS مانند Flexbox، Grid و Media Queries استفاده کنید. این ابزارها به شما این امکان رو میدهند که سایت شما در تمامی دستگاهها به خوبی نمایش داده بشه و تعامل کاربران با سایت رو بهبود ببخشید.
چطور سایت رو برای دستگاههای مختلف بهینه کنیم؟
برای بهینهسازی یک سایت برای دستگاههای مختلف، باید چیدمانها، اندازهها، تصاویر و حتی فونتها رو به گونهای تنظیم کنید که متناسب با سایز صفحهنمایش دستگاهها تغییر کنن. این کار باعث میشود که سایت شما به طور خودکار روی دستگاههای مختلف مثل موبایل، تبلت و دسکتاپ به درستی نمایش داده بشه.
در ماراد، یکی از ویژگیهای مهمی که به شما آموزش داده میشه، طراحی واکنشگراست. این موضوع به شما این امکان رو میده که تجربه کاربری بسیار بهتری برای دانشآموزان و کاربران سایت فراهم کنید و از هر دستگاهی که استفاده میکنند، بتوانند به راحتی با سایت تعامل داشته باشند.
Media Queries: یکی از ویژگیهای کلیدی برای ایجاد طراحی واکنشگرا در CSS، استفاده از Media Queries است. Media Queries به شما این امکان رو میدهند که استایلهای متفاوتی رو برای صفحهنمایشهای مختلف تعیین کنید. به این ترتیب، میتونید تنظیمات خاصی مثل اندازه فونت، عرض و ارتفاع عناصر، یا حتی چیدمان کلی صفحات رو برای دستگاههای مختلف اعمال کنید.
مثال از Media Query:
css
CopyEdit
@media (max-width: 768px) {
body {
background-color: lightblue;
}
.container {
width: 100%;
}
}
در اینجا، وقتی عرض صفحهنمایش کمتر از 768 پیکسل (که معمولاً اندازه تبلتها یا موبایلهاست) میشود، رنگ پسزمینه به آبی روشن تغییر میکند و عرض عنصر container به 100% میرسد. این به معنای ایجاد طراحی مناسب برای نمایش در دستگاههای کوچکتر است.
تنظیمات مختلف Media Query: شما میتوانید Media Queries رو به گونهای تنظیم کنید که تغییرات رو برای هر نوع صفحهنمایش انجام بدید. برای مثال:
css
CopyEdit
@media (max-width: 1024px) {
.header {
font-size: 20px;
}
}
@media (max-width: 480px) {
.header {
font-size: 16px;
}
}
این کد باعث میشه که اندازه فونت در عناصر هدر برای دستگاههای با عرض کمتر از 1024 پیکسل به 20px و برای دستگاههای با عرض کمتر از 480 پیکسل به 16px تغییر پیدا کنه.
در ماراد، با استفاده از Media Queries میتوانید طراحیهای واکنشگرا و منعطف بسازید که به بهترین شکل در تمامی دستگاهها قابل نمایش باشه و به تجربه کاربری سایت شما افزوده بشه.
ابزارهای یادگیری و منابع CSS
مجموعههای آنلاین رایگان: برای یادگیری CSS، استفاده از منابع آموزشی جامع و مؤثر ضروری است. سایتهای آموزشی آنلاین به ویژه برای کسانی که قصد دارند به صورت خودآموز CSS را یاد بگیرند، بهترین گزینهها هستند. این منابع به شما کمک میکنند تا از مباحث ابتدایی تا پیشرفته را با تمرینات عملی و مثالهای کاربردی فرا بگیرید.
در ماراد، برای یادگیری CSS و طراحی وب، ما منابع آموزشی مختلف و دورههای تخصصی ارائه میدهیم که به شما کمک میکند تا به بهترین شکل ممکن این زبان استایلدهی را تسلط پیدا کنید. تمامی مطالب در ماراد به طور دقیق و گام به گام طراحی شدهاند تا شما بتوانید در هر سطحی که باشید، روند یادگیریتان را به راحتی ادامه دهید.
برای یادگیری CSS در ماراد، شما میتوانید به دورههای آموزشی متنوع دسترسی پیدا کنید که شامل ویدیوهای آموزشی، مقالهها و تمرینات عملی هستند. این دورهها به شما این امکان را میدهند که با هر ویژگی از CSS آشنا شوید و به صورت عملی مهارتهای خود را تقویت کنید.
همچنین، ماراد به عنوان یک پلتفرم آموزشی آنلاین، با ارائه آموزشهایی بر اساس نیازهای مختلف، تجربه یادگیری کاربرپسندی را به شما ارائه میدهد.
ابزارهای توسعهدهندگان: یکی از بهترین روشها برای یادگیری CSS، آزمایش و ویرایش زنده کدهاست. در ماراد، ما به شما ابزارهایی معرفی میکنیم که به شما کمک میکنند CSS را به طور عملی بیاموزید. در اکثر مرورگرها، ابزارهایی برای توسعهدهندگان موجود است که به شما اجازه میدهند کدهای CSS را بهصورت زنده تغییر دهید و نتایج تغییرات خود را بلافاصله مشاهده کنید.
در ماراد، ما به شما توصیه میکنیم که از این ابزارها استفاده کنید تا مفاهیم CSS را بهصورت عملی درک کنید. این ابزارها به شما این امکان را میدهند که بدون نیاز به تغییر کد منبع، استایلها و چیدمانهای مختلف را امتحان کنید و با مشاهده نتایج فوراً مشکلات یا نقاط قوت طراحی خود را شناسایی کنید.
یکی از قابلیتهای مفید این ابزارها، امکان تست CSS در صفحات واقعی است. شما میتوانید به راحتی استایلهای مختلف را برای صفحات مختلف وب تنظیم کنید و در ماراد مشاهده کنید که چطور تغییرات شما در طراحی و واکنشگرا بودن سایت تأثیرگذار است.
این ویژگیها به شما کمک میکنند تا علاوه بر یادگیری تئوری CSS، در عمل نیز تسلط بیشتری پیدا کنید. شما میتوانید از محیط ماراد برای اعمال و آزمایش CSS استفاده کنید و به صورت کاملاً عملی در دنیای طراحی وب غوطهور شوید.
با استفاده از این منابع و ابزارها، شما در ماراد میتوانید مهارتهای خود را در CSS ارتقا دهید و تجربه یادگیری پیشرفتهتری را کسب کنید. در ماراد هدف ما این است که به شما این امکان را بدهیم که یادگیریتان را به سطح بالاتری ببرید و مهارتهای لازم برای طراحی وب حرفهای را در خود ایجاد کنید.
تمرینات عملی
ساخت یک صفحه اصلی ساده: برای یادگیری بهتر CSS، بهترین روش، انجام پروژههای عملی است. اولین قدم در این مسیر میتواند طراحی یک صفحه اصلی ساده باشد. شما با استفاده از CSS میتوانید تصاویر و متنها را به صورت حرفهای و جذاب در کنار هم قرار دهید. در ماراد، این تمرین به شما این امکان را میدهد که با استفاده از ویژگیهای مختلف CSS مانند تنظیم رنگها، سایهها، فونتها و فاصلهها، ظاهر صفحات خود را به دلخواه تغییر دهید و مهارتهای خود را در اعمال استایلهای مختلف تقویت کنید.
با طراحی صفحهای ساده، شما میتوانید ایدههای خود را در قالب استایلها پیادهسازی کنید و به سرعت مشاهده کنید که کدهای شما چگونه در دنیای واقعی عمل میکنند. در ماراد، دورههایی ارائه میدهیم که به شما کمک میکند این تمرینات را با بهرهگیری از مثالهای کاربردی و آموزنده انجام دهید.
ساخت منو و ناوبری واکنشگرا
منوها و ناوبریها بخش مهمی از هر وبسایت هستند و ساخت آنها به صورت واکنشگرا (Responsive) اهمیت زیادی دارد. در این تمرین، شما خواهید آموخت که چگونه منوهایی بسازید که در موبایل و دیگر دستگاهها به درستی نمایش داده شوند.
ماراد آموزشهایی در زمینه طراحی منوهای واکنشگرا ارائه میدهد که شما میتوانید به راحتی بهکار بگیرید و با استفاده از Flexbox یا CSS Grid، این منوها را به صورت کاملاً پاسخگو طراحی کنید.
یادگیری طراحی منوهای واکنشگرا به شما این امکان را میدهد که سایتهایی با تجربه کاربری عالی بسازید که در تمامی دستگاهها بهخوبی نمایش داده شوند. این مهارت یکی از اصول اساسی طراحی وب است که در ماراد، شما میتوانید با تمرینات عملی آن را یاد بگیرید و در پروژههای خود پیادهسازی کنید.
جمعبندی
یادگیری CSS میتواند در ابتدا پیچیده به نظر بیاید، اما با پیگیری و تمرین مداوم، شما میتوانید به راحتی این زبان را یاد بگیرید. هر پروژه جدیدی که در مسیر یادگیری انجام میدهید، به شما این امکان را میدهد که مهارتهای خود را تقویت کنید و مفاهیم جدید را به شیوهای عملی و کاربردی فرا بگیرید.
در ماراد، ما در هر مرحله از یادگیری کنار شما هستیم و با دورههای آموزشی متنوع، شما را در رسیدن به اهداف یادگیریتان یاری میدهیم.
هر پروژهای که انجام میدهید، حتی اگر یک پروژه ساده باشد، به شما فرصت میدهد تا به مسائل مختلف CSS پی ببرید و در حل چالشها و مشکلات طراحی وب، تجربه کسب کنید.
در ماراد، ما بر این باوریم که یادگیری به صورت تدریجی و با تمرینات عملی باعث میشود تا شما به یک طراح وب حرفهای تبدیل شوید. در نهایت، CSS یک ابزار قدرتمند است که در کنار سایر مهارتهای طراحی وب میتواند شما را به یک توسعهدهنده حرفهای تبدیل کند.
همین الان به دورههای آموزش CSSمون یه سر بزن 😊👇
مقالات مشابه
کامنت شما با موفقیت ارسال شد
