مقدمه
در ابتدا باید بگوییم کسانی که با html هیچ آشنایی ندارند باید ابتدا آشنایی مقدماتی با این زبان داشته باشید، برای این منظور به بخش آموزش کامل html مراجعه کنید.
سی اس اس در کنار اچ تی ام ال هسته فناوری ساخت صفحات وب است. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. در حال حاضر بیشترین استفاده از این زبان برای استایل دادن به صفحات وب است.
در روزهای ابتدایی وجود اچ‌تی‌ام‌ال قرار نبود که این تگ‌ها هیچ ظاهر بخصوصی به خود بگیرند. در واقع آن‌ها قرار بود تا تنها برای نوشتن متون و قرار دادن عکس‌ها باشند. ولی از زمانی به بعد، آمدن استایل‌ها و انواع رنگ‌ها و فونت‌ها به وب، نوشتن صفحات اچ‌تی‌ام‌ال را به کابوسی برای برنامه نویسان تبدیل کرد. چرا که برای نوشتن یک صفحه یا چند صفحه نیاز به نوشتن هزاران خط کد مجزا بود که کاری طاقت فرسا و طولانی محسوب می‌شد. این مشکل با روی کار آمدن css بر طرف شد. در واقع سی‌اس‌اس نقش اتاق فرمان برای اچ‌تی‌ام‌ال را دارد و برنامه‌ریزی اینکه هر المان در زبان اچ‌تی‌ام‌ال با چه مدل و در چه جایی قرار بگیرد را بر عهده می‌گیرد. حالا می‌توانیم یک سایت کامل را با تمامی صفحاتش تنها با یک خط کد تغییر دهیم.
ما در اولین قسمت تنها نحوه اضافه کردن سی‌اس‌اس به صفحه را آموزش می‌دهیم. پس نگران برخی دستورات به کار رفته در نمونه‌ها را که نمی‌دانید نباشید. ما در قسمت های بعدی به طور کامل در رابطه با آن‌ها صحبت خواهیم کرد. در کد های زیر کد css را با رنگی دیگر می نویسیم.
روش های استفاده از css در صفحات html
روش اول به صورت خطی
در این روش از مشخصه های css در تگ های html استفاده می کنیم. این روش به دلیل استفاده مستقیم و در هم کدها فقط برای تغییرات کوچک و در حد یک المان مناسب است تا موجب شلوغی بیش ازحد صفحات نشود. به این نوع سی اس اس اصطلاحا inline گفته می شود.
مثال: <p style="color: red;"> متن با رنگ قرمز </p>
در کل بهتر است برای جلوگیری از شلوغی صفحه و کدها و همچنین افزایش سرعت از این نوع استایل دادن خوداری کنیم.
روش دوم به صورت داخلی
در این روش از تگ <style> در تگ <head> استفاده می کنیم، این نوع سی اس اس را internal یا داخلی می گویند. در این روش استایل های ما تنها در همان صفحه خوانده می شوند و در صفحات دیگر قابل دسترسی نیست.
<head>
<style>
body{
background-color: blue;
}
h1{
color: red;
margin-left: 40px;
}
</style>
</head>
قسمت رنگی یک کد سی اس اس است.
روش سوم به صورت یک فایل خارج صفحه
بهترین روش استفاده از سی اس اس است که پیشنهاد می کنیم از این روش استفاده کنید. برای ایجاد یک فایل مجزای css در ادیتور خود یک فایل جدید ایجاد کرده و آن را با پسوند css. ذخیره کنید. حالا صفحه اچ تی ام الی باز کنید و در تگ هد آن کد زیر را اضافه کرده و آدرس فایل سی اس اس را در آن وارد کنید.
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
با این کار شما یک فایل سی اس اس خارجی دارید که سند اچ تی ام ال تان از روی آن استایل مورد نظرتان را می خواند. مزیت این کار به روش‌های دیگر سرعت لود بهتر صفحه و رندر شدن بهتر صفحه و همچنین امکان استفاده از این فایل برای دیگر صفحات است. برای استفاده از این صفحه در استایل دیگر صفحات کافی است آدرسی را که در تگ هد فوق استفاده کردیم در تگ هد دیگر صفحات نیز اضافه کنیم. با این روش از شلوغی و کدهای در هم نیز جلوگیری می شود.
دیدگاه خود را بنویسید