آشنایی با CSS و کاربردهای آن

برای وارد شدن به دنیای طراحی سایت و برنامه نویسی در این زمینه، ابتدایی ترین ابزارهایی که باید با آن ها آشنا بشویم ابزارهای HTML و بعد از آن CSS هستند.

اگر هنوز با زبان نشانه گذاری HTML آشنایی ندارید، نگران نباشید! ما در این باره در سایت ابرمتن مقاله‌ای داریم که می‌توانید بخوانید و اطلاعات خودتان را بهبود ببخشید. می توانید مقاله “HTML چیست“ را با کلیک بر روی نام مقاله مطالعه کنید.

همچنین ابرمتن قالب‌های HTML را نیز ارائه می دهد که برای مشاهده این قالب ها نیز می توانید به این لینک مراجعه کنید.

CSS چیست؟

همان طور که می دانید صفحات وب که با HTML پیاده سازی شده‌اند به تنهایی زیبایی خاصی ندارند. اما شما می توانید با استفاده از دستورالعمل‌ها و زبان‌های مختلفی که برای طراحی سایت وجود دارد سایت خود را به صورت پویا طراحی کنید و شکل و شمایل صفحه را تغییر دهید. یکی از این زبان‌ها css می‌باشد که ظاهر سایت شما را رونق می دهد و جلوه‌های زیبایی به سایت شما می دهد.

میزان بازدید سایت ها برای صاحبان آن ها و به خصوص افرادی که کسب و کارشان را در سایت های اینترنتی پیش می برند، مسئله بسیار مهمی است. دلیلش هم این است که کاربر باید بتواند ارتباط خوبی با سایت برقرار کند. در درجه اول نکته‌ای که توجه کاربر را جذب خود می کند، ظاهر و زیبایی سایت و خوانایی مطالب داخل آن سایت است.

استفاده از CSS در کنار دیگر زبان‌ها به همراه HTML، سبب زیباتر شدن و شکل گرفتن سایت ها می شود. پس نمی توانیم سایتی را ببینیم که در آن از CSS هیچگونه‌ای استفاده‌ای نشده است.

CSS مخفف چیست؟

CSS مخفف عبارت Cascading Style Sheets و به معنی برگه‌های استایل آبشاری است.

زبان CSS با هدف فرم دهی به صفحات وب به وجود آمده است. به این معنا که شما با استفاده از دستورات آن می‌توانید رنگ یا فونت نوشته‌های داخل سایت خود را (چه یه صورت کلی و یا به صورت جزئی و جدا جدا ) تغییر بدهید و می توانید به نوشته‌های خود استایل بدهید.

به عنوان مثال می‌توانید متن خود را زیر خط دار کنید و یا آن‌ها را به صورت کج یا italic بنویسید و هرگونه تغییرات ظاهری که می خواهید را به متنتان بدهید.

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

آبشاری به چه معناست؟

مفهوم آبشاری و یا cascading به این معناست که کدهای css مانند خیلی از زبان های دگیر به صورت بالا به پایین و خط به خط پردازش می شود.

چه طور فایل HTML را به CSS متصل کنیم؟

در واقع زبان css به کمک شما می آید که کدهای تمیزتری داشته باشید. به این صورت که شما در ایتدای فایل html خود با استفاده از یک قطعه کد، آدرس فایل استایل و یا css خود را وارد می کنید. در این صورت استایل های موجود در فایل css خارجی، به کدهای HTML شما نسبت داده می شوند و تغییرات بر روی آن ها اعمال می شود. (باید دقت کنید که نام و آدرس را به درستی وارد کنید.)

قطعه کد زیر را باید در بخش تگ head در فایل html خود وارد کنید:

<“link rel=”stylesheet” href=”styles/style.css>

در این پروژه، فایل css در پوشه‌ای به نام styles وجود دارد که در کد بالا مدل آدرس دهی آن را مشاهده می کنید. قسمت rel نوع ارتباط را مشخص می کند و توضیح می دهد که فایل مربوطه از نوع style sheet است. این بخش را بدون تغیرر بگذارید و آدرس فایل css خود را در بخش href که همان رفرنس است وارد کنید.

مزایا و کاربردهای css

• استایل دهی به تصاویر و رسانه های داخل سایت
• طراحی واکنشگرا و responsive
• تعیین فونت ها و چیدمان آن ها
• ایجاد فاصله بین قسمت‌های مختلف سایت
• و در نهایت افزایش سئو و بازدید سایت

برای آشنایی با سئو (SEO) مقاله “SEO چیست؟” در سایت ابرمتن را مطالعه کنید.