آموزش چندرسانه اي CSS

[saeedtrb]

سلام دوستان براي ساده تر كردن يادگيري طراحي سايت تصميم به ساخت اين مجموعه آموزش گرفتم تا شما دوستان هم بتونيد راحت وسريع طراحي سايت با CSS را فرا بگيريد
قسمت اول اين مجموعه شامل بخش هاي زير مي باشد :

ساختار CSS
گزینشگرها یاselector
ID آیدی
کلاس :class
روش هاي اعمال شیوه نامه به سند

شما مي توانيد از لينك زير بخش اول اين مجموعه را دانلود كنيد
http://dssdesigner.gigfa.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-css-%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1-css/#respond
با نظرات مفيد خود ما را تا پايان راه همراهي كنيد
تهيه شده در سايت http://dssdesigner.gigfa.com

[saeedtrb]

سلام دوستان
خوب دوستان تا اينجا با ساخطار CSS‌ آشنا شديد اگه هم متوجه نشديد مشكل نداره داخل آموزش ها با ساختار آن به خوبي آشنا خواهيد شد.خوب تو اين جلسه مي خوام براتون در مورد حاشيه ها يا border و پس زمينه صفحه يا background توضيح بدم
اين قسمت شامل بخش هاي زير مي باشد :

تعریف تگ <div>
تعریف خاصیت پس زمینه صفحه یا background و انواع آن
تعریف خاصیت حاشیه ها یا border و انواع آن
تعریف کدهای مخصوص مرورگرها برای پشتیبانی از کد CSS3

شما مي توانيد از لينك زير بخش اول اين مجموعه را دانلود كنيد
http://dssdesigner.gigfa.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-css-%D8%AD%D8%A7%D8%B4%D9%8A%D9%87-%D9%87%D8%A7-%D9%88-%D9%BE%D8%B3-%D8%B2%D9%85%D9%8A%D9%86%D9%87-%D9%87%D8%A7/

[saeedtrb]

سلام دوستان
با مجموعه خواص ارائه شده در این قسمت می توان نحوه و مکان نمایش عناصر را در صفحه را توسط CSS مشخص كرد
اين قسمت شامل بخش هاي زير مي باشد :

تعریف و نحوه استفاده از خاصیت Margin
تعریف و نحوه استفاده از خاصیت Padding
تعریف مدل کادری Box Model و نحوه استفاده از آن
تعریف و نحوه استفاده از خاصیت Float
تعریف و نحوه استفاده از خاصیت Display

شما مي توانيد از لينك زير بخش اول اين مجموعه را دانلود كنيد
http://dssdesigner.gigfa.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-css-%D9%86%D8%AD%D9%88%D9%87-%D9%88-%D9%85%DA%A9%D8%A7%D9%86-%D9%86%D9%85%D8%A7%D9%8A%D8%B4-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1/

[saeedtrb]

سلام دوستان يكي از دوستان به من گفت اين كاره شما جنبه تبليغاتي داره به همين دليل تصميم گرفتم متن كامل آموزش ها رو بزارم و دوستاني كه نياز به فيلم آموزشي اين مجموعه دارن ميتونند از طريق سايت منبع كه لينكش در انتهاي هر پست است دانلود كنند
با مجموعه خواص ارائه شده در اين قسمت می توان ظاهر متون و نوشته هاي صفحه را تنظیم کرد
خصوصيت font-familyبراي تنظيم نوع قلم كاربرد دارد و به صورت زير استفاده مي شود:
font-family:نوع قلم ;
مثال:
font-family :Tahoma;
نكته:شما مي توانيد چند نوع قلم را مشخص كنيد كه اگر قلم اول در رايانه كاربر وجود نداشت از اولويت بعدي استفاده كند مانند:
font-family: اولويت اول , الويت دوم , … ;
مثال :

font-family : Tahoma,Geneva,sans-serif ;
خصوصيت font-sizeبراي تنظيم اندازه قلم كاربرد دارد و به صورت زير استفاده مي شود:
font-size: سايز قلم ;
مثال :
font-size: 12px ;
خصوصيت font-styleبراي تنظيم حالت قلم كاربرد دارد كه داراي انواع زير مي باشد:
نوع خاصيت شرح
Italic حروف متن به صورت کج نمایش داده می شود .
Normal حروف متن به صورت معمولی نمایش داده می شود .
Oblique همان مقدار italic است و حروف متن را به صورت کج نمایش می دهد .
مثال :

font-style: نوع خاصيت ;
font-style: italic ;
خصوصيت font-variant براي تبديل حروف كوچك به بزرگ كاربرد دارد كه داراي انواع زير مي باشد :
نوع خاصيت شرح
small-caps موجب می شود تا حروف کوچک متن به حروف بزگ تبدیل شوند
Normal حالت معمول را براي متن د رنظر می گیرد
مثال :

font-variant: نوع خاصيت;
font-variant: small-caps ;
خصوصيت font-weightبراي تنظيم میزان ضخامت متن كاربرد دارد كه داراي انواع زير مي باشد:
نوع خاصيت شرح
100 تا 900 تعيين كنند ضخامت به ميزان عدد مشخص شده است
Bold معادل با 700
Bolder ضخامت بیش از ضخامت فونت تگ پدر يا تگ قبلي خود را در نظر مي گيرد .
Lighter ضخامت كمتر از ضخامت فونت تگ پدر يا تگ قبلي خود را در نظر مي گيرد .
Normal معادل با400
مثال :
font-weight: مقدار ;
font-weight: 600 ;

خصوصيت fontميانبري براي خصوصيات تعريف شده بالا است و به صورت زير تعريف مي شود:
Font: font-style font-variant font-weight font-size font-family;
Font: italic small-caps bold 45px Tahoma, Geneva, sans-serif;

خصوصيت colorبراي تنظيم رنگ متن كاربرد دارد و به صورت زير تعريف مي شود:
Color: رنگ متن ;
مثال :
Color: #CCC ;

خصوصيت line-heightبراي تنظيم ارتفاء خطوط متن كاربرد دارد و به صورت زير استفاده مي شود:
line-height: مفدار ارتفاء;
مثال :
line-height: 20px;
خصوصيت word-spacing براي تنظيم فاصله بين كلمات كاربرد دارد و به صورت زير استفاده مي شود:
word-spacing:ميزان قاصله ;
مثال :
word-spacing: 20px ;
خصوصيت Letter-spacing براي تنظيم فاصله بين حروف كاربرد دارد و به صورت زير استفاده مي شود:
Letter-spacing:ميزان قاصله ;
مثال :
Letter-spacing: -1px ;
خصوصيت text-alignبراي تنظيم تراز محتویات یک تگ كاربرد دارد كه داراي انواع زير مي باشد :
نوع خاصيت شرح
Center محتويات را وسط چين مي كند
Justify محتويات را به صورت منظم نمايش مي دهد.
Left محتويات را چپ چين مي كند
Right محتويات را راست چين مي كند

مثال :
Text-align: Center ;
خصوصيت text-decorationبراي تنظيم نحوه نمايش متن كاربرد دارد كه داراي انواع زير مي باشد :
نوع خاصيت شرح
blink اين مقدار باعث مي شود متن به صورت چشمك زن نشان داده شود.
line-through خطی بر روي متن ایجاد می کند .
None مقدار پیش فرض است وتغييري به متن نمی دهد . از اين خاصيت براي حدف خط زير لينك استفاده مي كنند.
Overline خطی در بالاي متن ایجاد می کند .
Underline خطی در زير متن ایجاد می کند .

مثال :
Text-decoration: none ;
خصوصيت text-indent براي تنظيم میزان تورفتگی اولین خط یک متن كاربرد دارد و به صورت زير استفاده مي شود:
text-indent: مقدار ;
مثال :
text-indent:10px;
خصوصيت text-transform براي تنظيم بزرگ يا كوچك نشان دادن حروف متن كاربرد دارد و داراي انواع زير مي باشد:
نوع خاصيت شرح
capitalize اين مقدار باعث مي شود تا اولین حرف تمامی کلمات متن را به حروف بزرگ تبديل مي كند
lowercase اين مقدار باعث مي شود تا تمامي حرف کلمات متن را به حروف كوچك تبديل مي كند.
None هیچ تغییري بر روي متن ایجاد نمی کند
uppercase اين مقدار باعث مي شود تا تمامي حرف کلمات متن را به حروف بزرگ تبديل مي كند.

مثال :
text-transform : capitalize ;

خصوصيت text-shadow براي تنظيم سايه براي متن كاربرد دارد و به صورت زير استفاده مي شود:
Text-shadow: رنگ سايه ميزان وضوح سايه تنظيم ارتفاء سايه تنظيم فاصله سايه از متن ;
مثال :
Text-shadow:1px 2px 10px #CCC;
نوع مرورگر كد مرورگر مثال
-moz -moz- Text-shadow: 1px 2px 10px #CCC;firefox
-webkit -webkit- Text-shadow: 1px 2px 10px #CCC;chrome
خاصيت Text-shadow توسط اين مرورگر IE پشتيباني نمي شود
-o -o- Text-shadow: 1px 2px 10px #CCC;opera

خصوصيت columns براي تنظيم سايه براي متن كاربرد دارد و به صورت زير استفاده مي شود:
columns : column-width column-count ;
column-width این پارامتر میزان عرض و پهنای هر ستون را در چیدمان متن تعیین می کند
column-count این پارامتر تعیین کننده تعداد ستون های متن است
مثال :
Columns: 100px 2;
نوع مرورگر كد مرورگر مثال
-moz -moz- Columns: 100px 2;
-webkit -webkit- Columns: 100px 2;
خاصيت Columns توسط مرورگر IE پشتيباني نمي شود
-o -o- Columns: Source 100px 2;
لينك منبع :http://dssdesigner.gigfa.com