آموزش CSSآموزش طراحی سایت

جلسه ۰۱ – CSS چیست و پیش نیاز های آن

وقتی اسم طراحی وب سایت میاد، اولین صحبتی که میاد تو ذهن فرد عادی اینه HTMLCSS باید بلد باشی… خب این CSS که میگیم یعنی چی؟ چه کاری می‌تونیم باهاش انجام بدیم؟ به کمک CSS، چه کار‌هایی می‌تونیم در HTML انجام بدیم؟ در این مقاله در رابطه با این موضوعات صحبت می‌کنیم…

معنی CSS

همونطور که در مقدمه خوندیم، کلمه CSS مخفف عبارت انگلیسی Cascading style sheets و به معنی ‌صفحات استایل آبشاری هست. حالا چرا آبشاری؟ چون دستورات CSS اعمال شده به هرعنصر، بر فرزندان اون عنصر هم تاثیر دارن. این مسئله رو تو مقاله‌های آینده، بیشتر متوجه می‌شیم!

چه چیزهایی باید برای یادگیری کدهای CSS بدانید؟

می‌شه گفت که تنها پیش‌نیاز برای یادگیری مفاهیم CSS، تسلط مناسبی به HTML هست. مباحث زیر در بدو شروع، مهم‌ترین مباحث مورد نیاز شما برای یادگیری CSS هستن:

  • تسلط به مبحث فرزند – پدر (parent-child)
  • تسلط به مفهوم عنصر و صفت (element, attribute)

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

اگر درباره HTML اطلاعاتی ندارین مقاله html چیست و چه کاربردی دارد میزفا رو بخونین.

یک صفحه وب از اجزای زیر تشکیل شده:

  • Content (محتوا) این بخش وب به وسیله کد های HTML ایجاد می‌شه.
  • Presentation (نمایش) این بخش وب به وسیله کد های CSS ایجاد می‌شه.
  • Behavior (رفتار) این بخش وب به وسیله  JavaScript ایجاد می‌شه. آموزش JavaScript

CSS چیست؟

کدهای CSS دستوراتی هستن که توسط اون‌ها می‌تونیم تمامی خصوصیات ظاهری صفحه وب‌سایت رو تعیین کنیم. بنابراین شما توسط کدهای HTML، اسکلت صفحه وب سایت خودتون رو پیاده سازی می‌کنین و با کدهای CSS مشخص می‌کنین هر عنصر چه خصوصیات ظاهری‌ای باید داشته باشه. به اصطلاحی رنگش می‌کنید و کلی ویژگی دیگه بهش اضافه می‌کنید!

برای مثال، اگه یک طوطی رو، به عنوان صفحه وب‌سایت در نظر بگیریم، کدهای HTML و CSS اون به فرم زیر تعریف می‌شن!

یا مثلا به متن ساده زیر توجه کنین:

متن سمت چپ، با کمک کدهای CSS نوشته شده. اما در متن سمت راست، کدهای HTML بدون کد CSS رو مشاهده می‌کنیم.

چرا باید از کدهای CSS استفاده کنیم؟

کدهای CSS می‌تونن تو بسیاری از کارهای تکراری، زمان طراحی و حجم کدهای سایت صرفه‌جویی کنن.

خوبه که بدونین گوگل در رتبه بندی وب‌سایت‌ها یعنی همون سئو، سرعت بارگذاری سایت و کیفیت کدها رو هم مدنظر قرار می‌ده و وب سایت‌هایی رو که سرعت بارگذاری اون‌ها مناسب نباشه، کمتر به جستجو کنندگان معرفی می‌کنه.

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

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

همچنین ناگفته نمونه که CSS در ۹۰٪ از مرورگرها، می‌تونه به خوبی عمل کنه.

ساختار نحوی کدهای CSS

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

کدهای CSS استایل
ساختار نحوی کدهای CSS

 

Selector : این بخش نام عنصر HTML است که می‌خوایم استایل مورد نظر رو به اون اختصاص بدیم.

Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال خاصیت رنگ برابر با مقدار آبی است و خاصیت سایز فونت برابر با مقدار 12 پیکسل است.

برای مطالعه تکمیلی و مثال های بیشتر در مورد ساختار نحوی کد های CSS، می‌تونین مقاله ساختمان کد در CSS رو مطالعه کنین.

 

id و Class در CSS

همونطور که در بخش ساختار نحوی دستورات مشاهده کردین، تو بخش Selector عنصری رو که می‌خوایم استایل روی اون اعمال بشه رو ذکر می‌کنیم.

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

اعمال دستورات فقط بر روی یک عنصر واحد توسط id

برای این منظور اول باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id رو تعریف کنیم. سپس به بخش دستورات CSS رفته و در بخش Selector، صفت id که برای عنصر مورد نظر تعریف کردیم رو نوشته و یک نماد “#” قبل از اون اضافه کنیم.

مثلا اگه بخوایم دستورات فقط بر روی یک پاراگراف خاص اعمال بشن، ابتدا برای اون پاراگراف یک صفت id در کدهای HTML تعریف می‌کنیم:

<p id="para1">This is a Paragraph.<p>

سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت “#” می نویسیم:

#para1 {
     text-align:center;
     color:red;
}

اعمال دستورات بر روی یک گروه از عناصر توسط Class

برای این منظور اول باید به کدهای HTML رفته و برای همه عناصری که می‌خوایم خاصیت‌های ظاهری یکسان داشته باشن صفت Class رو تعریف کنیم. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Class که برای عناصر مورد نظر تعریف کرد‌یم رو نوشته و یک نماد “.” قبل از اون اضافه کنیم.

مثلا اگه بخوایم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال بشن، ابتدا برای اون دسته از پاراگراف‌ها یک صفت Class مشترک در کدهای HTML تعریف می‌کنیم:

<p class="center">This is a Paragraph.</p>

سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت “.”  یا همان نقطه می‌نویسیم:

.center {
text-align:center;
}

بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال می‌شن که دارای Class برابر با Center هستن و سایر پاراگراف‌های موجود در صفحه از این دستورات تاثیرپذیر نیستن.

در مورد کلاس ها و آیدی ها، مطالب تکمیلی رو تو مقاله کلاس ها و آیدی ها مطالعه کنین.

کدهای CSS را کجا بنویسیم؟

این کد ها رو می‌تونیم داخل هر ویرایشگر کدی بنویسیم، که پیشنهاد ما به شما برای شروع، ویرایشگر هایی مثل brackets، sublime text و notepad هستن.

برای نوشتن کدهای CSS و اتصال اون ها به HTML، سه روش وجود داره:

  1. External Style Sheet : اتصال خارجی
  2. Internal Style Sheet : اتصال داخلی
  3. Inline Style : اتصال درون خطی

External style sheet یا اتصال خارجی

استایل های خارجی فایل هایی با فرمت css هستن که بوسیله تگ <link> در صفحه وب قرار گرفته اند و بهترین راه برای تغییر دادن ظاهر یک وب سایت که از صفحات زیادی درست شده هستن.

کد های موجود در اون فایل ها، شکلی شبیه به زیر رو دارن:

hr {
   color: sienna;
}
p {
   margin-left:20px;
}
body {
   background-image:url("images/back40.gif");
}

درمورد این روش، تو مقاله روش اتصال خارجی کامل تر یاد می‌گیریم.

Internal Style Sheet یا اتصال داخلی

نحوه نوشتن این استایل ها مثل استایل خارجی هست ولی تنها فرق اون اینه که به جای تگ <link> از تگ <style> استفاده می کنیم.
کد زیر یک نمونه از استایل خارجی هست.
<head>
  <style type="text/css">
    hr {
      color: sienna;
        }
    p {
       margin-left:20px;
       }
    body {
       background-image:url("images/back40.gif");
       }

  </style>
</head>

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

inline style یا اتصال درون خطی

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

برای استفاده از این روش باید به عنصر مورد نظر صفت style را افزوده و بعد خاصیت ها و مقدار ها رو به این صفت اضافه کنین. تو مثال زیر از همین روش برای تغییر رنگ متن پاراگراف استفاده می‌کنیم:

<p style="color:yellow;">This is a paragraph.</p>

درمورد این روش، تو مقاله اتصال درون خطی مفصل تر می‌خونیم.

اولویت تاثیرگذاری روش های اتصال کد CSS

به طور کلی، زمانی که یک کد CSS توسط هر سه روش برای یک عنصر HTML نوشته می‌شه، اولویت اجرای اون‌ها به صورت زیر است:

  1. استایل های درون خطی
  2. شیوه نامه های داخلی
  3. شیوه نامه های خارجی

پس دستورات CSS ای که به صورت درون خطی و تنها برای یک عنصر خاص نوشته می‌شه، باعث می‌شه دستورات CSS مربوط به اون عنصر که توسط روش اتصال داخلی که در تگ style نوشته شده و همچنین دستورات مربوطه در روش اتصال خارجی که با تگ link به صفحه فعلی متصل شده نادیده گرفته بشن.

نکته: چنانچه لینک اتصال یک فایل CSS خارجی بعد از دستورات CSS اتصال داخی در تگ head قرار داده بشن، در نهایت دستورات فایل CSS خارجی اعمال خواهند شد.

در مورد اولویت تاثیرگذاری، به صورت کامل تر و شیرین تر تو مقاله اولویت تاثیرگذاری مطالعه کنید 🙂

تو این جلسه،‌ با CSS آشنا شدیم. فهمیدیم CSS چیه و چیکار می کنه،‌ و اینکه چطور می‌تونه به ما کمک کنه.

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

پس با ما در ادامه این آموزش همراه باشین 🙂

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

مدیر محتوا: علی اسمعیلی

منبع بعضی قسمت‌های آموزش از سایت w3schools می‌باشد.

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

نوشته های مشابه

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

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


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر