0 اسپیناس وب اسپیناس وب

افتخار طراحی سایت بیش از ۱۷۰۰ کسب و کار ایرانی و خارجی

نمونه کارها

نقش CSS در طراحی وب سایت به زبان ساده

نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

نقش CSS در طراحی وب سایت به زبان ساده

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

CSS یا Cascading Style Sheets یک شیوه برنامه نویسی که به کمک کدهای نوشته شده با Html آمده و به آن ها ظاهری جذاب می بخشد.

بدون CSS موارد نوشته شده در Html تنها به صورت تیترها، جدول ها و پاراگراف هایی دیده می شوند که پشت سر هم تکرار شده و بدون رنگ هستند. این متن ها و محتواها با فواصل پیش فرض از هم قرار گرفته و ظاهری خشک و بی روح دارند.

زمانی که پای CSS و استفاده از کدهای آن در کنار Html به میان می آید، صفحات به وجود آمده جذابیت و زیبایی دو چندانی پیدا می کنند.

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

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

طراحی سایت

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

نحوه قرار گیری کدهای CSS در طراحی وب سایت

1- کدهای CSS را می توان به سه طریق در کدنویسی قرار داد. روش اول استفاده از استایل inline است به این صورت که در تگ آغازین هر المان می توان کدهای CSS را نوشت.

2- روش دوم نوشتن کدهای CSS در تگ <head> می باشد. برای این منظور یک تگ <style> در تگ <head> نوشته و کدهای CSS را داخل آن می نویسیم.

3- روش سوم به این صورت است که فایل CSS خارجی استفاده کرده و آن را به فایل Html لینک می کنیم.

استفاده از روش اول بدترین راه کاربرد کدهای CSS می باشد. به این دلیل که شلوغی و بی نظمی کدها را در پی دارد. این کار حتی سرعت وب سایت را نیز پائین می آورد.

و بهترین روش استفاده از فایل های CSS خارجی می باشد. در این روش کدها تمیز تر بوده و می توان تمام آن ها را یک جا مشاهده کرد. و همچنین از برای المان هایی که کلاس یکسان دارند از استایل مشابه استفاده کرد.

درگ کنید مشاهده بستن پخش
0%