سبد (0)

استفاده از css در HTML

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

Wiki


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

این متن قرمز است.

رنگ این متن آبی است و نام فونت آن Times است.

اندازه این متن 30 پیکسل است.

خودتان امتحان کنید


مثال - خودتان امتحان کنید

استفاده از Styleها، داخل صفحه HTML
چگونه Styleها را در قسمت <head> صفحه اضافه کنیم.

لینکی که خط زیر ندارد
چگونه یک لینک بدون خط زیر (underline) بسازیم.

لینک به یک فایل CSS خارجی
چگونه از تگ <link> برای اضافه کردن فایل CSS خارجی استفاده کنیم.


تعیین شکل نمایش عناصر HTML با CSS

Wiki

CSSهمراه با HTML4 معرفی شد تا یک روش بهتری برای Style دهی عناصر HTML ایجاد کند.

برای اعمال CSS بر روی تگهای HTML سه روش وجود دارد:

  • برگه های استایل خارجی یا External style sheet
  • برگه های استایل داخلی یا Internal style sheet
  • استایل درون تگی یا Inline style

روش پیشنهادی، گزینه اول یعنی برگه های استایل خارجی است. 

برای کسب اطلاعات بیشتر درباره CSS می توانید به لینک روبرو مراجعه نمایید: آموزش CSS


استایل درون تگی - Inline Styles

Wiki

قرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.

طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم، مثال زیر نشان می دهد که چگونه رنگ و margin-left تگ <p> را تغییر داده ایم:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

مثال: تنظیم رنگ پس زمینه عناصر HTML

خصوصیت background-color رنگ پس زمینه یک عنصر HTML را تنظیم می کند:

مثال (استفاده از css در HTML)

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<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 ساخته شده است.

خودتان امتحان کنید: تنظیم رنگ پس زمینه با استفاده از روش قدیمی


مثال: تنظیم رنگ و اندازه و فونت عناصر HTML

خصوصیات font-family , color , font-size به ترتیب اندازه، رنگ و فونت متن را تنظیم می کنند:

مثال (استفاده از css در HTML)

<!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>
خودتان امتحان کنید »

خصوصیات font-family , color , font-size از تگ قدیمی و منسوخ شده <font> ساخته شده اند.


مثال: ترازبندی متن

خصوصیت text-align در جهت محور X یک متن را ترازبندی می کند:

مثال (استفاده از css در HTML)

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>
خودتان امتحان کنید »

خصوصیت text-align از تگ قدیمی و منسوخ شده <center> ساخته شده است.

خودتان امتحان کنید: ترازبندی عنوان با استفاده از روش قدیمی


برگه های استایل داخلی - Internal Style Sheet

Wiki

زمانی که یک فایل HTML با یک Style خاص و یکتا نسبت به بقیه صفحات قالب بندی شده باشد، باید از Style داخلی استفاده کرد.

Styleهای داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

برگه های استایل خارجی - External Style Sheet

Wiki

زمانی که Styleها در چندین صفحه مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید.

هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.

<head>
<link rel="stylesheet" type="text/css" href="/mystyle.css" />
</head>

تگ های Style در HTML

تگتوضیحات
<style>

برای تعریف اطلاعات طرح بندی یک سند html استفاده می شود. تگ <style> باید در قسمت head صفحه قرار داده شود.

<link />

هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.


تگ ها و خصوصیات منسوخ شده

Wiki

در HTML4 چندین تگ و خصوصیت برای Styleدهی استفاده می شود که این تگ ها در نسخه جدید HTMLپشتیبانی نمی شود.

به همین منظور از استفاده عناصر و خصوصیات زیر اجتناب نمایید:

  • <font>
  • <center>
  • <strike>
  • color
  • bgcolor

آموزش صوتی HTML

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان