Css برای آماتورها :

Css مخفف عبارت Cascading Style Sheets است و یک زبان ساده طراحی می باشد. که به المانهای HTML اجازه اتصال طرح را می دهد. هر نوع المان را می توان به عنوان یک طرح واحد اعلان کرد. برای مثال :
margins, positioning, color or size. شما ممکن است این طرحها را به عنوان یک الگو تصور کنید که شبیه به الگوهای برنامه desktop publishing هستند. برای مثال :

روش های زیادی برای اتصال css به HTML وجود دارد که هر کدام مزایا و معایب خاص خود را دارند. المانهای جدید html و خصوصیات آنها جهت الحاق css به المانهای Html معرفی شده اند.

یک css می تواند با هر تعدادی از مستندات Html بوسیله استفاده از تگ <link> که در HEAD سند وجود دارد، متصل شود. خصوصیات متعدد تگ ها نشان دهنده چیزهای در رابطا با Style sheet ها هستند. خصوصیت rel در تگ link نشان دهنده نوع link است. خصوصیت type مشخص کننده نوع css است و خصوصیت href تعیین کننده مسیر style sheet ها است. این یک راه ساده برای فرمت بندی سایت است، همچنین برای طراحی مجدد بوسیله edit کردن یک فایل می باشد.

زمانی که شما css را به صفحه خودتان متصل کردید، سپس باید style sheet را طراحی کنید.

اگر شما مثال فوق را بعنوان یک style sheet ذخیره کرده باشید، سپس تمام صفحاتی که به آن متصل میشوند همان طرح مشابه و خاص را خواهند داشت.
فایلهای که اطلاعات style در آنها ذخیره شده حتماً باید با پسوند .css باشند.

اگر شما یک سند که دارای طرح واحد است داشته باشید شما می توانید از embedded style sheet استفاده کنید. اگر همان یک طرح در چند سند دیگر مورد استفاده قرار گیرد، پس استفاده از style sheet خارجی روش مناسب تری است.
Embedded style sheet در داخل تگ Head همراه با المانهای styleوجود دارد که روی تمام سند اجرا می شوند.

خصوصیت type که با المان link در ارتباط است، برای مشخص نمودن media type می باشد، که مورد نیاز است.
شما می توانید در مرورگرهایی که css را پشتیبانی نمی کنند، برای مخفی کردن محتوا، style sheet ها را به عنوان یک توضیح Html در که بین <!-- and --> نوشته می شود، بنویسید، که در غیر این صورت نمایش داده می شود.

شما می توانید style sheetها را با دستور @import که درcss وجود دارد استفاده کنید .

نکته : اگر بیش از یک sheet، import شده باشد آنها به صورت آبشاری به همان ترتیب که import شده اند قرار می گیرند و آخرین sheet که import شده، آخرین sheet ی که قبلاٌ بار شده را سربارگذاری می کند و به همین ترتیب...
اگر style sheet ی که import شده، با قوانینی که در sheet اصلی اعلان شده ناسازگار باشد، پس سربارگذاری می شود.

InlineStyle یک style ی است که به یک المان خاص متصل شده و هر یک از تگ های باز می توانند از خصوصیات آن استفاده کنند.

برای استفاده از inline style باید یک زبان style sheet واحد برای تمام مستندات با استفاده از پسوند content-style-sheet، HTTP اعلان شود. در زمان استفاده از Inlined css، نویسنده باید یک text/css با عنوان http header Content-Style-Type بفرستد و یا تگ زیر را در HEAD اضافه کنید.

سینتکس های پایه :

این خصوصیتی است که بوسیله (:) colon، و همچنین یک مقدار دنبال شده. یک خصوصیت به یک selector واگذار شده تا بتواند style ها را دستکاری کند.برای مثال خصوصیتها مثل color,margin,font می باشند. value مقادیری است که property دریافت می کند. اعلان چند style برای یک selector ممکن است بوسیله (;) semicolon از هم جدا شوند. مثالهای زیر نشان دهنده خصوصیت color,font-size برای المانهای H1 و P میباشند.

شما می توانید برای کاهش تکرار در style sheet ها از گروههای از selector و اعلانها استفاده کنید. برای مثال :Selectors:

Selectorها برای ارجاع دادن Style deceleration با یک المان یا المانها استفاده می شوند. این کار با قرار دادن اعلان در یک بلوک ({ }) و اجرای آن بوسیله یک selector امکان پذیر است. برای مثال :

tage selector:
شما می توانید یک تگ باز HTML برداشته و بعنوان یک selector از آن استفاده کنید.

class selectors :
این به شما اجازه می دهد که به المانها یک نام خاص بدهید. برای مثال :

در یک style sheet سینتکس ها به شکل زیر هستند:

یا به شکل :

Selectorهای Pseudo-class :
کلاسهای Pseudo می توانند بصورت جداگانه به المانهای A برای display links, visited links , active links ارجاع شوند.
المان Anchor می تواند به کلاسهای pseudo-classes link, visited, active داده شوند. یک لینک ویزیت شده یا Visited link می تواند با رنگ و یا حتی با سایزی دیگر مشخص شود، که می تواند شبیه به این باشد :

ID selectors :
این selectorها شباهت زیادی به کلاسها دارند به جز اینکه، فقط با ID ارائه شده در سند، تنها یک المان می تواند وجود داشته باشد.
ID-selector ها بوسیله نمایشگر “#” شناسایی می شوند. برای مثال :

برای استفاده از یک Id-selector :

نکته : ID ها همانند کلاسها حتماً باید با حروف کوچک باشند و نمی توانند با اعداد و حاوی فاصله باشند.
Span:
این المان می تواند در یک style sheet به عنوان یک selector مورد استفاده قرار گیرد، همچنین خصوصیات STYLE, CLASS, ID را می پذیرد. مثالی از Span در زیر آمده است.

Div:
Div که مخفف devision است یکی از المانهای بلوکی یا Block-level است، که در توابع، شباهت زیادی به Span دارد.

خصوصیات :

شما می توانید یک رنگ را شبیه به مثال زیر اعلان کنید:

Background رنگ پس زمینه المانها را تنظیم می کند. برای مثال :

نکته:
1- برای کمک به این که با style sheet های کاربر تضاد پیدا نشود، background-image زمانی که background-color استفاده شده، باید مشخص شود. در بیشتر موارد background-image: none مناسب است.
2- در netscape 4.* در صورتیکه رنگ پس زمینه با رنگ Body مغایرت داشته باشد background المان بلوکی شما را رنگ نخواهد کرد. حتی فاصله های بین کلمات را رنگ نخواهد کرد. برای جلوگیری از آن صریحاٌ border: none را تنظیم کنید.

مشخص کننده تصویر پس زمینه است :
برای مثال :

وضعیت Tile شدن تصویر پس زمینه را حالت می بخشد. و مقادیر ممکن آن شامل موارد زیر می باشند :
repeat | repeat-x | repeat-y | no-repeat.
مقدار repeat –x تصویر را بصورت افقی تکرار کرده در حالی که repeat-y آن را بصورت عمودی تکرار می کند. برای مثال :

در مثال فوق، تصویر به صورت افقی Tile می شود. IE فقط تصویر را با repeat-x به راست و با repeat-x به پایین می کشد نه به چپ و راست و بالا و پایین.
Background : این به یک یا چند خصوصیت اجازه می دهد که بترتیب color و image وrepeat وattachment و position قرار گیرند.

Font-family: این به شما اجازه می دهد که فونت خاصی را بکار برید. برای مثال :

شما می توانید چند فونت مختلف را با کاما معین کنید. در صورتی که اولین فونت وجود نداشته باشد از انتخاب دوم شما استفاده خواهد کرد.برای مثال : font family : times,arial .
دقت کنید که هر فونتی که شامل فاصله های خالی (white spaces) باشد حتمآ باید در single quote یا double quote قرار گیرد. برای مثال :

می تواند به عنوان طول مشخص شود یا یکی از کلمات کلیدی زیر :
xx-small, x-small, small, medium (initial), large, x-large, xx-large
برای مثال :

این مشخص می کند که فونت در یکی از سه حالت : normal, italic or oblique (slanted) قرار گیرد. برای مثال :

این برای مشخص کردن وزن فونت استفاده شده که می تواند normal یا bold باشد. برای مثال :

همچنین می تواند به عنوان یک عدد قطعی مثل 100,200,300,400 که شبیه به Normal است و 500,600,700 که شبیه به Bold است یا 800,900. که 100 کمرنگترین و 900 پررنگترین است. به عنوان مثال :

این می تواند به عنوان خلاصه نویسی انواع خصوصیت های فونت استفاده شود.
برای مثال :

که مثال فوق مشخص کننده یک پاراگراف با فونت bold و italic یا times و serif با سایز 12 و طول خطوط 14 می باشد.

Text-align: که مقادیر می توانند :
left (initial value), right, center, or justify (aligns to both margins).
برای مثال :

Text-decoration :این از طریق یکی از پنج ویژگی زیر به متن اجازه دکوراسیون شدن را می دهد:

این اجازه را به متن می دهد که به یکی از چهار حالت تغییر کند:
none (initial value), lowercase, uppercase, or capitalize
که capitalize اولین حف هر کلمه را بزرگ می کند.

این خصوصیت حاشیه یک المان را بوسیله تعیین نمودن اندازه یا درصد، تنظیم می کند. که هر المان می تواند یکی از چهار margin را داشته باشد :
left, right, bottom and topکه بوسیله خصوصیات : margin-left, margin-right, margin-top, margin-bottom مشخص شده اند.برای مثال :

این margin می تواند برای تمام چهار حالت در آن واحد استفاده شود.

که این به p یک top margin با 10 پیکسل و به right margin، 12 پیکسل و bottom margin ، 6 پیکسل و left margin، 8 پیکسل می دهد.

عموماً زمانی که یک selector در selector دیگری Nest شده باشد می تواند از خصوصیات selector خارجی استفاده کند. برای مثال، فونتی که برای Body مشخص شده، می تواند روی یک متنی در پاراگراف هم اعمال شود.

یک Style می تواند به عنوان یک عبارت مهم با مشخص نمودن !important باشد.

عبارت weight sort اعلانها را به ترتیب وزنشان مرتب می کند. اعلانها می توانند normal weight یا important weight باشند. اعلانها با اضافه کردن !important به عنوان important شناخته شود. برای مثال :

در اینجا به دلیل اینکه 36 pt فونت ضخیم تری می باشد، آن نمایش داده می شود .

زمانی که دو rule یک وزن داشته باشند، آخرین rule همیشه اعمال می شود.

که نتیجه رنگ سبز می دهد.
Case sensitivity : cssها به حروف کوچک و بزرگ حساس نیستند.

مترجم : فرزاد شیرزاد

---

معرفي سايت مرتبط با اين مقاله