هو،

سلام علیکم،

با مشورت گرفتن از دوستان تصمیم بر این شد که تاپیکی برای آموزش CSS در نظر گرفته شه.

بعد از اتمام این سری آموزش اگر وقتی بود این آموزش رو به صورت تصویری ارائه خواهم داد.



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



نکته اول: سعی میکنم بر مبنای سایت http://www.w3schools.com پیش برم.



نکته دوم:این اموزش css هستش نه آموزش CSS3 ،انشاءالله فرصت بشه و مشکلی پیش نیاد شاید یه روزی آموزش اون رو هم نوشتیم.



نکته سوم: سوالات توی تاپیک جداگانه ای پرسیده شه،برای این منظور تاپیکی در نظر گرفته شده،پس داخل این تاپیک سوال ممنوع!



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



نکته پنجم:آموزشها دو روزی یک بار پست میشن تا سوالات کاربران پرسیده شه و وقت برای احیانا تمرین و رفع اشکال دوستان باشه.



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



تشکر

یا حق ج

قسمت اول: آشنایی با CSS و مقدمه ای بر اون



نکته1: برای آموزش من سعی میکنم طبق سایت معروف و کاربردی http://www.w3schools.com پیش برم تا آموزشهای منسجمی داشته باشیم.

نکته2:چند قسمت اول برای کسایی هستش که چیزی از CSS نمیدونن پس تقریبا تئوری هستش،ولی به مرور زمان بحث رو میکشونیم به عملی.



پیشنیاز چی نیاز دارید؟

خب کاملا مبرهنه! شما باید آشنایی حداقلی با HTML/XHTML داشته باشید.اگر همچین آشنایی ای ندارید پیشنهاد نمیکنم این سری اموزشها رو ادامه بدید.



CSS چیه؟

کوتاه شده ی Cascading Style Sheets هستش به معنای شیوه نامه آبشاری،همچنین:

• تعیین نحوه ی نمایش HTML.

• از HTML4.0 به بعد اضافه شده.

• شیوه نامه های خارجی میتونین استفاده کنین که کدهای منسجمی بنویسید.

• کدهای CSS خارجی در فایلی با پسوند css قرار میگیرن.

• کدهای CSS داخلی هم که داخل خود فایل HTML نوشته میشن.

اینو اضافه کنم که HTML قبل از CSS از تگهای خاصی برای فرمتدهی استفاه نمیکرد(اصلا نداشت) به جز چندتا تگ مثل:

Font,p,h1

خب اینا رو فرض کنید تو یه صفحه صدجا استفاده کرده باشید ولی ناگهان قصد
کنید که فونت کل صفحه رو عوض کنید،چی کار میکردید؟یعنی باید میشستید کل تک
تک تگهای مثلا font رو پیدا میکردید و عوضشون میکردید!چه کار وحشتناکی نه؟!

خب CSS اومد و یه همچین مشکلهایی رو حل کرد،با CSS یه خط کد کافی بود تا
عوض شه و کل فونت مثلا صفحه تغییر کنه،به همین راحتی که کلی در وقت و هزینه
صرفه جویی میشد.

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



اتمام قسمت اول/الف

CSS یه خطش دو قسمت اصلی داره یه selector و یه یا چندتا Declaration به شکل زیر:



http://goback.persiangig.com/ashiyane/html_css/css%20tutorial%20text/selector.gif





توچه: تا میتونم سعی میکنم کلمات تخصصی رو معنی نکنم به فارسی چون به نظر من خودشون بهتر معنی رو میرسونن تا معنی فارسی!



Selector معمولا همون المنت HTMLی هستش که میخواین روش نمایشش رو مشخص کنید.

هر declaration خودش دوتا قسمت داره یکی نوع خاصیت و یکی مقدار خاصیت.

هر Declaration با ; اتمام میشه.Declarationها رو دلبخواهی میتونید تو یه
خط بنویسید ولی برای استاندارد نویسی و تمیزی کار بهتره هر Declaration رو
تو یه خط یذارید.

Declarationها رو دسته جمعی یا تکی داخل براکتهای باز و بسته میذارن.

چندتا مثال میزنم تا بهتر جا بیفته :




کد HTML:

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

تو مثال بالا ما یه سلکتور داریم و دوتا Declaration،یه P یه روبروش یه براکت باز شده و انتهای کار بسته شده پس:



Selector : P

Declarations : color:red; و text-align:center;



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

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


کد HTML:

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

واضختره،نه؟؟!شما هم حتما این قاعده رو دنبال کنید.



کامنتها یا توضیحات

این کامنت گذاری چیز خوبیه حتما تو کاراتون به کار ببرید،و ازش استفاده
بهینه داشته باشید،از کامنت برای توضیحات در مورد کد ،نویسنده کد،ورژن و
... هر چیز به درد بخور استفاده میشه،مرورگر کامنتها رو نادیده میگیره،اما
چه جوری کامنت گذاری میکنن؟

به دو صورت میتونیم کامنت بذاریم:



اولی:


کد HTML:

/*This is a comment*/

دومی:


کد HTML:

//This is a comment

اولی برای تعداد زیادی کد خط هم میشه استفاده شه ولی دومی فقط مختص
یه خط هستش و یه خط رو کامنت میکنه،فقط یه مثال دیگه از اولی و دومی بزنم
برا فهم مطلب:




کد HTML:

/*
This
is
a
comment
*/
,
//This
//is
//a
//comment

فک کنم مطلبو گرفتید نه؟!



اتمام قسمت دوم/الف



پ.ن:

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

هو،

سلام علیکم،

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

ان شاءالله که با هم بتونیم تاپیک مناسبی برای یادگیری CSS ایجاد کنیم.

-----

قسمت سوم: Class و ID در CSS




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


کد HTML:

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

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

خب درست ولی حالا فرض کنید بخواین یه p خاص سبک نمایش دهی اون یه جور دیگه
باشه،چیکار میکنین؟بله! اینجا CSS به کمکتون میاد و دو خاصیت ID و Class رو
برای المنتهای HTML معرفی میکنه.



سلکتور ID:

یه سلکتور ID برای تعیین نحوه ی نمایش برای یه المنت خاص و یکتا رو مشخص میکنه.

یه سلکتور ID با خاصیت id در المنتهای HTML استفاده میشه.

کد زیر فقط روی یه المنت تاثیر میذاره که خاصیت id="para1" رو داشته باشه:




کد HTML:

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

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





سلکتور Class :

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

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

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

میشه:


کد HTML:

.center {text-align:center;}

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


کد HTML:

p.center {text-align:center;}

پس منظورم رو از المنت خاص گرفتید!خوبه! در کل با استفاده از متد
بالا میتونیم یه کلاس خاص رو به صورت کلی به یه المنت خاص تو صفحه اختصاص
بدیم،اینجا همه ی المنتهای p دارای کلاس center مد نظر هستند.

هشدار: اسم classها رو با عدد شروع نکنید،در این صورت فقط توی IE کار خواهد کرد.



----

به دوستان توصیه اکید دارم اگر خواهان یادگیری هستن این فرصت
رو از دست ندن و پیگیری کنن و سوالاتشون رو تو بخش سوال و جواب HTML/CSS
بپرسن،همچین فرصتی کم پیش میاد،استفاده کنید.

موفق باشید



یا امام رضا علیه السلام

هو،

سلام علیکم،



قسمت چهارم: کدهای CSS کجاها و چه جوری قرار میگیرن؟!




سه راه برای اعمال کدهای css هستش:


کد HTML:

• External style sheet
• Internal style sheet
• Inline style

یا:

• شیوه نامه خارجی

• شیوه نامه داخلی

• شیوه نامه درون خطی(اینجاست که باید از خود کلمه اصلی استفاده کنیم: شیوه نامه Inline)





• External style sheet


این نوع بهترین حالت برای استفاده در چندین صفحه ست،که با یه تغییر کوچولو
کلی صفحه رو متاثر کنه!البته به شرطی که اون صفحات این فایل css رو لینک
کرده باشن،اینم بگم برای لینک کردن از تگ استفاده
میشه،اینجوری:


کد HTML:

یه شیوه نامه خارجی رو میتونید با هرنوع ویرایشگری بنویسید البته
نباید حاوی هیچ نوع تگی به صورت HTML باشه،ضمنا باید با پسوند css هم ذخیره
شده باشه.



هشدار:مابین propertyها و value ها فاصله نذارید با
اینکه توی IE کار میکنه ولی به هیچ عنوان توی فایرفاکس و اپرا ج.اب
نمیده(اشتباه : margin-left:20 px درست : margin-left:20px ).



• Internal style sheet


این نوع استایل دهی بهتره زمانی استفاده شه که یه استایل شیت بیشتر ندارین
اونم برا یه صفحه نه بیشتر،اون موقع از این روش استفاده میکنیم و داخل همون
فایل HTML و با کمک تگ کدها رو مینویسیم.این تگ رو باید
داخل تگ head بذارید:


کد HTML:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

• Inline style


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

چون محتوا رو با نحوه ی نمایش قاطی میکنه(اگه بدونید MVC چیه میفهمید چی میگم.)

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


کد HTML:

This is a paragraph.

چندتا نکته:

الف- هر سه ی این روشها رو میتونید با هم به کار ببرید.

ب- اگه هر سه رو باهم به کار بردید ،اونموقع اولیوت میاد روی کار،یعنی به ترتیب زیر css تاثیر میذاره:


کد HTML:

• اول: Inline style
• دوم: Internal style sheet
• سوم: External style sheet
• چهارم: پیشفرضهای خود مرورگر

یعنی بر فرض مثال اگر توی هر چهار نوع بالا برای المنت مثلا h1 یه
رنگ رو انتخاب کرده باشید،اون رنگی به المنت h1 نسبت داده میشه که توی
Inline Style باشه.و در کل به ترتیب بالا.

ج-اگه یه استایل شیت خارجی که داخل تگ head هستش بعد از استایل شیت داخلی لینک شده باشه استایل شیت داخلی به کلی نادیده گرفته میشه

د-تگهای style و link رو حتما داخل تگ head استفاده کنید.



------

هشدار:چه استقبال گرمی!!!!

------

یا حق ج

هو،

سلام علیکم،

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

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

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

موفق باشید.

یا حق ج

بخش دوم:استایل دهی با CSS






قسمت پنجم: استایل دهی پشت زمینه-BackGround Styling


خاصیت background در css برای اعمال افکتهای خاص به یه المنت خاص استفاده میشه:


کد HTML:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

تک تک موارد بالا رو توضیح میدم:



Background Color



این خاصیت یه رنگ رو به پشت زمینه اختصاص میده.

مثلا بک گراند یه صفحه رو توی المنت body اعمال میکنن،اینجوری:


کد HTML:

body {background-color:#b0c4de;}

نکته:در اغلب موارد تو css برای تعیین رنگ از روشهای زیر استفاده میکنن:


کد HTML:

• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"

مثلا:




کد HTML:

p
{
background-color: #ff0000;
}
p
{
background-color:rgba(255,0,0,0.5);
}
p
{
background-color:red;
}

مابقی نحوه ی رنگ دهی رو میتونید اینجا ببینید:


کد HTML:

http://www.w3schools.com/css/css_colors_legal.asp

Background Image




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


کد HTML:

body {background-image:url('paper.gif');}

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



Background Image - Repeat Horizontally or Vertically – تکرار پشت زمینه به صورت عمودی و یا افقی




به صورت پیشفرض Css پشت زمینه رو هم به صورت عمودی و هم به صورت افقی تکرار
میکنه،برا همین کل صفحه رو میپوشونه،ولی بعضی مواقع لازمه که عکسی رو فقط
به صورت عمودی یا افقی تکرار کنیم،اینو اینجا اینجوری انجام میدیم:


کد HTML:

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

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


کد HTML:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

تو مثال بالا فرض کنید عکس یه بار تکرار شد و افتاد سمت چپ پس زمینه و
ما خواستیم بیاریمش سمت راست البته بالا! ،اینجا از یه خاصیت دیگه استفاده
میکنیم،ببینید:


کد HTML:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

از خاصیت background-position و مقدار right و top با هم استفاده شده،یعنی:بالا و راست.



حالا یه خبر خوب بهتون بدم!

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


کد HTML:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

ترتیب یادتون نره:


کد HTML:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

نکته:حفظ کردنش سخت نیست:سیراپ یا CIRAP .

نکته:مهم نیست بعضی از خواص نباشه،میتونه باشه یا نباشه،مثلا شاید کسی
نخواد از خاصیت backrround-attachment استفاده کنه ،خب تو فرمول بالا هم
لازم نیست بیاردش فقط ترتیب رعایت شه.



اتمام قسمت پنجم/الف

یا حق ج

هو،

سلام علیکم،



--

رنگدهی متن


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

همونطور که قبلا هم گفتیم تو CSS رنگدهی معمولا اینجوری تعریف میشه:


کد HTML:

• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"

مثال میزنم:


کد HTML:

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

هشدار:طبق سازمان W3C من بعد اگر برای المنتی از خاصیت color استفاده کنین باید حتما ازخاصیت background-color هم استفاده کنین.



تراز کردن متن


این خاصیت متن رو به صورت افقی تراز و تنظیم میکنه،مثلا به سمت راست،چپ و یا وسط و همچنین justified

در مورد این justified یه کم توضیح بدم:ببینید وقتی متنی این خاصیت رو
داشته باشه اولا عرض هر خط به یک اندازه ست و دوما فاصله سمت راست متن با
سمت چپ متن از حاشیه به یک اندازه در میان،مثا کتابهای چاپی.


کد HTML:

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

این نکته رو بگم که این ترازبندی دقیقا همون ترازبندی توی ورد هست،یه
نگاه بندازید هر چهار مورد این ترازبندی رو اونجا هم خواهید دید.



تزیین کردن متن یا به قول خارجیا: Text Decoration
این
خاصیت تزیینی(Decoration) رو به متنمون اضافه میکنه یا از اون حذف
میکنه،از این خاصیت به کرار تو حذف کردن زیرخط از متنهای لینکها که یه جور
تزیینه استفاده میشه:


کد HTML:

a {text-decoration:none;}

این خاصیت مقادیر زیر رو هم میپذیره:


کد HTML:

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

اولی یه خط بالای متنمون میکشه دومی روی متنمون و سومی زیر خطمون و
چهارمی متن رو به صورت چشمک زن در میاره،البته این چشمک زن تو بعضی
مرورگرها یادمه که کار نمیداد،تستش کنید.





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



تغییر دهی متن یا : Text Transformation
با مثال توضیح میدم:


کد HTML:

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

اولین خط متنمون رو کلا به حروف بزرگ تبدیل میکنه و دومین خط برعکس
این کار رو انجام میده وسومین خط فقط حروف اول هر کلمه رو بزرگ
میکنه.(البته برای زبان فارسی کاربرد نداره)



تو دادن متن یا : Text Indentation


این خاصیت اولین خط از اون متن رو به مقدار تنظیم شده تومیده و تورفتگی
ایجاد میکنه،مثل نامه های اداری که اولشو یه کم میدن تو(زبان فارسی که
یادتونه؟! )


کد HTML:

p {text-indent:50px;}

------------

دوستان نظری ؟انتقادی ؟پیشنهادی؟ . . .

اتمام قسمت ششم/الف

موفق باشید

یا حق ج

هو،

سلام علیکم،

قسمت هفتم: کار با فونت

این خاصیت برای تغییر دهی فونت،اندازه ،ضخامت و استایل دهی و ... یه متن استفاده میشه.



خانواده های فونت در CSS

تو CSS دو نوع اسم برای فونتها استفاده میشه:

• با اسم خانواده و به صورت کلی:مثل خانواده های "Serif" و"Monospace"

• یه فونت خاص: مثل "Tahoma" و "Arial"



Font Family




• فونت یه متن با این خاصیت مشخص میشه،البته به دو روشی که بالا گفتم،چند تا نکته داره که میگم:

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

• دوم اینکه فونتهای بیشتر از یکی رو با کاما جدا کنید

• و سوم اینکه اگه اسم فونتی فاصله داشت حتما از دابل کوتیشن اتستفاده کنید.



مثالها رو ببینید:


کد HTML:

p{font-family:"Times New Roman", Times, serif;}

از خانواده serif آخر کار و از فونت Times New Roman که فاصله داره با کوتیشن اول کار استفاده شده و فونتها با کاما از هم جدا شده.



Font Style


با این خاصیت میتونید سه حالت به متن بدید:

• Normal : به صورت معمولی نشون داده میشه متن.

• Italic : فونت ایتالیک نوشته میشه،یعنی یه کمی کج.

• oblique : اینم جلوه مخصوص به خودشو داره،تست کنید حتما.




کد HTML:

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Font Size




از اسمش مشخصه،نه؟!

سایز و اندازه متن رو مشخص میکنه.البته خود HTML هم یه اندازه هایی داره به
صورت پیشفرض،مثلا برای هدرها و تیترها تگ های H1 تا H6 رو داره با اندازه
مشخص و برای پاراگراف تگP روداره که توصیه میشه از اینها هم به جا استفاده
کنید.

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

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

1. وقتی میخواین متن رو رو یه اندازه مشخص تنظیم کنید.

2. وقتی نمیخواین کاربر بتونه اندازه متن رو تو مرورگرش تغییر بده(که از لحاظ اصل دسترسی کاربر توصیه نمیشه)

3. و وقتی که سایز چاپی و خروجی تعیین شده و یه اندازه مشخص باشه.



• به صورت نسبی:به صورت نسبی که دقیق نیست،باز بهتره که:

1. تنظیم اندازه نسبت به سایر عناصر اطراف

2. اجازه به کاربر جهت تنظیم دلخواه اندازه توسط مرورگرش.

هشدار:اگه اندازه خاصی رو برای متن تنظیم نکنید،مرورگر خودش اندازه 16 پیکسل رو به پاراگرافها و متنهای معمولی تخصیص میده.



اندازه دهی با Pixels


تنظیم اندازه با پیکسل کنترل کاملی به شما روی سایز متن میده.


کد HTML:

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

نکته: تو اندازه دهی های بالا مرورگرهای فایرفاکس،کروم،سافاری اجازه تغییر اندازه متن رو به کاربر میدن ولی اینترنت اکسپلورر نه!

نکته2:البته میتونید کل صفحه رو زوم کنید ،اینجوری تو همه ی مرورگرها متن هم با عناصر بزرگ میشه.



اندازه دهی با Em


این نوع اندازه دهی توسط سازمان W3C هم توسعه میشه،ضمن اینکه طراحان برای
مشکل تغییر اندازه در مرورگر IE از EM به جای Pixel استفاده میکنن.

یک Em معادل اندازه پیشفرض و جاری مرورگره،که پیشفرضش تو مرورگر 16 پیکسل هستش،پس یک Em معادل 16 پیکسله،فرمولشم اینه:


کد HTML:

pixels/16=em

مثالها رو ببنید:


کد HTML:

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

نکته:با اندازه دهی به این سبک امکان تنظیم اندازه متن برای کاربر در همه مرورگرها بوجود میاد.



ترکیب درصد و Em


یه راهی هست که بشه تو همه ی مرورگرها هم قابلیت زوم داشته باشه هم تغییر
اندازه،اونم اینه که اندازه فونت المنتBody رو تنظیم کرد و اونم با
درصد،اینطوری:


کد HTML:

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

اتمام قسمت هفتم/الف



یا حسین ع

هو،

سلام علیکم،

-----------



قسمت هشتم: کار با لینکها


کار با لینکها جذابه و کاربردی،سعی کنید قشنگ یاد بگیرید

استایل دهی لینکها با هر خاصیت CSS قابل اعمال هستش،مثلا میتونید پشت زمینه
بدید،رنگشو تعیین کنیدو...ولی برای خود لینکها بسته به وضعیتشون چهار
استایل متفاوت میگیرن:


کد HTML:

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

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


کد HTML:

a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */

نکته:به این خاصیتی که بعد از دونقطه قرار میگیره میگن کلاس کاغب،تو ذهنتون باشه!

هشدار:اگر خواستید این چهارتارو باهم استفاده
کنید،ترتیب مهمه،به همین ترتیبی که بالا نوشتم باید عایت شه،برای راحتی کار
این تو ذهنتون باشه:LoVe&Hate





استایل دهی های رایج برای لینکها




Text Decoration



کد HTML:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Background Color





کد HTML:

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

و خاصیتهایی مثل:Color,Font-size,Font-family,..



اتمام قسمت هشتم/الف

-----------

یا سجاد ع

هو،

سلام علیکم،

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



قسمت نهم: کار با لیستها

توی HTML ما دو نوع لیست داریم،مرتب و نامرتب! لیستهای مرتب با
اشکال(نشانگر یا مارکر) نشون داده میشن و ایستهای نامرتب با اعداد و یا
حروف.با CSS میشه اینارو دستکاری کرد.



تغییر مارکر لیست

با خصوصیت list-style-type میتونیم این کار رو بکنیم،ملاحظه بفرمایید:


کد HTML:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

دو لیست دهی اول مربوط به لیستهای نامنظمه و دو تای آخری هم مربوط به
منظما،تو مثال بالا لیستی با کلاس a رو مارکرشو به دایره تغییر داده و
لیستی با کلاس b رو با مربع!

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



تعیین تصویر برای مارکر

حتی میتونید مارکر رو یه تصویر دلخواه هم قرار بدید:


کد HTML:

ul
{
list-style-image: url('sqpurple.gif');
}

نکته : مارکرها به سبک بالا رو مرورگرها مثل هم نشون نمیدن،IE و Opera یه کم از FF و کروم بزرگتر نشون میدن!



اما یه راه حل هست برای نمایش یکسان تو مرورگرها:


کد HTML:

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

توضیح میدم: ما برای list-style-type از مقدار none استفاده
کردیم که مارکری نشون نده،البته برای تگ ul. بعدش padding و marging رو یه
مقدار ثابت و صفر دادیم که تو همه یمرورگرها یه مقدار داشته باشه.

برای لیست هم اول یه عکس بعنوان مارکر هر لیست تنظیم کردیم و بعد بهش گفتیم
که حق تکرار پشت زمینه رو نداره(no-repeat) موقعیت پس زمینه رو هم مخص
کردیم و درآخر مت داخل لیست رو یه ک از سمت چپ فاصله دادیم.



خلاصه نویسی خاصیتهای لیست

خب اینم چون جندتا خاصیت داره میشه همشو با یه ترتیبی با هم و یه جا نوشت:


کد HTML:

ul
{
list-style: square url("sqpurple.gif");
}

ترتیبم که میدونید باید رعایت شه:


کد HTML:

• list-style-type
• list-style-position (for a description, see the CSS properties table below)
• list-style-image

هر کدوم از مقادیر هم نباشه میشه مابقیشو نوشت،مثلا از سه تا فقط دوتاشو ست کرد.

--

تو قسمت بعد با استایل دهی جداول کار خواهیم کرد.

اتمام قسمت نهم/الف



یا حق ج

هو،

سلام علیکم،

قسمت دهم: کار با جداول

خب بالاخره قسمت دهم هم رسید!

تو این قسمت خواص مربتط با جداول رو بررسی خواهیم کرد،اسامی رو به زبان اصلی خوام آورد،سوالی بود بپرسید.



Table Borders

یه خط دور برای جدول میکشه،حاشیه یا همون مرز هم بهش میگن.


کد HTML:

table, th, td
{
border: 1px solid black;
}

اگه مثال بالا رو اجرا کنید،میبینید که یه جورایی جدول انگار Border
دوتایی هستش یا دوبله،این به خاطر اینه که هم المنتهای Table,Th,Td هرکدوم
یه حایه میگیرن و اینجوری دوبل نشون داده میشه!اما اگه بخواین که اینجوری
نشه مورد بعد رو ببینید.



Collapse Borders

این خاصیت دو تا مقدار میگیره،collapse و seprate تو حالت اول حاشیه های
داخلی و خود جدول به عنوان یه حاشیه واحد ظاهر میشن و در حالت دوم که حالت
پیشفرضه حاشیه های درونی و خود جودل هرکدوم به صورت مجزا نمایش داده میشن.


کد HTML:

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

Table Width and Height

مشخصه،مگه نه؟طول و عرض رو مشخص میکنه.


کد HTML:

table
{
width:100%;
}
th
{
height:50px;
}

Table Text Alignment



متنهای داخل جداول به دو صورت عمودی و افقی میتونن قرار بگیرن.

افقی:


کد HTML:

td
{
text-align:right;
}

عمودی:


کد HTML:

td
{
height:50px;
vertical-align:bottom;
}

Table Padding

فاصله حاشیه(Border) رو با محتویات جدول مشخص میکنه.


کد HTML:

td
{
padding:15px;
}

Table Color

تو مثال زیر رنگ متن،رنگ پشت زمینه و رنگ حاشیه رو مشخص کردیم.


کد HTML:

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

اتمام قسمت دهم/الف

یا حق ج