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

استفاده از CSS در HTML

CSS مخفف Cascading Style Sheets است.استایل یا css برای زیباسازی صفحات وب و html بکار می رود.

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

CSS چیست؟

Cascading Style Sheets (CSS) برای قالب بندی صفحه وب استفاده می شود.

با استفاده از CSS می توانید رنگ ، فونت ، اندازه متن ، فاصله بین عناصر ، نحوه قرارگیری و چیدمان عناصر ، تصاویر پس زمینه یا رنگ پس زمینه و…را کنترل و تغییر داد.

استایل یا css دارای دستوراتی است که هر دستور کار خاصی را انجام می دهد.

استفاده از CSS

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

در خط (Inline) – با استفاده از ویژگی style در داخل عناصر HTML
داخلی (Internal) – با استفاده از عنصر <style> در بخش <head>
خارجی (External) – با استفاده از عنصر <link> برای پیوند به یک فایل CSS خارجی

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

1.CSS درون خطی-Inline

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

یک CSS درون خطی از ویژگی عنصر Style در HTML استفاده می کند.در روش inline ما در همان تگ html کد css را می نویسیم.

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

<h1 style="color:blue;">یک عنوان آبی</h1>
<p style="color:red;">یک پاراگراف قرمز.</p>

1 2	<h1 style="color:blue;">یک عنوان آبی</h1> <p style="color:red;">یک پاراگراف قرمز.</p>

نتیجه:

یک عنوان آبی

یک پاراگراف قرمز.

2.CSS داخلی-Internal

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

همانطور که از اسم این روش مشخص میباشد ما دستورات 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>

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>این یک عنوان است</h1>

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

</body>

</html>

نتیجه:

3.CSS خارجی-External

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

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

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

1.در این روش در گام اول ما یک فایل CSS از طریق notepad ویندوز ایجاد کرده و سپس دستورات CSS زیر را در این نرم افزار وارد نمایید :

“styles.css”:

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

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

2.در گام دوم فایل را میبایست ذخیره کنیم.از منوی نرم افزار بروی گزینه File کلیک نمایید سپس بروی گزینه Save as کلیک نمایید.

فایل نباید حاوی کد HTML باشد و باید با پسوند .css ذخیره شود.

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

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

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

<head>

</head>

در دستور بالا style.css همان آدرس فایل سی اس اس بهمراه پسوند میباشد.

مثال:

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

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

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>این یک عنوان است</h1>

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

</body>

</html>

نتیجه:

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

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

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

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

ویژگی CSS-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>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

<!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>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

نتیجه:

استفاده از Border در CSS (حاشیه در CSS)

Border ها دستورات مختص به خود ر در CSS دارا هستند. وظیفه Border در CSS، به وجود آوردن حاشیه و مرز برای عناصر HTML است.

این خواص در CSS به شما اجازه می دهد تا رنگ و سبک یا Style لبه های یک عنصر را مشخص کنید.

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

نمونه:

p{border: 2px solid powderblue;}

1	p{border: 2px solid powderblue;}

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
p {border: 2px solid powderblue;}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p {border: 2px solid powderblue;}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

استفاده از ویژگی Padding در CSS(فاصله گذاری داخلی)

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

بعنوان مثال اگر بخواهیم مطالب درونی یک عنصر به میزان 30 پیکسل از کناره های آن فاصله داشته باشد کافیست برای استایل مربوط به آن عنصر یک مقدار padding در نظر بگیریم:

p {
  border: 2px solid powderblue;
  padding: 30px;
}

p {

border: 2px solid powderblue;

padding: 30px;

}

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p {

border: 2px solid powderblue;

padding: 30px;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

نتیجه:

استفاده از ویژگی margin در CSS(فاصله گذاری خارجی)

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

p {
  border: 2px solid powderblue;
  margin: 50px;
}

p {

border: 2px solid powderblue;

margin: 50px;

}

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p {

border: 2px solid powderblue;

margin: 50px;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

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

1.از ویژگی سبک HTML برای یک ظاهر طراحی داخلی استفاده کنید
2.برای تعریف CSS داخلی از عنصر <style> در HTML استفاده کنید
3.برای ارجاع به یک فایل CSS خارجی از عنصر <link> استفاده کنید
4.از عنصر <head> برای ذخیره عناصر <style> و <link> استفاده کنید
5.از ویژگی رنگ CSS برای رنگ متن استفاده کنید
6.از ویژگی CSS font-family برای فونت های متنی استفاده کنید
7.برای اندازه متن از ویژگی CSS-font-size استفاده کنید
8.از ویژگی CSS border برای مرزها استفاده کنید
9.از ویژگی CSS padding برای فضای داخل مرز استفاده کنید
10.از ویژگی CSS marginبرای فضای خارج از مرز استفاده کنید

استفاده از CSS در HTML

CSS چیست؟

استفاده از CSS

1.CSS درون خطی-Inline

یک عنوان آبی

2.CSS داخلی-Internal

3.CSS خارجی-External

“styles.css”:

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

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

استفاده از Border در CSS (حاشیه در CSS)

استفاده از ویژگی Padding در CSS(فاصله گذاری داخلی)

استفاده از ویژگی margin در CSS(فاصله گذاری خارجی)

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

مطالب مرتبط

رمزگذاری در HTML-آموزش Charset در HTML به زبان ساده

آموزش کار با نمادها (Symbols) در HTML

آموزش موجودیت ها یا Entities در Html بصورت جامع

عناصر معنایی یا Semantic Elements در HTML