لینک صفحات در CSS
یک سال پیش به دنبال یک سایت خوب بودم که همه موارد رو خیلی تمیز و مرتب درباره لینک کردن صفحات HTMLوCSS بهم توضیح داده باشه و روش ها را باهم مقایسه کرده باشه ،ولی یه همچین پست جامعی رو پیدا نکردم که تمامی این موارد رو توضیح داده باشه! برای همین مطالعه ی من شد چندین سایت مختلف برای یک مطلب !
واژه CSS مخفف Cascade Style Sheets جهت طراحی انواع سبک یا استایل برای صفحه های وب است. با استفاده از کدهای CSS میتوان برای صفحه وب طرح‌ها و قالب‌های متنوعی طراحی کرد. درواقع به زیبایی سایت شما می افزاید.
کدهای CSS را میتوان به سه طریق در صفحه وبتان درج کنید.
- External style sheet
- Inline style
- Internal style sheet
1. شیوه نامه های خارجی ،External style sheet :
برای این نوع روش باید شما دوفایل جداگانه برای HTMLو CSSداشته باشید.این دو فایل را میتوانید در نرم افزار Dreamweaver با پسوند های .htmlو .cssایجاد کنید.با استفاده از دستور href فایلی با پسوند .css با نام mystyle ، به صفحه ی HTML لینک داده شده است.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2. شیوه نامه های Inline :
این استایل، داخل تگ های html نوشته میشود .یعنی شما فقط همان یک صفحه htmlرا دارید و دیگر از فایل cssخبری نیست.در تکه کد زیر در نظر داریم فقط بر روی جمله ی This is a paragraph. استایلمان اعمال بشود.
<p style="color:purple;margin-left:20px;">This is a paragraph.</p>
در تکه کد زیر قصد داریم که استایل موردنظر را فقط بر روی دایوی که id=vertical است اعمال بشود .<div id="vertical" style="width:185px; height:750px; box-shadow:-2px 10px 7px #999;">
3. شیوه نامه های داخلی،Internal style sheet :
از این روش زمانی استفاده میشود که شما در نظر دارید که بر روی تمامی تگ های مدنظرتان، استایل خاصی اعمال بشود.این تکه کد را در همان صفحه html در تگ head مینویسیم.این جا نیز دیگر فایلی جداگانه با پسوند .cssنداریم.
دراین تکه کد میخواهیم که بر روی تمامی تگ های p موجود،خاصیت margin-left اعمال شود.همچنین تمامی فونت هایی که صفحه در تگ body به کاررفته اند نوع فونتشان tahoma باشد.
<head> <style> p
{
margin-left:20px;
} body
{
font-family:Tahoma;
} </style> </head>
مقایسه این سه روش با یکدیگر:
- در روش External، صفحه ی HTML شما خطوط کمتری خواهدداشت.در یک نگاه شما فقط کدهای اچ تی ام را دارید و کدهای سی اس اس در جای دیگری هستند.مزیت
این روش این است که زمانی که شما چندین صفحه HTML دارید و کدهایی در آنها
یکسان هست ،دیگر نیازی نیست شما تک تک صفحات را ادیت کنید .با تغییر همین یک فایل CSS شما به نتیجه مطلوب خواهید رسید.خوانایی و درک بهتری دارد. این روش معمول تر و حرفه ای تر است.به خصوص برای زمانی که شما با خطوط بسیاری از کدها مواجه هستید.
- در روش Internal،شما مجاز به تغییرات در میانه راه نیستید. استایل ها ثابت هستند .برای زمانی مفید است که قصد اضافه کردن استایلی و یا تغییر آن برای المانی را ندارید.
- در روش Inline،تعداد خطوط زیاد میشوند.خوانایی پایین می آید .برای زمانی مناسب است که وب پیج شما از تعداد خطوط کمی برخوردار است و دیگر تفاوت چندانی ندارد که استایل ها در یک فایل جداگانه باشند یا در همین صفحه ی اچ تی ام ال جاری نوشته بشوند.
پ.ن:نوشته شده در 5شهریور-ویرایش و انتشار 23آذر
