آموزش HTML صفحه اصلی اینستاگرام ما
css

سبک های HTML - CSS

CSS مخفف Cascading Style Sheets به معنای سبک نامه های آبشاری است .

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

CSS چیست؟

سبک نامه های آبشاری (CSS) برای قالب بندی چیدمان یک صفحه وب استفاده میشود .

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

نکته: واژه آبشاری به این معنا است که یک سبک اعمال شده به یک عنصر والدی همچنین به همه عناصر فرزندی داخل عنصر والدی اعمال خواهد شد . بنابراین ، اگر شما رنگ متن body را روی "blue" تنظیم کنید ، همه عناوین ، پاراگراف ها ، و دیگر عناصر متنی داخل عنصر body نیز همان رنگ را میگیرند (مگر اینکه چیز دیگری مشخص کنید) !

استفاده از CSS

CSS به 3 روش میتواند به اسناد HTML اضافه شود :

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

CSS درون خطی

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

یک CSS درون خطی از صفت style یک عنصر HTML استفاده میکند .

مثال زیر رنگ متن عنصر <h1> را روی آبی تنظیم میکند ، و رنگ متن عنصر <p> را روی قرمز تنظیم میکند :

مثال:

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

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

CSS داخلی

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

یک CSS داخلی در بخش <head> یک صفحه HTML ، در داخل یک عنصر <style> مشخص میشود .

مثال زیر رنگ متن همه عناصر <h1> (در آن صفحه) را روی آبی ، و رنگ متن همه عناصر <p> را روی قرمز تنظیم میکند . افزون بر این ، صفحه با یک رنگ پس زمینه "powderblue" نمایش داده خواهد شد :

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:powderblue;}
h1   {color:blue;}
p    {color:red;}
</style>
</head>
<body>

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

</body>
</html>
امتحان کن »

CSS خارجی

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

برای استفاده از یک سبک نامه خارجی ، یک لینک به آن در بخش <head> هر صفحه HTML اضافه کنید :

مثال:

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

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

</body>
</html>
امتحان کن »

یک سبک نامه خارجی میتواند در هر ویرایشگر متنی نوشته شود . این فایل نباید شامل هرگونه کد HTML باشد ، و باید با یک افزونه .css ذخیره شود.

مثال زیر چگونگی ظاهر فایل "styles.css" را نشان میدهد :

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}
نکته: با یک سبک نامه خارجی ، شما میتوانید ظاهر کل یک وب سایت را با تغییر یک فایل تغییر دهید !

رنگ ها ، فونت ها و اندازه های CSS

در اینجا ، ما برخی از ویژگی های CSS که بطور متداول استفاده میشوند را نشان خواهیم داد . شما بعدا درباره آنها بیشتر خواهید آموخت .

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

ویژگی CSS font-family فونت و نوع قلمی که باید استفاده شود را مشخص میکند .

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

مثال:

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

<!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 یک مرز پیرامون یک عنصر HTML مشخص میکند :

مثال:

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

p {
  border: 1px solid powderblue;
}
امتحان کن »

Padding

ویژگی CSS padding یک فضای خالی بین متن و مرز عنصر مشخص میکند :

مثال:

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

p {

  border: 1px solid powderblue;
  padding: 30px;
}
امتحان کن »

Margin

ویژگی CSS margin یک حاشیه و فضای خالی بیرون از مرز عنصر مشخص میکند .

مثال:

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

p {
  border: 1px solid powderblue;
  margin: 50px;

}

امتحان کن »

لینک شدن به CSS خارجی

سبک نامه های خارجی میتوانند با یک URL کامل یا با یک مسیر نسبت به صفحه وب کنونی ارجاع داده شوند .

مثال:

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

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
امتحان کن »

مثال:

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

<link rel="stylesheet" href="/html/styles.css">
امتحان کن »

مثال:

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

<link rel="stylesheet" href="styles.css">
امتحان کن »
شما میتوانید درباره مسیرهای فایل در فصل مسیرهای فایل HTML بیشتر بخوانید .

چکیده فصل

تگ های سبک HTML

تگ توضیح
<style> اطلاعات سبک برای یک سند HTML را مشخص میکند
<link> یک لینک بین یک سند و یک منبع خارجی مشخص میکند



پسین پیشین


©کلیه محتوا متعلق به سایت وب داناک است-1399