جلسه ی پنجم : انواع سبک ( استایل ) ها در CSS

انواع استایل ها در HTMl

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

انواع استایل

به طور کلی استایل قلب تپنده ی فایل HTML می باشد . ما از طریق استایل به ظاهر وب سایت خود بهبود می بخشیم و به آن مطابق طرحی که در ذهن خود داریم شکل می دهیم .

به طور کلی استایل های مورد استفاده در CSS به سه دسته تقسیم می شوند که عبارتند از :

  1. استایل درونی ( inline Style )
  2. استایل داخلی ( enternal Style )
  3. استایل خارجی ( external Style )

 

  1. استایل درونی ( inline Style )

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

نحوه ی استفاده : برای استفاده از این نوع استایل کافیست تگ مورد نظر خود را نوشته و در داخل علامت باز بسته کلمه ی Style را قرار دهیم . برای فهم بیشتر مطلب به مثال زیر توجه کنید .

<tag style="style-name:value"> ... </tag>

توضیحات بیشتر : همانطور که در آموزش قبلی گفتیم به نشانه گذار های زبان html تگ می گویند ، اما در زبان CSS به این نشانه گذار ها خاصیت یا نام استایل ( style-name ) می گویند و مقداری که به آن ها داده می شود نیز ارزش ( value ) نام دارد.

 

  1. استایل داخلی ( internal style )

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

نحوه ی استفاده : در این روش یک تگ به صورت باز و بسته با نام style در داخل فایل html می سازیم و آن تگ را در درون تگ head قرار می دهیم برای فهم بیشتر به مثال زیر توجه کنید .

<!DOCTYPE html>

<html>

<head>

<style> ... </style>

</head>

<body>

</body>

</html>

  1. استایل خارجی ( external Style )

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

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

 

اتصال CSS به HTML

نکته : لطفا دو فایل CSS و HTML را داخل یک پوشه قرار دهید (این مورد اجباری نمی باشد اما دقت کنید که هنگام لینک کردن فایل CSS به HTML آدرس دقیق فایل CSS را نسبت به فایل HTML وارد کنید.).

برای اتصال CSS به HTML کافیست فایل HTML راباز نموده ( در بالا گفتیم که این دو فایل باید در یک پوشه باشند ) سپس کد زیر را کپی کرده :

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

و آن را درون تگ head داخل فایل HTML به صورت زیر قرار می دهیم .

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

</body>

</html>

توضیحات بیشتر : تگ href آدرس مکانی می باشد که فایل CSS در آن قرار دارد اگر فایل CSS و  HTML در کنار یکدیگر قرار گرفته باشند آدرس بالا درست می باشد در غیر این صورت باید آدرس دقیق فایل CSS را نسبت به فایل HTML در مقابل href به صورت دستی وارد نماییم .

 

نحوه ی کلاس دادن به تگ ها

برای اینکه به یک تگ کلاس دهیم می بایست ابتدا نام آن تگ را نوشته سپس در داخل علامت باز و بسته یک Attribute به نام Class را فراخوانی نموده و در داخل آن نام کلاس را می نویسیم برای فهم بهتر به مثال زیر توجه کنید .

<tag class="نام کلاس"> ... </tag>

حال برای این که بتوانیم ویژگی های مورد نظر خود را به تگ مورد نظر در HTML اضافه کنیم کافیست وارد فایل CSS شویم سپس یک نقطه بگذاریم و نام آن کلاس را بنویسیم تا کلاس مورد نظر ما در فایل CSS فراخوانی شود .

سپس در مقابل آن یک آکولاد باز نموده ( { } ) و سپس آن را می بندیم . حال ویژگی های مورد نظر خود را داخل دو آکولاد می نویسیم سپس یک دونقطه گذاشته و مقدار مورد نظر خود با واحد آن را مقابل ویژگی خود می نویسیم .

نکته : در صورتی که بخواهیم از چند ویژگی استفاده نماییم آن ها را با علامت سمیکالن (;  ) از هم جدا می نماییم .

برای فهم بهتر این موضوع به مثال زیر توجه کنید .

.Class-name { Style-name : Value ; Syle-name-2 : Value2}

خلاصه ی آموزش :

  1. استایل ها به طور کلی به سه دسته تقسیم می شوند .
  2. استایل درون خطی کاربرد کمی دارد و بر روی خود تگ نوشته می شود .
  3. برای استفاده از استایل داخلی کافیست تگ style را درون تگ head قرار دهیم .
  4. پر کاربردترین و بهترین نوع استایل ، استایل خارجی می باشد که در یک فایل جدا گانه قرار می گیرد .
  5. برای اتصال CSS به HTML کافیست کد بالا را داخل تگ head در فایل HTML قرار دهیم . ( درصورتی که دو فایل در یک پوشه باشند )
  6. برای کلاس دادن به یک تگ کافیست نام آن را در داخل تگ مورد نظر در زبان HTML فراخوانی کنیم .
  7. برای فراخوانی نام کلاس در زبان CSS کافیست یک نقطه گذاشته و نام آن را بنویسیم .
  8. برای قرار دادن ویژگی های مورد نظر بر روی متن کافیست در داخل فایل CSS یک آکولاد باز کرده و ویژگی مورد نظر خود را در آن فراخوانی کنیم .
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها