طراحی سایت , دستور زبان CSS

وقتی طراحی سایت انجام می دهیم باید بدانیم دستور زبان در CSS از سه بخش تشکیل شده است: یک  گزینشگر , یک خاصیت و یک مقدار. (a selector, a property and a value) :

selector {property: value}

گزینشگر همان tag/element در HTML است که می تواند خاصیت های متفاوتی داشته باشد که هر خاصیت نیز می تواند چندین مقدار داشته باشد. خاصیت و مقدار توسط دو نقطه از هم جدا می شوند و داخل یک جفت آکولاد قرار می گیرند.

body {color: black}

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

p {font-family: "sans serif"}

نکته: برای تعیین چند خاصیت باید آن ها را با یک سمی کولن ; از هم جدا کنید. مثال زیر یک پاراگراف وسط چین با رنگ نوشته قرمز تعریف می کند:

p {text-align:center;color:red}

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

p
{
text-align: center;
color: black;
font-family: arial
}

گروه سازی:

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

h1,h2,h3,h4,h5,h6 
{
color: green
}

گزینشگر کلاس – The class Selector :

با استفاده از کلاس می توانید برای یک نوع المنت html استایل های متفاوتی تعریف نمایید. برای مثال شما به دو نوع پاراگراف نیاز دارید. یکی وسط چین و دیگری راست چین! برای این کار به صورت زیر عمل می کنیم:

p.right {text-align: right}
p.center {text-align: center}

حال شما می توانید از کلاس های تعریف شده در بالا به صورت زیر استفاده کنید:

<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>

نکته : شما می توانید از چند کلاس برای یک المنت استفاده کنید:

<p class="center bold">
This is a paragraph.
</p>

پاراگراف بالا هم style کلاس bold  را دارد و هم  center را.

شما همچنین می توانید نام تگ را از گزینشگر حذف کنید ، در این صورت شما می توانید در طراحی سایت از این کلاس برای تمامی انواع المنت های html استفاده کنید. در مثال زیر تمامی انواع المنت های html با کلاس center به صورت وسط چین نمایش داده میشوند:

.center {text-align: center}

در قطعه کد زیر هر دو المنت h1 و p از کلاس center استفاده می کنند. این بدین معناست که هر دو از قوانین تعریف شده در کلاس center بهره می برند:

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

توجه: هیچگاه نام یک کلاس را با عدد شروع نکنید چرا که در مرورگر Mozilla/Firefox کار نخواهد کرد و طراحی سایت خوبی نخواهید داشت.

افزودن style به المنت با پارامترهای خاص :

قاعده زیر تمامی انواع input هایی که خاصیت type با مقدار text دارند را با رنگ آبی نمایش میدهد:

input[type="text"] {background-color: blue}

شناسه ها در گزینشگر ها:

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

قاعده تعریف شده در زیر با المنتی مطابقت خواهد کرد که خاصیت id با مقدار green داشته باشد:

#green {color: green}

استایل زیر پاراگرافی که id آن مقدار paral داشته باشد را در بر میگیرد:

p#para1
{
text-align: center;
color: red
}

توجه: هیچگاه نام یک شناسه را با عدد شروع نکنید چرا که در مرورگر Mozilla/Firefox کار نخواهد کرد.

توضیحات در سی اس اس – CSS Comments

از توضیحات برای توضیح code ها استفاده می شود. توضیحات در browser نمایش داده نمی شوند. توضیحات  را داخل /* و */ قرار می دهیم.

/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}

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

طراحی سایت , معرفی 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 میکند.

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