گروه مقاله : HTML 4
تاريخ انتشار : 1394/02/19 - 10:54
كد :405

سی اس اس

CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.

به چگونگی نمایش متن ها نگاه کنید :

 

This is a heading

This is a paragraph

 

تعیین شکل نمایش عناصر HTML با CSS
 
CSS همراه با HTML4 معرفی شد تا یک روش بهتری برای Style دهی عناصر HTML ایجاد کند.
برای اعمال CSS بر روی تگهای HTML سه روش وجود دارد:
برگه های استایل خارجی یا External style sheet
برگه های استایل داخلی یا Internal style sheet
استایل درون تگی یا Inline style
روش پیشنهادی، گزینه اول یعنی برگه های استایل خارجی است.
 
فرم نوشتاری CSS
 
element { property:value; property:value }
 
استایل درون تگی - Inline Styles 
 
قرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.
طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم.
 مثال زیر رنگ متن heading را تغییر می دهد.
 
<h1 style="color:blue">This is a Blue Heading</h1>

This is a Blue Heading

 
 
مثال: تنظیم رنگ پس زمینه عناصر HTML
 
خصوصیت background-color رنگ پس زمینه یک عنصر HTML را تنظیم می کند:
 
<!DOCTYPE html>
<html>
 
<body>
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
 
</html>
 
خصوصیت background-color از خصوصیت قدیمی و منسوخ شده bgcolor ساخته شده است.

This is a heading

This is a paragraph.

 
 
 
مثال: تنظیم رنگ و اندازه و فونت عناصر HTML
 
خصوصیات font-family , color , font-size به ترتیب اندازه، رنگ و فونت متن را تنظیم می کنند:
 
<!DOCTYPE html>
<html>
 
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
 
</html>

A heading

A paragraph

خصوصیات font-family , color , font-size از تگ قدیمی و منسوخ شده <font> ساخته شده اند.
 
مثال: ترازبندی متن
 
خصوصیت text-align در جهت محور X یک متن را ترازبندی می کند:
 
<!DOCTYPE html>
<html>
 
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph</p>
</body>
 
</html>

Center-aligned heading

This is a paragraph

خصوصیت text-align از تگ قدیمی و منسوخ شده <center> ساخته شده است.
 
برگه های استایل داخلی - Internal Style Sheet
 
 زمانی که یک فایل HTML با یک Style خاص و یکتا نسبت به بقیه صفحات قالب بندی شده باشد، باید از Style داخلی استفاده کرد.
Styleهای داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.
 
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
 
برگه های استایل خارجی - External Style Sheet
 
 زمانی که Styleها در چندین صفحه مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید.
هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.
 
<head>
<link rel="stylesheet" type="text/css" href="/mystyle.css" />
</head>
نظرات كاربران :
نام :
ايميل :
متن نظر : * 
 
متن بالا را وارد نماييد*