آشنایی با css و استایل دهی به html

با نام و یاد خدای مهربون. سلام خدمت تمام کاربران عزیز
در جلسات قبل کمی با html آشنا شدیم .در این جلسه می خواهیم به آشنایی با CSS و نحوه استایل دهی به html بپردازیم و از این به بعد آموزش html  و css را باهم پیش ببریم.

در آموزش زیر به سوالات زیر پاسخ می دهیم:

  • چطوری به کدهای html استایل بدهیم؟
  • CSS چیست؟
  • چطوری فایل CSS را به سند HTML پیوند بدهیم؟
  • با چه الگویی در CSS کد بزنیم؟
  • رنگ در HTML چطوری مقداردهی می شود؟

با ما همراه باشین  ;-) 

Css چیست؟

مخفف Cascading Style Sheets به معنای برگه های سبک آبشار، یک زبان استایل نویسی است ، که وظیفه اش استایل دادن به کدهای html می باشد. پس css مشخص می کند عناصر html  با چه ظاهری روی سایت نمایش داده شوند.

این دو زبان در کنار هم مفهوم دارند و بهم معنا می دهند. به عنوان مثال: اگر فرض کنید html  نقش اسکلت یک ساختمان را داشته باشد css نقش نمای ساختمان را بازی می کند.یعنی زیباسازی صفحات وب توسط زبان استایل دهی css انجام می شود.

سه روش برای استایل دهی به html وجود دارد:

  1. روش inline : برای تگ body و تمام تگ های داخلی آن از صفت style استفاده کنیم و به صورت انحصاری برای هر تگ یک استایل تعریف کنیم.
  2. روش external : یک فایل جداگانه css در پوشه project یا root ایجاد کنیم و با استفاده از تگ link آن را در فایل html خودمان فراخوانی کنیم.
  3. روش internal : در تگ <head> یک تگ به نام <style></style> ایجاد کنیم و تمام کدهای css را داخل تگ style بنویسیم(بدون استفاده از فایل جداگانه css)

بهترین روش و استاندارترین روش استفاده از روش دوم است یعنی external و ما در طی این آموزش از همین روش استفاده می کنیم ( برای اینکه گیج نشین، روش های دیگه رو توضیح نمیدیم فقط در آخر آموزش تفاوت دو روش دیگه رو با یک شکل نشون میدیم که نگین نگفتین ;-) .

استایل دهی به html به روش external

گام اول) ایجاد فایل CSS 

در پوشه  project که جلسه اول ایجاد کردیم و فایل index.html را در آن قرار دادیم ، یک فایل دیگری ایجاد می کنیم با نام style.css .

توجه داشته باشید: به این پوشه project که تمام فایل های اصلی سایت مانند html، css،  جاوااسکریپت و … در آن قرار می گیرد root سایت می گویند.

گام دوم) نوشتن کد در سند html 

تگ link را به تگ head اضافه می کنیم:

<!DOCTYPE html>
<html>
    <head>
      <title>
          اینجا عنوان سایت است
      </title>
   </head>
   <body>
        <p> نوشتن هر متنی که دلتون میخواد</p>
  </body>
</html>

گام سوم) برقراری پیوند بین فایل CSS و HTML 

فایل css را از طریق تگ <link>  در فایل html  فراخوانی می کنیم.

در سند html، تگ <link> رو کجا بنویسیم؟ در داخل تگ <head></head>

از الگوی زیر برای لینک دادن فایل css به سند html استفاده می کنیم:

<link   href=”مسیر فایل سی اس اس“   rel=”stylesheet”   type=”text/css”>

 

همانطور که می بینید تگ link از جمله تگ هایی است که تگ بسته ندارد. در تگ link یک سری چیزایی نوشتیم که به آنها صفت یا attribute  می گویند.

نکته: صفت چیست؟

Attribute یا صفت در html اطلاعات کاملتری از یک المان را ارائه می دهد. تمام المان های HTML می‌توانندیک یا چند خصوصیت داشته باشند. صفت های html همیشه در تگ باز المان مشخص می شود و به صورت جفت نام/مقدار مشخص می شوند.(“attribute=”value)

تگ <link> سه تا صفت دارد که به صورت زیر می باشد:

  • href :

این صفت مسیر فایل css را مشخص می کند. اگر مستقیما فایل css را داخل روت سایت کنار فایل html ایجاد کردیم، کافی است نام فایل css را به همراه پسوندش بنویسیم به این شکل: “href=”style.css  . ولی اگر فایل css را داخل پوشه ای مثلا css قرار دادیم باید به این شکل بنویسیم:”href=”css/style.css .

  • rel :

مخفف relation می باشد که ارتباط بین صفحه مبدا با صفحه مقصد رو مشخص می کند. مقدارش را stylesheet دادیم یعنی ارتباط بین مرورگر با فایلی ما، از نوع برگه استایل هست . دقت کنید درست بنویسید در غیر این صورت ارتباط با css براقرار نمی شود.

  • type :

صفت بعدی type می باشد که مشخص می کند فایل css از نوع text بوده است که تبدیل به css شده است  (اگر ننوشتین هم مهم نیست)

خب با توجه به توصیفات بالا تگ link را به سند html -بین تگ <head></head> اضافه می کنیم:

<!DOCTYPE html>
<html>
    <head>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
      <title>
          اینجا عنوان سایت است
      </title>
   </head>
   <body>
        <p> نوشتن هر متنی که دلتون میخواد</p>
  </body>
</html>

الان می تونیم بگیم پیوند html  و css مبارک   :lol:  . فایل html  را ذخیره می کنیم و می بندیم . حالا  میرویم سراغ کدهای CSS، تا یه کم تو CSS کد بزنیم.

گام چهارم) نوشتن کد در CSS 

نحوه استایل دهی در CSS

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

selector { property:value;    property:value;   …   }

هر قانون استایل در CSS شامل یک selector  و یک بلاکی از یک یا چند تعریف (ویژگی و مقدار) می باشد. هر تعریف با “نقطه سمیکالن ” از هم جدا می شوند.

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

  • صدا زدن المان بر حسب نام
  • صدا زدن المان برحسب class(که با نقطه نشان می دهیم)
  • صدا زدن المان بر حسب id (که با # نشان می دهیم)

(هر سه روش استفاده می شود که فعلا در این جلسه ما از روش اول استفاده می کنیم، یعنی با فراخوانی نام المان به آن استایل می دهیم. در جلسات بعد با class  و id آشنا خواهیم شد.)

خب بعد از آشنایی با css ، فایل style.css که در گام اول ایجاد کرده بودیم را با Notepad باز می کنیم و اولین خط کدهای css رو اینجا وارد می کنیم:

body{
  background:red;
}
p{
  color:blue;
}

توضیح کد CSS:

همانطور که در کد ها می بینید از selector 1 استفاده شده است.  یعنی نام المان رو صدا زدیم و در داخل {} به آن استایل دادیم. در طول آموزش کم کم با کدهای css هم آشنا میشیم !نگران نباشید.

  • ویژگی color:  رنگ متن را مشخص می کند.
  • background-color  یا background: هر دو رنگ پس زمینه را مشخص می کنند.

نکته: نقطه سمیکالن آخر هر تعریف مهم است.فراموش نشه!

 

نتیجه اجرای کدها 

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

آشنایی با css | استایل دهی به html - ایجاد فایل css

مقدار رنگ ها در html & css:

حالا که بحث رنگ است این نکته هم بگوییم که به سه شکل می توانیم مقدار رنگ را به المان مورد نظر اعمال کنیم:

  1. نام رنگ را بنویسیم (مثلا : red)
  2. استفاده از کد هگزا دسیمال با الگوی RRGGBB# که از ترکیب سه رنگ آبی-سبز-قرمز رنگ تولید می شود (هرکدام از 00 شروع میشه تا ff و هر چی مقدار به ff نزدیکتر می شود غلظت رنگ بیشتر می شود، مثلا رنگ 0000ff# قرمز هست)
  3. به شکل ” (rgb(0,0,0 مقدار دهیم که ارقام داخل پرانتز به ترتیب از چپ به راست رنگ قرمز، سبز و آبی را مشخص می کند.رنج اعدادی که به هر کدام می دهیم 0 تا 255 می باشد.

توجه داشته باشید روش دوم بیشتر استفاده می شود.

تفاوت دو روش inline و internal برای استایل دهی

اون بالا اشاره کردیم که سه روش برای استایل دهی به سند html وجود دارد (internal و inline و external)، که گفتیم روش external از همه بیشتر استفاده می شود. چرا؟

جواب : چون در روش inline استایل دهی به صورت انحصاری برای یک تگ خاصی انجام می شود. در روش internal هم، استایل دهی به صورت انحصاری روی یک سند html اعمال می شود ولی اگر فایل css را به صورت external و خارجی تعریف کنیم، می توانیم این استایل را به هر تعداد سند html که می خواهیم اعمال کنیم.

به شکل زیر توجه کنید که نحوه نوشتن کد به صورت inline   و internal را نمایش می دهد:

  • در روش inline داخل هر المان از صفت style استفاده می کنیم.

<تگ  style=”property:value“;“property:value“;  …  ></تگ>

  • در روش internal از تگ <style></style> داخل تگ head استفاده می کنیم.

<style>
selector { property:value;    property:value;   …   }
selector { property:value;    property:value;   …   }
.
.
.
</style>

آشنایی با css

به صورت خلاصه با تگ ها و property های زیر آشنا شدیم:

تگ
<link>  برای لینک دادن به css با سه صفت(rel،href،type)
<style></style> برای استایل دهی (به روش internal)
property در css
color دادن رنگ به متن
background دادن رنگ به پس زمینه

در جلسه بعد با صفات تگ html و تگ meta آشنا خواهیم شد.

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 29 امتیاز: 4.2]