آموزش Cascading style sheet
در این جلسه به آموزش Cascading style sheet در زبان کد نویسی HTML خواهیم پرداخت. لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
آموزش Cascading style sheet در HTML
Cascading style sheet یا CSS بیان می کند که داکیومنت ها روی صفحه و در چاپ چگونه نشان داده می شوند. یا شاید چگونه بیان می شوند. از زمانی که کنسرسیوم در سال ۱۹۹۰ تاسیس شد. W3C به طور فعاالنه ای در استفاده از sheet Style روی وب پیشرفت کرده است.
CSS جایگزین های ساده و موثری را برای تعیین ویژگی های مختلف برچسب های HTML ارائه می دهد. با استفاده از CSS شما می توانید تعدادی از ویژگی های طراحی را برای یک HTML ارائه شده تعیین کنید. هر ویژگی دارای نام مقدار میباشد که به وسیله ی علامت () از هم جدا شده اند. اطلاعیه ی مربوط به هر ویژگی نیز توسط علامت نقطه ویرگول (;) از یکدیگر جدا شده اند.
مثال
ابتدا اجازه بدهید که مثالی از داکیومنت HTML را مورد بررسی قرار دهیم که برای تعیین رنگ و اندازه ی فونت از برچسب <font> استفاده می کند.
<!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 خود استفاده کنید.
Style sheet خارجی – قوانین style sheet را در یک فایل css مجزا تعریف می کند. و سپس آن فایل را با استفاده از برچسب <link> در HTML وارد داکیومنت HTML شما می کند.
Style sheet داخلی – قوانین style sheet را در با استفاده از برچسب <style> در بخش سربرگ داکیومنت HTML تعریف می کند.
Inline style sheet – قوانین sheet style را مستقیما و به همراه عناصر HTML با استفاده از ویژگی style تعریف می کند
اجازه بدهید هر سه مورد را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.
Style sheet خارجی
اگر می خواهید از sheet style خود در صفحات مختلف استفاده کنید، توصیه می شود که یک sheet style متداول در یک فایل مجزا تعریف کنید. یک فایل sheet style cascading دارای ضمیمه هایی مانند css می باشد و با استفاده از برچسب <link <وارد فایل های HTML خواهد شد.
مثال
توجه داشته باشید که ما یک فایل sheet style به نام style.css که دارای قوانین زیر می بشد، تعریف می کنیم.
.red{
color :red;
}
.thick{
font-size:20px;
}
.green{
Color:green;
}
در اینجا سه قانون CSS را تعریف کردیم که برای سه گروه متفاوت تعریف شده در برچسب های HTML مناسب می باشند. پیشنهاد می کنم در مورد چگونگی تعریف این قوانین خود را اذیت نکنید، زیرا هنگام مطالعه ی CSS آنها را فرا خواهید گرفت. اکنون اجازه بدهید از فایل CSS خارجی بالا در داکیومنت HTML زیر استفاده کنیم.
<!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>
این مثال نتیجه ی زیر را تولید خواهد کرد.
This is red
This is thick
This is green
This is thick and green
Style sheet داخلی
گر می خواهید قوانین sheet style را برای یک داکیومنت مجزا به کار ببرید، فقط آن موقع است که می توانید این قوانین را با استفاده از برچسب <style > وارد بخش سربرگ داکیومنت HTML کنید.
قوانین تعریف شده در sheet style داخلی، قوانین تعریف شده در فایل CSS خارجی را نیز در بر می گیرد.
مثال
اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما در اینجا قوانین sheet style را در همان داکیومنت HTML و با استفاده از برچسب <style> می نویسیم.
<!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 از برچسب مربوطه، قوانین sheet style را مستقیما برای هر عنصر HTML به کار برید. این امر فقط زمانی می تواند انجام شود که شما علاقه مند به ایجاد تغییرات خاص در هرکدام از عناصر HTML می باشید. قوانین تعریف شده با عنصر درون خطی، قوانین تعریف شده در یک فایل CSS خارجی و نیز قوانین تعریف شده در یک عنصر <style> را در برمی گیرد. اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم. اما این بار قوانین sheet style را همراه با قوانین HTML و با استفاده از ویژگی style در عناصر خواهیم نوشت
<!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
ممنون که در این جلسه هم با ما همراه بودید. در این جلسه به یادگیری آموزش Cascading style sheet پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت.
پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید.
تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید.
دیدگاه ها