طراحی سایت با css و html

طراحی سایت با css و html

وقتی صحبت از طراحی وب سایت به میان می آید، اولین سوال این است که html و  css چیست ؟ با کمک css چه کارهایی می توان انجام داد؟ کاربرد و ویژگی های css چیست؟ صفحات HTML به تنهایی زیبایی خاصی ندارند اما با استفاده از دستورالعمل‌ها و زبان‌های مختلفی که برای طراحی سایت وجود دارد می‌توانید صفحه وب پویایی را ایجاد کنید و فرمت صفحه را تغییر دهید. یکی از این زبان‌ها css می‌باشد که می‌تواند جلوه‌های زیبایی به سایت شما دهد.

Css چیست

در ابتدا برای آشنایی با css در دوره آموزش css باید بیان شود که این کلمه مخفف cascading style sheets است. به تعبیری معنا و ترجمان لغوی فارسی آن عبارت از فرم آبشاری نمایش صفحات است. در آموزش css یاد می‌گیریم که css همان نحوه نمایش عناصر HTML در صفحه، کاغذ یا سایر رسانه‌ها را بیان می‌کند. با css می‌توان طرح چندین صفحه وب را به صورت همزمان کنترل کرد و همین امر باعث صرفه‌جویی در انجام کار می‌شود. همچنین قالب صفحات بیرونی نیز در css ذخیره‌سازی می‌شود.

هدف و کاربرد css چیست ؟

هدف از تولید css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.

برخی از کاربردهای CSS عبارتند از:

• تعیین ارتفاع و عرض
• طراحی سایت رسپانسیو صفحات
• انتخاب پس زمینه
• انتخاب محل قرار گرفتن یک عنصر مانند متن یا عکس و…
• تعیین چیدمان نوشته ها (چپ چین، راست چین و…)
• مشخص کردن میزان فاصله ی عناصر از همدیگر
• تغییر در نوع نوشتاری (فونت، رنگ و…)

آشنایی با نحوه عملکرد CSS

کلمه “Cascading” یا آبشاری که اولین کلمه از CSS است به این نکته اشاره می‌کند که کدهای نوشته شده با CSS به صورت پیش فرض از بالا به پایین و به ترتیب پردازش و اجرا می‌شوند. CSS این قابلیت را در اختیار شما قرار می‌دهد که با ایجاد یک فایل خارجی (Style Sheet) ویژگی‌های اجزای مختلف در صفحات وب سایت را تعیین کنید. یعنی تغییراتی که شما به کمک CSS در یک صفحه وب ایجاد می‌کنید، روی اجزای زیرمجموعه ی آن هم تاثیر می‌گذارند. به عنوان مثال اگر شما رنگ متن یک صفحه را تغییر دهید، تمامی زیرمتن‌ها مانند پاراگراف‌ها و سرخط‌ها نیز آن رنگ را خواهند داشت.

مزایای CSS

با CSS علاوه بر اینکه کدنویسی تمیزتری نیز خواهید داشت، از یک قطعه کد می‌توانید برای صفحات مختلف HTML استفاده کرده و در زمان صرفه جویی کنید. CSS همچنین به بهبود سئو سایت نیز کمک می‌کند و به اصطلاح SEO Friendly است. زیرا استفاده از این کدها می‌تواند تاثیر بسیار خوبی در زیبایی و دسترسی پذیری صفحات وب، پشتیبانی از صفحات وب در دستگاه‌ها و مرورگرهای مختلف و در نهایت بهبود تجربه کاربری داشته باشد. برخی دیگر از مزایای این زبان به صورت زیر می‌باشند:

• ویژگی‌های بیشتری برای کار با اجزای صفحات نسبت به HTML دارد.
• بهبود بخشیدن به سرعت وب سایت و زمان بارگذاری کمتر برای صفحات وب
• امکان ساخت جلوه‌های تصویری و انیمیشنی جذاب
• نگه‌ داری آسان کدها
• جلوگیری از کدنویسی کثیف و غیر اصولی

معایب CSS چیست؟

زبان CSS در مقابل مزایای بسیار زیادی که دارد، شامل ضعف‌ها و محدودیت‌هایی هم می‌باشد. برخی از محدودیت‌های این زبان عبارتند از:

• ناتوانی در انتخاب والد در CSS نمی‌توان برای هر عنصر، گزینه بالاتر یا والد را انتخاب کرد. دلیل اصلی آن، بهبود کارایی در نمایش صفحات وب در مرورگرهای مختلف است.
• ناتوانی در نام گذاری نقش‌ها در زمان ارجاع script‌های بخش کاربر و تغییر Selectorها
• تفاوت کارکرد CSS در مرورگرهای مختلف که ممکن است مشکلاتی برای برنامه نویسان ایجاد کند.
• دسترسی برای ایجاد هرگونه تغییر به علت متن باز بودن CSS می‌تواند برنامه نویسان را در دام تغییرات ناخواسته ای بیندازد که ممکن است روی ظاهر کل سایت تاثیر بگذارند.

طراحی سایت با css و html

روش‌های اضافه کردن CSS به صفحه HTML

حال که دانستیم css چیست و چه ویژگی هایی دارد بهتر است سراغ معرفی نحوه استفاده از آن در کد برویم. برای استفاده از CSS سه راه برای توسعه دهندگان وجود دارد که در این قسمت از مطلب به این سه روش می‌پردازیم:

• روش inline style :
  استفاده از این روش می‌توانید کدهای css را در میان تگ‌های html تعریف کنید. این روش معمولا توصیه نمی‌شود، زیرا به مرور زمان و با بزرگ‌تر شدن پروژه، این کدها بسیار نامرتب می‌شوند و در آینده باعث سردرگمی خواهند شد. برای مثال :

<p style=”background-color: red; color: white;”></p>

• روش internal style :
  در این روش کافیست تمام کد‌های CSS را در میان تگ‌های باز و بسته <style></style> که در صفحه HTML نوشته شده است، قرار دهید. این روش معمولا زمانی استفاده می‌شود که بخواهند استایل خاصی را فقط در یک صفحه منحصر به فرد داشته باشند. برای مثال :

<style>
    P {
        Background-color: red;
        Color: white;
    }
</style>

• روش External Style :
  با استفاده از این روش شما می‌توانید یک صفحه دیگر با پسوند css ایجاد کنید و سپس کدهای CSS را در آن بنویسید. سپس کافیست صفحات HTML مورد نظر خود را با استفاده از تگ‌‌های <link> به این صفحات متصل کنید. در این روش باید آدرس فایل صفحه css را در اتریبیوت href تگ link بنویسید. برای مثال :

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

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

1. استایل‌های inline
2. فایل‌ها و تگ‌های CSS
3. پیشفرض مرورگرها

و در نهایت اگر همه استایل‌ها دارای اولویت یکسان باشند، خواصی انتخاب میشوند که آخر از همه نوشته شده باشند.

برای خواندن مقالات مرتبط کلیک کنید