تخفیف ویژه زمستانه پی استور

تا 60 درصد تخفیف

شامل پروژه‌ها و دوره‌های آموزشی
روز
ساعت
دقیقه
ثانیه
آخرین فرصت‌ها

با خرید اشتراک ویژه ، با هزینه بسیار کمتر به فایل های پاورپوینت دسترسی داشته باشید!

مشاهده پلن ها
تدریس در پی‌استور

آموزش صفر تا ۱۰۰ CSS – CSS چیست و چه کاربردی دارد؟

  • 4.15k بازدید
  • آخرین بروزرسانی: 27 دی 1403
  • CSS
  • زمان مطالعه: 14 دقیقه
آموزش گام به گام CSS - CSS چیست و چه کاربردی دارد؟
در این پست از مجموعه آموزش های CSS پی استور می‌خواهیم در محوریت CSS چیست و چه کاربردی دارد صحبت کنیم. مطمئناً کلمه CSS به گوشتان خورده است یا حداقل می‌دانید که از CSS در طراحی وب استفاده می‌شود. اما واقعا CSS چیست؟ به چه دردی میخورد؟ در ادامه پست با ما همراه شوید، به صورت کامل در این مورد صحبت خواهیم کرد.

فهرست مطالب

CSS چیست؟

قبل از هرچیزی بهتر است بدانیم که CSS مخفف چه کلماتی است. این کلمه مخفف Cascading Style Sheets و به معنای صفحات استایل آبشاری است.

استایل یعنی چه؟ وقتی شما یک تصویری را طراحی می‌کنید یا قصد دارید به یک تصویر خالی رنگ و زینت دهید درواقع به آن استایل داده‌اید. در مبحث طراحی وب هرچقدر از رنگ‌‎های زیبا و مناسب برای طراحی وب سایت خود استفاده کنید بهتر است. زیرا همانطور که خلق و خوی انسانی متفاوت بودن و زیبا بودن را دوست دارد بنابراین صفحات وب نیز باید به همین ترتیب زیبا طراحی شوند. چون همان کاربران درنهایت قرار است با صفحات وب تعامل داشته باشند.

حالا چرا صفحات استایل آبشاری؟ زیرا در CSS دستور اعمال شده بر هر عنصر، به زیرشاخه های آن عنصر نیز تاثیر خواهد داشت. برای درک بهتر این قضیه در ادامه صحبت خواهیم کرد.

آموزش گام به گام CSS - CSS چیست و چه کاربردی دارد؟

کدهای CSS یکسری دستورات هستند که به تنهایی کاربردی ندارند! از کدهای CSS می‌توانید برای استایل دهی ظاهر سایت که با HTML طراحی کرده اید استفاده کنید.

طبیعتاً قبل از یادگیری CSS ابتدا باید HTML را یاد بگیرید زیرا در طراحی وب، HTML و CSS دو عضو جدا نشدنی از یکدیگر هستند. به طور کلی اگر بخواهیم HTML و CSS را به بدن انسان تشبیه دهیم، HTML اسکلت انسان و CSS گوشت و پوست و ظاهر خواهد بود. پس همانقدر که سبک و استایل در طراحی وب ضروری است، طراحی بدنه اصلی (یا اسکلت) وب سایت نیز از ضروریات می‌باشد. جالب است بدانید که CSS را به جادویی تشبیه می‌دهند که به ظاهر بی‌روح و خشک HTML رنگ و لعاب می‌بخشد. پس بدون مقدمه اضافی به سراغ بخش اصلی آموزش می‌پردازیم.

چنان‌چه علاقه‌مند به مطالعه مطالب بیشتر در زمینه css هستیدُ از فایل آماده موجود با این موضوعُ غافل نشوید.

ایجاد سند جدید HTML

در آموزش CSS چیست و چه کاربردی دارد شما نیاز دارید برای شروع کار ابتدا یک ویرایشگر متنی ساده نظیر Notepad یا ++Notepad باز کنید. ما در این آموزش از ++Notepad استفاده می‌کنیم.

کدهای زیر را در صفحه ویرایشگر بنویسید:

<html>
<head>
<title>Example Name</title>
</head>
<body>

</body>
</html>

و حالا به مسیر File> Save as بروید تا پنجره ذخیره پرونده باز شود. نام و مسیر فایلی که می‌خواهید ذخیره کنید وارد کنید و در بخش Type گزینه hypertext markup language file را انتخاب کنید تا فایلتان به صورت یک سند HTML ذخیره شود.

تبریک! حالا شما اولین صفحه‌تان را ایجاد کردید. برای مشاهده صفحه ای که ساختید به مسیر فایل خود بروید و بر روی فایل HTML دابل کلیک کنید تا در مرورگر باز شود. از این پس، بعد از ایجاد هر تغییرات و ذخیره فایل تنها کافیست تا به مرورگر برگردید و صفحه را مجدد بارگذاری (Reload) کنید تا تغییرات را مشاهده کنید.

اگر آموزش های مربوط به HTML را گذرانده باشید باید بدانید که شکل کلی یک سند HTML به چه صورت است. اگر هم هنوز HTML را یاد نگرفته اید پیشنهاد می‌کنم ابتدا HTML را یاد بگیرید سپس به یادگیری CSS بپردازید.

برای یادگیری بهتر زبان برنامه نویسی HTML فایل آماده موجود را مطالعه نمایید.

کدهای HTML که از این پس خواهیم نوشت داخل تگ <body> نوشته می‌شوند.

آموزش گام به گام CSS - CSS چیست و چه کاربردی دارد؟

استایل دهی به HTML

به طور کلی سه روش برای استایل دهی وجود دارد. در ابتدا استایل دهی تنها به صورت خطی امکان پذیر بود. اما این روش معایب فراوانی دارد و نباید از این روش استفاده کرد. به جای آن از دو روش دیگر استایل دهی استفاده می‌کنیم.

استایل دهی خطی (Inline)

همانطور که از نامش پیداست، استایل دهی در این روش به صورت خطی و مستقیم بر روی یک تگ خاص انجام می‌شود. برای مثال :

<html>
<head>
<title>Example Name</title>
</head>
<body>
<p style="color:red;">Hello World</p>
</body>
</html>

در این تکه کد رنگ قرمز بر محتویات داخل پاراگراف اعمال خواهد شد.

شاید پیش خود فکر کنید اشکال استایل دهی خطی در چیست؟ درصورتی که تعداد کدهای ما کم باشد چندان مهم نیست که از کدام روش استفاده کنیم. اما درصورتی که تعداد کدهای ما زیاد باشد نه تنها استایل دهی به روش خطی سخت خواهد بود بلکه باعث به هم ریختن کدهای HTML نیز می‌شود.

از دیگر معایب استایل دهی خطی افزایش فوق العاده حجم صفحات وب است. سبک بودن صفحات وب بسیار مهم است زیرا کاربران زمانی که ببینند صفحات وب شما سرعت لود پایینی دارد منتظر لود شدن صفحه نمی‌مانند و از وب سایتتان خارج می‌شوند. مورد بعدی که وجود دارد سختی ویرایش کدهای خطی هستند. زمانی که شما بخواهید یک قسمت از استایل را ویرایش کنید پیدا کردن و درنهایت ویرایش آن پروسه‌ای سخت خواهد بود.

استایل دهی داخلی (Internal)

در این روش کدهای CSS داخل یک تگ به نام <style> قرار می‌گیرند. این تگ باید در داخل تگ <head> قرار بگیرد. برای مثال:

<html>
<head>
<title>Example Name</title>
<style>
p {
    font-size:25px;
    color:blue;
}
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>

در صورتی که چندین تگ <p> یا هر نوع تگ دیگر وجود داشته باشد، استایل بر روی همه‌ی تگ‌ها اعمال خواهد شد. برای جلوگیری از این اتفاق نیاز دارید تا برای تگ‌های خود کلاس تعریف کنید که در ادامه درمورد کلاس‌ها صحبت خواهیم کرد.

استایل دهی خارجی (External)

با ادامه آموزش CSS چیست و چه کاربردی دارد با ما همراه باشید. در این روش که بهترین روش برای استایل دهی می‌باشد، بدین صورت است شما یک فایل CSS خارجی ایجاد می‌کنید و کدهای CSS خود را در آن می‌نویسید. سپس با استفاده از یک دستور در HTML، استایل را فراخوانی می‌کنید. برای مثال:

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

استفاده از استایل دهی خارجی بهترین روش استایل دهی می‌باشد. زیرا در این صورت کدهای HTML شما مرتب می‌مانند، حجم صفحات وب شما افزایش آنچنانی نخواهد داشت و از همه مهم تر ویرایش دوباره‌ی کدهای CSS بسیار آسان خواهد بود.

آموزش گام به گام CSS - CSS چیست و چه کاربردی دارد؟

ایجاد سند جدید CSS

برای ایجاد یک سند جدید ابتدا به مسیر File> New بروید. سند خود را در همان مسیری که فایل HTML را ذخیره کرده اید ذخیره کنید. هنگام ذخیره فایل در قسمت Type گزینه cascade style sheet file را انتخاب کنید. همچنین نامی که برای فایل خود انتخاب می‌کنید را به خاطر بسپارید زیرا باید دقیقا آن را در صفحه HTML فراخوانی کنید.

همانطور که بالا گفتیم برای اینکه بتوانید فایل CSS خود را به HTML پیوند دهید باید از یک دستور استفاده کنید، اما سوالی که وجود دارد این است آیا در همه جا می‌توان از این دستور استفاده کرد؟

پاسخ خیر است! شما باید دستورات و تگ‌های متا را باید در داخل تگ <head> قرار دهید. به این صورت :

<html>
<head>
<title>Example Name</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>Hello World</p>
</body>
</html>

همانطور که می‌دانید در تگ <head> اطلاعات عمومی مربوط به سند HTML نوشته می‌شود که در خود صفحه ظاهر نمی‌شوند.

حالا به سند HTML خود بروید و در جلوی صفت href نام فایل CSS که خودتان ایجاد کرده‌اید وارد کنید. اگر نام فایل را style.css گذاشته‌اید نیازی به ایجاد تغییر نخواهید داشت زیرا ما هم در این آموزش از این نام استفاده کرده‌ایم.

سینتکس CSS

شما در مطلب CSS چیست و چه کاربردی دارد این شایستگی را پیدا می‌کنید که در فایل CSS خود کدهای اولیه را بنویسید. برای آن‌که بتوانید در CSS کد بنویسید ابتدا باید با سینتکس CSS و اجزای آن آشنا شوید. یک کد CSS دارای دو بخش مهم است:

  • انتخاب کننده یا Selector
  • بخش {} که تعیین کننده نحوه نمایش در صفحه است.

آموزش گام به گام CSS - CSS چیست و چه کاربردی دارد؟

وظیفه انتخاب کننده یا Selector در CSS این است که مقادیر نوشته شده داخل {} را بر روی یک عنصر یا تگ اعمال کند. سلکتور می‌تواند یک تگ، کلاس یا آیدی باشد. در ادامه پست در رابطه با کلاس و آیدی صحبت خواهیم کرد.

بخش {} دارای دو قسمت است که با کاراکتر (:) از هم جدا می‌شود. این دو نقطه صفت (Properties) و مقدار آن (Property value) را از یکدیگر جدا می‌کند. در انتها پس از نوشتن یک مقدار برای صفت باید با کاراکتر (;) پایان دستور را مشخص کنیم. برای مثال در تصویر بالا تگ <p> سلکتور است و برای صفتِ color مقدار red داده شده است. به این معناست که متن داخل تگ <p> موجود در سند HTML، به رنگ قرمز درمی‌آید.

در سینتکس CSS مفاهیم دیگری از جمله Declaration و Ruleset و Shorthand و Comment وجود دارد که هرکدام را با یک مثال توضیح می‌دهیم.

مفهوم Declaration

همانطور که در تصویر زیر می‌بینید به مجموع صفت و مقدار آن Declaration (اعلام) گفته می‌شود.

آموزش گام به گام CSS - CSS چیست و چه کاربردی دارد؟

نکته : اضافه کردن سمیکالن به انتهای دستور از واجبات نیست. تنها در صورتی که چند Declaration وجود داشته باشد باید به انتهای دستورات (به غیر از دستور آخر) سمیکالن اضافه کنیم تا بدین صورت Declaration ها از یکدیگر جدا شوند. اما شما همچنان می‌توانید به انتهای تمامی دستورات خودتان سمیکالن اضافه کنید.

مفهوم Ruleset

نوعی تعریف مجموعه قوانین است که استفاده از آن باعث دستیابی راحت‌تر به کدها خواهد شد. در حالت عادی دستورات CSS همانند تصویر بالا نوشته می‌شوند اما درصورتی که چندین خط کد و چندین Declaration داشته باشیم استفاده از تمیز نویسی پیشنهاد می‌شود. برای مثال دو دستور زیر با هم برابر هستند.

نوشتن دستور به صورت ساده :

div {color: red; padding: 10px; font-size: 24px; border-width: 2px; border-style: solid; border-color: brown;}

نوشتن دستور با قانون :

div {
  color: red;
  padding: 10px;
  font-size: 24px;
  border-width: 2px;
  border-style: solid;
  border-color: brown;
}

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

مفهوم Shorthand

این مفهوم به معنای کوتاه نویسی می‌باشد و استفاده از این روش موجب صرفه جویی در وقت و زمان خواهد شد. برخی از خصوصیات CSS قابلیت این را دارند که به صورت کوتاه نوشته شوند. برای مثال هر دوی دستورات زیر با هم برابر هستند.

نوشتن دستور به طور ساده :

div {
  background-color: yellow;
  background-image: url('demo.png');
  background-repeat: no-repeat;
  background-position: center;
}

نوشتن دستور به صورت خلاصه :

div {
  background: yellow url('demo.png') no-repeat center;
}

یک مثال دیگر؛ نوشتن دستور به طور ساده :

div {
  border-width: 2px;
  border-style: solid;
  border-color: brown;
}

نوشتن دستور به صورت خلاصه :

div {
  border: 2px solid brown;
}

مفهوم Comment

کامنت‌ها در CSS جهت راهنمایی مخاطب و یا برای تمیزنویسی به کار می‌روند. شما می‌توانید از کامنت‌ها برای نوشتن توضیح یک تکه کد استفاده کنید. کامنت‌ها در مرورگر نمایش داده نمی‌شوند.

یک کامنت با کاراکتر */ شروع شده و با کاراکتر /* به پایان می‌رسد. برای مثال :

/* This is
a multi-line
comment */
p {
  color: red;
}
div {
  color: red;  /* This is a single-line comment */
}

سلکتور Class و ID

اجازه بدهید در مطلب css چیست و چه کاربردی دارد ابتدا یک یادآوری ساده از HTML برای افرادی که هنوز شروع به یادگیری HTML نکرده‌اند ذکر کنیم:

در HTML برای هر تگی که می‌نویسیم می‌توان یک کلاس یا آیدی تعریف کرد. در زبان برنامه نویسی به مجموعه ای از چندین اشیا که دارای ویژگی‌های مشترکی باشند class می‌گوییم. در HTML نیز می‌توان برای چندین عنصر که در صفحه خود داریم یک کلاس تعریف کرده و به جای اینکه برای هرکدام از عنصرها به صورت جداگانه استایل بنویسیم، تنها برای یک کلاس استایل دهیم.

از ID نیز به همین منظور استفاده می‌شود، با این تفاوت که ما می‌توانیم کلاس را به دفعات متعدد و برای عنصرهای مختلف تعریف کنیم اما آیدی باید یکتا باشد. بدین صورت که یک آیدی نمی‌تواند دو عنصر یا بیشتر در خود جای دهد. البته این مورد با اینکه اختلالی در صفحه ایجاد نمی‌کند اما از لحاظ استاندارد کدنویسی معتبر نخواهد بود.

پس فهمیدیم که چرا و کی از کلاس و آیدی استفاده کنیم. برای تعریف کردن یک کلاس و آیدی در HTML به صورت زیر عمل می‌کنیم:

<html>
<head>
<title>Example Name</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<p class="p1">Hello World</p>
<p id="p1">Welcome to our site</p>
</body>
</html>

شاید با خودتان فکر کنید این دو که با هم برابر هستند! دقت کنید که گفتیم یک کلاس و آیدی کاملاً از هم مجزا هستند. برای تعریف سلکتور کلاس در CSS از کاراکتر (.) و برای آیدی از (#) استفاده می‌کنیم. برای مثال به تکه کد زیر توجه کنید:

.p1{
     font-size:40px;
}
#p1{
     font-family:tahoma;
     background-color:brown;
     color:white;
}

در این مثال پاراگراف اول با سایز ۴۰ و پاراگراف دوم با فونت tahoma و پس‌زمینه قهوه‌ای و رنگ متن سفید نماش داده می‌شود.

در پست‌های بعدی راجب انواع سلکتورها به صورت مفصل صحبت خواهیم کرد.

قانون اولویت بندی استایل دهی در CSS

به بخش مهم آموزش CSS چیست و چه کاربردی دارد می‌رسیم. منظور از اولویت بندی استایل دهی چیست؟ اگر به خاطر داشته باشید در بالا گفتیم که سه روش برای استایل دهی در CSS وجود دارد. حال سوال اینجاست: مثلاً اگر برای استایل دهی به یک پاراگراف همزمان از هر سه روش استفاده کنیم چه اتفاقی خواهد افتاد؟

اولویت استایل دهی به همان ترتیبی است که در توضیحات ذکر کردیم:

  • استایل دهی خطی
  • استایل دهی داخلی
  • استایل دهی خارجی

برای مثال یک پاراگراف در نظر بگیرید که رنگ متن آن را در CSS خارجی قرمز، در CSS داخلی آبی و در CSS خطی سبز اعمال کرده‌اید. رنگ متن به کدام یک از این سه استایل تغییر خواهد کرد؟

درست است، سبز! زیرا استایل دهی خطی بر دیگر روش‌ها اولویت دارد.

قانون اولویت بندی سلکتورها در CSS

همانطور که استایل دهی قانون خود را دارد، سلکتورها نیز قانون اولویت بندی دارند. در ابتدای پست گفتیم که کلمه CSS مخفف Cascading Style Sheets به معنای صفحات استایل آبشاری می‌باشد. حال که نحوه نوشتن استایل را یاد گرفتیم می‌توانیم بگوییم که اگر دو استایل مشترک در یک صفحه وجود داشته باشد، اولویت با آن استایلی خواهد بود که در پایین‌ترین سطر از کدها نوشته باشد. زیرا استایل‌ها به ترتیب از بالا به پایین اجرا و بر روی عنصرها اعمال می‌شوند.

حال می‌خواهیم یک سوال از شما بپرسیم : اگر چند استایل متفاوت و از چند سلکتور مختلف بر روی یک عنصر یا تگ در HTML اعمال شود اولویت با اجرای کدام استایل خواهد بود؟

یک طراح وب باید با اولویت استایل دهی آشنا باشد! زیرا ممکن است چندین استایل برای یک عنصر اعمال کرده باشید اما ندانید که کدام یک اجرا خواهد شد. افرادی هستند که در آن زمان از ویژگی important! استفاده می‌کنند که وظیفه اش خنثی سازی تمامی استایل‌هایی است که قبلا بر روی آن عنصر اعمال شده است. اما استفاده بیش از حد از این ویژگی موجب به وجود آمدن مشکلاتی در صفحه وب خواهد شد.

بنابراین ما باید قانون اولویت بندی سلکتورها را یاد بگیریم و استایل‌های خود را بر اساس این قانون بر روی عنصرها اعمال کنیم.

آموزش گام به گام CSS - CSS چیست و چه کاربردی دارد؟

به طور کلی اولویت‌ها را می‌توان در چهار رده اولویت بندی کرد که به ترتیب زیر می‌باشد :

  • استایل خطی یا Inline
  • آیدی (ID)
  • کلاس (Class)
  • سلکتور تگ یا Element

اگر بخواهیم همراه با مثال این اولویت بندی را بنویسیم:

<div style=""></div>
<style type="text/css">#your-id {}</style>
<style type="text/css">.your-class {}</style>
<style type="text/css">div {}</style>

برای این اولویت بندی می‌خواهیم یک مثال با پاراگراف بزنیم تا درک آن برای شما راحت‌تر باشد:

<html>
<head>
<title>Example Name</title>
<style>
#main{
    font-size:25px;
    color:red;
}
.text{
    font-size:20px;
    color:blue;
}
p{
    font-size:15px;
    color:green;
}
</style>
</head>
<body>
<p id="main" class="text">a new paragraph</p>
</body>
</html>

فکر می‌کنید در این تکه کد کدام یک از سه استایل داده شده اجرا خواهد شد؟ اگر قانون اولویت بندی سلکتورها وجود نداشت طبیعتاً باید آخرین استایل اعمال شده اجرا شود. از طرفی هم از استایل دهی خطی استفاده نکرده‌ایم. طبق قانون اولویت بندی باید استایلی که به آیدی main داده شده اجرا شود. پس رنگ متن قرمز و سایز آن ۲۵ خواهد بود.

سخن آخر در مورد CSS چیست؟

در این پست از سری آموزش‌های پی استور به مبحث CSS چیست و چه کاربردی دارد پرداختیم. در این آموزش فرض بر این شد که خواننده مطلب هیچ آشنایی با HTML ندارد و ابتدا ایجاد یک فایل HTML و CSS جدید را یاد گرفتیم و با نحوه پیوند دادن فایل CSS به HTML آشنا شدیم.

در طراحی وب باید به این نکته دقت داشته باشید که CSS به همان اندازه که برای زیباسازی و استایل دهی وب سایت مهم و ضروری است، تمیز نویسی کدها نیز از واجبات می‌باشد. پس سعی کنید که هنگام نوشتن هرگونه کد به صورت مرتب کد بنویسید و حتی هنگام انتخاب نام برای کلاس و آیدی از نام مناسب و معنی دار استفاده کنید تا اگر در ادامه نیازمند ویرایش کدها بودید به راحتی به همه‌ی کدها دسترسی داشته باشید.

به انتهای این پست آموزشی رسیدیم منتظر نظرات و پیشنهادات شما عزیزان هستیم. موفق و پیروز باشید.

اگر این مطلب برای شما مفید بوده است، مباحث زیر نیز به شما پیشنهاد می‌شوند:
Picture of فاطمه اسماعیلی
فاطمه اسماعیلی
کارشناس رشته مهندسی حرفه‌ای کامپیوتر گرایش نرم افزار، متخصص بازاریابی محتوایی، کارشناس تولید محتوا، طراح و برنامه نویس فرانت اند، فعال در زمینه آموزش برنامه نویسی و راه اندازی سیستم‌های مدیریت محتوا، علاقه مند به زمینه‌های مرتبط با تکنولوژی و کامپیوتر و فعال در حوزه سئو اینستاگرام
مشاهده مقالات بیشتر نویسنده

مقالات مرتبط با موضوع

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *