(CSS (Cascading Style Sheets به شما اجازه می دهد تا صفحات وب را به صورتی ایجاد کنید که ظاهری عالی داشته باشند، اما چگونه کار می کند؟ این مقاله توضیح می دهد که CSS چگونه کار می کند و مرورگر چگونه، HTML را به یک (DOM) تبدیل می کند، چگونه CSS به قسمت های DOM اعمال می شود، برخی از نمونه های بسیار پایه سینتکس ارائه می شوند و در نهایت، چه کدی برای اعمال CSS به صفحات وب استفاده می شود.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
پیش نیازها: سواد رایانه ای پایه، نرم افزار پایه نصب شده، دانش پایه در کار با فایل ها و مبانی HTML
هدف: یاد گیری چگونگی کارکرد CSS
همانطور که قبلا ذکر کردیم، CSS یک زبان برای مشخص کردن نحوه ارائه اسناد به کاربران است – چگونگی شکل دادن، قرار دادن و غیره
یک سند معمولا یک فایل متنی است که با استفاده از زبان نشانه گذاری ساختار یافته است – HTML رایج ترین زبان نشانه گذاری است، اما احتمالا با دیگر زبان های نشانه گذاری مانند SVG یا XML نیز برخورد خواهید داشت.
ارائه یک سند به یک کاربر به معنی تبدیل آن به یک فرم قابل استفاده برای مخاطبان است. مرورگرها مانند فایرفاکس، کروم یا اینترنت اکسپلورر، برای ارائه اسناد به صورت بصری، به عنوان مثال، روی یک صفحه کامپیوتر، پروژکتور یا چاپگر طراحی شده اند.
CSS چگونه HTML را تحت تاثیر قرار می دهد؟
مرورگرهای وب دستور های CSS را به یک سند اعمال می کنند تا تأثیری بر نمایش آنها داشته باشند. یک دستور CSS از موارد زیر ساخته شده است:
- مجموعه ای از خواص که دارای مقادیری برای به روز رسانی نحوه نمایش محتوای HTML هستند؛ برای مثال، می خواهیم عرض عنصر ۵۰٪ عنصر اصلی باشد و پس زمینه آن قرمز باشد.
- انتخابگر، که عنصر (ها) یی را که می خواهید مقادیر به روز شده ی خواص را به آن اعمال کنید، انتخاب می کند. به عنوان مثال، من می خواهم دستور CSS خود را به تمام پاراگراف ها در سند HTML اعمال کنم.
مجموعه ای از دستور های CSS موجود در یک برگه ی استایل یا stylesheet تعیین می کند که چگونه یک صفحه وب باید به نظر برسد.
آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3
یک نمونه سریع
توصیفات بالا ممکن است مفهوم باشد یا نباشد، بنابراین اطمینان حاصل کنید که همه چیز با ارائه یک مثال سریع روشن شود. اول از همه، بیایید یک سند HTML ساده، حاوی <h1> و <p> (توجه کنید که یک stylesheet با استفاده از عنصر <link> به HTML اعمال می شود):
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html> |
اکنون اجازه دهید یک مثال ساده CSS با دو دستور را نگاه کنیم:
|
1 2 3 4 5 6 7 8 9 |
h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } |
اولین دستور با انتخاب h1 آغاز می شود، بدین معنا که مقادیر property یا خصوصیت را به عنصر <h1> اعمال می کند. این شامل سه خصوصیت و مقادیر آنها است (هر زوج خاصیت/مقدار، declaration نامیده می شود):
- زوج اول، رنگ آبی را برای متن تنظیم می کند.
- دومی، رنگ پس زمینه را به رنگ زرد تنظیم می کند.
- سومی، یک حاشیه در اطراف هدر قرار می دهد که ۱ پیکسل عرض دارد، جامد (بدون نقطه و خط چین، و غیره)، و به رنگ سیاه است.
دستور دوم با انتخابگر p شروع می شود، بدین معنا که مقادیر خاصیت خود را به عنصر <p> اعمال می کند. این دستور شامل یک declaration است که رنگ متن را به رنگ قرمز تغییر می دهد.
در یک مرورگر وب، کد بالا، خروجی زیر را تولید می کند:
این خروجی، زیبا نیست، اما حداقل به شما یک ایده از چگونگی کارکرد CSS می دهد.
هنگامی که مرورگر، یک سند را نمایش می دهد، باید محتوای سند را با اطلاعات Style آن ترکیب کند. مرورگر، سند را در دو مرحله پردازش می کند:
- مرورگر HTML و CSS را به DOM (Model Object Document) تبدیل می کند. DOM نشان دهنده سند در حافظه کامپیوتر است و محتوای سند را با Style ترکیب می کند.
- مرورگر محتویات DOM را نمایش می دهد.
درباره DOM
DOM یک ساختار مشابه درخت دارد. هر عنصر، ویژگی و قطعه ای از متن، در زبان نشانه گذاری، یک گره DOM در ساختار درخت می شوند. گره ها در ارتباط آن ها با دیگر گره های DOM تعریف می شوند. بعضی از عناصر والدین گره های فرزند هستند و گره های فرزند نیز خواهر و برادر دارند.
درک DOM به شما کمک می کند CSS خود را طراحی، اشکال زدایی و نگهداری کنید زیرا DOM جایی است که CSS و محتوای سند شما به هم می رسند.
نمایش DOM
به جای یک توضیح طولانی و خسته کننده، بیایید مثالی ببینیم که چگونه DOM و CSS با هم کار می کنند.
کد HTML زیر را در نظر بگیرید:
|
1 |
<p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span></p> |
در DOM، گره مربوط به عنصر <p> یک مادر یا parent است. کودکان آن یک گره متنی و گره های مربوط به عناصر <span> هستند. گره های SPAN همچنین parent هستند، با گره های متن به عنوان فرزندان خود:
|
1 2 3 4 5 6 7 8 |
P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets" |
این همان شیوه ای است که مرورگر تفکیک قطعه HTML قبلی را انجام می دهد – درخت DOM بالا را رِندر می کند و سپس آن را در مرورگر به صورت زیر نمایش می دهد:
اعمال CSS به DOM
بگذارید برخی از CSS ها را به سند اضافه کنیم تا آن را استایل کنیم. HTML به شرح زیر است:
|
1 |
<p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span></p> |
اگر CSS زیر را به آن اعمال کنیم:
|
1 |
span { border: 1px solid black; background-color: lime;} |
مرورگر، HTML را تجزیه می کند و یک DOM از آن ایجاد می کند، سپس CSS را تجزیه می کند. از آن جا که تنها دستور موجود در CSS دارای یک سلکتور span است، این دستور به هر یک از سه span اعمال می شود. خروجیِ به روز شده به شرح زیر است:
چگونه CSS خود را به HTML اعمال کنید
سه روش مختلف برای اعمال CSS به یک سند HTML وجود دارد که به طور معمول به آن بر خواهید خورد، برخی از آن ها مفیدتر هستند. در اینجا ما به طور خلاصه هر یک را مرور خواهیم کرد.
stylesheet خارجی
در یک stylesheet خارجی، CSS را در یک فایل جداگانه با یک پسوند .css نوشته و از یک عنصر HTML <link> به آن ارجاع می دهیم. فایل HTML چیزی شبیه به این است:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html> |
و فایل CSS:
|
1 2 3 4 5 6 7 8 9 |
h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } |
این روش مسلما بهترین است، زیرا شما می توانید از یک Style برای چندین سند استفاده کنید و اگر نیاز به تغییری باشد، فقط نیاز به آپدیت دارید.
Style Sheet داخلی
یک Style Sheet داخلی جایی است که شما یک فایل CSS خارجی ندارید، اما CSS خود را درون یک عنصر <style> که داخل head در HTML است، قرار دهید. بنابراین HTML مانند این است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html> |
این روش می تواند در برخی موارد مفید باشد (شاید شما با سیستم مدیریت محتوا کار می کنید که در آن شما نمی توانید مستقیما فایل های CSS را اصلاح کنید)، اما این روش به اندازه ی استایل_شیت های بیرونی، کارآمد نیست – در وب سایت، نیاز است که CSS در هر صفحه تکرار شود، و در صورت نیاز تغییرات در مکان های مختلف به روز شود.
استایل های درون خطی
Style های درون خطی،declaration ها یا اعلان های CSS هستند که فقط بر روی یک عنصر تاثیر می گذارند و شامل یک ویژگی Style می شوند:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> </head> <body> <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1> <p style="color:red;">This is my first CSS example</p> </body> </html> |
لطفا این کار را انجام ندهید، مگر آنکه واقعا به آن نیاز داشته باشید! این روش واقعا برای maintenance بد است (شما ممکن است چندین بار در هر سند مجبور به به روز رسانی یکسان اطلاعات شوید)، و همچنین اطلاعات CSS ارائه شده را با اطلاعات ساختاری HTML مخلوط می کند، و سبب می شود خواندن و درک کردن آن، سخت تر شود. برای همه کسانی که در زمینه کد کار می کنند، جدا و خالص نگه داشتن انواع مختلف کد از هم، کار را بسیار ساده تر می کند.
تنها زمانی که شما ممکن است مجبور به استفاده از سبک های درون خطی باشید، زمانی است که محیط کاری شما واقعا محدود است (شاید CMS تنها به شما اجازه می دهد که بدنه HTML را ویرایش کنید.)
