روش های استایل دهی با CSS برای HTML
صفحات HTML نمی توانند به تنهایی زیبایی و پویایی داشته باشند. زبانهای مختلفی برای طراحی صفحات وب وجود دارد. ترکیب استفاده از این زبان ها منجر به خلق یک صفحۀ وب می شود. یکی از این زبان ها CSS است. زبان CSS می تواند به ظاهر صفحات وب جلوه های زیبایی دهد. بطور کلی برای استایل دهی با CSS برای HTML سه روش وجود دارد.
روش های استایل دهی برای html
سه روش استایل دهی برای HTML به شرح زیر می باشند:
- روش Inline
- روش Internal
- روش External
حال که با روش های استایل دهی برای html آشنا شدید دعوت می کنم تا مثال های آن را نیز مطالعه کنید.
روش استایل دهی Inline
این روش یکی از بدترین روش های استایل دهی برای HTML است. چون توسعه آن بعداً سخت است. در این نوع استایل دهی، کدهای CSS، داخل سند HTML و عنصربه کار برده می شوند.
مثال:
<p style="background: #0c5460; color: #FFFFFF">این روش استایل دهی inline می باشد. رنگ نوشته من رو سفید و پس زمینه ام را سبز پر رنگ کرده.</p>
خوب، دلیل سختی توسعۀ آن کاملاً روشن است. چون اگر من بخواهم تأثیر این کد تماماً عنصر P را در این صفحه در بربگیرد روش مناسبی نیست. همچنین نمی توانم از این کد چه در همین صفحه و چه در صفحات دیگر استفاده کنم.
پس این روش، روش مناسب و کاربردی نمی باشد، مگر در موارد خاص.
روش استایل دهی internal
در این روش نیز کدهای CSS داخل سند HTML نوشته می شوند با این تفاوت که در این روش می توان کلاس و آی دی تعریف کرد. همچنین کدها داخل تگ شروع نوشته نمی شوند. و صرفاً داخل تگ شروع و پایانی </style><style> نوشته می شوند.
مثال:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
p{
background: #0c5460;
color: #FFFFFF;
}
</style>
</head>
<body>
<p>این روش استایل دهی internal می باشد. رنگ نوشته من رو سفید و پس زمینه ام را سبز پر رنگ کرده.</p>
</body>
</html>
واضح است که تاثیر کدهای نوشته با این روش نیز محدود به همین صفحه جاری است و نمی توان از کلاسها و آی دی های تعریف شده درون آن را بیرون از آن استفاده کرد.
روش استایل دهی External
روش رایج و استاندارد، استایل دهی، External بوده و کدهای آن در یک فایل جداگانه با پسوند CSS نوشته می شوند. در این نوع استایل دهی باید فایل CSS را به صفحه HTML تگ link لینک دهیم. تا بتوانیم از کلاس ها و آی دی های آن استفاده کنیم.
همین مثال بالا را در یک فایل CSS با نام Style.css می نویسیم:
.p{
background: cadetblue;
color: azure;
padding: 8px;
font-size: large;
direction: rtl;
}پس از آن باید فایل css را به html لینک دهیم:
<link href="style.css" rel="stylesheet" type="text/css">
این کد را داخل تگ شروع و پایانی head قرار دهید.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <p class="p">سلام استایل من با کلاس p تغییر یافته و این کلاس در یک فایل جداگانه با پسوند css نوشته شده است</p> </body> </html>
دیدگاهتان را بنویسید