آموزش Style Sheet در HTML 

erfan molaei
3 سال پیش
آموزش Style Sheet در HTML 

آموزش Style Sheet در HTML 

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Style Sheet در HTML خواهیم پرداخت.

(Cascading Style Sheets (CSS نحوه ارائه اسناد در صفحه نمایش ، به صورت چاپ شده یا شاید نحوه تلفظ آنها را توصیف می کند. W3C از زمان تأسیس کنسرسیوم در سال ۱۹۹۴ به طور فعال استفاده از ورق های سبک را در وب گسترش داده است.

(Cascading Style Sheets (CSS) گزینه های آسان و موثری را برای تعیین ویژگیهای مختلف برای برچسبهای HTML ارائه می دهد. با استفاده از CSS می توانید تعدادی از ویژگی های استایل را برای یک عنصر HTML مشخص تعیین کنید. هر خصیصه دارای یک نام و یک مقدار است، که توسط یک دو نقطه از هم جدا می شود (:). هر اعلان خصیصه توسط یک نقطه ویرگول (؛) جدا می شود.

مثال

ابتدا بیایید مثالی از سند HTML را در نظر بگیریم که از تگ <font> و ویژگی های مرتبط برای تعیین رنگ متن و اندازه قلم استفاده می کند –

توجه – تگ <font> منسوخ شده و قرار است در نسخه بعدی HTML حذف شود. بنابراین نباید از آنها استفاده شود، پیشنهاد می شود از استایل های CSS برای دستکاری فونت های خود استفاده کنید.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
    
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

 

ما می توانیم مثال فوق را با کمک Style Sheet به صورت زیر دوباره بنویسیم –

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

 

خروجی

Hello, World!

 

شما می توانید از CSS به سه روش در سند HTML خود استفاده کنید –

Sheet Style External – قوانین استایل شیت را در یک فایل جداگانه css. تعریف کنید و سپس آن را با استفاده از تگ <HTML <link در سند HTML خود قرار دهید.

Internal Style Sheet– با استفاده از تگ <style> قوانین استایل شیت را در بخش هدر سند HTML تعریف کنید.

Inline Style Sheet – تعریف قوانین استایل شیت مستقیماً همراه با عناصر HTML با استفاده از ویژگی استایل.

بیایید با کمک مثالهای مناسب هر سه مورد را یکی یکی ببینیم.

External Style Sheet

اگر می خواهید از Style Sheet خود در صفحات مختلف استفاده کنید، همیشه توصیه می شود که یکStyle Sheet مشترک در یک فایل جداگانه تعریف کنید. یک cascading style sheet دارای پسوند css. خواهد بود و با استفاده از تگ <link> در فایل های HTML گنجانده خواهد شد.

مثال

در نظر بگیرید ما یک فایل استایل شیت style.css تعریف می کنیم که دارای قوانین زیر است –

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

 

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

Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

 

خروجی

 

Internal Style Sheet

اگر می خواهید قوانین Style Sheet  را فقط روی یک سند اعمال کنید، می توانید این قوانین را با استفاده از تگ <style> در بخش سرآیند سند HTML قرار دهید.

قوانین تعریف شده در استایل داخلی، قوانین تعریف شده در یک پرونده CSS خارجی را نادیده می گیرد.

مثال

بیایید یک مثال دیگر را دوباره بنویسیم، اما در اینجا ما با استفاده از تگ <style> قوانین Style Sheet را در همان سند HTML می نویسیم –

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
    
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
    
</html>

 

خروجی

This is red

This is thick

This is green

This is thick and green

 

Inline Style Sheet

با استفاده از ویژگی style از تگ مربوطه می توانید قوانین Style Sheet را مستقیماً روی هر عنصر HTML اعمال کنید. این کار باید فقط درصورتی انجام شود که شما علاقه دارید فقط در هر عنصر HTML تغییر خاصی ایجاد کنید.

 

مثال

بیایید یک مثال دیگر را دوباره بنویسیم، اما در اینجا ما با استفاده از ویژگی style از آن عناصر ، قوانین Style Sheet را به همراه عناصر HTML می نویسیم.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

 

خروجی

This is red

This is thick

This is green

This is thick and green

 

منبع.

لیست جلسات قبل آموزش HTML

    1. معرفی HTML
    2. نگاهی کلی به HTML
    3. آموزش تگ های پایه در HTML
    4. آموزش عناصر در HTML
    5. مفهوم ویژگی ها در HTML
    6. آموزش قالب بندی در HTML
    7. آموزش تگ های عبارت در HTML
    8. آموزش متا تگ ها در HTML 
    9. آموزش کامنت ها در HTML
    10. تصاویر در HTML
    11. آموزش جداول در HTML
    12. آموزش لیست ها در HTML
    13. آموزش لینک های عکس در HTML
    14. آموزش لینک های ایمیل در HTML
    15.  آموزش فریم ها در HTML
    16. آموزش Iframes در HTML
    17. آموزش بلوک در HTML
    18. آموزش پس زمینه در HTML
    19. آموزش رنگ ها در HTML
    20. آموزش فونت ها در HTML
    21. آموزش فرم ها در HTML
    22. آموزش چندرسانه ای در HTML 
    23. مفهوم Marquee در HTML 
    24. آموزش تگ Header در HTML
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه