آموزش Style Sheet در HTML

4 سال پیش

امتیاز دهید post

آموزش Style Sheet در HTML

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

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

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

مثال

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

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

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML CSS&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;&lt;font color = "green" size = "5"&gt;Hello, World!&lt;/font&gt;&lt;/p&gt;
   &lt;/body&gt;

&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello, World!

</body>

</html>

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

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML CSS&lt;/title&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p style = "color:green; font-size:24px;" &gt;Hello, World!&lt;/p&gt;
   &lt;/body&gt;

&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello, World!

</body>

</html>

خروجی

Hello, World!

1	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;
}

.red {

color: red;

}

.thick {

font-size:20px;

}

.green {

color:green;

}

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

Live Demo
&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML External CSS&lt;/title&gt;
      &lt;link rel = "stylesheet" type = "text/css" href = "/html/style.css"&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p class = "red"&gt;This is red&lt;/p&gt;
      &lt;p class = "thick"&gt;This is thick&lt;/p&gt;
      &lt;p class = "green"&gt;This is green&lt;/p&gt;
      &lt;p class = "thick green"&gt;This is thick and green&lt;/p&gt;
   &lt;/body&gt;

&lt;/html&gt;

Live Demo

<!DOCTYPE html>

<html>

<head>

<title>HTML External CSS</title>

</head>

<body>

This is red

This is thick

This is green

This is thick and green

</body>

</html>

خروجی

Internal Style Sheet

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

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

مثال

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

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

<!DOCTYPE html>

<html>

<head>

<title>HTML Internal CSS</title>

.red {

color: red;

}

.thick{

font-size:20px;

}

.green {

color:green;

}

</style>

</head>

<body>

This is red

This is thick

This is green

This is thick and green

</body>

</html>

خروجی

This is red

This is thick

This is green

This is thick and green

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 می نویسیم.

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

<!DOCTYPE html>

<html>

<head>

<title>HTML Inline CSS</title>

</head>

<body>

This is red

This is thick

This is green

This is thick and green

</body>

</html>

خروجی

This is red

This is thick

This is green

This is thick and green

This is red

This is thick

This is green

This is thick and green

منبع.

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

امتیاز دهید post

نویسنده مطلب saber

آموزش Style Sheet در HTML

آموزش Style Sheet در HTML

مثال

External Style Sheet

مثال

Internal Style Sheet

مثال

Inline Style Sheet

مثال

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

دیدگاه شما

بدون دیدگاه

آموزش Style Sheet در HTML

مثال

External Style Sheet

مثال

Internal Style Sheet

مثال

Inline Style Sheet

مثال

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه