طراحی سایت , معرفی CSS

پیش نیاز :
قبل از اینکه ادامه دهید باید مطالب زیر را بخوانید :
HTML / xHTML
اگر می خواهید مطالب بالا را بخوانید می توانید به بخش آموزش HTML در همین سایت مراجعه کنید.

CSS چیست؟

1-CSS  مخفف این واژگان است:  Cascading Style Sheets
2- سبک (Style) تعریف می کند که عناصر HTML در طراحی سایت چگونه نمایش داده شوند.
3- Styleها در حالت عادی در  برگه های Style یا همان Style Sheets قرار می گیرند.
4-Style ها برای حل کردن یک مشکل به HTML 4.0 اضافه شدند.
5- برگه های استایل خارجی (External Style Sheets) می توانند در طراحی سایت کار زیادی را برای شما صرفه جویی کنند.
6- برگه های استایل خارجی (External Style Sheets) به هنگام طراحی سایت در فایل های CSS ذخیره می شوند.
7-تعاریف Style های گوناگون می توانند با هم یکی شوند.

Style ها یک مشکل رایج را حل می کنند:

Tag های HTML در اصل برای تعریف اجزای یک صفحه یا document طراحی شده اند. برای مثال  این  tag ها می گویند ” این یک تیتر است ” یا  “این یک پاراگراف است ” یا “این یک جدول است ” با استفاده از tag هایی مثل  <h1> یا <p> یا <table> و … فرض بر این بود که وظیفه آرایش صفحات بر عهده مرورگر(Browser) است بدون استفاده از هرگونه دستور قالب بندی.

از زمانیکه دو مرورگر اصلی آن زمان – Netscape و  Internet Explorer – افزودن تگ هایی مثل <font> و یا صفاتی مقل color به HTML  اصلی را ادامه دادند طراحی وب سایت به کار سختی مبدل گشت چراکه محتوای صفحات HTML به طور کامل از آرایش  صفحه جدا شده بود.

برای حل این مشکل کنسرسيوم تار جهان گستر World Wide Web Consortium (W3C)- –  STYLE ها رابعلاوه HTML 4.0  ایجاد کرد.

Style Sheets ها می توانند کار زیادی را در طراحی سایت صرفه جویی کنند:

به هنگام طراحی سایت استایل چگونگی نمایش اجزای HTML را تعریف می کنند دقیقا مثل تگ font ویا صفت color در HTML 3.2. معمولا استایل ها در فایل های خارجی با پسوند .css ذخیره میشوند. فایلهای استایل خارجی به شما این امکان را میدهند که آرایش تمام صفحات وب سایت خود را تنها با ویرایش یک فایل CSS انجام دهید!

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

استایل های مختلف به صورت آبشاری یکی میشوند!!!

Style Sheet ها اجازه میدهند که اطلاعات سبک به روش های گوناگون تعریف شوند. سبک ها میتوانند در داخل تگ عناصر HTML ، در داخل بخش <head> یا در یک فایل .css ذخیره شوند.

ترتیب آبشار – ریزش!!؟؟؟ – به زبان ساده اولویت با کیست؟

وقتی چندین سبک برای یک عنصر HTML وجود دارد کدام سبک انتخاب خواهد شد؟

در حالت کلی میتوانیم بگوییم که همه Style Sheetها در یک Style Sheet مجازی جدید با قوانین زیر ریخته میشوند که مورد چهارم دارای بالاترین اولویت است:
1. مقدار پیش فرض مرورگر
2. فایل Style Sheet  خارجی
3. Style Sheet داخلی (سبک در قسمت <head> تعریف شده است)
4. Inline Style (سبک در داخل عناصر HTML تعریف شده است)
بنابراین ، یک Inline Style بالاترین اولویت را خواهد داشت ، که این بدین معناست که سبکی که در داخل یک عنصر HTML  تعریف شده ، مقادیر  بخش <head> ، فایل خارجی یا مقدار پیش فرض مرورگر را override میکند.

توجه: اگر فایل Style Sheet خارجی وقتی طراحی سایت انجام می دهیم زیر Style Sheet داخلی در بخش <head>  قرار گیرد ، فایل خارجی مقادیر Style Sheet داخلی را override میکند.

مترجم: به آفرید علی بخشی

شما ممکن است این را هم بپسندید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *