آشنایی با 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 در استایل استفاده کرده ایم :
نکته : صفت id یک عنصر باید در صفحه منحصر به فرد باشد، در این صورت است که استایل مورد نظر روی این عنصر خاص اعمال میشود.
صفت class
به منظور تعریف یک استایل برای نوع خاصی از عناصر، یک صفت class به آن عنصر اضافه کنید:
<p class = "error " >I am different </p >
سپس برای آن عنصر به طریق زیر استایل را تعریف میکنیم :
کد بالا تمام پاراگراف هایی را که کلاسی به نام 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 >