دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » جلسه دوم : properties ها در css
properties در css

جلسه دوم : properties ها در css

در جلسه اول  property در css ، بک گراند جلسه قبل  را مورد بررسی قرار دادیم در این جلسه ادامه properties را مورد برسی قرار میدهیم.

مبحث دوم : text :

text یا همان متون شامل تنظیمات متن،ارتفاع متن، موقعیت متن و… می باشد.

text-align : بااین خاصیت موقعیت متن تگ را در صفحه مشخص می نماییم.

right : با استفاده از این مقدار متن به طرف راست انتقال پیدا می کند.

left : با استفاده از این مقدار متن به طرف چپ انتقال پیدا می کند.

center : با استفاده از این مقدار متن در وسط صفحه قرار میگیرد.

قاعده دستوری خاصیت بالا به شکل زیر است:

text-decoration : با این خاصیت افکتی را بالای تگ مربوطه اعمال می کنیم.این خاصیت شامل موارد زیر است.

blink :این مقدار موجب می شود متن به صورت چشمک زن در بیاید.

line-though : با این مقدار خطی بالای متن ایجاد میگردد.

none : این مقدار پیش فرض متن میباشدکه برای متن هیچ افکتی را تعریف نمیکند.

overline : این مقدار خطی بالای متن تگ ایجاد میکند.

underline : این مقدار برای متن زیر خطی ایجاد می کند.

text-indent : با این خاصیت میزان تو رفتگی اولین خط یک متن را مشخص می کند.

text-transform : نحوه نمایش حروف (بزرگ و کوچک) را کنترل می کند.

این خاصیت شامل موارد زیر است:

capitalize : تمام حروف اول کلمات متن را به حروف بزرگ تبدیل می کند.

lowercase : تمام حروف متن به حروف کوچک تبدیل میگردد.

uppercase : تمام حروف متن را به حروف بزرگ تبدیل میکن.

text-shadow : با این خاصیت می توانید افکت سایه ای مختلف با لای متن تان اعمال کنید.

properties در css

vertical-align : با این خاصیت می توانید میزان عمودی محتویات داخل تگ ها یا میزان عمودی خانه های جدول را مشخص کنید که دارای مقادیر زیر است.

baseline : این مقدار عبارت از خط فرضی می باشد که حروف بر روی ان نوشته می شود.

bottom :این مقدار عناصرتان را در قسمت پایین قرار می دهد.

sub : این مقدار تگ فرزند را کمی پایین تر از امتداد متن تگ پدر قرار می دهد.

super : این مقدار تگ فرزند را کمی بالاتر از امتداد متن تگ پدر قرار می دهد.

text-bottom : این مقدار متون تگ پدر را در امتداد زیرین تگ فرزند قرار میدهد.

text-top : این مقدار متونه تگ پدر را در امتداد بالای تگ فرزند قرار می دهد.

top : این مقدار عناصرتان را در قسمت بالا قرار می دهد.

مثال) ما در جدولی که داریم میخواهیم تصویر که در داخل سلول است ، ان را در قسمت پایین سلول قرار میدهیم.

ما در  اینجا از تصویر استفاده کردیم می توان متن نیز استفاده کرد.

witch-space : با این خاصیت می توانید تعیین کنید وقتی متنی را در باکسی می نویسید و ان باکس از اندازه خطوط متن کوچکتر باشد،متن به صورت اتوماتیک قطع شود یا متن ادامه داشته باشد.

خاصیت witch-space دارای مقادیر زیر است :

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

pre : در صورت استفاده از این مقدار مرورگر تشخیص می دهد که آیا در کد HTML از دستورات  line-break استفاده کردید یا خیر در صورت استفاده از همان دستورات به منظور قطع نمودن خط استفاده می کند.

pre-line : با استفاده از این مقدار در صورتی که از line-break استفاده نمودهاید آن اعمال می شود.

pre-wrap : این مقدار همانند مقدار قبلی است اما فقط با این فرق در صورتی که متن شما از اندازه باکس بزرگتر شود در آن صورت متن به صورت اتوماتیک خط قطع می گردد.

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

مبحث سوم : fonts 

منظور از فونت نحوه نوشتن متون ونوع شکل متن است که می توان برای ان رنگ ، اندازه ، نوع قلم و…را تعیین کرد.

ساختار اصلی فونت ها در css :

 | font: font – style | font-variant | font-weight
| font-size |line-light | font-family
;font : italic normal bold 12px / 22px tahoma

فونت ها خواصیت های زیر را دارا می باشند:

font-style : این خاصیت به منظور استایل دادن به متن استفاده می شود و دارای مقادیر زیر است.

normal : پیش قرض مرور گر است.

italic : این مقدار استایل فونت را به شکل کج تبدیل می کند.

oblique : درست مانند italic است.

initial : این مقدار استایل پیش فرض مرور گرتان را تطبیق میکند.پس تطبیق ان در موارد بسیار اندکی استفاده می شود.

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

font-variant : این خاصیت اختصاصآ برای متون لاتین استفاده می شود و دارای مقادیر زیر است.

normal :  پیش قرض مرور گر است.

small-caps : این مقدار تمامی حروف را به حروف بزرگ تبدیل می کند.

initial : این مقدار استایل پیش فرض مرور گرتان را تطبیق میکند.پس تطبیق ان در موارد بسیار اندکی استفاده می شود.

inherit : در صورتی که برای عنصر فرزند این مقدار تطبیق کنید font-variant فونت عنصر والد را به خودش اختصاص می دهد.

font-weight : این خاصیت در کل ضخامت متون را مشخص می کند.

normal :  پیش قرض مرور گر است.

bold : این مقدار متن را با ضخامت بیشتر نمایش می دهد.

border : این مقدار هم مانند bold است.

lighter : مرور گر متن را با ضخامت پیش فرض نمایش می دهد.

initial : این مقدار استایل پیش فرض مرور گرتان را تطبیق میکند.پس تطبیق ان در موارد بسیار اندکی استفاده می شود.

inherit : در صورتی که برای عنصر فرزند این مقدار تطبیق کنید font-weight فونت عنصر والد را به خودش اختصاص می دهد.

font-size : این خاصیت برای تعیین اندازه متن استفاده می شود. واز مقدار های px و em برای مقدار دادن بهش استفاده می شود.

Xx-small : سه برابر کوچکتر از اندازه پیشفرض فونت را نمایش می دهد.

X-small : دو برابر کوچکتر از اندازه پیشفرض فونت را نمایش می دهد.

small : یک برابر کوچکتر از اندازه پیشفرض فونت را نمایش می دهد.

medium : به صورت medium و نصف اندازه پیش فرض فونت را نمایش می دهد.

large : یک برابر بزرگتر از اندازه پیش فرض فونت را نمایش می دهد.

X-large : دو برابر بزرگتر از اندازه پیش فرض فونت را نمایش می دهد.

Xx-large : سه برابر بزرگتر از اندازه پیش فرض فونت را نمایش می دهد.

smaller : با اندازه ما بین X-small و Xx-small  فونت را نمایش می دهد.

larger : با اندازه ما بین X-large و Xx-large فونت را نمایش می دهد.

px با واحد پیکسل فونت را نمایش می دهد. در صفحات وب در صوورتی که از tahoma استفاده کنیم ، فونت استاندارد 12px است

initial : این مقدار استایل پیش فرض مرور گرتان را تطبیق میکند.پس تطبیق ان در موارد بسیار اندکی استفاده می شود.

inherit : در صورتی که برای عنصر فرزند این مقدار تطبیق کنید font-size فونت عنصر والد را به خودش اختصاص می دهد.

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

length : ای مقدار با واحدهای em , cm , pt , px استفاده می شود و می توان فاصله خطوط را تعیین کرد.

initial : این مقدار استایل پیش فرض مرور گرتان را تطبیق میکند.پس تطبیق ان در موارد بسیار اندکی استفاده می شود.

inherit : در صورتی که برای عنصر فرزند این مقدار تطبیق کنید font-height فونت عنصر والد را به خودش اختصاص می دهد.

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

مثال: یک صفحه وب داریم که از پیش استایل  font : 16px / 25px tahoma را برای متون خود تطبیق کرده و ما میخواهیم تنها اندازه فونت را تغییر دهیم  در این صورت با خاصیت font-size این کار را انجام می دهیم.

افزودن فونت های دلخواه به صفحات وب :

برای این کار باید ابتدافونت مورد نظر را دانلود و به فایل css مان اضافه کنیم و سپس بالای متون تطبیق نماییم.

نکته) فونت هایی که در ویندوز استفاده می شود با فونت هایی که در وب استفاده می شوند تفاوت دارند.

نحوه افزودن فونت های دلخواه در css :

پس از دانلود فایل باید فونت را انتخاب و از فولدر fonts کپی کنید و در فولدر خودتان (سایت تان) paste کنید.

ما فونت byekan را برای مثال در نظر بگیرید همانند کد زیر فونت مورد نظر تان را در ابتدای فایل css فراخوانی کنید.

}font-font@
;”font-family: “byekan
;(“src:url (“font / byekan.eot?#”)format(“eot
(“url(“font/byekan”) format (“woff
(“url(“font/byekan”) format (“true type
{

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

;font : 13px / 22px byekan , tahoma

توجه: برای فونت های فارسی نمی توانید هر اندازه را انتخاب نمایید.

تعیین رنگ برای فونت ها : 

برای تعیین رنگ مورد نظر برای فونت ها از خاصیت color استفاده می کنیم .

مثال) اگر بخواهیم از رنگ سیاه برای فونت استفاده کنیم می توانیم به اشکال زیر این کار را انجام بدهیم.

;color :black
;color :#000000
;(color :rgb(0,0
;(color :rgba (0,0,0,1

به همین صورت برای تمام رنگ ها نیز می توان استفاده کرد.

ادامه properties ها در جلسات بعد.

پیشنهاد می کنیم حتما بخوانید :

درباره : سعید پناهی

نظرات کاربران :


  1. elnaz گفت:

    آموزش کاملی بود . خیلی به دردم خورد ممنونم