آموزش طراحی سایت-آموزش CSS
سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل سر برگ در HTML را یاد گرفتیم , در حال با ادامه آموزش طراحی سایت همراه باشید:
آموزش Cascading style sheet
استایل شیت Cascading style sheet (CSS) بیان می کند که داکیومنت ها روی صفحه و در چاپ چگونه نشان داده می شوند، یا شاید چگونه بیان می شوند. از زمانی که کنسرسیوم در سال 1994 تاسیس شد، W3C به طور فعالانه ای در استفاده از Style sheet روی وب پیشرفت کرده است.
CSS جایگزین های ساده و موثری را برای تعیین ویژگی های مختلف برچسب های HTML ارائه می دهد. با استفاده از CSS شما می توانید تعدادی از ویژگی های طراحی را برای یک HTML ارائه شده تعیین کنید. هر ویژگی دارای نام مقدار میباشد که به وسیله ی علامت (:) از هم جدا شده اند. اطلاعیه ی مربوط به هر ویژگی نیز توسط علامت نقطه ویرگول (;) از یکدیگر جدا شده اند.
مثال:
ابتدا اجازه بدهید که مثالی از داکیومنت HTML را مورد بررسی قرار دهیم که برای تعیین رنگ و اندازه ی فونت از برچسب < font> استفاده می کند.
<p><font color="green" size="5">Hello, World!</font></p>
می توانیم با استفاده از style sheet مثال بالا را مانند زیر بازنویسی کنیم.
<p style="color:green;font-size:24px;">Hello, World!</p>
شما می توانید به سه روش از CSS در داکیومنت HTML خود استفاده کنید.
استایل Style sheet خارجی – قوانین style sheet را در یک فایل css مجزا تعریف می کند، و سپس آن فایل را با استفاده از برچسب در HTML وارد داکیومنت HTML شما می کند.
استایل Style sheet داخلی – قوانین style sheet را در با استفاده از برچسب< style>در بخش سربرگ داکیومنت HTML تعریف می کند.
استایل Inline style sheet – قوانین style sheet را مستقیما و به همراه عناصر HTML با استفاده از ویژگی style تعریف می کند.
اجازه بدهید هر سه مورد را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.
Style sheet خارجی
اگر می خواهید از style sheet خود در صفحات مختلف استفاده کنید، توصیه می شود که یک style sheet متداول در یک فایل مجزا تعریف کنید. یک فایل cascading style sheet دارای ضمیمه هایی مانند css می باشد و با استفاده از برچسب < link> وارد فایل های HTML خواهد شد.
توجه داشته باشید که ما یک فایل style sheet به نام 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 داخلی
اگر می خواهید قوانین style sheet را برای یک داکیومنت مجزا به کار ببرید، فقط آن موقع است که می توانید این قوانین را با استفاده از برچسب< style>وارد بخش سربرگ داکیومنت HTML کنید.
قوانین تعریف شده در style sheet داخلی، قوانین تعریف شده در فایل CSS خارجی را نیز در بر می گیرد.
مثال:
اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما در اینجا قوانین style sheet را در همان داکیومنت HTML و با استفاده از برچسب< style>می نویسیم.
<style type="text/css">
.red {
color: red;
}
.thick {
font-size: 20px;
}
.green {
color: green;
}
</style>
شما می توانید با استفاده از ویژگی style از برچسب مربوطه، قوانین style sheet را مستقیما برای هر عنصر HTML به کار برید. این امر فقطزمانی می تواند انجام شود که شما علاقمند به ایجاد تغییرات خاص در هرکدام از عناصر HTML می باشید.
قوانین تعریف شده با عنصر درون خطی، قوانین تعریف شده در یک فایل CSS خارجی و نیز قوانین تعریف شده در یک عنصر< style>را در برمی گیرد. اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما این بار قوانین style sheet را همراه با قوانین HTML و با استفاده از ویژگی style در عناصر خواهیم نوشت.
<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 </p>
