سبک های CSS در HTML

CSS = سبک ها و رنگ ها

دستکاری متون

رنگ ها و کادرها

 
 

CSS = سبک ها و رنگ ها

دستکاری متن
رنگها,  کادرها

سبک دهی HTML با استفاده از CSS

CSS مخفف استایل شیت آبشاری (Cascading Style Sheets) است. CSS مشخص می کند که هر عنصر HTML بر روی صفحه نمایش، کاغذ یا سایر رسانه ها چطور ظاهر شود.

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

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

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

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

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

CSS سرخط

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

در مثال زیر با استفاده از CSS سرخط رنگ متن تگ <h1> آبی شده است.

<h1 style="color:blue;">This is a Blue Heading</h1>

CSS داخلی

در CSS داخلی یا internal CSS سبک ها درخود صفحه HTML تعریف می شوند. CSS داخلی در بخش <head> صفحه HTML و بین عنصر یا تگ <style> تعریف می شود. مثال:

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

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

</body>
</html>

CSS خارجی

CSS خارجی یا external style sheet برای سبک دهی چندین وب پیج استفاده می شود و در حال حاضر روش مرسوم برای سبک دهی کل وبسایت است.

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

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

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

</body>
</html>

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

به عنوان مثال، ظاهر یک فایل styles.css به صورت زیر می تواند باشد:

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

فونت ها در CSS

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

در CSS صفت font-family برای تعیین فونت مورد استفاده در پیج استفاده می شود.

در CSS صفت 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>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

border در CSS

در CSS از صفت border عنصر برای تعیین لبه یا حاشیه آن استفاده می شود. می توان با استفاده از این صفت به عنصر HTML لبه یا حاشیه داد. مثال:

p {
border: 1px solid powderblue;
}

Padding در CSS

با استفاده از صفت Padding می توان در CSS به یک عنصر فضا خالی اضافه کرد. منظور از Padding فضای خالی است که در داخل به یک عنصر داده می شود. فضای خالی که از بیرون به یک عنصر داده می شود، margin گفته می شود. مثلا می توان بین متن و لبه های عنصر فاصله گذاری کرد که با صفت Padding انجام می شود. اما فضای بین دو پاراگراف یا یک پاراگراف و یک عکس با استفاده از margin ایجاد می شود. مثال:

 {
border: 1px solid powderblue;
padding: 30px;
}

در این مثال به عنصر <p> یک خط لبه یک پیکسلی داده می شود و سپس بین متن داخل کادر و لبه های آن 30 پیکسل فضای خالی در نظر گرفته می شود.

Margin در CSS

همانطور که در بالا قید شد Margin فاصله بین دو عنصر است نه فاصله یک محتوای یک عنصر و لبه های آن. می توان در CSS از صفت Margin برای ایجاد فضا و فاصله ای از بیرون مرزهای آن استفاده کرد. مثال:

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

در این مثال ابتدا به عنصر <p> یک خط لبه یک پیکسلی داده می شود و سپس با عناصر اطراف آن 50 پیکسل فاصله ایجاد می شود.

خصیصه id

خصیصه id به معنی شناسه است. می توان به یک عنصر خصیصه شناسه یا id داده تا عنصر براساس شناسه آن قابل شناسایی باشد. سپس با استفاده از شناسه آن را سبک بندی مخصوص آن عنصر کرد. مثلاً:

<p id="p01">I am different</p>

در این خط کد به یک پاراگراف شناسه p01 داده شد. بنابراین هر بار که از این شناسه به هر شکلی استفاده شود، به این پاراگراف خاص اعمال می شود. مثل:

#p01 {
color: blue;
}

توجه: شناسه یا id اختصاص یافته به یک عنصر بایستی منحصر باشد و به هیچ نوعی در سایت از آن استفاده نشود. بطوری که بتوان با استفاده از آن شناسه به آن عنصر رجوع کرد. برای رجوع به یک شناسه از id selector استفاده می شود که هش (#) است.

خصیصه class

برای تعریف اسیتل برای نوع خاصی از عناصر بایستی ابتدا کلاسی به آن نوع عناصر اختصاص داد:

<p class="error">I am different</p>

در کد بالا به عنصر پاراگراف کلاس error اختصاص یافت. حال می توانیم برای این کلاس سبک خاصی تعریف کنیم، مثل:

p.error {
color: red;
}

حال هر گاه بخواهیم پاراگرافی به رنگ قرمز باشد، کافی است کلاس error را به آن اختصاص دهیم.

رفرنس های بیرونی

می توان به استیل شیت های بیرونی با استفاده از 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 بیشتر بحث خواهد شد.

خلاصه مطالب این بخش

  • از خصیصه style در HTML برای سبک دهی سرخط استفاده می شود
  • از عنصر <style> در HTML برای تعریف سبک داخلی استفاده می شود
  • از عنصر <link> در HTML برای اشاره به یک فایل CSS بیرونی استفاده می شود
  • از عنصر <head> در HTML برای نگهداری عناصر <style> و <link> استفاده می شود
  • از صفت color در CSS برای تعیین رنگ متن استفاده می شود
  • از صفت font-family در CSS برای تعیین فونت متن استفاده می شود
  • از صفت font-size در CSS برای برای تعیین سایز متن استفاده می شود
  • از صفت border در CSS برای تعیین لبه های یک عنصر استفاده می شود
  • از صفت padding در CSS برای تعیین فضای داخلی دور یک عنصر استفاده می شود
  • از صفت margin در CSS برای تعیین فضای بین چند عنصر مجاور استفاده می شود

تگ های سبک بندی در HTML

در زبان HTML از تگ های زیر برای تعیین سبک عناصر استفاده می شود:

<style>

تعریف اطلاعات سبک بندی برای یک سند HTML

<link>

تعریف لینک بین سند و یک منبع بیرونی

اگر در اجرای این راهنما به مشکل برخورد کردید و سایر سئوالات و پیشنهادات خود را در بخش سئوالات عمومی انجمن پلکسا مطرح نمایید. گروه توسعه وب پلکسا به سئوالات شما پاسخ خواهند داد.

عضویت در خبرنامه پلکسا

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

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

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