شما اینجا هستید

CSS مخفف کلمات Cascading Style Sheets است.

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

  • درون خطی : با بهره گیری از ویژگی style عنصر HTML میتوان برایش CSS تعریف کرد.
  • داخلی : برای تعریف CSS داخلی باید از عنصر <style> در درون قسمت <head> سند HTML استفاده کرد.
  • خارجی : میتوان چندین فایل خارجی CSS را برای یک یا چند سند HTML بکار گرفت.

پر کاربرد ترین روشی که برای افزودن سبک به فایلهای HTML مورد استفاده قرار میگیرد نگهداشتن استایلها در فایلهای CSS جداگانه است.

اما در این آموزش ما از سبک دهی داخلی استفاده میکنیم.

چونکه با این روش نشان دادن خروجی هم برای ما و هم برای شما راحت تر هست و میتوانیم سریعتر پیش بریم تا مطالب بیشتری یاد بگیریم.

میتونید در قسمت آموزش CSS مطالب بیشتری را در مورد CSS فرا بگیرید.

نحوه نوشتن CSS

نحوه نوشتن کدهای CSS را در خط زیر ببینید:

element { property:value; property:value }

elemernt نام یک عنصر HTML است. Property یک ویژگی CSS است. Value هم یک مقدار CSS است. اگر از چندین استایل بخواهیم استفاده کنیم  باید آنها را با ویرگول نقطه (;) از هم جدا کنیم.

سبک دهی درون خطی (inline CSS)

سبک دهی درون خطی برای اعمال کردن یک استایل واحد به یک عنصر HTML بکار میرود.

این سبک دهی خطی رنگ متن عنوانی را که استایل رنگ در آن اعمال شده را تغییر میدهد:

<html>

<body>


<h1 style="color:blue">This is a Blue Heading</h1>

<h1>This is a Blue Heading</h1>

</body>
</html>

 

سبک دهی داخلی (internal CSS)

 

سی اس اس داخلی برای تعریف یک سبک همگانی برای همه عناصر HTML در یک صفحه بکار گرفته میشود.

استایلینگ داخلی در قسمت <head> یک صفحه HTML با بهره گیری از عنصر <style> تعریف میگردد.

<html>

<head>

<style>

body {background-color:lightgrey}

h1   {color:blue}

p    {color:green}

</style>

</head>

<body>


<h1>This is a heading</h1>

<p>This is a paragraph.</p>


</body>

</html>

 

سبک دهی خارجی (External CSS)

 

هنگامی که چندین صفحه داریم و میخواهیم که یک استایل به همه آنها اعمال شود، CSS خارجی برای اینکار ایده آل است.

با CSS خارجی، میتوانیم ظاهر صفحات وب سایت را با تغییر دادن یک فایل تغییر دهیم. استایلهای خارجی در یک فایل CSS خارجی تعریف میشوند و سپس در قسمت <head> یک صفحه HTML به آن صفحه پیوند داده میشود.

<html>

<head>

  <link rel="stylesheet" href="styles.css">

</head>

<body>


<h1>This is a heading</h1>

<p>This is a paragraph.</p>


</body>

</html>

 

خصوصیت id

 

برای تعریف یک استایل مخصوص برای یک عنصر به خصوص، نخست یک خصوصیت id به عنصر اضافه میکنیم.

<p id="p01">I am different</p>

سپس یک سبک متفاوت برای آن عنصر تعریف میکنیم

<html>

<head>

<style>

p#p01 {

    color: blue;

}

</style>

</head>

<body>


<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p id="p01">I am different.</p>


</body>

</html>

 

خصوصیت class

 

با افزودن خصوصیت class به یک عنصر، برای عناصری که میخواهیم استایل تعریف میکنیم.

<p class="error">I am different</p>

حالا میتونید برای همه عناصر با کلاس مشخص شده استایل تعریف کنید.

<html>

<head>

<style>

p.error {

    color:red;

}

</style>

</head>

<body>


<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p class="error">I am different.</p>

<p>This is a paragraph.</p>

<p class="error">I am different too.</p>


</body>

</html>

 

برای استایل دادن به یک عنصر از id استفاده میکنیم. برای استایل دادن به گروهی ار عناصر از class استفاده میکنیم.

 

پرهیز کردن از سبک دهی به صفحات با استفاده از تگها و خصوصیتهای HTML

در نسخه های پیشین HTML، تگها و خصوصیتهای متعددی برای سبک دهی به صفحات وب استفاده میشد. این تگها و خصوصیتها، دیگر توسط HTML5 پشتیبانی نمیشوند!

از استفاده کردن از عناصر <font>, <center> و <strike> دوری کنید. همچنین دیگر از خصوصیتهای color و bgcolor استفاده نکنید.

دیدگاه‌ها

صفحه‌ها

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.