بلاگ - شرکت سبزاندیش آراد |طراحی سایت

۰۲ بهمن

مرجع واحدهای شمارش در CSS

در این بخش از آموزش css به توضیح ویژگی مرجع واحدهای شمارش در CSS میپردازیم.

واحد های شمارش در css  شامل واحدهای زیر میباشند.

  1. %   >>  درصد
  2. in >> اینچ
  3.  cm  >> سانتیمتر
  4. mm  >> میلیمتر
  5. em  
  6. ex 
  7. pt >>  برابر با ۱/۷۲ اینچ
  8. pc >> برابر با ۱۲ point
  9. px  >> پیکسل
اشتراک
۰۲ بهمن

تنظیم شفافیت عناصر Opacity

در این بخش از آموزش css به توضیح ویژگی تنظیم شفافیت عناصر Opacity میپردازیم.

Opacity

با ویژگی Opacity میتوانید شفافیت تصاویر را تغییر دهید.

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

در مثال بالا زمانیکه opacity=40  تنظیم شده است ، تصویر کدر تر نمایش داده میشود و زمانیکه opacity=100 در نظر گرفته شده است تصویر به صورت کاملا شفاف نمایش داده میشود.این حالت زمانی اتفاق میفتد که img:hover  انجام گیرد.یعنی با زفتن ماوس روی تصویر عکس به صورت شفاف نمایش داده میشود.

اشتراک
۰۲ بهمن

تنظیم طول و عرض ( Height , Width ) عناصر در CSS

تنظیم ابعاد در CSS

برای تنظیم ابعاد عناصر در CSS  از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.

در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.

height :  این ویژگی در تمام مرورگر ها پشتیبانی میشود.

 p.ex

{
height:100px;

}

با دو ویژگی max-height و max-width شما میتوانید حداکثر مقدار را برای یک عنصر تنظیم کنید.

max-height :  این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
max-height:50px;
}

max-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
max-width:100px;
}

با دو ویژگی min-height و min-width شما میتوانید حداقل  مقدار را برای یک عنصر تنظیم کنید.

min-height : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
min-height:100px;
}

min-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
min-width:1000px;
}

width :  این ویژگی در تمام مرورگر ها پشتیبانی میشود.

 p.ex

{
width:100px;
}

عرض استاندارد برای طراحی سایت :

برای تنظیم عرض استاندارد برای طراحی سایت  با توجه به رزولیشن استاندارد و یا رزولیشنی که اکثر مخاطبان از آن اسفاده میکنند (۷۶۸*۱۰۲۴) ، بهتر است عرض ۹۸۰px را  تنظیم کنید. این عرض طبق استاندارد های صفحات وب انتخاب شده است.

اشتراک
۰۲ بهمن

تنظیم قلم و فونت درcss

Font Family

در این بخش از آموزش css ، تنظیم قلم و فونت را آموزش میدهیم.

در css دو نوع از خانواده فونت ها وجود دارد.

  • “generic family” مثل  “Serif” یا “Monospace”
  • “font family” مثل “Times New Roman” یا “Arial”

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

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

در صفحات نمایش کامپیوترها فونت های خانواده sans-serif نسبت به فونت های خانواده serif آسانتر خوانده میشوند و عمومی تر هستند.

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

 

Font Style
با این ویژگی شما نوع نمایش متن را مشخص میکنید.این ویژگی دارای دومقدار زیر میباشد :

  1.  normal   :متن به صورت معمولی نمایش داده میشود
  2.  italic   : متن به صورات ایتالیک نمایش داده میشود
  3.  oblique  :  متن به صورت مورب نمایش داده میشود

مثال : 

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

Font Size
این ویژگی سایز متن را مشخص میکند. اندازه متن در طراحی وب سایت بسیار حائز اهمیت است. ویژگی font-size را میتوانید به صورت مطلق یا نسبی مقداردهی کنید . اگرچه در زوم و رزولیشن های مختلف این مقدار تغییر میکند.ولی این تغییر اندازه برای کل صفحه میباشد وشامل یک بخش نیست. سایز پیش فرض برای یک متنن نرمال ۱۶px تعریف میشود.
برای متن هایی که در بالای صفحه (header) نمایش داده میشوند از تگ های <h1> – <h6> و تگ <p> برای پاراگراف های خود استفاده کنید، در مورد این تگ ها در قسمت آموزش HTML میتوانید بیشتر اطلاعات کسب کنید .
مثال :

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

تنظیم فونت با واحد EM
در نسخه های اولیه Internet Explorer به دلیل پشتتیباتی نشدن واحد px بسیاری از طراحان از واحد em استفاده میکردند.
هر ۱em رابر با ۱۶px میباشد.
مثال :

h1 {font-size:2.5em;} /* 40px/16=2.5em */

این واحد در تمامی مرورگرها پشتیبانی میشود.

اشتراک
۲۹ دی

ليست ها در CSS

ليست ها در CSS :

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

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

list-style
list-style-image
list-style-position
list-style-type

نکته : خواص مختلف يک ليست را در CSS می توان به صورت يکجا در خاصيت چند مقداری list-style تعيين کرده و يا هر کدام از ويزگی ها را به صورت جدا مقدار دهی کرد .

۱ ) تعيين خواص به وسيله خاصيت چند مقداری list-style :

می توان کليه ويژگی های يک ليست را طبق الگوی زير در خاصيت چند مقداری list-style تعيين کرد :

list-style : [ list-style-image ] [ list-style-position ] [ list-style-type ]

هر يک از موارد فوق را در قسمت دوم توضيح داده ايم :

۲ ) تعيين خواص به صورت جدا :

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

نام خاصيتنوع خاصيتشرح
list-style-imagenone
URL
مسير فايل
در اين حالت يک عکس به عنوان نشانه ليست در ابتدای هر آيتم ليست ، به صورت يک آيکون کوچک نشان داده می شود . برای تعيين عکس به روش زير عمل می کنيم :
– none : در اين حالت هيچ عکسی در ليست نمايش داده نمی شود .
– URL : آدرس تصويری که می خواهيم در ليست قرار بگيرد را تعيين می کند .
list-style-positioninside
outside
موقعيت قرار گيری نشانه و متن آيتم های ليست را بر حسب يکی از حالت های زير تعيين می کند :
– inside : نشانه ليست و متن آيتم های آن کمی تو رفته تر نمايش داده می شوند .
– outside : نشانه ليست و متن آيتم های به صورت عادی نمايش داده می شوند .
list-style-typenone
disc
cicle
square
demical
demiacl-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
hiragana
katakana
hiragana-iroha
katakana-iroha
نوع نشانه ليست را از يکی از موارد زير تعيين می کند :
– none : هيچ نشانه ای در ابتدای آيتم های ليست نمايش داده نمی شوند .
– disc : دايره توپر ، که انتخاب پيش فرض است .
– circle : دايره معمولی .
– square : مربع .
– demiacal : اعداد انگليسی ( ۱ و ۲ و ۳ و … ) .
– demiacal-leading-zero : اعداد انگليسی به همراه يک صفر در ابتدای اعداد کوچکتر از ۱۰ ( ۰۱ و ۰۲ و ۰۳ و … ) .
– lower-roman : اعداد کوچک يونانی ( iv , iii , ii , i , … ) .
– upper-roman : اعداد بزرگ يونانی ( IV , III , II , I , … ) .
– lower-alpha : حروف کوچک انگليسی ( c , b , a , … ) .
– upper-alpha : حروف بزرگ انگليسی ( C , B , A , … ) .
– lower-latin : حروف کوچک انگليسی ( c , b , a , … ) .
– upper-latin : حروف بزرگ انگليسی ( C , B , A , … ) .
– lower-greek : اعداد يونانی که به صورت حروفی نمايش داده می شود ( gamma , beta , alpha … ) .
– hebrew : يک نوع نشانه گذاری قديمی است که توسط IE پشتيبانی نمی شود .
– armenian : يک نوع نشانه گذاری قديمی است که توسط IE پشتيبانی نمی شود .
– georgian : يک نوع نشانه گذاری قديمی به صورت ( gan , ban , an , … ) است که توسط IE پشتيبانی نمی شود .
– hirgana : يک نوع نشانه گذاری قديمی به صورت ( e , u , i , a , … ) است که توسط IE پشتيبانی نمی شود .
– katakana : يک نوع نشانه گذاری قديمی به صورت ( E , U , I , A … ) است که توسط IE پشتيبانی نمی شود .
– hirgana-iroha : يک نوع نشانه گذاری قديمی به صورت ( ni , ha , ro , i … ) است که توسط IE پشتيبانی نمی شود .
– katakana-iroha : يک نوع نشانه گذاری قديمی به صورت ( NI , HA , RO , I , … ) است که توسط IE پشتيبانی نمی شود .

مثال ها :

در مثال های زير خواص بالا را بررسی می کنيم :
مثال ۱ : تعيين يک عکس به عنوان نشانه ليست :

Example
خاصيت تک مقداریخاصيت چند مقداری
My List :
< ul style=”list-style-image: url(../pic/mobsync.03.ico)” >
  < li > Item 1 < /li >
< li > Item 2 < /li >

< /ul >
My List :
< ul style=”list-style : url(../pic/mobsync.03.ico) outside none” >
  < li > Item 1 < /li >
< li > Item 2 < /li >

< /ul >
کد
My List :

  • Item 1
  • Item 2
خروجی

مثال ۲ : مقايسه حالت های list-style-position :

Example
خاصيت تک مقداریخاصيت چند مقداری
My List 1 :
  < ul style=”list-style-position : inside” >
    < li > List 1 , Item 1 < /li >
< li > List 1 , Item 2 < /li >

< /ul >

My List 2 :
  < ul style=”list-style-position : outside” >
    < li > List 2 , Item 1 < /li >
< li > List 2 , Item 2 < /li >

</ul>
My List 1 :
  < ul style=”list-style : none inside disc” >
    < li > List 1 , Item 1 < /li >
< li > List 1 , Item 2 < /li >

< /ul >

My List 2 :
  < ul style=”list-style : none outside disc” >
    < li > List 2 , Item 1 < /li >
< li > List 2 , Item 2 < /li >

</ul>
کد

My List 1 :

  • List 1 , Item 1
  • List 1 , Item 2

My List 2 :

  • List 2 , Item 1
  • List 2 , Item 2
خروجی

مثال ۳ : نمايش برخی از حالت های list-style-type :

ليست های نشانه ای
نکته مهم : در خاصيت چند مقداری ، می توان هر يک از خواصي که لازم است مقداردهی شود ، را تعيين کرد و جای بقيه را خالی گذاشت . به مثال ۲ و مثال ۳ دقت کنيد .
خاصيت تک مقداریخاصيت چند مقداری
My List 1 :
 < ul style=”list-style-type: circle” >
< li > List 1 , Item 1 < /li >
< li > List 1 , Item 2 < /li >
< /ul >

My List 2 :
 < ul style=”list-style-type: disc” >
< li > List 2 , Item 1 < /li >
< li > List 2 , Item 2 < /li >
< /ul >

My List 3 :
 < ul style=”list-style-type: square” >
< li > List 3 , Item 1 < /li >
< li > List 3 , Item 2 < /li >
< /ul >
My List 1 :
 < ul style=”list-style : circle” >
< li > List 1 , Item 1 < /li >
< li > List 1 , Item 2 < /li >
< /ul >

My List 2 :
 < ul style=”list-style : disc” >
< li > List 2 , Item 1 < /li >
< li > List 2 , Item 2 < /li >
< /ul >

My List 3 :
 < ul style=”list-style : square” >
< li > List 3 , Item 1 < /li >
< li > List 3 , Item 2 < /li >
< /ul >
کد
My List 1 :

  • List 1 , Item 1
  • List 1 , Item 2
My List 2 :

  • List 2 , Item 1
  • List 2 , Item 2
My List 3 :

  • List 3 , Item 1
  • List 3 , Item 2
خروجی
ليست های ترتيبی عددی
خاصيت تک مقداریخاصيت چند مقداری
My List 1 :
 < ul style=”list-style-type: demical” >
< li > List 1 , Item 1 < /li >
< li > List 1 , Item 2 < /li >
< /ul >

My List 2 :
 < ul style=”list-style-type: upper-alpha” >
< li > List 2 , Item 1 < /li >
< li > List 2 , Item 2 < /li >
< /ul >

My List 3 :
 < ul style=”list-style-type: lower-roman” >
< li > List 3 , Item 1 < /li >
< li > List 3 , Item 2 < /li >
< /ul >
My List 1 :
 < ul style=”list-style : demical” >
< li > List 1 , Item 1 < /li >
< li > List 1 , Item 2 < /li >
< /ul >

My List 2 :
 < ul style=”list-style : upper-alpha” >
< li > List 2 , Item 1 < /li >
< li > List 2 , Item 2 < /li >
< /ul >

My List 3 :
 < ul style=”list-style : lower-roman” >
< li > List 3 , Item 1 < /li >
< li > List 3 , Item 2 < /li >
< /ul >
کد
My List 1 :

  • List 1 , Item 1
  • List 1 , Item 2
My List 2 :

  • List 2 , Item 1
  • List 2 , Item 2
My List 3 :

  • List 3 , Item 1
  • List 3 , Item 2
خروجی
اشتراک
شرکت سبزاندیش آراد

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

لوگو نماد اکترونیکیlogo-samandehi