• رد پالت، پالتی برای تمامی کسب و کارها
  • تلفن: 02188283411

زبان کدنویسی CSS چیست؟

زبان کدنویسی CSS چیست؟

زبان کد نویسی CSS از ملزومات زبان Html است. اما Css چیست و چه کاربردی در برنامه نویسی دارد. قبل از هر چیز باید بدانید CSS مخفف Cascading Style Sheet و به مفهوم صفحه یا برگه های آبشاری است. این بدین مفهوم است که کدهای CSS شبیه آبشار از بالا به پایین پردازش و اجرا میشوند.

زبان CSS با هدف فرمت دادن به صفحات و بخش های مختلف Html توسط کنسرسیوم  بین المللی شبکه جهانی وب یا همان W3C ایجاد و توسعه داده شده است. بدون زبان CSS ساختار صفحات وب همچون: رنگبندی، سایز، چیدمان و … قابل قبول نیستند و در واقع زیبایی و جلوه بصری ندارند. در نتیجه زبان کدنویسی CSS یکی از اجزاء اصلی و مکمل HTML و JavaScript محسوب می شود.

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

تفاوت زبان HTML با CSS

فهرست مطالب

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

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

۱- بخش انتخاب کننده (Selector)

۲- بلاک اعلان (Declaration)

برای اینکه شما بتوانید به Html استایل دهی کنید حتما باید تگی را انتخاب کنید. ما در جلسه دوم آموزش HTML5 درباره انواع تگ صحبت کردیم که میتوانید مجدد آن را مطالعه کنید.

انتخاب کننده ها یا Selector ها به چند دسته تقسیم میشوند که از طریق آنها امکان اعمال css یا Style بر روی HTML ها امکانپذیر است.

 

آموزش برنامه نویسی HTML جلسه اول
آموزش برنامه نویسی HTML جلسه اول

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

نحوه اضافه نمودن CSS به HTML

توسعه دهندگان به سه روش می توانند کدهای CSS را به ساختار HTML اضافه کنند:

۱- inline style:

در این روش کدهای CSS در میان تگ های HTML قرار میگیرد. کمتر توسعه دهنده ای از این روش برای اعمال کدهای CSS استفاده می کند. زیرا به مرورر زمان که میزان تگ ها و کدها افزایش پیدا می کند، توسعه دهنده دچار سردرگمی خواهد شد. در تصویر زیر CSS از طریق تگ Style داخل خود تگ div تعریف شده است. به این روش از استایل دادن inline style گفته می شود.

<div style=”background-color: red; width: 100%; height: 25px;”></div>
 
مزیت روش inline style:
– دارای الویت بالایی است.
 
معایب روش inline style:
– اجرا بر روی یک عنصر یا تگ
– بالا بودن زمان کدنویسی
– حجم بالای کد و پایین آمدن سرعت

۲- internal style:

در این روش تمامی اطلاعات مربوط به css یک تگ، در بین تگ استایل  <style></style> قرار میگیرد. پیشنها می شود تگ style در خارج از body و درون تگ head بعد از تگ title قرار بگیرد.

مزایای روش internal style:

  • عدم نیاز به css جداگانه
  • بالا بودن سرعت دانلود صفحات

معایب روش internal style:

 – اعمال تغییرات تنها بر روی یک صفحه

روش CSS internal style

۳- External style:

در این روش که تقریبا یک روش پرکاربد بین حرفه ای هاست کدهای html در یک صفحه و کدهای CSS در صفحه دیگر نوشته می شوند. نکته مهم در این روش اتصال صفحه CSS ها به صفحه HTML ها است. صفحه ای که برای cssها اجاد می شود حتما با پسوند دات سی اس اس css. ذخیره شود. سپس به صفحه html ها برگردید و در تگ head بعد از متاتگ ها(قبل از تگ titele) یک تگ link ایجاد کنید. سپس در تگ link اتریبیوت href آدرس صفحه css را وارد نمایید. برای ورود آدرس صفحه css ها حتما به شکل زیر اقدام کنید.

<link rel=”stylesheet” href=”./test1.css”>
 
مزایای روش External style:
– عدم نیاز به css جدا برای هر صفحه
 
معایب روش External style:
– کاهش سرعت لود صفحات

 

روش css external style
اشتراک گذاری در:

1 Comment

  1. سلام وقت بخیر
    ما یه سایت وردپرسی داریم میخواییم قالبشو عوض کنیم بدون اینکه محتواش از بین بره، در ضمن در زمینه تولید محتواها هم نیاز به همکاری داریم. قیمت این خدماتو میگید. چند بارم دفتر تماس گرفتم پاسخگو نبودید. ضمنا شمارو جناب مهندس ابارشی معرفی کردند.

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

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