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

طراحی سایت و css

طراحی سایت و css

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

بعلاوه اینکه این زبان قابلیت تغییر، کاربر پسندی و بسیاری دیگر از مباحثی که در دنیای برنامه نویسی و طراحی با گذشت زمان بوجود آمده اند را در خود جای نداده است.

CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود.

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

CSS هم مانند جاوا اسکریپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم.

مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم.




Css چیست ؟ Css چیست ؟
Css چیست ؟

css چیست ؟ css (به انگلیسی: CSS: Cascading Style Sheets ) در کنار HTML هسته ی فناوری ساخت صفحه‌های وب هستند.

CSS روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است.

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

css نوعی زبان برنامه نویسی می باشد که معمولا همراه با زبان Html به کار می رود. این دو زبان معمولا همراه با هم برای طراحی سایت استفاده می شوند.
با توجه به اینکه امروزه در هر شغلی افراد به طراحی سایت برای کسب و کار خود روی آورده اند باید طراحی وب سایت بصورت بهینه و طبق اصول Html و Css باشد تا سایت ایجاد شده ،‌ کارایی داشته باشد.

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

از مهمترین نکته ها برای طراحی سایت ، استفاده بهینه از  css میباشد در این بخش از آموزش css به شرح ویژگی های اساسی و مهم در طراحی صفحات وب ، میپردازیم و روشهای اضافه کردن CSS به صفحه ی مورد نظر را مورد بررسی قرار میدهیم.

رابطه بین HTML و CSS به شدت بهم نزدیک است. از آنجا که HTML یک زبان نشانه گذاری (پایه و اساس یک سایت) است و CSS بر سبک و طراحی وب سایت تأکید می کند ، دست به دست هم می دهند تا سایت خود را طراحی نمایید.

HTML  فقط از نشانه گذاری صفحه استفاده می کرد. css فقط برای توصیف و طراحی محتوا ایجاد شده است. به عنوان مثال: <p> این یک پاراگراف است. </p>. اما چگونه پاراگراف را سبک بندی می کنید؟

ساختار نحوی CSS بسیار ساده است. دارای یک انتخاب کننده است. شما یک عنصر را انتخاب کرده و سپس اعلام می کنید که می خواهید با آن چه کار کنید.

 با این حال ، قوانینی وجود دارد که باید آنها را به خاطر بسپارید. قوانین ساختار css بسیار ساده است

مزایای CSS

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


CSS در زمان شما صرفه جویی می کند - می توانید CSS را یکبار بنویسید و سپس از همان برگه در چندین صفحه HTML استفاده کنید.

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

تغییر  آسان - برای ایجاد یک تغییر  ، فقط قسمتی از css را تغییر دهید و همه عناصر در تمام صفحات وب به طور خودکار به روز می شوند.

سازگاری چند دستگاه - css اجازه می دهد تا محتوا برای بیش از یک نوع دستگاه بهینه شود. با استفاده از یک سند HTML مشابه ، نسخه های مختلف یک وب سایت را می توان برای دستگاه هایی مانند ipad و تلفن های همراه ارائه کرد.

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


مزیت استفاده از CSS در مقابل ویژگی های خود تگهای html :

کاملا مشخص است ،  زمانی که بخواهید از attribute های خود html استفاده کنید ، به علت اینکه باید انها را در هر تگ دوباره و چندباره تکرار کنید ، حجم فایل html شما خیلی زیاد میشود .

در صورتی که ما با استفاده از CSS میتوانیم یک دسته از attribute ها را فقط یکبار و در یکجا تعریف کنیم و تگهای مختلف را به آن دسته تنظیمات ارجاع دهیم و نیازی به اتلاف فضای بیشتر نباشد . 

با CSS  در اندازه ی فایل صفحه ی وب سایت صرفه جویی می کنید . هر چه اندازه ی فایل وب سایت شما کوچیکتر باشد سرعت لود شدن صفحه ی وب هم مسلما بیشتر میشود ، که اینکار با CSS میسر است .
تغییر دادن صفحه ی وب سایت به مراتب راحت تر میشود . تنظیمات CSS را می توانید توی فایل جداگانه بگذارید و به این ترتیب استفاده و نگهداری آن راحتتر است .


اشتباهات معمول در CSS

طراحان و كدنويسان چه تازه كار باشند چه حرفه اي هميشه ممكن هست كه در نوشتن كد دچار اشتباه بشوند،

اين اشتباهات ممكن است به خاطر عدم تمرين كردن و يادگيري اصولي از ابتدا باشد، يا اينكه هنگام نوشتن عجله در كار باشد. در اين پست قصد معرفي رايج ترين اشتباهات در هنگام نوشتن كد HTML و CSS را داريم.


اشتباهات HTML

  • فراموش كردن بستن يك تگ 

اين اشتباه خيلي معمول است مخصوصا براي تازه كارها، خيلي از تگها نياز دارند كه بسته شوند تا درست كار كنند، مثل div, strong و لينكها. يكسري از تگها هم نياز دارند كه يك slash در انتهاي آنها گذاشته شود، مثل تگ img.


  • با حروف بزرگ نوشتن تگها

اين كار عادت نادرستي است و حتما بايد تگها با حروف كوچك نوشته شوند،


  • استفاده كردن بيش از حد از Id ها و class ها

class ها براي آيتم هايي استفاده مي شوند كه بيش از يك بار در كد شما مورد استفاده قرار مي گيرند. مثل يك لينك كه چندين بار در سايت شما مورد استفاده قرار مي گيرد و داراي استايل يكساني مي باشد. Id ها براي آيتم هايي كه تنها يك بار مورد استفاده قرار مي گيرند

تعريف مي شوند مثل header div. زمانی که اين دو مورد معمولا بيشتر از حد نياز مورد استفاده قرار مي گيرند و  ممكن است در آينده هنگام ويرايش و تغيير كد شما را گيج كنند، بهتر است در حد نياز از آنها استفاده كنيد.


  • فراموش كردن بستن براكت ها و استايلها

هر آيتمي در CSS با يك براكت } باز و بسته { مي شود. هر استايلي كه تعريف مي كنيد بايد با يك ; بسته شود. براي مثال :

#divname {
width: 40px;
height: 30px;

}
معمولا روشهاي متفاوتي براي نوشتن كد CSS وجود دارد كه بسته به طراح و برنامه نويس دارد بعضيها همه كدها را در يك خط مي نويسند و بعضي ها مثل مثال بالا هر استايلي را در يك خط جداگانه مي نويسند.


  • استفاده نكردن از Global Styles

خيلي از آيتمها مثل پاراگراف، هدرها و لينكها استايل يكساني در كل سايت دارند بنابراين بهتر است براي آنها يك استايل همگاني تعريف شود،

اين كار هم باعث جلوگيري از اشتباههاي ناخواسته مي شود و هم كد شما را سبك تر مي كند.


  • استفاده نكردن از اسمهاي مناسب براي Id ها و Class ها

هميشه بهتر هست كه براي اين موارد نامهاي مناسبي انتخاب كنيد كه در آينده اگر نياز به ويرايش و تغيير داشت بتوانيد راحت بفهميد كه اين موارد براي چه هستند. 


  • استفاده نكردن از كدهاي كوتاه

كدهاي كوتاه يكي ديگر از روشها براي مرتب و كم حجم كردن كد شما است. براي مثال به جاي استفاده از padding-top ، padding-right و ... مي توانيد از روش زير استفاده كنيد :

padding: 5px 10px 0 10px;


  • استفاده نكردن از كدهاي كوتاه براي رنگ

اعداد هگزايي كه مثل ffffff و يا 000000 تكرار مي شوند را ميتوان به صورت 000 و fff نوشت.


  • استفاده نادرست از positioning

Positioning يكي از مواردي است كه براي كساني كه تازه كار هستند خيلي سخت ممكن است به نظر برسد. انتخابهاي شما static , relative , absolute و fixed هستند. static حالت پيش فرض است و موقعيت آيتم در حالت نرمال صفحه است. relative قرار دادن آيتم به صورت وابسته به خودش است

به اين معني كه شما مي توانيد آنرا نسبت به موقعيت نرمالش در صفحه به سمت بالا، پايين، چپ و راست حركت دهيد. absolute به شما اين امكان را مي دهد كه آيتم خود را در هر جاي صفحه قرار دهيد و اين حالت بيشترين اشتباه در موردش مي شود.

مقاديري كه براي آيتم absolute در نظر مي گيريد به صورت relative و يا absolute نسبت به آيتم پدر خود مي باشد و اگر وجود نداشته باشد به تگ html بر ميگردد. حالت fixed وابسته به موقعيت پنجره مرورگر است يعني اگر پنجره مرورگر را تغيير دهيد اين آيتم تغييري نمي كند. يادگيري درست اين موارد به شما كمك بزرگي در چيدمان صفحه خواهد كرد.


افزودن ماژول جدید
0%