جهت مشاهده نتایج و تست کدها از ادیتور آنلاین استفاده کنید (کلیک کنید).

چیست؟CSS

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

استفاده از CSS به سه روش ممکن است: 1-میتوان تنظیمات ظاهری عناصر را داخل کدهای html نوشت. 2-میتوان از یکسری تنظیمات در چارچوب CSS و در ابتدای فایل html استفاده کرد. 3-میتوان یک فایل CSS ایجاد کرده و در فایل html آن فایل CSS را فراخوانی کرد.

HTMLتعیین مشخصات ظاهری داخل کدهای

در این روش از تگهای html همانطور که در بخشهای  html formating ,html elements و html colors توضیح داده شد استفاده میکنیم.

مثال:

<h1 style=”color:Tomato;”>Hello World</h1> <p style=”color:DodgerBlue;”>Hello World…</p>

HTMLداخل فایلCSSااتسفاده از

چارچوب موردنظر را باید داخل تگهای تو در توی <head> و <style> و در ابتدای فایل html تعریف کرد.

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

مثال:

<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 ساخته میشود و در آن یکسری تنظیمات لحاظ میشود که این تنظیمات روی تمام صفحات html اعمال میشود.

یک نمونه فایل html که تنظیماتی را از فایل خارجی styles.css میخواند.

<DOCTYPE html!> <html> <head> <link rel=”stylesheet” href=”styles.css”s> <head/> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <body/> <html/>

مثالی از فایل styles.css

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

مثالهایی برای تنظیمات مربوط به اندازه فونت، نام فونت، رنگ فونت، تنظیم حاشیه و تنظیمات border

} p ;color: red ;font-family: courier ; font-size: 160%

 border: 2px solid powderblue  ; margin: 50px

{

Scroll to Top