۲ بهترین جزوه/کتاب PDF آموزش CSS (دانلود رایگان)

در ادامه آموزش های کاربردی سی اس اس، بعد از حدود ۱ هفته گشت و گذار در اینترنت و از بین ده ها کتاب و جزوه، ۲ جزوه برتر و عالی را برای یادگیری سریع css گلچین کرده ایم. این مجموعه کامل برای شروع از صفر و برای همه سطوح مناسب می باشد.

CSS (سی‌اس‌اس) زبانی برای تعیین ظاهر صفحات وب است. HTML ساختار صفحه را مشخص می‌کند و CSS ظاهر آن را می‌سازد. مثلاً HTML مشخص می‌کند که یک بخش «عنوان» است، اما CSS تعیین می‌کند عنوان:

• چه رنگی باشد
• چه اندازه‌ای داشته باشد
• از چه فونتی استفاده کند
• در کجای صفحه قرار بگیرد
• چه فاصله‌ای از عناصر دیگر داشته باشد

به‌صورت خیلی ساده:

HTML = ساختار صفحه

CSS = ظاهر و چیدمان

ساختار یک دستور CSS

یک قانون ساده CSS معمولاً چنین نوشته می‌شود:

p {
  color: red;
  font-size: 18px;
}

در این مثال:

p انتخاب‌گر (Selector) است.

color ویژگی (Property) است.

red مقدار (Value) است.

یعنی: تمام پاراگراف‌ها قرمز شوند.

قاعده کلی:

selector {
  property: value;
}

در CSS علامت‌های { } و : و ; اهمیت دارند.

سه روش اضافه کردن CSS به HTML

روش اول: مستقیم داخل تگ

<p style="color: red;">سلام</p>

این روش برای آزمایش سریع مناسب است، اما در پروژه‌های بزرگ پیشنهاد نمی‌شود.

روش دوم: داخل صفحه HTML

<style>
  p {
    color: red;
  }
</style>

برای صفحات کوچک قابل استفاده است.

روش سوم: فایل CSS جداگانه

روش حرفه‌ای‌تر این است که یک فایل مانند:

style.css

بسازید و آن را به HTML متصل کنید:

<link rel="stylesheet" href="style.css">

برای پروژه واقعی، معمولاً فایل CSS جداگانه بهترین انتخاب است.

انتخاب‌گرها را خوب یاد بگیرید

برای تغییر ظاهر یک عنصر، ابتدا باید آن را انتخاب کنید.

انتخاب بر اساس نام تگ

h1 {
  color: blue;
}

تمام h1ها انتخاب می‌شوند.

انتخاب با Class یا کلاس

HTML:

<p class="note">متن مهم</p>

CSS:

.note {
  color: red;
}

علامت نقطه . برای انتخاب کلاس است.

کلاس یکی از پرکاربردترین روش‌های اعمال CSS است.

انتخاب با ID یا شناسه

HTML:

<div id="header">...</div>

CSS:

#header {
  background-color: black;
}

علامت # برای ID استفاده می‌شود.

معمولاً برای طراحی‌های قابل استفاده مجدد، Class کاربرد بیشتری از ID دارد.

رنگ‌ها در CSS

برای تغییر رنگ نوشته:

color: red;

برای رنگ پس‌زمینه:

background-color: yellow;

رنگ را می‌توان به شکل‌های مختلف نوشت:

color: red;

یا:

color: #ff0000;

یا:

color: rgb(255, 0, 0);

برای شروع کافی است با رنگ‌های نام‌دار و کدهای Hex مانند #ffffff و #000000 آشنا باشید.

اندازه‌ها و واحدها

در CSS واحدهای مختلفی وجود دارند.

یکی از رایج‌ترین واحدها:

px

است.

مثلاً:

font-size: 20px;

واحدهای مهم دیگر:

% درصد

rem اندازه نسبی بر اساس اندازه اصلی نوشته

vw درصدی از عرض صفحه

vh درصدی از ارتفاع صفحه

برای شروع، px ساده‌تر است؛ اما برای طراحی واکنش‌گرا بهتر است به‌تدریج rem، %، vw و vh را هم یاد بگیرید.

مفهوم Box Model یا مدل جعبه‌ای

یکی از مهم‌ترین مفاهیم CSS این است که تقریباً هر عنصر را مانند یک جعبه در نظر بگیرید.

این جعبه شامل چهار بخش است:

Content → Padding → Border → Margin

Content

محتوای اصلی؛ مثلاً نوشته یا تصویر.

Padding

فاصله بین محتوا و خط دور عنصر.

padding: 20px;

Border

خط دور عنصر.

border: 1px solid black;

Margin

فاصله عنصر با عناصر اطراف.

margin: 20px;

یکی از اشتباهات رایج مبتدی‌ها، اشتباه گرفتن padding و margin است.

قاعده ساده:

Padding = فاصله داخلی

Margin = فاصله خارجی

عرض و ارتفاع

برای تعیین عرض:

width: 300px;

برای ارتفاع:

height: 200px;

اما در طراحی سایت بهتر است همیشه ارتفاع ثابت تعیین نکنید؛ چون مقدار محتوا ممکن است تغییر کند.

مثلاً:

max-width: 1200px;

برای محدود کردن حداکثر عرض صفحات بسیار کاربردی است.

فونت و متن

چند ویژگی مهم:

font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 1.8;

font-size اندازه نوشته است.

font-weight ضخامت نوشته را کنترل می‌کند.

text-align محل قرارگیری متن را مشخص می‌کند.

line-height فاصله بین خطوط را تنظیم می‌کند.

برای متن فارسی معمولاً فاصله مناسب بین خطوط باعث افزایش خوانایی می‌شود.

display چیست؟

ویژگی display مشخص می‌کند عناصر چگونه در صفحه قرار بگیرند.

مقادیر مهم:

display: block;

display: inline;

display: none;

و مهم‌تر از همه:

display: flex;

و:

display: grid;

برای مبتدی بهتر است بعد از یادگیری اصول اولیه، Flexbox و Grid را جدی یاد بگیرد.

Flexbox چیست؟

Flexbox یا چیدمان انعطاف‌پذیر یکی از ساده‌ترین روش‌ها برای کنار هم قرار دادن عناصر است.

مثلاً:

.container {
  display: flex;
  gap: 20px;
}

برای وسط‌چین کردن عناصر:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flexbox برای ساخت:

• منو
• کارت محصولات
• بخش‌های افقی
• دکمه‌ها
• چیدمان ساده صفحات

بسیار کاربردی است.

Grid چیست؟

CSS Grid یا چیدمان شبکه‌ای برای طراحی ساختارهای چندستونه مناسب است.

مثلاً:

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

این دستور سه ستون مساوی ایجاد می‌کند.

برای شروع، ابتدا Flexbox و سپس Grid را یاد بگیرید.

طراحی واکنش‌گرا چیست؟

سایت باید در:

• کامپیوتر
• تبلت
• موبایل

به‌درستی نمایش داده شود.

به این ویژگی Responsive Design یا طراحی واکنش‌گرا گفته می‌شود.

CSS برای این کار از Media Query یا شرط اندازه صفحه استفاده می‌کند:

@media (max-width: 768px) {
  .container {
    display: block;
  }
}

یعنی اگر عرض صفحه 768 پیکسل یا کمتر شد، نحوه نمایش تغییر کند.

یکی از مهم‌ترین مهارت‌های یک طراح وب امروزی، ساخت صفحات مناسب موبایل است.

حالت Hover

می‌توانید ظاهر یک عنصر را هنگام قرار گرفتن موس روی آن تغییر دهید.

مثلاً:

button:hover {
  background-color: black;
  color: white;
}

این نوع انتخاب‌گر را Pseudo-class یا شبه‌کلاس می‌گویند.

از hover برای دکمه‌ها، لینک‌ها، کارت‌ها و منوها زیاد استفاده می‌شود.

Border Radius و گرد کردن گوشه‌ها

برای گرد کردن گوشه یک عنصر:

border-radius: 10px;

برای ساخت یک دایره کامل نیز می‌توان از:

border-radius: 50%;

استفاده کرد.

سایه دادن

برای ایجاد سایه روی یک جعبه:

box-shadow: 0 4px 10px #999;

برای نوشته نیز:

text-shadow: 1px 1px 3px #999;

سایه باید با احتیاط استفاده شود؛ سایه‌های زیاد می‌توانند طراحی را شلوغ کنند.

Cascade یا آبشاری بودن CSS

نام CSS از مفهوم Cascading یا آبشاری می‌آید.

ممکن است چند قانون مختلف روی یک عنصر اثر بگذارند. مرورگر براساس قواعدی مشخص تصمیم می‌گیرد کدام قانون اولویت بیشتری دارد.

مثلاً:

p {
  color: blue;
}

.note {
  color: red;
}

اگر یک پاراگراف کلاس note داشته باشد، احتمالاً رنگ قرمز اعمال می‌شود چون انتخاب‌گر کلاس مشخص‌تر است.

این موضوع به مفهوم Specificity یا میزان اختصاصی بودن انتخاب‌گر مربوط می‌شود.

برای شروع کافی است بدانید هرچه انتخاب‌گر دقیق‌تر باشد، معمولاً اولویت بیشتری خواهد داشت.

مفهوم Inheritance یا ارث‌بری

بعضی ویژگی‌های CSS از عنصر والد به عناصر داخل آن منتقل می‌شوند.

مثلاً:

body {
  color: #333;
}

بسیاری از نوشته‌های داخل body نیز همین رنگ را دریافت خواهند کرد، مگر اینکه برای آن‌ها رنگ دیگری تعیین کنید.

از !important زیاد استفاده نکنید

ممکن است با این دستور روبه‌رو شوید:

color: red !important;

این دستور اولویت زیادی به یک ویژگی می‌دهد.

اما استفاده زیاد از !important می‌تواند مدیریت CSS را سخت کند.

اگر استایل شما اجرا نمی‌شود، ابتدا انتخاب‌گرها و اولویت آن‌ها را بررسی کنید.

نام‌گذاری کلاس‌ها را مرتب انجام دهید

به‌جای:

.redbox123

از نام‌های معنادار استفاده کنید:

.product-card

یا:

.main-menu

نام خوب باعث می‌شود بعداً کد خود را راحت‌تر بفهمید.

دانلود رایگان PDF ها

    دانلود هر ۲ جزوه PDF

   حجم: ۵ مگابایت

   سطح: از صفر تا صد

   نسخه آموزش داده شده: مناسب برای نسخه های css

 

پک آموزش حرفه ای Css و HTML با هم! واقعیت این هست که هیچ اموزش رایگانی نمیتونه شما رو به حد حرفه ای و تسلط کامل برسونه! پک اموزشی زیر گلچین بهترین اموزشهای اچ تی ام ال و سی اس اس بازار برنامه نویسی ایران هست. یکبار برای همیشه html و Css رو در دو هفته کااامل استاد تمام شو! این دو بیس برنامه نویسی هستند و الفبای یادگیری برنامه نویسی:

اشتباهات رایج مبتدی‌ها

چند اشتباه متداول:

• استفاده بیش از حد از اندازه‌های ثابت
• نوشتن همه CSS داخل HTML
• استفاده زیاد از !important
• نام‌گذاری نامرتب کلاس‌ها
• استفاده بیش از حد از position
• فراموش کردن نسخه موبایل
• کپی کردن کد بدون فهمیدن آن
• استفاده از Margin زیاد برای جابه‌جایی عناصر
• یاد نگرفتن Flexbox و Grid

ابزار مرورگر را یاد بگیرید

در مرورگرهایی مثل Chrome می‌توانید روی صفحه راست‌کلیک کرده و:

Inspect

را انتخاب کنید.

در این بخش می‌توانید CSS را موقتاً تغییر دهید و نتیجه را بلافاصله ببینید.

این ابزار برای پیدا کردن مشکلات CSS بسیار مهم است.

اگر یک عنصر جابه‌جا یا خراب است، Inspect یکی از اولین جاهایی است که باید بررسی کنید.

پروژه مناسب برای تمرین

بعد از یادگیری مبانی، یک صفحه ساده بسازید که شامل:

• Header یا سربرگ
• منوی سایت
• عنوان
• تصویر
• چند کارت محصول
• دکمه
• Footer یا پاورقی

باشد.

سپس با CSS:

• رنگ‌ها را تنظیم کنید.
• فاصله‌ها را درست کنید.
• از Flexbox استفاده کنید.
• کارت‌ها را طراحی کنید.
• نسخه موبایل بسازید.

این تمرین از حفظ کردن ده‌ها ویژگی CSS بسیار مفیدتر است.

مسیر پیشنهادی یادگیری CSS

برای یک فرد مبتدی، این ترتیب مناسب است:

HTML پایه → اتصال CSS → Selectorها → رنگ و فونت → Width و Height → Margin و Padding → Box Model → Border → Display → Flexbox → Grid → Position → Hover → Responsive Design → Media Query → پروژه واقعی

بعد از تسلط به این موارد می‌توانید سراغ موضوعات پیشرفته‌تر مانند:

• Animation
• Transition
• CSS Variables
• Transform
• Container Queries

بروید.

جمع‌بندی

برای شروع CSS لازم نیست صدها ویژگی را حفظ کنید. ابتدا این مفاهیم را خوب یاد بگیرید:

Selector + Property + Value + Box Model + Flexbox + Grid + Responsive Design

CSS را نمی‌توان فقط با خواندن یاد گرفت. بهترین روش این است که یک صفحه HTML بسازید و مرتب ظاهر آن را تغییر دهید.