آموزش استفاده از استایل های CSS در HTML

Ratings
(0)

 

CSS مخفف کلمات Cascading Style Sheets است و به معنی برگه های استایل آبشاری است. CSS باعث صرفه جویی زیادی در زمان می شود. CSS می تواند چینش چندین صفحه وب را به یکباره کنترل کند.

 

CSS چیست؟

از CSS برای فرمت دهی به چینش یک صفحه وب استفاده می شود. با استفاده از CSS، می توانیم موارد زیر را کنترل کنیم:

  1. رنگ
  2. فونت
  3. سایز متن
  4. فاصله بین عناصر
  5. روش چینش و موقعیت دهی به عناصر
  6. استفاده از تصاویر پس زمینه یا رنگ های پس زمینه
  7. استفاده از نمایش های مختلف برای دستگاه ها با سایزهای مختلف
  8. و بسیاری چیزهای دیگر

نکته: کلمه ی آبشاری(cascading) یعنی اینکه اگر یک استایل را به یک عنصر والد(parent) اعمال کنیم، این استایل ها همچنین به تمام عناصر فرزند(children) که در داخل عنصر والد قرار دارند نیز اعمال می شود. بنابراین، اگر برای متن عنصر body، رنگ آبی(blue) را تنظیم کنیم، تمام عنوان ها(heading) و پاراگراف ها و دیگر عناصر متنی که در داخل عنصر body قرار دارند نیز، به رنگ آبی در خواهند آمد(مگر اینکه چیز دیگری را مشخص کنیم).

روش های استفاده از CSS

به سه روش می توانیم CSS را به عناصر HTML اضافه کنیم:

  1. استفاده از CSS درون خطی: با استفاده از خصوصیت style در درون عناصر HTML می توانیم این کار را انجام دهیم.
  2. استفاده از CSS داخلی: با استفاده از عنصر <style> در درون بخش <head>  از HTML می توانیم این کار را انجام دهیم.
  3. استفاده از CSS خارجی(اکسترنال): با استفاده از عنصر <link> می توانیم یک فایل CSS خارجی را به سند اضافه کنیم.

متداول ترین راه برای اضافه کردن کدهای CSS این است که استایل ها را در داخل یک فایل CSS خارجی قرار دهیم. اما در این آموزش، ما از استایل های درون خطی و داخلی استفاده می کنیم؛ زیرا نشان دادن آنها ساده تر است و در مثال خودتان امتحان کنید به راحتی می توانیم کدها را ویرایش کنیم.

استفاده از کدهای CSS درون خطی

از کدهای درون خطی(inline) برای اعمال یک استایل یکتا به یک عنصر HTML استفاده می شود. کدهای CSS درون خطی، از خصوصیت style در یک عنصر HTML استفاده می کنند. در مثال زیر، رنگ متن یک عنصر <h1> را به آبی تنظیم می کنیم و رنگ متن یک عنصر <p> را به قرمز تنظیم می کنیم.

مثال شماره 1

<h1 style="color:blue;">یک عنوان آبی</h1>

<p style="color:red;">یک پاراگراف قرمز</p>
امتحان کنید

 استفاده از کدهای CSS خارجی(اکسترنال)

از یک برگه استایل خارجی، برای تعریف استایل برای تعداد زیادی صفحه HTML استفاده می شود. برای استفاده از یک برگه استایل خارجی، در بخش <head> از هر صفحه HTML، یک عنصر <link> اضافه کنید.

مثال شماره 2

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>

<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است</p>

</body>
</html>
امتحان کنید

برگه های استایل خارجی(اکسترنال) را می توانیم در هر ادیتور متنی، بنویسیم و ایجاد کنیم. این فایل نباید حاوی هیچ کد HTML باشد و باید با پسوند css. ذخیره شود. محتویات فایل styles.css به صورت زیر است:

مثال شماره 3

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

نکته: با استفاده از یک برگه استایل خارجی(اکسترنال) می توانیم با تغییر دادن یک فایل، ظاهر یک وب سایت کامل را تغییر دهیم.

تنظیم رنگ ها، فونت ها و سایزها با CSS

در اینجا، به معرفی برخی از ویژگی های متداول CSS می پردازیم. بعداً در مورد آنها توضیحات بیشتری خواهیم داد:

1. از ویژگی color در CSS برای تعریف رنگ متن استفاده می شود.

2. از ویژگی font-family در CSS برای تعریف فونت استفاده می شود.

3. از ویژگی font-size در CSS برای تعریف سایز متن استفاده می شود.

مثال شماره 4

استفاده از ویژگی color و font-family و font-size در CSS

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است</p>

</body>
</html>
امتحان کنید

استفاده از کادر(border) در CSS

از ویژگی border در CSS برای تعریف یک کادر به دور یک عنصر HTML استفاده می شود.

نکته: ما تقریباً می توانیم به دور تمام عناصر HTML، یک کادر ایجاد کنیم.

مثال شماره 5

استفاده از ویژگی border در CSS

p {
  border: 2px solid powderblue;
}
امتحان کنید

استفاده از ویژگی Padding در CSS

از ویژگی padding در CSS برای تعریف یک فضای خالی بین متن داخلی و کادر(border) یک عنصر استفاده می شود.

مثال شماره 6

استفاده از ویژگی های border و padding در CSS

p {
  border: 2px solid powderblue;
  padding: 30px;
}
امتحان کنید

استفاده از ویژگی margin در CSS

از ویژگی margin در CSS برای تعریف یک فضای خالی، به سمت بیرون از کادر(border) عنصر استفاده می شود.

مثال شماره 7

استفاده از ویژگی های margin و border در CSS

p {
  border: 2px solid powderblue;
  margin: 50px;
}
امتحان کنید

روش های لینک به فایل CSS اکسترنال

برگه های استایل اکسترنال(خارجی) می توانند با استفاده از یک URL کامل، یا با استفاده از یک مسیر نسبی، نسبت به صفحه وب جاری، مورد رجوع قرار گیرند.

مثال شماره 8

در این مثال از یک آدرس URL کامل برای لینک به یک برگه استایل استفاده شده است:

<link rel="stylesheet" href="https://sina2.ir/tryit/other/styles.css">
امتحان کنید

 

مثال شماره 9

در این مثال، به یک برگه استایل(styles.css) که در پوشه other که در داخل پوشه tryit در وب سایت فعلی قرار دارد، لینک داده شده است(لینک نسبت به آدرس دامنه سایت):

<link rel="stylesheet" href="/tryit/other/styles.css">
امتحان کنید

 

مثال شماره 10

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

<link rel="stylesheet" href="/other/styles.css">
امتحان کنید

 نکته: در مثال شماره 10، در خصوصیت href، علامت اسلش اول که قبل از کلمه other قرار دارد باید نادیده گرفته شود.

در بخش مسیر فایل ها در HTML، در رابطه با مسیرها مطالب بیشتری خواهید آموخت.

خلاصه این مقاله

1. از خصوصیت style در HTML برای استایل دهی درون خطی(inline) استفاده می شود.

2. از عنصر <style> برای تعریف کدهای CSS داخلی استفاده می شود.

3. با استفاده از عنصر <link> در HTML، می توانیم به یک فایل CSS اکسترنال رجوع کنیم.

4. از عنصر <head> در HTML برای ذخیره کردن عناصر <style> و <link> استفاده می شود.

5. از ویژگی color در CSS برای رنگی کردن متن ها استفاده می شود.

6. از ویژگی font-family برای تنظیم فونت متن ها استفاده می شود.

7. از ویژگی font-size برای تنظیم اندازه یا سایز متن ها استفاده می شود.

8. از ویژگی border برای تنظیم کادرها استفاده می شود.

9. از ویژگی padding در CSS برای ایجاد فضای سفید در درون کادرها استفاده می شود.

10. از ویژگی margin در CSS، برای ایجاد فضای سفید در بیرون از کادرها استفاده می شود.

 

  • بازدید: 1145

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال