آموزش کامل Css

آموزش کامل CSS قسمت اول

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

معرفی CSS

CSS مخفف Cascading Style Sheets و یک سبک زبان است که برای طراحی ظاهر و قالب یک فایل HTML که به زبان نشانه گذاری نوشته شده است استفاده می‌شود. با استفاده از CSS بدون آنکه نیاز به تغییر در کدهای HTML داشته باشیم میتوانیم به بهترین شکل ظاهر وب سایت خود را کنترل کنیم.

CSS بسیار مفید است چون قبل از اینکه CSS وجود داشته باشد، طراح وب سایت مجبور بود تک تک عناصر p را بصورت جداگانه ویرایش کند و برای هرکدام یک کد مشابه را بنویسد؛ اما امروزه با نوشتن یک کد برای هر کدام از تگ های HTML، تغییرات ما بر روی تمامی عناصر مرتبط موجود در آن صفحه یا تمام صفحه هات اعمال می شود.

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

شروع آموزش

بهتر است شروع کنیم در ابتدا نرم افزار Notepad را باز کنید و کد های HTML زیر را در آن کپی کنید. شما میتوانید از ادیتورهای مختلف مثل Visual Studio Code و Notepad++ نیز برای این منظور استفاده کنید.

<!doctype html>
<html>
<head>
    <style>
    </style>
</head>
<body dir="rtl">
    <h1>پیشرو سیستم</h1>
    <p>به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
    <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
    <p>می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>

مکانی که ما باید کدهای CSS خود را در آنجا اضافه کنیم داخل تگ های باز و بسته Style خواهد بود.

در اینجا باید به دو مورد اشاره کنیم، اول این که تگ style یک عنصر HTML است و همانطور که گفتیم کدهای CSS بین این عنصر قرار می‌گیرند و دوم اینکه این فقط یکی از روشهایی است که با آن می‌توان CSS را بر روی HTML اعمال کرد، روشهای دیگری هم وجود دارد که در قسمت های آینده به آنها می‌پردازیم.

در ادامه برای اینکه بتوانید نتیجه کار را مشاهده کنید فایل خود را به اسم index.html در یک پوشه در هر مکانی که دوست دارید بر روی کامپیوتر خود ذخیره نمایید. و آن را از طریق یک مرورگر وب برای نمایش باز کنید.

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که مشاهده می‌کنید صفحه ما هنوز هیچ رنگ و نقشی ندارد، چون هنوز CSS به آن اضافه نشده است. برای اضافه کردن کدهای CSS به یک عنصر یا تگ HTML باید نام آن را بدون هیچ پرانتزی بین تگ style تایپ کنیم و بعد یک براکت باز و بسته {} ایجاد کنیم. هر ویژگی که می خواهیم تغییر دهیم باید بین این دو براکت قرار گیرد.

تغییر رنگ پس زمینه با ویژگی (background-color)

ما در اینجا به عنوان نمونه می‌خواهیم رنگ پس زمینه تگ h1 را در تمام صفحه عوض کنیم ولی در کل کارهای زیادی می‌توان برای عنصر مورد نظر انجام داد که در قسمت های بعدی بررسی خواهیم کرد. به هرکدوم از این طرح و نقش ها یک property یا ویژگی می‌گویند که ما در این قسمت باید از ویژگی رنگ پس زمینه (background-color) استفاده کنیم.

بعد از نوشتن ویژگی موردنظر، علامت دونقطه (:) را بگذارید. در این بخش باید value یا مقدار را مشخص کنید، مقدار همان رنگی است که می‌خواهید پس زمینه h1 داشته باشد و در انتها علامت (;) را بگذارید.

این الگوی نوشتاری ساده باید در تمام زبان CSS رعایت شود. ( ;property: value )

درواقع کاری که علامت (;) انجام می‌دهد خاتمه دادن به ویژگی است، برای همین بدون تغییر در ویژگی اول می‌توان در خط های بعد ویژگی های دیگری را نیز اضافه کرد؛ پس اگر بخواهیم تغییر جدیدی به h1 اضافه کنیم بعد از (;) میتوانیم ویژگی جدیدی با همان الگوی نوشتاری بنویسیم. جمعا به همه این الگوهای نوشتاری، قوانین CSS می‌گویند.

<!doctype html>
<html>
<head>
    <style>
        h1 { background-color:purple; }
    </style>
</head>
<body dir="rtl">
    <h1>پیشرو سیستم</h1>
    <p>به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
    <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
    <p>می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>

کد CSS پس زمینه را مانند مثال بالا به فایل HTML خود اضافه و آن را ذخیره نمایید و فایل خود را در مرورگر باز کنید.

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که مشاهده می‌کنید پس زمینه تیتر اول که از تگ h1 استفاده کرده بودیم به رنگ بنفش درآمده است.

تغییر رنگ متن با ویژگی (color)

در این قسمت ما میخواهیم تا تغییرات رنگ را بر روی تگ های p یا پاراگراف اعمال کنیم یعنی تمامی نوشته های موجود در فایل HTML که از تگ p استفاده کرده باشند تغییر خواهند کرد.

برای شروع بعد از براکت عنصر h1 عنصر p را تایپ کنید و دو براکت باز و بسته {} برای آن ایجاد کنید. برای اعمال رنگ بر روی متن در CSS باید از ویژگی color استفاده کنیم. پس برای تگ p ویژگی color و برای مقدار آن عبارت red را تایپ و ذخیره کنید.

<!doctype html>
<html>
<head>
    <style>
        h1 { background-color:purple; }
         p { color:red; }
    </style>
</head>
<body dir="rtl">
    <h1>پیشرو سیستم</h1>
    <p>به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
    <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
    <p>می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که در نتیجه بالا مشاهده می‌کنید توانستیم رنگ متن هردو پاراگراف موجود در فایل HTML خود را به رنگ قرمز تغییر دهیم. به سادگی تمام!

تغییر انداره فونت با ویژگی (font-size)

حالا دوباره برگردید به فایل ذخیره شده خود تا سایز متن را هم تغییر دهیم. ویژگی مربوط به اینکار font-size است و برای مقدار نیز سایز 25px را در نظر میگیریم، در اینجا منظور از px عبارت پیکسل (pixel) یک واحد اندازه گیری که در زبان CSS استفاده می شود.

ویژگی font-size را بعد از عبارت (;) در انتهای color مانند مثال زیر اضافه میکنیم.

<!doctype html>
<html>
<head>
    <style>
        h1 { background-color:purple; }
         p { color:red; font-size:25px; }
    </style>
</head>
<body dir="rtl">
    <h1>پیشرو سیستم</h1>
    <p>به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
    <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
    <p>می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>

اگر صفحه خود را دوباره بارگذاری کنید میبینید که اندازه نوشته ها بزرگتر شد است.

تغییر نوع فونت با ویژگی (font-family)

حالا نوبت تغییر در نوع فونت است، ویژگی این کار font-family و مقدار آن را نیز به عنوان نمونه در اینجا فونت Tahoma در نظر میگیریم. در قسمت های بعدی بیشتر به این ویژگی و نحوه استفاده از دیگر فونت ها خواهیم پرداخت.

<!doctype html>
<html>
<head>
    <style>
        h1 { background-color:purple; }
         p { color:red; font-size:25px; font-family:Tahoma; }
    </style>
</head>
<body dir="rtl">
    <h1>پیشرو سیستم</h1>
    <p>به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
    <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
    <p>می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که در بالا مشاهده می کنید، فونت زیبای Tahoma اعمال شده است و نوع فونت این دو پاراگراف متفاوت از دیگر متن ها است.

در این قسمت از آموزش ما با کدهای CSS و یکی از روش های فراخوانی آنها در یک فایل HTML و همچنین خاصیتهای (font-size ،font-family ،color ،background-color) آشنا شدیم. برای یادگیری بیشتر حتما آموزش های بعدی ما دنبال کنید.

دیدگاهتان را بنویسید