آشنایی با CSS در HTML

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


آشنایی با CSS

CSS مخفف کلمات Cascading Style Sheets به معنای الگوهای آبشاری میباشد. 

CSS مشخص میکند که عناصر HTML چطور در صفحه نمایش ، روی کاغذ یا در دیگر رسانه ها نمایش یابند.

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

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

  • Inline – با استفاده از صفت استایل در عناصر HTML
  • Internal – با استفاد از عنصر <style> در قسمت <head>
  • External – با استفاده از فایل های خارجی CSS

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

نکته : آموزش زبان  CSS در  آینده به طور کامل در دوره ی آموزشی مربوط به آن قرار خواهد گرفت. 


روش Inline در CSS 

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

CSS در روش Inline با استفاده از صفت Style روی یک عنصر HTML اعمال میشود.

مثال زیر رنگ متن را برای عنصر <h1> به آبی تغییر میدهد.

<h1 style="color:blue;">This is a Blue Heading</h1>
خودتان امتحان کنید

روش Internal در CSS

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

CSS در روش Internal در قسمت <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>
خودتان امتحان کنید

روش External در CSS

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

داخل صفحه ی استایل خارجی میتوانید ظاهر تمام صفحات وب خود را با تغییر آن فایل عوض کنید.

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

سپس لینک این فایل را  در قسمت <head> صفحه ی HTML  قرار میدهید.

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

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

</body>
</html>

یک صفحه ی استایل خارجی میتواند توسط هر ویرایشگر متنی نوشته شود. این فایل نباید حاوی هیچ کد HTML ایی باشد و باید با پسوند css. ذخیره شود.

صفحه ی استایل خارجی که در نمونه مثال بالا استفاده شده است به شکل زیر است :

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

فونت ها در CSS

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

خاصیت 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>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Border (حاشیه) در CSS

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

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

Padding در CSS

خاصیت padding  فضای بین متن و حاشیه دور (border) یک عنصردر HTML را مشخص میکند.

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

Margin در CSS

خاصیت margin فضای بین حاشیه ی دور یک عنصر با دیگر عناصر HTML در آن صفحه را مشخص میکند.

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

در تصویر زیر سه خاصیت margin ، padding و border را در عنصر زیر میتوانید مشاهده کنید :


صفت id

برای تعریف یک استایل خاص برای یک عنصر مشخص، خاصیت id را به آن عنصر اضافه میکنیم.

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

سپس به طریق زیر استایلی برای آن عنصر(با همان id خاص) تعریف میکنیم. دقت کنید که از علامت # برای مشخص کردن انتخاب کننده ی Id در استایل استفاده کرده ایم :

#p01 {
    color: blue;
}
خودتان امتحان کنید

نکته : صفت id یک عنصر باید در صفحه منحصر به فرد باشد، در این صورت است که استایل مورد نظر روی این عنصر خاص اعمال میشود.

 


صفت class

به منظور تعریف یک استایل برای نوع خاصی از عناصر، یک صفت class به آن عنصر اضافه کنید:

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

سپس برای آن عنصر به طریق زیر استایل را تعریف میکنیم :

p.error {
    color: red;
}
خودتان امتحان کنید

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


ارجاعات خارجی

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

مثال زیر نحوی استفاده از یک آدرس کامل را نشان میدهد.

<link rel="stylesheet" href="http://www.learnsource.net/html/styles.css">

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

<link rel="stylesheet" href="/html/styles.css">

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

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

نکته : در فصول آینده به طور کامل به مسیر های فایل در HTML  خواهیم پرداخت.

منتشر شده در ۳ خرداد ۱۳۹۶ حمید رضا ملکی ۸۶۵ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده