دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۰
  • آبان

جلسه ۴۲ : CSS چیست؟ – تکنولوژی اینترنت

  • دسته‌بندی‌ها :
جلسه ۴۲ : CSS چیست؟ – تکنولوژی اینترنت
    • جزئیات
    • نوع محتواآموزشی

      مقدمه

      سلام دوستان عزیز وب سایت آموزشی پی وی لرن و وقت بخیر به علاقمندان آموزش تکنولوژی های اینترنتی. CSS چیست؟ چه کاربردی دارد؟ این بخش رو با این موضوع آغاز می کنیم.

      CSS چیست؟ چه کاربردی دارد؟

      CSS مخفف Cascading Style Sheets است. این کمک می کند تا ارائه عناصر HTML را به عنوان یک فایل جداگانه معروف به فایل CSS با پسوند css. تعریف کنید.

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

      قوانین CSS

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

      مثال : 

      امتیاز کلیدی

      • Selector عنصر HTML است که قانون CSS در آن اعمال می شود.
      • Property مشخصه ای را که می خواهید متناسب با Selector تغییر دهید مشخص می کند.
      • Property می تواند مقدار مشخصی را بگیرد.
      • Property و Value توسط دو نقطه از هم جدا می شوند (:).
      • هر declaration توسط (;) جدا می شود.

      در زیر نمونه هایی از قوانین CSS آورده شده است:

      ويژگي مشخصه هایی را که می خواهید تغییر دهید مربوط به Selector مشخص می کند.

      مثال : 

      روش های اضافه کردن CSS به صفحه HTML

      در زیر چهار روش برای افزودن CSS به اسناد HTML وجود دارد.

      • Inline Style Sheets
      • Embedded Style Sheets
      • External Style Sheets
      • Imported Style Sheets

       

      روش Inline Style Sheets

      با روش Inline Style Sheets می توان کدهای css را در بین تگ های HTML گنجاند، برای افزودن inline CSS ، باید ویژگی استایلی را اعلام کنیم که می تواند حاوی هر CSS property باشد.

      سینتکس:

      مثال : 

      بیایید مثال زیر را با استفاده از روش Inline Style در نظر بگیریم:

      مثال : 

      خروجی:

       

      CSS چیست؟

      CSS چیست؟

      روش Embedded Style Sheets

      روش Embedded Style Sheets برای ظاهر یکسان در همه وقایع یک عنصر خاص استفاده می شود. این ها با استفاده از عنصر <style> در عنصر <head> تعریف می شوند.

      سینتکس :

      مثال : 

      بیایید مثال زیر را با استفاده از Embedded Style Sheets در نظر بگیریم:

      مثال : 

       

      CSS چیست؟ چه کاربردی دارد؟

      CSS چیست؟ چه کاربردی دارد؟

       

      روش External Style Sheets

      با روش External Style Sheets ، می توان صفحه جداگانه ای با پسوند css. ایجاد کرد و سپس کدهای CSS را در آن نوشت. سپس این فایل ها را می توان با استفاده از تگ <link> به هر سند HTML متصل کرد. در روش External Style Sheets فایل صفحه css را در اتریبیوت rel تگ link باید نوشت.

      مثال : 

      به منظور ایجاد external css و پیوند دادن آن به سند HTML ، مراحل زیر را دنبال کنید:

      اول از همه یک فایل CSS ایجاد کنید و کلیه قوانین CSS را برای چندین عنصر HTML تعریف کنید. بیایید این فایل را با عنوان external.css نامگذاری کنیم.

      مثال : 

      اکنون سند HTML را ایجاد کرده و آن را به عنوان externaldemo.html بنامید.

      مثال : 

      CSS چیست؟ چه کاربردی دارد؟ - روش های اضافه کردن CSS به صفحه HTML

      CSS چیست؟ چه کاربردی دارد؟ – روش های اضافه کردن CSS به صفحه HTML

      روش Imported Style Sheets

      Imported Style Sheets به ما این امکان را می دهد که قوانین استایل را از دیگر style sheets وارد کنیم. برای وارد کردن قوانین CSS ، ما باید قبل از همه قوانین در style sheet از import@ استفاده کنیم.

      سینتکس:

      مثال : 

      بیایید مثال زیر را با استفاده از Inline Style Sheets در نظر بگیریم:

      مثال : 

      روش های اضافه کردن CSS به صفحه HTML

      کلام پایانی

      با css و روش های اضافه کردن CSS به صفحه HTML در این بخش از آموزش تکنولوژی اینترنت آشنا شدیم. در بخش بعدی به JavaScript می پردازیم.

      QR:  جلسه ۴۲ : CSS چیست؟ – تکنولوژی اینترنت
      به اشتراک بگذارید