تبادل لینک هوشمند
اما در این آموزش ما از سبک دهی داخلی استفاده میکنیم.
چونکه با این روش نشان دادن خروجی هم برای ما و هم برای شما راحت تر هست و میتوانیم سریعتر پیش بریم تا مطالب بیشتری یاد بگیریم.
میتونید در قسمت آموزش 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 استفاده نکنید.
نظرات شما عزیزان:
موضوعات مرتبط: آموزش طراحی وبسایت ، ،
برچسب‌ها: