جلسه اول: آشنایی با CSS – CSS چیست و کاربرد CSS چیست؟

آشنایی با CSS – CSS چیست و کاربرد CSS چیست؟

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

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

CSS چیست؟

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

آشنایی با Syntax (نحو) CSS

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

همینطور که توی تصویر بالا میبینید یک کد CSS شامل دو قسمت اصلی هست:

selector : بخشی که تنظیمات استایل دهی برای اون قسمت تعریف میشه.

declaration : بخشی که تنظیمات استایل دهی رو مشخص میکنه. این بخش با یک آکولاد باز شروع میشه و با آکولاد بسته تموم میشه.

همچنین هر بخش از declaration شامل یک property یا ویژگی و یک value یا مقدار هست که با یک : در میانشون در کنار هم قرار میگیرن. مقدار value به property نسبت داده میشه و در انتهای این مقداردهی از کاراکتر ; استفاده میکنیم.

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

انواع Selector در CSS

در مورد Selector ها باید این توضیح رو بدم که ما چند نوع Selector داریم. در مثال بالا Selector استفاده شده یک تگ HTML هست. پس تگ ها اولین نوع Selector ها هستند.

به این صورت که ما element یا همون عنوان تگ رو در قسمت selector مینویسیم و بعد ویژگی هایی که توی این دوره یاد مگیریم رو داخل دو تا آکولاد باز و بسته قرار میدیم و به این تگ نسبت میدیم.

p {color:red;}

دومین گروه Selector ها id ها و class ها هستند.

ما دو تا صفت و attribute در HTML داریم بنام های id و class. با صفت id در دوره HTML آشنا شدیم. ما این امکان رو داریم که از مقدار id و class به عنوان selector استفاده کنیم و ویژگی های موردنظرمون رو تنظیم کنیم. سپس در هنگام نوشتن کدهای HTML این id و class ها رو به تگ های مدنظرمون اختصاص بدیم. (در ویدیو آموزشی این موضوع رو با ذکر مثال شرح دادم)

تنظیم ویژگی های id در css

برای اینکه از یک id به عنوان selector استفاده کنیم باید از کاراکتر #(شارپ) در ابتدای اسم id استفاده کنیم. مثال زیر رو ببینید:

#paral {text-align:center;}

در مثال بالا من برای یک id با نام paral خصوصیت وسط چین بودن متن رو تعریف کردم.

تنظیم ویژگی های class در css

برای اینکه از یک class به عنوان selector استفاده کنیم باید از کاراکتر . (نقطه) در ابتدای اسم class استفاده کنیم. مثال زیر رو ببینید:

.center {text-align:center;}

در مثال بالا من برای class با نام center خصوصیت وسط چین بودن متن رو تعریف کردم. حالا در فایل HTML خودم هرگاه به تگی کلاس center رو نسبت بدم، محتوای اون تگ وسط چین میشه.

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

p .center{color:blue;}

در مثال بالا selector من کلاس center داخل تگ p هست. هرگاه چنین کلاسی در فایل من باشه متن رنگ اون آبی رنگ میشه. اگه یک کلاس center داشته باشم که داخل تگ p نباشه طبیعتا از این قاعده تبعیت نمیکنه.

تعریف ویژگی های گروهی در css

گاهی لازم میشه که یک ویژگی رو به چندین selector نسبت بدیم. برای انجام این کار کافیه که نام های selector ها که در بالا با اونها آشنا شدیم رو قبل از تعریف ویژگی ها بنویسیم و اونها رو با استفاده از کاما (,) از همدیگه جدا کنیم. مثال زیر رو ببینید:

من میتونم به جای اینکه این خصوصیات مشترک رو سه بار برای سه selector تعریف کنم:

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

بصورت یکجا و گروهی تعریف کنم:

h1, h2, p {
  text-align: center;
  color: red;
}

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

تا اینجا به پاسخ سوال CSS چیست رسیدیم و اکنون میدانیم که CSS چیست و چه کاربردی دارد. همچنین با Syntax و نحوه قواعد نوشتن کدهای CSS هم آشنا شدیم. همچنین به این پرسش هم پاسخ دادیم که کارکرد CSS چیست؟

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

همه ویدیوهای دوره آموزش CSS