css

تعریف CSS چیست؟ – آموزش CSS

تا حالا به سایت های زیادی سر زدید بعضی از سایت ها دیزاین (طراحی) بسیار زیبایی دارند و بعضی سایت ها هم دیزاین سطح پایینی دارند. در طراحی سایت سمت کاربر دو زبان پایه وجود دارد. یعنی از این دو زبان در هر سایتی استفاده میشود.

1- HTML

2- CSS

همان طور که می دانید کسانی که به طراحی سایت علاقه دارند ابتدا سراغ HTML و سپس سراغ CSS می آیند. CSS مخفف عبارت Cascading Style Sheets می باشد. CSS3 در سال 2011 در راستای تکمیل و بهبود ورژن قبلی یعنی ورژن 2.1 که در سال 2004 ارائه شده بود منتشر شد.

CSS چیست؟

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

چرا باید از CSS استفاده کنیم؟

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

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

ساختار دستورات CSS:

در این قسمت ساختار کلی دستورات CSS را خدمت شما توضیح می دهیم.

ساختار css

 

Selector: این بخش نام عنصر HTML است که میخواهیم استایل مورد نظرمان بر روی آن اعمال شود.

Declaration: قسمتی که در میان دو علامت {} قرار می گیرد، بخش اعلان نامیده می شود و در این قسمت باید خاصیت هایی را که میخواهیم به قسمت Selector اعمال کنیم، تعیین نماییم. در این مثال خاصیت رنگ (color) برابر با مقدار قرمز(red) می باشد و خاصیت فونت (font-size) برابر با 14 پیکسل است.

در دستور بالا مقدار هر خاصیت بعد از علامت دو نقطه (:) قرار می گیرد. همچنین در پایان دستورات CSS علامت سیمی کالون(;) گذاشته می شود. تمامی خاصیت ها و مقدارها بین براکت باز و بسته {} قرار می گیرد. تمامی موارد بالا در مثال زیر رعایت شده است.

p { font-family:tahoma;text-align:right;}

این مطلب را از دست ندهید: تفاوت id و class در CSS

کامنت در CSS:

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

بعنوان مثال جهت شرح توضیحات در مثال بالا به صورت زیر عمل می کنیم:

/*This is a comment*/
p { font-family:tahoma;text-align:right;}

 

به سه روش میتوان کد های CSS را نوشت:

  • داخل تگ ها (Internal Style Sheet)
  • داخل تگ <style> در یک سند HTML
  • داخل یک فایل جدا (External Style Sheet)

ما در این آموزش از روش سوم یعنی داخل یک فایل جدا استفاده می کنیم.(این روش بهترین روش ممکن جهت بکار بردن کدهای CSS در صفحات وب می باشد.)

نحوه ی فراخوانی کد های CSS:

وقتی شما از یک فایل جدا استفاده می کنید تا کد های CSS خودتون رو داخل اون بنویسید باید اون فایل رو به صفحه ی HTML خودتون متصل کنید.

برای اتصال از تگ link استفاده می کنیم. بعنوان مثال :

<link rel="stylesheet" href="namefile.css">

خوب برای لینک کردن یک فایل CSS باید از StyleSheet در جلوی rel استفاده کنیم. همچنین داخل صفت href آدرس فایل CSS را قرار می دهیم.

بهتر است فایل های CSS در یک پوشه با نام CSS قرار بگیرد. بعنوان مثال :

<link rel="stylesheet" href="css/namefile.css">

فراخوانی استایل های CSS در بخش یا تگ مورد نظر:

برای این که یک سری کد CSS را به یک تگ یا یک بخش خاص مرتبط کنیم دو روش وجود دارد:

1- نام خود تگ را بیان کنیم :

در این روش نام خود تگ را بیان کرده و صفت ها و استایل های مورد نظر را به آن میدهیم مانند مثال پایین:

html{
    padding: 10px;
}
body{
    margin: 10px;
}
div{
    border: 1px solid red;
}

در این جا تگ HTML بدون هیچ پسوند یا پیشوندی قرار میگیرد و صفت مورد نظر داخل { } قرار گرفته است :

این روش در بعضی مواقع خوب است و کاربرد هم دارد اما گاهی شما از یک تگ جاهای مختلفی استفاده کرده اید و نمی خواهید استایل برای همه ی آن ها در نظر گرفته شود.

مثلا تگ div در این جا یک border (خط دور جعبه یا box) قرار دارد اما شما نمی خواهید تمامی این div ها border داشته باشند.

برای این منظور به سراغ روش دوم میرویم.

2- استفاده از id و class در CSS:

در این روش با دو عنصر class و id کار میکنیم در این جا شما برای تگ مورد نظر class یا id مورد نظر را تعریف میکنید و از آن در CSS استفاده میکنید. بعنوان مثال :

کد HTML

<div class="nameclass"> ... </div>
<form id="nameid"> ... </form>

در CSS

#nameid{
    margin: 10px;
}
.nameclass{
    border: 1px solid red;
}

نام id و class هر چیزی میتواند باشد و به خود شما بستگی دارد که نام آن ها را چی بگذارید.

خوب تا این جا توانستید شما یک فایل CSS ایجاد کرده و اون رو به سند HTML لینک کنید. و همچنین مرتبط ساختن صفت ها به تگ های HTML با هر دو روش را آموختید.

با ما همراه باشید.

Related Articles

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این مطلب را از دست ندهید!

Close
Close