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

۱۸ اردیبهشت

اصول نوشتن کدهای CSS

در این بخش از آموزش css ، اصول نوشتن کدهای css را شرح میدهیم.

  • گذاشتن فاصله بین مقدار و واحد اشتباه است

مثال صحیح :

margin-left:20px;

مثال غلط:

margin-left:20 px;

  • قوانین نام گذاری فایل های css
  1. از کاراکترهای خاص استفاده نکنید.کاراکترهای مجاز عبارتند از :حروف a-z ، اعداد ۰-۹ ، خط زیر (_) ، خط فاصله (-)
  2. از کاراکتر فضای خالی استفاده نکنید ( ) مثلا : style Master.css  ، این نامگذاری میتواند در وب سرور شما مشکل ایجاد کند.
  3. نام فایل بایستی با یک حرف شروع شود.
  4. برای نام گذاری فایل از حروف کوچک استفاده کنید.
  5. نام فایل را تا آنجا که ممکن است کوتاه تعریف نمایید.
  6. فراموش نکنید که حتما فایل را با پسوند css ذخیره کنید.

با رعایت تمامی این نکات شما طراحی سایت بهینه تری را خواهید داشت .

اشتراک
۰۹ اردیبهشت

هک css چیست و چه کاربردهایی داره؟

هک css چیست و چه کاربردهایی داره؟

حتما برای شما پیش اومده که سایتی رو کدنویسی کنید و در مرورگرهای مختلف مشکل داشته باشید. مرورگرهایی مثل Internet Explorer , chrome , Saffari , Opera و یا حتی FireFox برخی از خصوصیات و مشخصه های موجود در css رو متوجه نمیشوند و توانایی اجرای صحیح اونهارو ندارند ؛ در این لحظه ما باید با هک های css این خصوصیات و مشخصه هارو به این مرورگرها معرفی کنیم به نحوی که این خصوصیات رو شناسایی کنند و اونهارو به درستی اجرا کنند.

چه مرورگرهایی رو میتونیم هک کنیم؟

ما فرض رو بر این میزاریم که هنگام طراحی سایت و کدنویسی با فایرفاکس کار میکنیم و نتیجه ی اولیه رو روی این مرورگر بررسی میکنیم. بنابراین باید سایت رو با مرورگرهای دیگه هماهنگ کنیم.

معمولا تمامی مرورگرها به غیر از IE و  Saffari با فایرفاکس همراه هستند و نیازی برای بهینه سازی و هک ندارید.

البته در حال حاضر اکثرا از  IE10 و  IE11 استفاده می کنند که اکسپلورر در این نسخه ها کمی با فایرفاکس راه اومده و مشکلی بوجود نمیاره اما IE9 به پایین دیگه استفاده نمیشه و توسط کدنویسان در طراحی سایت نیز پشتیبانی نمیشه، با این وجود بهینه سازی سایت برمیگرده به مخاطبین شما ، مثلا اگر قرار باشه شما قالب سایت رو برای یک فروشگاه ساز بهینه سازی کنید ، نیازی به بررسی سایت در  IE99 به پایین نخواهید داشت اما اگر بخواهید یک سایت برای یک سازمان و یا ارگان دولتی طراحی کنید می بایست برای  IE9 , IE8 , IE7 و  IE66 هم بهینه سازی انجام بدید، چرا که هنوز کارمندان دولتی از  IE9 به پایین استفاده می کنند.

به همین خاطر علاوه بر هک مرورگهای دیگه،  هک مربوط به  IE6 تا IE9  رو هم خدمتتون آموزش میدم.

چگونگی استفاده از css hack ها

با در نظر گرفتن مشخصه ی  color ، هک مرورگرهای مختلف رو خدمتتون آموزش میدم، البته این مشخصه در تمامی مرورگرها اجرا میشه و مشکلی نداره ، صرفا برای آشنایی شما با هک ها این مشخصه ی ساده رو مثال میزنم.

همونطور که میدونید کد زیر برای همه ی مرورگرها نوشته میشه:

هک های مربوط به مرورگر  IE

همونطور که گفتم  IE10و IE11 کم پیش میاد بخوان شمارو اذیت کنند اما یادگیری هک مربوط به این دو نسخه هم ضرری نخواهد داشت . برای  IE10 به بالا راه های مختلفی وجود داره اما میتونید یکی از دو روش زیر رو استفاده کنید:

روش اول – استفاده از media queries در IE10 به بالا :

روش دوم – استفاده از CSS , Html , JavaScript (این روش کمی دقت میخواد):

از کد جاوا اسکریپت زیر در صفحه وبمون استفاده می کنیم و useragent رو به سند html معرفی میکنیم:

useragent در مرورگر IE10 به شکل زیر هست :

کد زیر رو توی Html هم تعریف میکنیم تا بتونیم در css بهش اشاره کنیم:

حالا تو css به شکل زیر صداش می کنیم و مثلا به h2 رنگ آبی رو اختصاص میدیم :

هک مربوط به مرورگرهای Google Chrome , safari , Opera

selectorName در مثال های زیر نام انتخابگر شماست مثلا #menu یا مثلا  h2

لازم به ذکر هست که زمانی که شما هک های IE رو به کار میبرید باید دستورات مربوطه رو داخل یک فایل css ذخیره کنید و با دستورات شرطی اون فایل رو در html تون صدا بزنید. مثلا ما میخوایم برای IE9 یک سری استایل خاص تعریف کنیم، دستورات css به شکل زیر خواهد بود:

سپس ما این دستورات رو در فایلی بنام مثلا IE9.css ذخیره میکنیم و با دستورات شرطی اون رو به html مون اضافه میکنیم:

در مثال بالا در IE9 عنصر h1 ما رنگ قرمز و فونت tahoma با سایز ۱۳ پیکسل خواهد داشت.

دستورات شرطی یا If condition ها در html چیست ؟

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

عبارت gte , lt , lte , gt :

Gt = Greater than (بزرگتر از)

Lt = little than (کوچکتر از)

Gte = greater than And Equal (مساوی و بزرگتر از)

Lte = little than And Equal (مساوی و کوچکتر از)

اگر شما طراح سایت هستید پیشنهاد میکنم این مقاله رو بخاطر بسپارید، چراکه در طراحی سایت استاندارد این نکات می بایست رعایت بشه.

اشتراک
۱۸ اسفند

CSS چیست و چه کاربردی دارد؟

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

HTML زبانی بود که بسیاری از موارد پیشرفته در طراحی در آن لحاظ نشده بود. بعلاوه اینکه این زبان قابلیت تغییر، کاربر پسندی و بسیاری دیگر از مباحثی که در دنیای برنامه نویسی و طراحی با گذشت زمان بوجود آمده اند را در خود جای نداده است.

CSS چیست؟

CSS یا Cascade Style Sheets زبان برنامه نویسی می باشد که کنسرسیوم بین المللی شبکه جهانی وب یا W3C برای غلبه بر مشکلاتی که در طی زمان با استفاده از HTML بوجود آمده است پیشنهاد داده است. عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد.

CSS زبانی است که توسط آن قادر خواهید تا استیل طراحی صفحات وب سایت تان را یکبار تعریف و به صفحات مورد نیازتان اعمال نمایید.

برای این منظور مثالی را می زنیم. تصور کنید که سایت شما شامل ۱۰۰ صفحه استاتیک می باشد و شما آنها را تماما به زبان HTML نوشته اید. بعد از یک هفته تصمیم گرفته اید تا فونت تمام کلمات را کمی بزرگتر کنید. گفتن اینکه فونت تمام کلمات بزرگتر شود بسیار کار راحتی است و تنها یک جمله است. ولی آیا در عمل تغییر ۱۰۰ صفحه نیز به همان راحتی خواهد بود؟

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

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

 

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

تنظيمات موقعيت عناصر در CSS و ساير خواص:

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

left
right
top
bottom
overflow
vertical-align
z-index

خواص تنظيم موقعيت عناصر در CSS :

در بخش خاصيت position در صفحه قبل ، اشاره کرديم چنانچه خاصيت position بر روی يکی از مقادير relative , absolute يا fixed تنظيم شود می توان توسط خواص left , right , top و bottom مختصات دقيق محل قرار گيری عنصر را در صفحه يا عنصر در بر گيرنده آن تعيين کرد . در اين بخش به معرفی ۴ خاصيت اشاره شده برای تنظيمات مکان قرار گيری عناصر می پردازيم :

نکات :

  1. در صورتی که خاصيت position بر روی مقدار static تنطيم شده باشد ، تعيين مختصات برای عناصر بي اثر بوده و مرورگر عناصر را در مکان مورد نظر خود بر حسب محتويات صفحه نمايش می دهد .
  2. در حالتی که خاصيت position بر روی مقدار relative تنظيم شود ، مختصات تعيين شده در اين قسمت ، نسبت به عنصر در برگيرنده عنصر مورد نظر محاسبه می شود . ولی در حالت هايي که خاصيت position بر روی مقادير absolute يا fixed تعيين شده باشد ، مختصات نقاط شروع نسبت به کل صفحه در نظر گرفته می شود .

برای درک بهتر به مثال های خاصيت position در صفحه قبل دقت کنيد .

نام خاصيتنوع خاصيتشرح
leftauto
length
درصد %
مختصات نقطه شروع عنصر را از سمت چپ در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند :
– auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع سمت چپ عنصر را تنظيم می کند .
– length : در اين حالت مختصات نقطه شروع عنصر را در سمت چپ بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : در اين حالت بر حسب درصد تعيين شده از کل عرض عنصر ، به عنوان نقطه شروع عنصر در سمت چپ تعيين می شود . برای مثال اگر مقدار ۱۰% تعيين شود و عرض کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت چپ تعيين می شود .
rightauto
length
درصد %
مختصات نقطه شروع عنصر را از سمت راست در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند :
– auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع سمت راست عنصر را تنظيم می کند .
– length : در اين حالت مختصات نقطه شروع عنصر را در سمت راست بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : در اين حالت بر حسب درصد تعيين شده از کل عرض عنصر ، به عنوان نقطه شروع عنصر در سمت راست تعيين می شود . برای مثال اگر مقدار ۱۰% تعيين شود و عرض کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت راست تعيين می شود .
topauto
length
درصد %
مختصات نقطه شروع عنصر را از سمت بالا در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند :
– auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع را از سمت بالای عنصر تنظيم می کند .
– length : در اين حالت مختصات نقطه شروع عنصر را در سمت بالا بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : در اين حالت بر حسب درصد تعيين شده از کل ارتقاع عنصر ، به عنوان نقطه شروع عنصر در سمت بالا تعيين می شود . برای مثال اگر مقدار ۱۰% تعيين شود و ارتفاع کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت بالا تعيين می شود .
bottomauto
length
درصد %
مختصات نقطه شروع عنصر را از سمت پايين در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند :
– auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع را از سمت پايينی عنصر تنظيم می کند .
– length : در اين حالت مختصات نقطه شروع عنصر را در سمت پايين بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : در اين حالت بر حسب درصد تعيين شده از کل ارتقاع عنصر ، به عنوان نقطه شروع عنصر در سمت پايين تعيين می شود . برای مثال اگر مقدار ۱۰% تعيين شود و ارتفاع کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت پايين تعيين می شود .

مثال : در مثال زير برای جدول مقدارهای top و left را تعيين کرده ايم . دقت کنيد که مقدار خاصيت position بروری relative تنظيم شده و مختصات مکان جدول با توجه عنصر در بر گيرنده آن يعنی خانه جدول تنظيم می شود :

Example
< table style=”border: solid 2px blue; width: 200px; height: 100px; top: 25px; left: 200px; position: relative” cellspacing=”0″ >
  < tr >
    < td style=”border: solid 2px blue” >
      Cell 1
< /td >
< td style=”border: solid 2px blue” >
      Cell 2
< /td >

< /tr >

< /table >
کد
Cell 1Cell 2
خروجی

 


خاصيت overflow

نام خاصيتنوع خاصيتشرح
overflowvisible
hidden
scroll
auto
توسط اين خاصيت تعيين می شود که چنانچه محتويات يک عنصر از عرض يا طول تعيين شده برای آن بيشتر شد ، مرورگر برای نمايش قسمت اضافه چه کاری انجام دهد ، که می تواند يکی از حالت های زير باشد :
– visible : در اين حالت ، قسمت اضافه نيز درون عنصر نمايش داده شده و عرض و طول آن به اندازه ای که کل محتويات را درون خود جای دهد ، افزايش می يابد .
– hidden : در اين حالت ، فقط به اندازه تعيين شده برای عنصر از محتويات آن نمايش داده می شود و قسمت اضافه مخفی می ماند .
– scroll : در اين حالت ، مرورگر به طور اتوماتيک در جهت هايي که نياز به افزايش اندازه عنصر برای مشاهده قسمت های اضافه است ، نوار پيمايش قرار می دهد و فقط به اندازه واقعی عنصر در هر لحظه از محتويات آن را نمايش می دهد .
– auto : در اين حالت نيز مرورگر به طور اتوماتيک در صورت نياز در ۲ جهت نوار پيمايش قرار می دهد .

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

Example
حالت visible

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

< p style=”width: 120px; height: 50px; overflow: visible” >
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio
< /p >
کد
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioخروجی
حالت hidden

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

< p style=”width: 120px; height: 50px; overflow: hidden” >
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio
< /p >
کد
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioخروجی
حالت scroll و auto

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

< p style=”width: 120px; height: 50px; overflow: scroll” >
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio
< /p >
کد
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioخروجی

 


خاصيت vertical-align

نام خاصيتنوع خاصيتشرح
vertical-alignbaseline
top
text-top
middle
sub
super
bottom
text-bottom
length
اين خاصيت نحوه تراز بندی عمودی عنصر را در عنصر در برگيرنده آن تعيين می کند ، که می تواند يکی از حالت های زير باشد :
– baseline , top , text-top : عنصر در بالای عنصر در برگيرنده آن قرار می گيرد .
– middle : عنصر در وسط عنصر در برگيرنده آن قرار می گيرد .
– sup : عنصر به صورت زير نويس ( در پايين )عنصر در بر گيرنده آن قرار می گيرد .
– super : عنصر به صورت بالا نويس ( در بالای )عنصر در بر گيرنده آن قرار می گيرد .
– bottom , text-bottom : عنصر در پايين عنصر در برگيرنده آن قرار می گيرد .
– length : در اين حالت می توان مکان قرار گيری عمودی عنصر را از بالا ، بر حسب واحدی مثل px يا pt تعيين کرد .

مثال : در مثال زير در خانه های مختلف جدول ارائه شده ، برخی از حالت های تراز بندی عمودی متن را نمايش داده ايم :

Example
< table style =”width : 600px; height: 80px” >
< tr >
    < td style=”vertical-align: baseline ” >   baseline   < /td >
    < td style=”vertical-align: top” >   top , text-top   < /td >
    < td style=”vertical-align: middle” >   middle   < /td >
< td style=”vertical-align: bottom” >   bottom , text-bottom   < /td >
< /tr >
< /table >
کد
baselinetop , text-topmiddlebottom , text-bottom
خروجی

 


خاصيت z-index

نام خاصيتنوع خاصيتشرح
z-indexnumber
عدد
اين خاصيت يک شماره منحصر به فرد برای ترتيب قرار گيری عناصری که بر روی هم هستند ، استفاده می شود که عنصر با شماره بزرگتر در بالای عنصر ديگر قرار می گيرد . اين خاصيت فقط در زمانی کاربرد دارد که خاصيت positon عنصر بر روی مقدار relative يا absolute تنظيم شده باشد .
اشتراک
۰۲ بهمن

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

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

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

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

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

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