آموزش css (جامع)

[uody]

آموزش css (جامع)

استايل (CSS) چيست؟


زبان HTML براي ايجاد يك سيستم كد سازي جهاني به وجود آمد تا بوسيله آن بتوان صفحات وب را بدون توجه به نوع كامپيوتر طراحي كرد. خاصيت مهم HTML قالب بندي ساختاري مي‌باشد ولی متاسفانه به طراحان قابلیت کنترل در همه زوایای صفحه را نمی‌دهد. برای قالب بندی و ایجاد افکت های بیشتر از CSS استفاده می‌کنیم.
در واقع CSS این امکان را ایجاد می‌کند تا طراح بتواند چندین مشخصه در طراحی صفحه را به یکباره تعیین کند بعنوان مثال خصوصیات تمامی تگهای h1 موجود در صفحه اعم از اندازه، فونت و رنگ را مشخص نمايد. و يا مشخصات ظاهري چندين صفحه را در يك فايل CSS تعيين نمايد.
CSS مخفف کلمه Cascading Style Sheets ميباشند.
نسخه های مختلف CSS به شرح زیر می‌باشد:

1- CSS1
2- CSS2
3- CSS3
4- CSS-P

[uody]

روشهای به کارگیری CSS

سه روش برای به کارگیری CSS وجود دارد:

1- محلی: (Inline) در صورتیکه تا به حال از CSS استفاده نکرده‌اید بهتر است از این روش ساده استفاده کنید، اگر چه با این روش نمی‌توان یک style را برای یک مجموعه تگ در آن واحد اعمال کرد.
در این روش درون تگ HTML ای که می‌خواهیم قالب آن را تغییر دهیم ویژگی style را مانند زیر تایپ می‌کنیم



2- داخلی: (Internal)

این روش برای صفحات مجزایی که متن طولانی دارند بسیار مناسب می‌باشد. بدین صورت می‌توان style را در بالای سند HTML برای کل متن تعریف نمود.
در اینحالت در داخل تگ < head > تگ < style > را مانند زیر تایپ کنید.



3- خارجی: (External)

در صورتیکه بخواهید از یک style در چندین صفحه استفاده کنید این روش را به کار ببرید. در این حالت می‌توان برای تمام صفحات وب ظاهر متداول و یکسانی بوجود آورد. یعنی به جای آنکه برای هر صفحه از style های داخلی استفاده کنید می‌توانید تمام صفحات را با یک style خارجی طراحی کنید.



نکته: url در یک style sheet خارجی(HREF)، مرتبط با محل فایل مذکور بر روی server می‌باشد.



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

[uody]

طریقه نوشتن CSS در روش داخلی و خارجی


طریقه نوشتن CSS در روش داخلی و خارجی به یکی از صورتهای عمومی زیر است:
فعلا فرض را بر این می‌گذاریم که selector همان تگ HTML است.



نکات مورد توجه:

- خصوصیات هر تگ بایستی بین دو علامت {} قرار داده شوند. در ضمن بین هر خصوصیت و مقدار مربوطه به آن علامت ( : ) قرار داده می‌شود.
- می‌توان چند خصوصیت از یک تگ را به یکباره تعریف نمود. در این حالت خصوصیات مختلف را با علامت ( ; ) از هم جدا می‌کنند.
- میتوان خصوصیات چندین تگ را به یکباره تعریف نمود. البته مي بايستي هر کدام از تگها را با علامت (, ) از هم جدا نمود.

به عنوان مثال:



رنگ فونت هر سه تگ را قرمز می‌کند.

- از آنجا که تمام عناصر موجود در CSS توسط Browser ها شناخته نمی‌شود بهتر است محتویات داخل تگ < style > را بین دو علامت قرار داده تا مشخصه ‌های تگ در Browserهايي كه اين عناصر را نمي‌شناسند به صورت اشتباه نشان داده نشوند.

[uody]

موارد مورد استفاده به جاي Selector


در فرمول فوق به جای selector موارد زیر را می‌توان به کار برد:

1- HTML tag



2- Class

می توان اجزا داخل سند HTML را به صورت classهای مختلف طبقه بندی نمود تا بتوان هر کدام را به ترتیب استفاده نمود.
در این حالت در تگ مورد نظر، عبارت CLASS=classname را که در آن classname نام class مناسب می‌باشد را تایپ کنید و سپس در قسمت style صفحه html مانند نمونه زیر:



نکته: از class فقط در styleهای داخلی و خارجی می‌توان استفاده کرد.

3-Contextual



4- تو در تو (Nested)

می‌توان چند تگ را به صورت تو در تو قرار داد. در این صورت توسط یک فاصله (space) آنها را از هم جدا می‌کنند.



به عنوان مثال:



تمام قسمتهایی که داخل تگ h1 توسط EM علامتگذاری شده‌اند بصورت قرمز نشان می‌دهد اما تگهای EM موجود در بقیه متون دیگر بصورت قرمز نوشته نمی‌شوند.

5-پیوندها(Link)



کلمه link را برای تغییر ظاهر پیوندهایی که هنوز بر روی آنها کلیک نشده است تایپ کنید.
کلمه visited را برای تغییر ظاهر پیوندهایی که کلیک شده‌اند تایپ کنید.
کلمه active را برای تغییر ظاهر پیوندها در زمانی که کلیک می‌شوند تایپ کنید.
کلمه hover را برای تغییر ظاهر پیواندها در زمانیکه نشانگر موس روی آنها قرار می‌گیرد تایپ کنید.

[uody]

خصوصیات تگها و مقادیر قابل الصاق به آنها


توضیح 1: اگر این قسمت از جزوه را به خوبی متوجه نمی‌شوید نگران نباشید. نحوه استفاده و کاربرد هر کدام از این خصوصیات در مثالهاي بعدي نشان داده‌شده‌است.

توضیح2: در اینجا تعدادی از خصوصیات پرکاربرد آورده شده‌است. مرجع کامل در پایان جزوه ارائه می‌شود.

[uody]

افكت زمينه عناصر صفحه - background


مثال زير نشان مي دهد كه چگونه مي توان رنگ زمينه (background) يك عنصر را تغيير داد:

چگونگي درج تصوير در background


مثال زير نشان مي‌دهد چگونه مي‌توان یک تصویر را background یک صفحه گذاشت:



منبع:freedownload

[uody]

مشخص كردن جاي Background در صفحه


چگونه جای background را در صفحه مشخص کنیم؟ در این مثال می‌خواهیم background را در مرکز صفحه قرار دهیم.

[uody]

آموزش Css - طراحی یک سایت بدون استفاده از جدول ها
بیایید به روزهای اولیه وب برگردیم . هیچ استانداردی نبود و هر مرورگر هر روز یه تگ جدید معرفی میکرد. بالاخره یه موسسه همه مرورگر ها رو سر یه میز جمع کرد و با هم استانداردی بنام W۳C را تصویب کردند . در این زمان نیاز عمده ای حس میشد که محتویات سایت از طراحی جدا شود . در اینجا بود که سر و کله CSS پیدا شد و مسئولیت نمایش نمای صفحات را بعهده گرفت و XHTML نیز برای نمایش اطلاعات بگار گرفته شد .
● چرا باید بجای جدول از کد CSS استفاده کرد ؟
▪ اول اینکه کد شما خیلی کوتاه تر میشه ، حتی نصف !
▪ دوم اینکه سرعت لودینگ سایت شما بیشتر میشه .
▪ راحت تر تغییر مییابد : شما یک فایل CSS را تغییر می دهید و کل سایت شما تغییر می یابد .
▪ مطالب از قالب سایت میشود .
در این مقاله شما یاد میگیرید چگونه بجای جداول از CSS وکلاس های آن استفاده کنید .
ساخت کلاسی برای عناصر تگ <div> : اولین قدم ساخت کلاس CSS است که المنت های تگ <DIV> از آن استفاده میکنند . بصورت زیر :
div.leftnav{
background: white;
color: black;
/* other display information here */
/* add Positioning information here */
}

این کلاس بسیار ساده است و در اصل الان کاری انجام نمیدهد . فقط متن سیاه را روی زمینه سفید تعریف میکند . شما باید از این المنت در جایی از صفحه استفاده کنید .
موقعیت یابی وابسته ساده :
این بدین معناست که ما فقط هر عنصر را در موقعیتش قرار میدهیم و بدین تعریف کردن جای دقیق آن در صفحه .
div.leftnav{
background: white;
color: black;
/* Other display information here */
width: ۱۵%;
}

خوب . ما چه انجام دادیم ؟ ما گفتیم که هدایتگر چپ باید در سمت چپ باشه ، جاییکه در صفحه قرار میگیرد . این بد نیست ، اما برای انعطاف بیشتر ممکنه شما به موقعیت یابی مطلقی نیاز داشته باشید . همچنین این خیلی مهمه که بدونین که چیزی که شما تا حالا انجام دادید موقیت نمایی اصلی نیست . تمام چیزی که تعریف کردید Width بود . بنابرین یک المنت با پهنای ۱۵% ساخته خواهد شد .
● موقعیت نمایی مطلق . اضافه کردن border و margin :
موقعیت نمایی مطلق به معنای این است که شما بگویید دقیقا المنت های شما کجای صفحه ظاهر شوند . اینکار با تعریف خاصیت های top , bottom, left , right امکان پذیر میشود :
div.content{
background: white;
color: black;
position: absolute; /* Says which positioning we are using */
left: ۱۷%; /* ۱۷% from the left side of the screen */
width: ۶۹%; /* This is the width */
}

نکته اینجاست که در کد بالا فقط خاصیت left تعریف شده، این کافیه ! نیازی نیست که شما تمامی تمام خاصیت هایش را تعریف کنید . اما برای انعطاف پذیری بیشتر ممکنه خودتون بخواهید اینکارو بکنید . بطور مثال ممکنه شما بخواهید یک منو در سمت راست اضافه کنید:
div.rightnav{
background: white;
color: black;
position: absolute;
left: ۸۳%;
width: ۱۰%;
top: ۸۰px; /* ۸۰ pixels from the top */
}

اساسا در موقعیت نمایی مطلق این المنت ها معانی زیر را دارند:
▪ Left : فاصله از چپ صفحه ، معمولا بر حسب درصد
▪ Right : فاصله از راست صفحه ، معمولا بر حسب درصد
▪ Top: فاصله از بالای صفحه ، معمولا بر حسب پیکسل
▪ Bottom : فاصله از پایین صفحه ، معمولا بر حسب پیکسل
نکته اینکه bottom به ندرت استفاده میشود ، اما گاهی لازم میشود . اگر شما از ۴ یا ۳ تا پراپرتی با هم استفاده کنید ،باید قادر به قرار دادن تگ DIV در هر کجا که میخواهید باشید . همچنین در نظر داشتن این نکته مهم است که راه های بیشتری نیز برای موقعیت نمایی یک المنت در کنار موقعیت نمایی مطلق وجود دارد . اما تمام مرورگر های وب آن راه ها را پشتیبانی نمیکنند .
● افزودن Border :
ممکنه شما بخواهید کمی عناصرصفحه را با لبه کنار صفحه یا هر چیز دیگر فاصله دهید ، border ها برای این امر مناسبند . اما صفحه خود را در مرورگر های مختلف تست کنید تا نتیجه درستی دریافت کنید . و حال طرز ساخت حاشیه ها:
div.rightnav{
background: white;
color: black;
position: absolute;
left: ۸۳%;
width: ۱۰%;
top: ۸۰px; /* ۸۰ pixels from the top */
border-color: white; /* Keep the border invisible */
border-style: solid; /* It is a solid invisible line which is fine */
border-bottom-width: ۲px; /* These attributes are pretty self-explanatory */
border-top-width: ۲px;
border-left-width: ۳px;
border-right-width: ۴px;
}

● افزودن حاشیه یا margin :
Margin ها ابزار های قدرتمندی در سایت های css میباشند .در مقدمه میبینید که شما میتوانید چیزی را بکمک تعیین فاصله درصدی از طرفین margin ها در وسط قرار دهید .
div.content{
background: white;
color: black;
margin-left: ۲۰%; /* ۲۰% from the left side of the screen */
margin-right: ۲۰%; /* ۲۰% from the right side of the screen */
}

● نقصان وجود پشتیبانی مرورگر ها :
پشتیبانی نشدن تمام دستورات css توسط تمامی مرورگر ها مشکلات زیادی را برای طراحان پیش آورده . Mozilla ( و مرورگر های زیر مجموعه آن مانند FireFox ) و Opera بروز رسانی بسیار خوبی در پشتیبانی دستورات css دارند . اما Internet Explorer کمی عقب مانده است . کد هایی که در این مقاله نوشتیم توسط تمامی مرورگر ها پشتیبانی میشود .
● ناسازگاری بین مرورگر ها :
بیشتر مردم از آخرین نسخه مرورگرها استفاده می کنند. مرورگر های گوناگون کد css شما را بگونه های مختلف تفسیر میکنند . اصلی ترین مرورگر در این زمینه IE است که ممکنه کد های border را بگونه دیگری نشان دهد .
● افزودن تگ DIV :
افزودن تگ DIV برای گره زدن تمام اطلاعات بسادگی زیر انجام پذیر است :
<div class = "leftnav">
// Insert Links
</div>

همانطور که می بینید خیلی ساده اینکار انجام شد و بیشتر کار در فایل CSS انجام میشود . شما میتوانید از تگ DIV در هرجای صفحه استفاده کنید . در انتها اینجا یک صفحه XHTML ساده را می بینید که کد css آنرا سافته و نمای آن سه ستون دارد :
<div class = "content">
// Content
</div>
<div class = "leftnav">
// Links
</div>
<div class = "rightnav">
// Links
</div>
نویسنده : حسین شرفی

[uody]

ویژگیهای مربوط به متن در css
در این قسمت به ادامه ویژگیهایی که بر روی متن ها اثر می گذارند می پردازیم.
text-transform

این ویژگی مشخص می کند که متن با استفاده از حروف بزرگ نوشته شود یا حروف کوچک و یا به صورت معمولی البته بدون آنکه در حروفی که تایپ شده است تغییری به وجود آورید. با این روش اگر خواستید قسمتی از متن مثلاً برای تأکید بیشتر با حروف بزرگ مشاهده شود نیازی نیست که دوباره آن قسمت را از اول تایپ کنید. البته این ویژگی در زبان فارسی چندان استفاده ای ندارد ولی در زبانهایی مثل انگلیسی می توانید آنرا به کار ببرید.

به یک مثال در مورد این ویژگی توجه کنید:
<div style="text-transform: uppercase">This is an example of uppercase in text-transform property.</div>
این هم نتیجه:
This is an example of uppercase in text-transform property.
همانطور که مشاهده می کنید بدون استفاده از حروف بزرگ در نوشتن کد، متن ما با حروف بزرگ نمایش داده می شود.
این ویژگی چند مقدار دارد که در اینجا مشاهده می کنید:

* none :
با انتخاب این گزینه متن به همان صورتی که تایپ شده است نمایش داده می شود.
* lowercase :
با انتخاب این گزینه متن با حروف کوچک نمایش داده می شود.
* uppercase :
این گزینه متن را با حروف بزرگ نمایش می دهد.
* capitalize :
این گزینه حروف اول کلماتی را که با حروف کوچک نوشته شده اند با حروف بزرگ و بقیه حروف را با حروف کوچک نمایش می دهد. به مثال زیر توجه کنید:

<div style="text-transform: capitalize">this is an example of capitalize value for text-transform propety</div>
متن به صورت زیر نمایش داده می شود:
this is an example of capitalize value for text-transform propety

line-height

این ویژگی به ما امکان می دهد تا ارتفاع سطر ها را مشخص کنیم. این ارتفاع می تواند به صورت درصد یا در مقیاس پیکسل باشد و فاصله بین سطرها را مشخص می کند.
برای مثال اگر بخواهیم سطرها از هم 50 پیکسل فاصله داشته باشند می توانیم به صورت زیر عمل کنیم:
<div style="line-height: 50px">بین این سطر و سطر بعدی<br>20 پیکسل فاصله وجود دارد.</div>
نتیجه به صورت زیر خواهد بود:
بین این سطر و سطر بعدی
20 پیکسل فاصله وجود دارد.

text-indent

این ویژگی مقدار تو رفتگی متن را در سطر اول هر قسمت (مثلاً سطر اول هر پاراگراف) مشخص می کند. این مقدار می تواند بر حسب پیکسل یا در صد باشد.
در مثال زیر این مقدار تو رفتگی را 30 پیکسل در نظر می گیریم:
<div style="text-intend: 30px">
سطر اول این قسمت با 30 پیکسل تو رفتگی نمایش داده می شود.<br>
در حالی که بقیه سطرها به صورت عادی و<br>
بدون تو رفتگی نمایش داده می شوند.
</div>
این هم نتیجه:
سطر اول این قسمت با 30 پیکسل تو رفتگی نمایش داده می شود.
در حالی که بقیه سطرها به صورت عادی و
بدون تو رفتگی نمایش داده می شوند.

[uody]

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

letter-spacing

ین ویژگی به ما اجازه می دهد تا فاصله میان حروف یک کلمه را در یک متن تعیین کنیم. این ویژگی می تواند مقادیری را در مقیاس پیکسل به خود بگیرد یا از مقدار normal استفاده کند. گزینه پیش فرض برای این ویژگی همان normal است. در اینجا به ذکر یک مثال در مورد این ویژگی می پردازیم:
فرض کنید می خواهیم از این ویژگی برای متن موجود در یک تگ DIV استفاده کنیم:

<div style="letter-spacing:5px">
حروف این متن با فاصله 5 پیکسل از یکدیگر نمایش داده خواهند شد.
</div>
نتیجه را به صورت زیر مشاهده خواهید کرد:
حروف این متن با فاصله 5 پیکسل از یکدیگر نمایش داده خواهند شد.

text-align

این ویژگی به ما اجازه می دهد تا نحوه قرارگیری قسمتی از متن را از لحاظ راست چین، چپ چین یا وسط چین بودن تنظیم کنیم.
این ویژگی می تواند مقادیر زیر را به مورد استفاده قرار دهد:

* left :
با استفاده از این مقدار می توانیم محتویات یک تگ را در سمت چپ صفحه نمایش دهیم. right :
این قدار معین می کند که محتویات یک تگ باید در سمت راست صفحه نمایش داده شوند.
* center :
این مقدار محتویات یک تگ را به صورت وسط چین تعریف میکند.

برای مثال اگر می خواهید متنی که در یک DIV قرار دارد به صورت چپ چین نمایش داده شود می توانیم از این ویژگی به مانند زیر استفاده کنیم:
<div style="text-align:left; border:thin dashed #00CCFF">محتویات این DIV در سمت چپ صفحه نمایش داده می شوند.</div>
نتیجه به صورت زیر خواهد بود:
محتویات این DIV در سمت چپ صفحه نمایش داده می شوند.

text-decoration

این ویژگی به ما اجازه می دهد تا برای قسمت خاصی از متن خاصیتهای از قبیل زیرخط تعریف کنیم. مثلاً فرض کنید می خواهیم یک متن را با خطی بالای آن به وجود بیاوریم. در اینجام می توانیم از این ویژگی به صورت زیر استفاده متین:
<div style="text-decoration: overline">به این متن توجه کنید!!</div>
این هم نتیجه:
به این متن توجه کنید!!
این ویژگی چندین مقدار دارد که در اینجا به آنها می پردازیم:

* none :
این گزینه به صورت پیش فرض بر روی متن اعمال می شود (البته برای لینکها به صورت پیش فرض underline اعمال می شود) و در نتیجه آن متنها به صورت ساده و معمولی نمایش داده می شوند. در صورتی که بخواهیم لینکهایی در متن ما بدون زیر خط نشان داده شوند می توانیم از این گزینه برای تگ لینک استفاده کنیم.
* underline :
از این گزینه می توان برای زیر خط دار کردن متنها استفاده کرد.
* overline :
این گزینه برای نمایش خط بالای متن استفاده می شود.
* line-through :
این گزینه یک خط را در میانه متن ایجاد می کند و آنرا به صورت خط خورده نشان می دهد.
* blink :
از این گزینه می توانیم برای چشمک زن کردن متن استفاده کنیم. البته این گزینه توسط مرورگر اینترنت اکسپلورر حمایت نمی شود و فقط در مرورگرهای Netscape نمایش داده می شود.

در اینجا یک لینک را می بینید که با استفاده از ویژگی بالا بدون زیر خط نمایش داده می شود:
<a href="#example" style="text-decoration:none>متن مورد استفاده در لینک</a>