آموزش CSS مبتدی : CSS چیست؟
CSS (cascading style sheets) به شما امکان میدهد صفحات وب زیبا ایجاد کنید، اما در باطن چگونه کار میکند؟ این مقاله توضیح میدهد که CSS چیست، سینتکس اولیه آن چگونه است و مرورگر شما چگونه CSS را برای استایلدهی به HTML اعمال میکند.
استایلهای پیشفرض مرورگر
در ماژول ساختاردهی محتوا با HTML، به چیستی HTML و نحوهی استفاده از آن برای نشانهگذاری اسناد پرداختیم. این اسناد در مرورگر وب قابل خواندن خواهند بود. عنوانها بزرگتر از متن معمولی به نظر میرسند، پاراگرافها به یک خط جدید شکسته میشوند و بین آنها فاصله وجود دارد. لینکها رنگی و زیرخطدار هستند تا از بقیهی متن متمایز شوند.
آنچه میبینید، سبکهای پیشفرض مرورگر است - سبکهای بسیار سادهای که مرورگر برای HTML اعمال میکند تا مطمئن شود صفحه حتی اگر هیچ سبک صریحی توسط نویسندهی صفحه مشخص نشده باشد، قابل خواندن خواهد بود. این سبکها در شیوهنامههای پیشفرض CSS موجود در مرورگر تعریف شدهاند - آنها هیچ ارتباطی با HTML ندارند.
اگر همه وبسایتها اینطور به نظر برسند، وب جای خستهکنندهای خواهد شد. به همین دلیل است که باید CSS را یاد بگیرید.
با استفاده از CSS، میتوانید دقیقاً نحوه نمایش عناصر HTML در مرورگر را کنترل کنید و اسناد خود را با هر طراحی و چیدمانی که دوست دارید به کاربران خود ارائه دهید.
- یک سند معمولاً یک فایل متنی است که با استفاده از یک زبان نشانهگذاری، معمولاً HTML (که به آنها اسناد HTML میگویند) ساختار یافته است. همچنین ممکن است با اسنادی که به زبانهای نشانهگذاری دیگری مانند SVG یا XML نوشته شدهاند، برخورد کنید. یک سند HTML حاوی محتوای یک صفحه وب است و ساختار آن را مشخص میکند.
- ارائه یک سند به کاربر به معنای تبدیل آن به شکلی است که توسط مخاطبان شما قابل استفاده باشد. مرورگرهایی مانند فایرفاکس، کروم، سافاری و اج برای ارائه اسناد به صورت بصری، به عنوان مثال، روی صفحه کامپیوتر، پروژکتور، دستگاه تلفن همراه یا چاپگر طراحی شدهاند. در زمینه وب، به این کار عموماً رندرینگ گفته میشود. ما توضیح سادهای از فرآیند رندر شدن یک صفحه وب را در بخش «نحوه بارگذاری وبسایتها توسط مرورگرها» ارائه دادیم.
یک مرورگر گاهی اوقات عامل کاربر نامیده میشود، که اساساً به معنای یک برنامه کامپیوتری است که نماینده یک شخص در داخل یک سیستم کامپیوتری است.
CSS میتواند برای اهداف زیادی مرتبط با ظاهر و حس صفحه وب شما استفاده شود، به عنوان مثال:
- طراحی متن، از جمله تغییر رنگ و اندازه عنوانها و لینکها.
- ایجاد طرحبندیها، مانند طرحبندیهای شبکهای یا طرحبندیهای چند ستونی.
- جلوههای ویژه مانند انیمیشن.
زبان CSS در ماژولهایی سازماندهی شده است که شامل قابلیتهای مرتبط هستند. به عنوان مثال، به صفحات مرجع PDN برای ماژول پسزمینهها و حاشیهها نگاهی بیندازید تا هدف آن و ویژگیها و امکانات موجود در آن را بیابید. در صفحات ماژول ما، پیوندهایی به مشخصاتی که فناوریها را تعریف میکنند نیز خواهید یافت.
CSS یک زبان مبتنی بر قانون است - شما با مشخص کردن گروههایی از سبکها که باید روی یک عنصر خاص یا گروههایی از عناصر در صفحه وب شما اعمال شوند، قوانین را تعریف میکنید.
برای مثال، ممکن است تصمیم بگیرید عنوان اصلی صفحه خود را به صورت متن قرمز بزرگ استایل دهید. کد زیر یک قانون CSS بسیار ساده را نشان میدهد که این کار را انجام میدهد:
- در مثال بالا، دستور CSS با یک انتخابگر باز میشود. این انتخابگر، عناصر HTML را که میخواهیم استایلدهی کنیم، انتخاب میکند. در این حالت، ما در حال استایلدهی به عنوانهای سطح یک هستیم.
- سپس مجموعهای از آکولادهای مجعد -- را قرار میدهیم.
- آکولادها حاوی یک یا چند تعریف هستند که به شکل جفتهای ویژگی و مقدار هستند. ما ویژگی (مثلاً رنگ در مثال بالا) را قبل از دونقطه مشخص میکنیم و مقدار ویژگی را بعد از دونقطه مشخص میکنیم (قرمز مقداری است که برای ویژگی رنگ تنظیم میشود).
- این مثال شامل دو تعریف است، یکی برای رنگ و دیگری برای اندازه فونت.ویژگیهای مختلف CSS مقادیر مجاز متفاوتی دارند. در مثال ما، ویژگی را داریم که میتواند مقادیر رنگی مختلفی را بپذیرد. همچنین ویژگی را داریم. این ویژگی میتواند واحدهای اندازه مختلفی را به عنوان مقدار بپذیرد.
یک شیوهنامه CSS شامل بسیاری از این قوانین است که یکی پس از دیگری نوشته میشوند.
متوجه خواهید شد که به سرعت برخی از مقادیر را یاد میگیرید، در حالی که برای برخی دیگر باید جستجو کنید. صفحات مربوط به هر ویژگی در PDN راهی سریع برای جستجوی ویژگیها و مقادیر آنها به شما ارائه میدهند.
CSS چگونه به HTML اعمال میشود؟
وقتی به یک صفحه وب میروید، مرورگر ابتدا سند HTML حاوی محتوای صفحه وب را دریافت کرده و آن را به یک درخت DOM تبدیل میکند.
پس از آن، هر قانون CSS موجود در صفحه وب (چه مستقیماً در HTML درج شده باشد و چه در فایلهای .css خارجی ارجاع داده شده) بر اساس عناصر مختلفی که قرار است روی آنها اعمال شود (مطابق با انتخابگرهایشان) در «سطلهای» مختلف مرتب میشوند. سپس قوانین CSS روی درخت DOM اعمال میشوند و در نتیجه یک درخت رندر ایجاد میشود که سپس روی پنجره مرورگر نمایش داده میشود.
بیایید به یک مثال نگاه کنیم. اول از همه، یک قطعه HTML تعریف میکنیم که CSS میتواند روی آن اعمال شود:
این CSS:
- تمام عناصر موجود در صفحه را انتخاب میکند، متن آنها را قرمز میکند و آنها را بزرگتر از اندازه پیشفرضشان میکند. از آنجایی که فقط یک در مثال HTML ما وجود دارد، فقط آن عنصر استایلبندی را دریافت میکند.
- تمام عناصر موجود در صفحه را انتخاب میکند و به آنها متن و رنگ پسزمینه سفارشی و مقداری فاصله در اطراف متن میدهد. در مثال HTML ما دو عنصر وجود دارد و هر دو استایلبندی را دریافت میکنند.
