css

CSS  چه کاربردی دارد؟

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

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

خانه های هزاران  میلیون شخص و بر روی کامپیوترهای فرد راه پیدا کند.HTML زبانی بود که بیشتر از موارد توسعه

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

دنیای برنامه نویسی و دیزاین با گذشت زمان شکل گرفته اند را در خود جای نداده است.

CSS چیست؟

CSS یا Cascade Style Sheets زبان برنامه نویسی می باشد که کنسرسیوم بین المللی شبکه جهانی وب یا W3C

برای سلطه روی مشکلاتی که در طی زمان با استفاده از HTML شکل گرفته است پیشنهاد داده است.قطعا این زبان

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

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

کنید.برای این منظور مثالی می زنیم. فرض کنید که وبسایت شما شامل ۱۰۰ صفحه استاتیک است و شما آنها را

کلا به زبان HTML نوشته اید.بعد از یک هفته تصمیم گرفته اید تا فونت همه ی کلمات را مقداری بزرگتر کنید.گفتن این

که فونت تمام کلمات بزرگتر شود بسیار کار آسانی است و تنها یک جمله است. اما آیا در عمل دگرگونی ۱۰۰ صفحه نیز

به همان آسانی خواهد بود؟

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

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

است که، استفاده از CSS باعث تمیزتر شدن کدهای برنامه نویسی تان می شود، تغییرات آتی را راحت می کند

و همچنین دید شما را بیشتر به طراحی متمایل می کند تا سر و کله زدن با کدهای برنامه نویسی.

طریقه رابطه CSS با HTML

داده های CSS می تواند از منبع های گوناگونی تامین شوند.CSSها می توانند به شکل فایلی مجزا ضمیمه کدهای

HTML شوند و یا درون کدهای HTML قرار داده شوند. میتوان در یک صفحه، چند فایل CSS را از بیرون فراخوانی کرد.

حتی می توان  CSS های کاملا گوناگونی را برای نسخه چاپی و نسخه نمایشی تهیه و استفاده کرد.مثلا، نسخه

نمایشی  (آن چیزی که روی مرورگرها نمایش داده می شود)، می تواند کاملا گوناگون از نسخه چاپی همان صفحه

باشد طوری که طراح ها می توانند  با دقت بیشتری، احتیاج های طراحی را در این دو محیط متفاوت ، پیاده سازی و

طراحی کند.

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

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

CSSهای درون خطی: داخل کدهای HTML صفحه ها، خصوصیت طراحی برای یک المان ویژه، با استفاده از “style” معین

می شوند.CSSهای جاسازی داخلی، بلوکی از کدهای CSS داخل خود صفحه HTML

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

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

CSSهای پیش فرض: CSSهایی هستند که به طور پیش فرض توسط مرورگر اجرا می شوند.با وجود این CSSهای پیش فرض،

نیاز نداریم تا همه CSS های یک المان را پیاده سازی و تعریف کنیم.استایلی که زیاد ترین الویت را دارد، محتوای نمایش

داده شده را کنترل می کند.الویت ها به ترتیبی است که  در بالا توضیح داده شده است. اگر استایلی با الویت بالاتری

یافت نشود، الویت پایینتر مورد بررسی قرار می گیرد.بسته به نوع مرورگر مورد استفاده، کاربر می تواند از یکی از

CSSهای ارائه شده توسط طراح استفاده نمایدو یا این که همه ی آن ها را پاک می کند و صفحه را با CSSهای پیش فرض

مرورگر مشاهده نماید و یا این که ممکن است بخواهد سرتیترهای قرمز رنگ ایتالیک را بدون دگرگونی در دیگر استایلها

پاک کند.

مثال:

برای مثال، فایلی به نام highlighheaders.css حاوی محتویات زیر می باشد

h1 { color: white; background-color: orange !important; }

h2 { color: white; background-color: green !important; }

چنین فایلی به طور محلی ذخیره شده و درصورت نیاز فراخوانی و مورد استفاده قرار می گیرد و یا این که به صورت

داخلی مورد استفاده قرار می گیرد. “!important” به معنی غلبه کردن بر خصوصیت های تعریف شده توسط طراح

است.

قوانین CSS

CSS ها شکل های ساده ای دارند و از تعدادی کلمات کلیدی انگلیسی برای مشخص کردن خصوصیت های گوناگون در

طراحی استفاده می کنند. یک CSS از تعدادی قانون ها تشکیل شده است. هر یک از این قانون ها، از یک یا تعداد

زیادی انتخاب کننده یا selector تشکیل شده و هر کدام از آن ها دارای یک بلوک توصیف می باشند.بلوک توصیف، از

تعدادی توصیف شکل گرفته است که همه آن ها درون یک بلوک آکلاد  ({}) قرار گرفته اند.هر توصیف به خودی خود، از

یک مشخصه یا property، یک کالن (:)، و یک مقدار تشکیل شده است.اگر چندین توصیف در یک بلوک موجود باشد، از

سمی کالن (;)، برای جداسازی آنها استفاده می شود.در CSS، انتخاب کننده ها تعیین می کنند که خصوصیت های

طراحی، به کدام تگ یا المان می بایست اجرا شوند.انتخاب کننده ها  می توانند به همه ی المان های یک آیتم خاص

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

است بسته به اینکه در صفحه، به چه طریقی نسبت به هم قرار گرفته باشند، با یکدیگر مرتبط شوند.ارتباط المان های

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

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

در برخی حالت ها، از ID های یکتا برای عمل های بلوکی از CSS ها استفاده می شود.یکی از مرسوم ترین مثال ها در

این مورد، شبه کلاسها،   کلاس :hover است که زمانی که یوزر موس خود را روی المانی می برد، کلاس ویژه ای را به

آن المان اعمال می کند.این کلاس، به  انتخاب کننده ای وصل می شود مثل a:hover و یا #elementid:hover.

به عنوان مثالهای دیگر، می توان به شبه کلاسها و شبه  المان های :first-line و :visited یا :before اشاره کرد.

شبه کلاسها، همه ی المان ها را انتخاب می کنند. مثلا، :link یا :visited ، درصورتی که شبه المان ها عنصر هایی را

انتخاب می کنند که ممکن است از المان های کوچک تری تشکیل شده باشند،مثل :first-line یا :first-letter.

انتخاب کننده ها ممکن است به شکل های مختلف دیگری نیز با هم ادغام شوند تا انعطاف پذیری بیشتری به وجود

بیاید، به خصوص در CSS 2.1.

مثال زیر، کل قانون های بالا را در خود خلاصه کرده است

selector [, selector2, …] [:pseudo-class] {

      property: value;

     [property2: value2;

     …]

}

/* comment */