یادداشت کن لذت ببر

آموزش های سبک های HTML

با استفاده از ویژگی style میتوانید به عناصر HTML یک سبک به صورت پیش فرض بدهید.

در این درس استفاده کردن از ویژگی style رو یاد میگیرید و با فراگیری این مبحث میتونید رنگ پس زمینه، رنگ متن، نوع فونت، اندازه فونت و ترازبندی متن را در عناصر HTML تغییر دهید.

هر عنصری در HTML یک سبک نمایش پیشفرض دارد که مثلاً رنگ پس زمینه همه عناصر سفید است و رنگ متن همه آنها هم مشکی است.

شیوه نوشتن سبک برای HTML بصورت زیر میباشد:

 style="property:value"

property یک خصوصیت  CSS است و value هم یک مقدار CSS است.

در مثال پایین رنگ پیشفرض پس زمینه را از سفید به خاکستری روشن تغییر میدهیم.

 <html>

<body style="background-color:lightgrey">

 <h1>This is a heading</h1>

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

 </body>

</html>

رنگ متن

خصوصیت color رنگ متن را برای استفاده در همه عناصر HTML مشخص میکند:

 <html>

<body>

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

<p style="color:red">This is a paragraph.</p>

 </body>

</html>

فونت

خصوصیت font-family فونتی را که میخواهیم به یک عنصر HTML بدهیم مشخص میکند.

 <html>

<body>

 <h1 style="font-family:verdana">This is a heading</h1>

<p style="font-family:courier">This is a paragraph.</p>

 </body>

</html>

تغییر اندازه متن

با بهره گیری از خصوصیت font-size میتوانیم اندازه متن عناصر HTML را تغییر دهیم.

 <html>

<body>

 <h1 style="font-size:300%">This is a heading</h1>

<p style="font-size:160%">This is a paragraph.</p>

 </body>

</html>

ترازبندی متن

خصوصیت text-align ترازبندی متن را بصورت افقی برای هر عنصری از HTML مشخص میکند.

 <html>

<body>

 <h1 style="text-align:center">Centered heading</h1>

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

 </body>

</html>