در حال بارگذاری...
در حال بارگذاری...
CSS توسط W3C (کنسرسیوم وب جهانی) در سال 1996 به یک دلیل نسبتا ساده توسعه یافت. عنصر HTML طوری طراحی نشده است که دارای برچسب هایی باشد که به فرمت صفحه کمک کند.
برچسب هایی مانند <font> در HTML نسخه 3.2 معرفی شدند و مشکلات زیادی را برای توسعه دهندگان وب ایجاد کردند. با توجه به این واقعیت که صفحات وب دارای فونت های مختلف، پس زمینه های رنگی و سبک های متعدد هستند، بازنویسی کد فرآیندی طولانی و پرهزینه بود. بنابراین، CSS توسط W3C برای حل این مشکل ایجاد شد.
CSS از نظر فنی یک ضرورت نیست، اما احتمالاً نمی‌خواهید به صفحه‌ای نگاه کنید که فقط دارای عناصر HTML است، زیرا ظاهری کاملاً بدون ساختار دارد.
CSS مخفف زبان Cascading Style Sheets است و برای سبک سازی عناصر نوشته شده در یک زبان نشانه گذاری مانند HTML استفاده می شود. محتوا را از نمایش بصری سایت جدا می کند. رابطه بین HTML و CSS به شدت با هم گره خورده است زیرا HTML اساس یک سایت است و CSS تمام زیبایی شناسی یک وب سایت است.
تفاوت بین صفحه‌ای که CSS را پیاده‌سازی می‌کند و صفحه‌ای که این کار را انجام نمی‌دهد بسیار زیاد و مطمئناً قابل توجه است.
ممکن است وب سایتی را دیده باشید که به طور کامل بارگیری نمی شود و رنگ پس زمینه سفید دارد و بیشتر متن آن آبی و سیاه است. این بدان معنی است که قسمت CSS صفحه وب به درستی بارگیری نشده است یا به طور کلی وجود ندارد.
این همان چیزی است که صفحات وب فقط با HTML به نظر می رسند، شما هم قبول دارید که خیلی جذاب نیست.
قبل از استفاده از CSS، تمام سبک‌سازی‌ها باید در نشانه‌گذاری HTML گنجانده می‌شد. این بدان معناست که توسعه دهندگان وب باید به طور جداگانه رنگ پس زمینه، اندازه فونت، ترازها و غیره را توصیف کنند.
CSS به شما این امکان را می دهد که همه چیز را روی یک فایل متفاوت سبک سازی کنید، بنابراین طرح را در آنجا ایجاد کنید و بعداً فایل های CSS را در بالای نشانه گذاری HTML متصل می کنید. این امر HTML را بسیار تمیزتر و نگهداری آن را آسان‌تر می‌کند.
به طور خلاصه، با ویژگی‌های CSS، نیازی به توصیف مکرر نحوه ظاهر عناصر جداگانه ندارید. این باعث صرفه جویی در زمان می شود، کد را کوتاه می کند و باعث می شود آنقدر خطا نداشته باشد.
CSS به شما امکان می دهد چندین سبک را در یک صفحه HTML داشته باشید، بنابراین امکان سفارشی سازی تقریباً بی پایان است. این روزها بیشتر به یک ضرورت تبدیل شده تا یک آپشن.
CSS از یک ساختار ساده مبتنی بر انگلیسی با مجموعه ای از قوانین حاکم بر آن استفاده می کند. همانطور که قبلا ذکر کردیم، HTML فقط برای نشانه گذاری صفحه در نظر گرفته شده است. این صرفا برای توصیف محتوا ایجاد شده است. به عنوان مثال:
<p>این یک پاراگراف است.</p>اما چگونه می توان به پاراگراف استایل داد؟ ساختار سینتکس CSS بسیار ساده است. دارای یک انتخابگر و یک بلوک اعلامیه است. شما یک عنصر را انتخاب می کنید و سپس اعلام می کنید که می خواهید با آن چه کاری انجام دهید. خیلی سرراست، درست است؟
با این حال، قوانینی وجود دارد که باید به خاطر بسپارید. قوانین ساختار بسیار ساده هستند، بنابراین نگران نباشید.
انتخابگر به عناصر HTML اشاره می کند که می خواهید استایل کنید. بلوک اعلان شامل یک یا چند اعلان است که با نقطه ویرگول از هم جدا شده اند.
هر اعلان شامل یک نام ویژگی CSS و یک مقدار است که با یک دونقطه از هم جدا شده اند. یک اعلان CSS همیشه با یک نقطه ویرگول به پایان می رسد و بلوک های اعلان با آکولاد احاطه شده اند.
بیایید به یک مثال نگاه کنیم:
همه عناصر <p> آبی رنگ و پررنگ خواهند شد.
<style>
p {
color: blue;
text-weight: bold;
}
</style>حالا بیایید در مورد سبک های مختلف CSS صحبت کنیم. آنها درون خطی، خارجی و داخلی هستند.
بیایید با صحبت در مورد سبک داخلی شروع کنیم. سبک‌های CSS که به این روش انجام می‌شوند، هر بار که کل یک وب‌سایت به‌روزرسانی می‌شود، بارگذاری می‌شوند، که ممکن است زمان بارگذاری را افزایش دهد. علاوه بر این، نمی‌توانید از همان سبک CSS در چندین صفحه استفاده کنید، زیرا در یک صفحه وجود دارد. با این حال، این نیز با مزایایی همراه است. داشتن همه چیز در یک صفحه اشتراک‌گذاری الگو را برای پیش‌نمایش آسان‌تر می‌کند.
روش خارجی ممکن است راحت‌ترین روش باشد. همه چیز به صورت خارجی روی یک فایل .css انجام می شود. این بدان معناست که شما می توانید تمام استایل ها را در یک فایل جداگانه انجام دهید و CSS را در هر صفحه ای که می خواهید اعمال کنید. سبک خارجی همچنین ممکن است زمان بارگذاری را بهبود بخشد.
در آخر، ما در مورد سبک Inline CSS صحبت خواهیم کرد. Inline با عناصر خاصی که دارای تگ <style> هستند کار می کند. اگر لازم باشد هر مؤلفه html استایل داده شود، ممکن است سریعترین راه برای مدیریت CSS همین روش باشد. برای مثال، اگر می خواهید یک عنصر را تغییر دهید، به سرعت تغییرات را پیش نمایش کنید، یا شاید به فایل های CSS دسترسی ندارید. بهترین روش همین inline css خواهد بود.
بیایید آنچه را که در اینجا درباره CSS آموخته ایم و اینکه چگونه به زیبایی صفحات وب کمک می کند، خلاصه می کنیم:
در مجموع، امیدواریم این مقاله برای شما مفید بوده باشد.