طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش CSS – بخش اول

آموزش css

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

گفتیم که HTML زبانی برای طراحی اسناد HTML است و زبان برنامه نویسی نیست. CSS نیز زبان برنامه نویسی نمی‌باشد و فقط زبانی برای جان بخشیدن به اجزاء HTML است که بعد از ایجاد قابلیت تعیین رنگ و فونت برای اسناد HTML؛ توسط W3C ایجاد شد. یادگیری این زبان هم راحت و حتی جذاب‌تر از HTML است. برای یادگیری بهتر حتما مثال‌ها را در یک کامپیوتر انجام دهید. یعنی صرفا مطالعه این آموزش‌ها، کمکی به یادگیری شما نخواهد کرد چراکه بعد از مدتی آموخته هایتان را فراموش خواهید کرد. پس تمرینات را در کامپیوتر و خودتان انجام دهید. ( کپی پیست نکنید!!! )

CSS مخفف عبارت Cascading Style Sheet است و همان‌طور که در ابتدا گفتیم نحوه نمایش اجزا HTML را در نمایشگرها تعیین می‌کند. در آموزش HTML بخشی را برای آشنایی مختصر با این زبان اختصاص دادیم و گفتیم که می‌توان استایلها را به سه روش inline، internal و external اعمال کرد.

Inline یعنی CSS را برای هر جزء در تگ آغاز بنویسیم، internal یعنی تمام CSS را در تگ <style> که درون تگ <head> قرار می‌گیرد بنویسیم و external یعنی CSS ها در فایلی جداگانه نوشته و بعد آن را به سند HTML متصل کنیم.

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

با این یادآوری آموزش CSS را باهم شروع می‌کنیم.

هر دستور ( rule ( CSS از دو قسمت تشکیل شده است: 1- سلکتور 2- declaration

میدانید که برای اعمال هر تغییر به هر جزء ابتدا باید آن را انتخاب کرد و بعد تغییرات را برای آن جزء تعریف کرد. پس سلکتور جزء خاصی را انتخاب می‌کند ( برای انتخاب، نام هر جزء را می‌نویسیم و در بعضی موارد این نام همراه با اتریبیوت Class و Id است ) و declaration همان تغییراتی ( دستورات ) هستند که می‌خواهیم اعمال کنیم. هر declaration شامل یک پراپرتی و یک مقدار است.

در این مثال یعنی div با آی دی id ( مقدار id را شما تعیین کنید ) انتخاب شود و رنگ زمینه آن فیروزه‌ای شود. Background-color یک پراپرتی و cyan مقدار آن است و مجموعه این پراپرتی و مقدار یک declaration است و می‌تواند هر تعدادی باشد که در انتهای هرکدام از آن‌ها علامت semicolon قرار می‌دهیم. همه‌ی declaration ها باید درون علامت کروشه قرار گیرند.

بین پراپرتی و مقدار آن باید از دو نقطه( ” : ” ) استفاده کرد.

[us_single_image image=”10742″ align=”center”]

در مثال بالا گفتیم که همه‌ی p های صفحه را انتخاب کن و رنگ متن آن‌ها را از سیاه که دیفالت مرورگرهاست به آبی تغییر بده و اندازه فونت آن‌ها را به 1.2 برابر اندازه دیفالت تغییر بده. ( em واحد اندازه فونت دیفالت مرورگرهاست. )

بررسی روش‌های انتخاب هر جزء

به چند طریق می‌توان اجزاء را انتخاب کرد و برای آن‌ها استایل هایی را تعریف کنیم.

1) انتخاب کننده اجزا

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

[us_single_image image=”10743″ align=”center”]

2) انتخاب کننده id

برای هر جزء می‌توان اتریبویت id را نوشت و یک مقدار خاص را به آن داد. نکته‌ای که باید به آن توجه کنید این است که مقدار id باید منحصر به فرد باشد. یعنی هیچ‌کدام از اجزاء نباید id یکسان داشته باشند. انتخاب کننده id به این طریق عمل می‌کند که هر جزئی را که این id را دارد انتخاب می‌کند و ازآنجاکه هر جزء id یکتایی دارد، فقط همان جزء انتخاب می‌شود. نحوه به‌کارگیری انتخاب کننده id به این ترتیب است که ابتدا علامت hash ( # ) را نوشته و بعد مقدار id را می‌نویسیم.

مقدار id نباید با عدد شروع شود.

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

[us_single_image image=”10747″ align=”center”]

3) انتخاب کننده کلاس

اتریبیوت class نیز برای انتخاب کردن به کار می‌رود و تفاوت آن با id در این است که استفاده از آن محدود نیست و می‌توان به‌کرات و برای چندین جزء به کار رود. استفاده از سلکتور کلاس به این طریق است که ابتدا یک نقطه می‌نویسیم و بعد مقدار کلاس جزء ( اجزاء ) موردنظر را می‌نویسیم. در مثال زیر پاراگراف‌های اول و سوم انتخاب شده و به آن‌ها استایل داده‌ایم.

[us_single_image image=”10748″ align=”center”]

گفتیم که می‌توانید برای هر تعداد المنت، کلاس یکسان تعریف کرد. در این صورت اگر بخواهیم از بین چند جزء باکلاس یکسان یکی را انتخاب کنیم، باید نام آن جزء را در سلکتور و قبل از نقطه بنویسیم. در مثال زیر یک پاراگراف و یک عنوان داریم که دو جزء مختلف هستند و برای آن‌ها کلاس یکسانی را تعیین کرده‌ایم. از بین این دو جزء، p را انتخاب می‌کنیم و به آن استایل می‌دهیم.

[us_single_image image=”10744″ align=”center”]

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

در مثال زیر جزء عنوان باکلاس par تغییری نمی‌کند. پاراگراف اول باکلاس par تغییر می‌کند، مطابق استایل های داده‌شده. پاراگراف دوم باکلاس par red از آبی به رنگ قرمز تغییر رنگ می‌دهد ( خط بعدی است و اثر دستور بالایی را خنثی می‌کند. ) و چپ چین می‌شود که انتخاب آن با قسمت دوم کلاس یعنی red صورت گرفته است. پاراگراف سوم باکلاس par red large با استفاده از قسمت سوم کلاس یعنی large انتخاب می‌شود و اندازه فونت آن بزرگ می‌شود.

[us_single_image image=”10745″ align=”center”]

مقدار اتریبیوت کلاس نیز با عدد آغاز نمی‌شود.

4) انتخاب چند جزء باهم

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

[us_single_image image=”10746″ align=”center”]

من یک بلاک متن هستم، روی دکمه ویرایش کلیک کنید تا این متن را تغییر دهید. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

کامنت گذاری در CSS

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

/* کامنت در این قسمت قرار می‌گیرد */

که شیوه بالا برای کامنت های یک‌خطی است. برای کامنت های چندخطی، کامنت را به چند قسمت تقسیم کنید و سپس کل کامنت ها را درون علامت کامنت بنویسید. ( همان کاری که برای HTML کردیم. )

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

دیدگاه ‏خود را بنویسید