مقالات طراحی سایت 18 مهر 1399 19 دقیقه مطالعه علی حاجی جعفر

راهنمای جامع CSS و نقش آن در طراحی سایت

اگر پای صحبت طراحان سایت و برنامه نویس ها نشسته باشید، چیزاهای زیادی رو می شنوید که به دلیل ماهیت انگلیسی بودن آن و اینکه خیلی از آن ها به صورت کاملا اختصاصی مربوط به دنیای رایانه هست، ممکن است چیز زیادی دستگیرتان نشود." CSS یا HTML رو باید بلد باشید تا...

اگر پای صحبت طراحان سایت و برنامه نویس ها نشسته باشید، چیزاهای زیادی رو می شنوید که به دلیل ماهیت انگلیسی بودن آن و اینکه خیلی از آن ها به صورت کاملا اختصاصی مربوط به دنیای رایانه هست، ممکن است چیز زیادی دستگیرتان نشود." CSS یا HTML رو باید بلد باشید تا بتوانید طراحی سایت را به بهترین نحو انجام دهید. پس بگذارید چونکه این واژه هم مثل مابقیه اصطلاحات رایانه ای، انگلیسی و متخصر شده هست، همین ابتدا معنی آن را بگوییم و سپس به تعریف و توضیحات بیشتر بپردازیم.CSS مخفف عبارت Cascading Style Sheets است که اگر این عبارت را ترجمه کنیم معنای "برگه هایی به سبک آبشاری" معنای فارسی شده آن خواهد بود. حالا چرا برگه های آبشاری و اینکه ماهیت این برگه ها که آبشاری است، چگونه در طراحی سایت به کار می آید، را در ادامه مقاله یاد خواهیم گرفت.

CSS چیست؟

همانطور که در بالا گفته شد، CSS به معنی «برگه‌های سبک آبشار» یا «برگه‌های آبشاری» است که آبشاری بودن برگه‌های CSS به این معنی است که استایل، کلاس یا هر چیزی که به یک برگه CSS داده شود، روی عناصر فرزند (Children) این برگه‌ها هم تاثیرگذار خواهد بود. اگر بخواهیم مثالی در این زمینه بزنیم مثل این خواهد بود که اگر شما رنگ متن را در یک برگه CSS آبی تعیین کنید، این به معنای قرمز بودن تمام سرنویس‌ها (هدینگ) و پاراگراف‌های متنی است که قرار است در این برگه CSS نوشته شود. بنابراین( CSS ) زبانی است که توسط آن قادر خواهید تا استیل طراحی صفحات وب سایت تان را یکبار تعریف و به صفحات مورد نیازتان اعمال نمایید. استفاده از CSS باعث تمیزتر شدن کدهای برنامه نویسی تان می شود، تغییراتی که در آینده میخواهید اعمال کنید را آسان می کند و همچنین دید شما را بیشتر به طراحی معطوف می کند تا سر و کله زدن با کدهای برنامه نویسی. CSS در کنار HTML قرار می‌گیرد تا هسته ایجاد یک وب سایت را به وجود بیاورند. اما HTML چیست؟ برای اینکه به درک کاملی از CSS برسیم باید تعریف مختصری از HTML داشته باشیم.

HTML چیست؟

HTML برگرفته از (Hyper Text Markup Language) است و یک زبان نشانه‌گذاری استاندارد برای صفحات وب محسوب می‌شود. این زبان بنیاد صفحات وب را تشکیل می‌دهد. هر آنچه که در صفحه می‌بینید از عناوین، متن‌ها و تصاویر همگی با HTML در صفحه‌ی وب قرار داده شده‌اند.در ابتدا لازم است بدانید html یک زبان برنامه نویسی نیست! بلکه یک روش یا زبان نشانه‌گذاری است که برای ساختاربندی اجزای صفحه به کار برده می‌شود. HTML زبانی هست که تمامی عناصر موجود در صفحات وب مثل جعبه های متن، دکمه ها و غیره توسط اون ساخته می‌شن و با ترکیب اون با کدهای CSS ظاهر صفحه شکل می‌گیره.

تلفیق CSS و HTML

اگر یک صفحه وب را شامل اجزای زیر بدانیم:محتوا (content): کدهای HTML مسئول ایجاد این بخش هستند.نمایش (presentation): کدهای CSS مسئول ایجاد این بخش هستند.رفتار (Behavior): این بخش وب به وسیله JavaScript ایجاد می شود.مثال ملموس تر می شود "اسکلت انسان را HTML فرض کنید و شکل،ظاهر ، رنگ مو، نژاد را CSS و رفتاری که از این انسان بروز می کند را JavaScript.

هدف از زبان css چیست؟

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

ساختار CSS

برای اینکه با سختار CSS آشنا شویم باید بگوییم که ساختار یک خط از کد CSS شامل یک انتخاب‌گر (selector) است که به یک یا چند تگ از html اشاره می‌کند. در مقابل انتخاب‌گر یک بلاک قرار می گیرد که سبک خاصی را به عنصر انتخاب شده اعمال می‌کند. مثلا این ساختار را در نظر اگر در نظر بگیرید:h1{font-size : 18px;}که در اینجا h1 انتخابگر هست، font-size ویژگی است و 18px مقدار آن است. CSS و HTML

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

برای اضافه کردن کدهای CSS به سند HTML و سایر کدها، می توان از روش‌های زیر استفاده کرد.

۱- نوشتن inline CSS یا css خطی

در این روش شما با نوشتن کلمه‌ی style داخل هر تگ، می‌توانید کدهای css مد نظر خود را به آن اضافه کنید:<h1 style="color:blue;text-align:center;">>آمانج آکادمی/h1>

۲- نوشتن CSS در بخش HEAD فایل

همانطور که می‌دانید در HTML یک بخش به نام head قرار دارد که می‌توانید در آن یک تگ <style> قرار داده و شروع به نوشتن css کنید:

<!DOCTYPE html> <html> <head> <style> h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>آمانج آکادمی </h1> </body> </html>

۳- نوشتن CSS در فایل خارجی

این روش بهترین راه برای اضافه کردن استایل‌هاست. برای این کار کافیست تمام کدهای CSS را در یک فایل نوشته و با پسوند css. ذخیره نمایید. سپس این فایل را در هر head فایل html خود فراخوانی کنید:<head><link rel="stylesheet" type="text/css" href="mystyle.css"><head/>

محدودیت‌های CSS

با اینکه CSS تا اینجای کار پیشرفت بسیار زیادی داشته، اما نمی‌توان گفت که کاملا ایده آل است و هیچ محدودیتی برای طراح وب سایت ایجاد نمی‌کند. اگر بخواهیم به محدودیت‌های CSS اشاره کنیم، شاید به ۵ تا ۶ مورد محدودیت بتوان اشاره کرد که در برابر آزادی عملی که این زبان در اختیار ما می‌گذارد، این محدودیت‌ها چیزی نیستند.مثلا در CSS نمی‌توان برای rules اسم تعیین کرد. تعیین اسم برای یک rule، به عنوان مثال، می‌تواند برای ارجاع دادن یک اسکریپت سمت کاربر (Clien-side) به یک rule هنگام تغییر selector آن، کارآمد باشد. همچنین محدودیت‌های دیگری مثل عدم توانایی انتقال Style از یک rule به rule دیگر و چن مورد دیگر از محدودیت در CSS وجود دارد که ممکن است مانند محدودیت‌هایی که در نسخه‌های پیشین CSS وجود داشتند، در آینده حل شوند.

طراحی سایت

مزایای CSS

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

جمع بندی

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