نشر توسط:admin Views 30 تاریخ : 26 ارديبهشت 1395

نظرات ()

HTML به زبانی 'می شود که اواین قدم قالب وب سایت است. عموما تمام زبانهای برنامه نویسی تحت وب، به نوعی وابسته به زبان HTML می باشند. بعنوان مثال، PHP، جاوا اسکریپت و زبان برنامه نویسی دات نت، زبانهایی هستند که علاوه بر داشتن قوانین و استانداردهای خود، از زبان HTML کمک می گیرند بطوریکه کدهای نوشته شده در قالب خاصی، در بین کدهای HTML قرار داده می شود.

HTML زبانی است که از زبان XML مشتق شده است. به این معنی که می توان گفت HTML نوع بخصوصی از زبان XML می باشد. XML زبانی است که سنگ بنای آن، تگ می باشد. تگ، همانند پرانتزی می باشد که می توان آن را باز کرد، درون آن چیزی قرار داد و سپس آن را بست. این تگها، می توانند هر اسمی داشته باشند و زبان XML آزادی کاملی را در این خصوص به شما داده است.

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

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

CSS چیست؟

CSS  زبان برنامه نویسی می باشد که کنسرسیوم بین المللی شبکه جهانی وب یا W3C برای غلبه بر مشکلاتی که در طی زمان با استفاده از HTML بوجود آمده است پیشنهاد شده است. عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد.

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

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

جمله آخر اینکه، استفاده از CSS باعث تمیزتر شدن کدهای برنامه نویسی تان می شود، تغییرات آینده را آسان می کند و همچنین دید شما را بیشتر به طراحی معطوف می کند تا سر و کله زدن با کدهای برنامه نویسی.    

روش استفاده از کدهای CSS

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

سر تیترها (تگ های h1)، زیر تیترها (h2)، و غیره، بطور ساختاری با HTML تعریف می شوند. در نسخه چاپی و نسخه نمایشی، انتخاب فونت ها، رنگ ها، و غیره، کمی توانند کاملا متفاوت باشند.

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

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

فایلهای CSS، با استفاده از قوانین زیر، درون صفحات HTML قرار داده می شوند:

 

CSS ها ساختارهای ساده ای دارند و از تعدادی کلمات کلیدی انگلیسی برای مشخص کردن ویژگیهای مختلف در طراحی استفاده می کنند. یک CSS از تعدادی قوانین تشکیل شده است. هر یک از این قوانین، از یک یا تعداد بیشتری انتخاب کننده یا selector تشکیل شده است و هر کدام از آنها دارای یک بلوک توصیف هستند. بلوک توصیف، از تعدادی توصیف تشکیل شده است که همه آنها درون یک بلوک آکلاد ({}) قرار گرفته اند. هر توصیف به خودی خود، از یک مشخصه یا property، یک کالن (:)، و یک مقدار تشکیل شده است. چنانچه چندین توصیف در یک بلوک وجود داشته باشد، از سمی کالن (;)، برای جداسازی آنها استفاده می شود.

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

شبه کلاسها نوعی دیگری از ویژگیهایی هستند که در CSS ها مورد استفاده قرار می گیرند تا به المانهای روی صفحه، هویت بخشند. در برخی حالات، از ID های یکتا برای اعمال بلوکی از CSS ها استفاده می شود. یکی از مرسوم ترین مثالها در این مورد، شبه کلاسها، کلاس :hover است که هنگامیکه کاربر موس خود را روی المانی می برد، کلاس خاصی را به آن المان اعمال می کند. این کلاس، به انتخاب کننده ای متصل می شود ن

شبه کلاسها، کل المانها را انتخاب می کنند. بعنوان مثال، :link یا :visited ، درحالیکه شبه المانها عناصری را انتخاب می کنند که ممکن است از المانهای ریزتری تشکیل شده باشند، نظیر :first-line یا :first-letter.

انتخاب کننده ها ممکن است به شکلهای دیگری نیز با هم ترکیب شوند تا انعطاف پذیری بیشتری بدست آید، بویژه در CSS 2.1.                                                                                                                 

ارتباط CSS با HTML

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

الویت در منابع CSS

الویت در منابع CSS (از بالاترین به پایینترین):
CSSهای نوشته شده توسط طراحان وب سایت:

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

CSSهای کاربران:

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

CSSهای پیش فرض:

• CSSهایی می باشند که بطور پیش فرض توسط مرورگر اعمال می شوند. با وجود این CSSهای پیش فرض، نیاز نخواهیم داشت تا همه CSSهای یک المان را تعریف و پیاده سازی نماییم.

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