آموزش خواص مقدماتی Css

برای کار با css و طراحی سایت باید ابتدا مقدماتی را در این زمینه بیاموزید. در این بخش از مقالات شرکت طراحی سایت مبنا ، مقدمات css را آموزش داده ایم. تمام نکات ابتدایی که برای شروع طراحی سایت با css لازم به یادگیری است، در این بخش ارائه شده است. css دارای خواص و ویژگی های مختلفی است که برای کار با آن باید در نظر گرفته شوند. در بخش آموزش خواص مقدماتی css ، ویژگی های پایه ای که برای کار با css و طراحی سایت باید بیاموزید را شرح داده ایم. شما می توانید با مطالب ارائه شده در این بخش به راحتی برای طراحی سایت با css گام بردارید.

ویژگی vertical-align در css

در این قسمت از آموزش CSS ، ویژگی Vertical-Align را برای شما توضیح می دهیم.
ویژگی Vertical-Align خاصیت نحوه ی ترازبندی عمودی عنصر را در عنصر دربرگیرنده آن تعیین می کند که دارای چندحالت می باشد که عبارتند از :
Baseline,Top,Text-Top : این حالت عنصر را در بالای عنصر دربرگیرنده آن قرار می دهد.
Middle : این حالت عنصر را در وسط عنصر دربرگیرنده ی آن قرار می دهد.
Sup : این حالت در طراحی سایت عنصر را به صورت زیرنویس(درپایین)عنصر در برگیرنده ی آن قرار می دهد.
Super : این حالت عنصر را به صورت بالانویس(بالای)عنصر دربرگیرنده ی آن قرار می دهد.
Bottom,Text-Bottom : با تنظیم این ویژگی در طراحی سایت ، عنصر در پایین عنصر دربرگیرنده ی آن قرار می گیرد.
Length : این حالت مکان عمودی مورد نظر را از بالا برحسب واحدی مانند پیکسل و یا نقطه قرار می دهد.

ویژگی border-collapse در css

در این قسمت از آموزش CSS ، ویژگی Border-Collapse را برای شما توضیح می دهیم.
ویژگی Border-Collapse نحوه ی نمایش حاشیه یک جدول را به دو حالت درمی آورد که عبارتنداز:
Collapse :در این حالت در طراحی سایت خطوط حاشیه خانه های درونی جدول با خطوط حاشیه بیرونی جدول،در قالب یک خط ترکیب شده و یک واحد را تشکیل می دهند.
Seprate :در این حالت خطوط حاشیه خانه های درونی جدول با خطوط حاشیه بیرونی به صورت مجزا از هم نمایش داده می شوند،که حالت استاندارد HTML می باشد.

ویژگی border-spacing در css

در این قسمت از آموزش CSS ، خاصیت Border-Spacing را برای شما توضیح می دهیم.
خاصیت Border-Spacing در طراحی سایت میزان فاصله بین خطوط حاشیه خانه های درونی جدول را با خطوط حاشیه دور جدول بر حسب واحدی مانند پیکسل یا نقطه تعیین می کند.
توجه داشته باشید که این خاصیت  فقط زمانیکه خاصیت Border-Collapse روی مقدار Seprate تنظیم شده باشد ایجاد می شود.

ویژگی caption-side در css

در این قسمت از آموزش CSS ، خاصیت Caption-Side را برای شما توضیح می دهیم.
خاصیت Caption-Side موقعیت قرارگیری عنوان جدول را تعیین می کند این عنوان توسط تگ Caption در طراحی سایت ایجاد می شود. خاصیت Caption-Side دارای چهار حالت می باشد که شامل:

Top : این حالت عنوان به سمت بالای جدول هدایت می کند.
Right : این حالت عنوان را به سمت راست جدول منتقل می کند.
Bottom : این حالت عنوان را به سمت پایین جدول در طراحی سایت هدایت می کند.
Left : عنوان را سمت چپ می برد.

ویژگی empty-cells در css

در این قسمت از آموزش CSS ، ویژگی Empty-Cells را برای شما توضیح می دهیم.
ویژگی Empty-Cells تعیین می کند که خانه های خالی جدول و همچنین خطوط حاشیه های آن ها مورد نمایش قرار گیردو یا خیر.این ویژگی در طراحی سایت دارای دو حالت می باشد که عبارتند از:
Show : این حالت خانه های خالی و خطوط حاشیه آن ها را نمایش می دهد.

Hide : این حالت خانه های خالی و خطوط حاشیه را نمایش نمی دهد،این حالت به صورت پیش فرض می باشد.

 ویژگی table-layout در css

 در این قسمت از آموزش CSS ، ویژگی Table-Layout را برای شما توضیح می دهیم.
ویژگی Table-Layout الگوریتم نمایش جدول را نشان می دهد.این ویژگی دارای دو الگوریتم برای طراحی جدول می باشد که عبارتند از :
الگوریتم نمایش اتوماتیک-Auto : این الگوریتم عرض ستون های جدول برحسب محتویات درونی آنها را در طراحی سایت تنظیم می کند .این الگوریتم جدول ها را کمی کند عمل می کند زیرا ابتدا باید محتویات جدول را پردازش کند.
الگوریتم نمایش ثابت-Fixed : در این الگوریتم عرض و ارتفاع جدول و همچنین خانه های آن را برحسب مقادیر تعیین شده توسط کاربر تنظیم می کند و به محتویات درونی آن ها توجهی ندارد بنابراین سرعت پردازش آن بیشتر می باشد.

ویژگی font-size در css

در این قسمت از آموزش CSS ، ویژگی Font-Size را برای شما توضیح می دهیم.
با استفاده از ویژگی Font-Size در طراحی سایت سایز قلم متن را انتخاب می کنند.این خاصیت دارای حالت های مختلفی می باشد که عبارتنداز:
Xx-Small : این قلم سایز متن نوشته شده را به صورت خیلی کوچک قرار می دهد.
X-Small : این قلم سایز متن نوشته شده را به صورت کمی کوچک درمی آورد.
Small : با استفاده از این قلم سایز نوشته کوچک می شود.
Medium : این قلم سایز متن را متوسط نشان می دهد.
Large : این قلم سایز نوشته را در طراحی سایت بزرگ نشان می دهد.
X-Large : این قلم سایز نوشته را کمی بزرگ نشان می دهد.
Xx-Large : اندازه ی قلم بسیار بزرگ می شود.
Larger : سایز متن نوشته شده نسبت به سایز خطوط همجوار کمی بزرگتر دیده می شود
Smaller : سایز متن نوشته شده نسبت به سایر خطوط همجوار کمی کوچکتر دیده می شود.
Length : این حالت اندازه ی قلم متن را بر حسب واحدی مانند پیکسل و یا نقطه (pt) تعیین می کند.
درصد % : این حالت اندازه قلم متن را  نسبت به عنصر مادر و یا حالت استاندارد،برحسب درصد تعیین می کند.

مثال زیر کاربرد ویژگی Font-Size را در بخش آموزش Css نشان می دهد.

< p style="color: Maroon; font-family: Arial" >
   < span style="font-size: small ; color : green" > This part has a small font < /span >
   < span style="font-size: medium ; color : blue" > This part has a medium font < /span >
   < span style="font-size: x-large color : red" > This part has a big font < /span >
   < span style="font-size: 20px; color: Navy" > And size of font of this is 20px . < /span >
< /p >

خروجی:

This part has a small font
This part has a medium font
This part has a big font
And size of font of this is 20px .

ویژگی font-strecth در css

در این قسمت از آموزش CSS ، ویژگی Font-Strecth را برای شما توضیح می دهیم.
از ویژگی Font-Strecth برای متراکم کردن یا کشیده شدن کلمات در متن در طراحی سایت استفاده می شود .این ویژگی از مررگرهای اینترنت اکسپلورر،فایرفاکس و netscape پشتیبانی نمیکند.

ویژگی font-style در css

در این قسمت از آموزش CSS ، ویژگی Font-Style را برای شما توضیح می دهیم.
ویژگی Font-Style برای نمایش جلوه های نمایشی به متن استفاده می شود که شامل سه حالت می باشد که عبارتند از:
Normal : متن موردنظر بدون هیچ جلوه ی ویژه نمایش داده می شود که این حالت به صورت پیش فرض می باشد.
Italic : متن بصورت خط کج نمایش داده می شود.
Oblique : متن به صورت مورت نمایش داده می شود.

مثال زیر کاربرد ویژگی Font-Style را در طراحی سایت را نشان می دهد.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>

<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>

</html>

خروجی:

This is a paragraph, normal.

This is a paragraph, italic.

This is a paragraph, oblique.

 

ویژگی font-variant در css

در این قسمت از مقالات آموزشی مختلف در زمینه طراحی سایت ، ویژگی Font-Variant را برای شما توضیح می دهیم.
یکی دیگر از ویژگی های Font ویژگی Font-Variant می باشد.ویژگی Font-Variant نوشته را به صورت معمولی و یا حروف بزرگ نمایش می دهد.

مثال زیر کاربرد ویژگی Font-Variant را در بخش آموزش Css نشان می دهد.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>

<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>

</html>

خروجی:

My name is Hege Refsnes.

MY NAME IS HEGE REFSNES.

ویژگی font-weight در css

css از جمله پرکاربردترین زبان های برنامه نویسی است که در طراحی سایت بسیار مورد استفاده قرار می گیرد. در این قسمت از آموزش CSS ، ویژگی Font-Weight را برای شما توضیح می دهیم.
خاصیت font دارای چند ویژگی می باشد که یکی از این ویژگی ها خاصیت Font-Weight می باشد.با استفاده از این خاصیت می توان میزان ضخامت قلم نوشته را بر حسب چندحالت تعیین کرد که عبارتند از:
Normal : ضخامت قلم موردنظر معمولی میباشد که این حالت به صورت پیش فرض است.
Bold : متن نوشته شده را با  قلم پررنگ (توپر) درمی آورد.
Bolder : قلم منتخب متن را به صورت خیلی تو پر و ضخیم درمی آورد.
Lighter : قلم منتخب متن نوشته شده را به صورت نازکتر از حالت نرمال نمایش می دهد.
100 تا 900 : با استفاده از حالت مقدارهای عددی می توان میزان ضخامت نوشته را تعیین کرد که هر چه عدد بزرگتر باشد ضخامت نوشته بیشتر می شود.

مثال زیر کاربرد ویژگی Font-Weight را در طراحی سایت نشان می دهد.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>

<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>

</html>
خروجی:

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

ویژگی background-position در css

ویژگی background-position در css

در این مقاله از مجموعه مقالات شرکت طراحی سایت مبنا، قصد داریم اطلاعات جامع در زمینه ویژگی موقعیت پس زمینه در css را برای شما کاربران عزیز ارائه دهیم.

تعریف و کاربرد این ویژگی در طراحی سایت

خاصیت background-position، موقعیت اول تصویر زمینه را تنظیم می کند.

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

این عنصر در طراحی سایت می تواند مقادیر زیر را به خود بگیرد:

در مقالات بعدی اطلاعات بیشتری را در زمینه ویژگی های css و کاربرد آن در طراحی سایت برای شماعلاقه مندان به این حرفه شرح خواهیم داد.