info@rightechco.com
ارسال توسط Saber

انتخاب ویرایشگر مناسب برای طراحی صفحات وب

CSS, HTML, طراحی سایت ۰

انتخاب ویرایشگر مناسب

 

برای اینکه بتوانید به زبان CSS و HTML برنامه نویسی کنید و فایل های خودتون را ویرایش کنید به یک ویرایشگر یا ادیتور (editor) نیاز دارید.
میتوانید از نت پد ویندوز (note pad) یا هر ویرایشگر متنی دیگه ای که دوست دارید استفاده کنید , ویرایشگرها یا ادیتورهای دیگه ای وجود دارند که مخصوص برنامه نویسی وب طراحی شدن که میتوانید از آنها استفاده کنید یه لیست از این ویرایشگرها رو به صورت لیست زیر معرفی میکنم:

  1.  note pad plus plus
  2.  sublime text
  3. phpstorm
  4. dreamweaver
  5. microsoft visual studio
     

ادیتورهای بالا رو میتوانید دانلود کنید و نصب کنید! برای شروع میتوانید از sublime یا نت پد پلاس پلاس استفاده کنید اما اگه میخواهید به صورت حرفه ای کار کنید شاید در آینده به یه چیز حرفه ای تر در حد phpstorm یا dream weaver نیاز پیدا کردید.

دقت کنید 3 نرم افزار اخر (phpstorm , dreamweaver و microsoft visual studio) چیزی فراتر از یک ادیتور هستند به صورتی که بهشون IDE گفته میشه و مخفف Integrated Development Environment یا محیط توسعه ی یکپارچه است!

یک IDE شامل ابزارهای مختلفی هست که به صورت یکپارچه عمل میکنند تا شما بتونید به راحتی برنامه های خودتون رو کنترل کنید.

ارسال توسط Saber

انواع media در css

CSS, طراحی سایت ۰

انواع media در css

 

با بهره گیری از انواع media ، یک صفحه می تواند یک طرح ویژه ی صفحه نمایش ، یکی برای چاپ، یکی مختص دستگاه های دستی و … داشته باشد .

برخی از خصوصیت ها تنها ویژه ی یک نوع خاص media تعبیه شده اند . به عنوان مثال می توان به “voice-family” اشاره کرد که به عنوان user agent  ( به نرم افزاری گفته میشود که به نمایندگی از طرف کاربر عمل میکند) . شنیداری عمل می کند .

برخی دیگر از خصوصیت های CSS را می توان برای دیگر media type ها مورد استفاده قرار داد . برای مثال, خاصیت “font-size” را می توان برای هر دو رسانه های مربوط به صفحه نمایش ( screen ) و چاپی( print ) مورد استفاده قرار داد اما با مقادیری متفاوت .

یک سند معمولاً بر روی صفحه نمایش در مقایسه با کاغذ به font-size بزرگ تری نیاز دارد .

قلم نوشته ها ( فونت) sans-serif را بهتر می توان روی  صفحه نمایش خواند ، این در حالی است که فونت های serif را بهتر می توان روی کاغذ خواند .

دستور media@

دستور  media@ امکان تعریف قوانین گوناگون سبک دهی(style rule ) برای انواع مختلف media در یک

صفحه ی سبک دهی واحد ( style sheet ) را برای طراح وب ایجاد می کند .

کد CSS که در مثال زیر بکار گرفته شده, به مرورگر دستور می دهد نوشته را با فونت Verdana در اندازه یا با مقیاس17 پیکسل بر روی صفحه نمایش نشان دهد، ولی در صورت چاپ شدن صفحه بر روی کاغذ نوشته را با رنگ آبی و فونت Georgia به اندازه ی 14 پیکسل نمایش دهد .

@media screen { p { font-family: verdana, sans-serif; font-size: 17px; } } @media print { p { font-family: georgia, serif; font-size; 14px; color: blue; } }

 

جدول زیر دیگر انواع media در CSS  که کاربرد دارند را فهرست کرده:

شرح  نوع media
برای تمامی نوع های مختلف media بکار می رود all
ویژه ی دستگاه های ترکیب کننده ی صدا ( sound Synthesizer ) بکار می رود aural
برای دستگاه های بازخورد لمسی خط بریل مورد استفاده قرار می گیرد braille
برای چاپگرهایی که صفحاتی با خط بریل پرینت می کنند بکار می رود embossed
ویژه ی دستگاه های کوچک دستی و قابل حمل مورد استفاده قرار می گیرد handheld
برای چاپگرهای معمولی استفاده می شود print
برای دستگاه های ارائه پروژکتوری ، مانند اسلایدها مورد استفاده قرار می گیرد projection
ویژه ی صفحه نمایش کامپیوتر طراحی شده screen
برای رسانه های استفاده کننده از شبکه fixed-pitch ، مانند تله تایپ و ترمینال بکار گرفته می شود tty
برای دستگاه های تلویزیون گونه کاربرد دارد tv

 

ارسال توسط Saber

آموزش Float در CSS

CSS, طراحی سایت ۰

آموزش Float در CSS

خاصیت Float در CSS چه کاربردی دارد ؟

با بهره گیری از خاصیت float یا شناور سازی در CSS می توان المان مورد نظر را به سمت راست یا چپ شناور کرد یا موقعیت آن را در سمت چپ و راست تنظیم کرد . از این طریق المان های دیگر می توانند مجاور المان مورد نظر در یک خط قرار گیرند .

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

عناصر چگونه شناور می شوند ؟

المان ها را فقط می توان به صورت افقی شناور کرد، بدین معنا که تنها موقعیت عناصر را می توان در سمت چپ یا راست تنظیم کرد . امکان قرار دادن عناصر کنار هم در موقعیت های بالا و پایین وجود ندارد .

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

عنصر شناور می تواند در راست یا چپ ترین موقعیت ممکن قرار گیرد. ( در دورترین موقعیت سمت چپ یا راست المان دربرگیرنده و تا جایی که امکان و جا برای حرکت داشته باشند) .

عناصر بعد از یک عنصر با ویژگی float تغییر حالت خواهند داد.
عناصر قبل از یک عنصر با خصوصیت float تحت تاثیر قرار نمی گیرند.
یک عنصر با خاصیت float به اندازه محتوای داخل عنصر تغییر اندازه خواهد داد . این در حالی است که به صورت پیش فرض اندازه ای برای این المان در نظر نگرفته شده باشد.

img { float: right; }

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

لغو حالت شناور عناصر (خاصیت float ) با استفاده از خاصیت Clear

المان هایی که پس از عنصر با خاصیت float قرار دارند، همگی پیرامون المان نام برده (با خاصیت float ) را احاطه می کنند . به منظور جلوگیری از وقوع این رخداد می توان خاصیت clear ( خالی کردن یا پاک سازی فضای اطراف عناصر) را بکار برد . به وسیله ی خاصیت مذکور می توان تعیین کرد، عنصرهای دیگر اجازه ی دسترسی و قرار گیری در اطراف عنصر مربوطه ( با خصوصیت float ) را ندارند .

تمامی خصوصیت های مربوط به float یا شناور سازی در CSS

مقادیر  شرح خاصیت
left
right
both
none
inherit		 کناره هایی از المان شناور را که المان های دیگر اجازه ی قرار گرفتن در آن را ندارند تعیین می کند . clear
left
right
none
inherit		 تعیین می کند آیا کادر ( box ) شناور شود یا خیر float
ارسال توسط Saber

خاصیت z-index در css

CSS, طراحی سایت ۰

خاصیت z-index در css

 

خاصیت z-index ترتیب قرارگیری عناصر HTML بر روی هم را تعیین می کند.ترتیب قرارگیری عناصر بر روی هم اشاره به موقعیت عنصر بر روی محور Z دارد(همانطور که در CSS محور X یا محور Y داریم). هرچه مقدار z-index یک عنصر بیشتر باشد به معنی رو بودن عنصر نسبت به بقیه عناصر است. این روی هم قرارگیری عناصر به صورت عمود بر روی صفحه است.

نکته: این خاصیت فقط در زمانی کاربرد دارد که خاصیت positon عنصر بر روی مقدار relative یا absolute ویا fixed تنظیم شده باشد .

شکل کلی استفاده از این متد:

z-index: auto|number;

مقادیری که می توانید در این خصوصیت استفاده کنید :

auto:

در حالت auto اگر چند عنصر با یکدیگر تداخل داشته باشند، عنصری که آخر از همه در ترتیب عناصر فایل HTML وارد شده در صفحه نمایش بالاتر قرار میگیرد ( نسبت به محور z که بر صفحه نمایش عمود است) و باقی عناصر نیز به همین ترتیب گفته شده قرار خواهند گرفت ( در حالت auto عنصری که اول از همه وارد شود در زیر سایر عناصر قرار خواهد گرفت). همچنین auto حالت پیش فرض می باشد.

number:

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

مثال:به عنوان مثال اگر ما بخواهیم عناصر به ترتیب شکل زیر بر روی هم قرار بگیرند:

خاصیت z-index در css

.blue{
position: relative;
z-index: 1;
}
.red{
position:relative;
z-index: 2;
}
.yellow
{position:relative;
z-index: 3;
}
.green
{position:relative;
z-index: 4;
}
ارسال توسط Saber

تعیین موقعیت و محل قرار گیری عناصر در صفحه

CSS, طراحی سایت ۰

تعیین موقعیت و محل قرار گیری عناصر در صفحه

 

خاصیت های تعیین موقعیت (Positioning properties ) در CSS برای طراح وب این قابلیت را فراهم می کند که المان را در مکان مشخصی در صفحه جای گذاری کند . با استفاده از این المان همچنین می توان یک عنصر را پشت عنصر دیگری قرار داد، همچنین تعیین کرد درصورت بزرگ بودن محتوای یک المان چه باید رخ دهد .

المان ها را می توان با بهره گیری از خاصیت های top ، bottom ، left و right تعیین موقعیت کرد . با این وجود باید توجه داشت که این خواص تنها در صورتی کار می کنند که خاصیت position از پیش تنظیم شده باشد . این را هم باید گفت که بسته به روش تعیین موقعیت( positioning ) بکار برده شده، نحوه ی کارکرد آن ها تغییر می کند .

در کل چهار روش مختلف تعیین موقعیت وجود دارد که به ترتیب ذیل توضیح داده شده.

تعیین موقعیت / موقعیت دهی به صورت ایستا ( static positioning )

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

المان هایی که بدین ترتیب در صفحه قرار داده شده باشند، تحت تاثیر خاصیت های top ، bottom ، left وright قرار نمی گیرد .

تعیین موقعیت قرار گیری عنصر به صورت دقیق و ثابت( Fixed positioning )

المانی که مختصات fixed یا ثابت در صفحه داشته باشد، در واقع نسبت به موقعیت پنجره ی مرورگر تعیین مختصات می شود و در صورت بالا و پایین رفتن ( scroll) صفحه نیز هیچ حرکتی نکرده و از جای خود تکان نمی خورد.

مثال

p.pos_fixed { position: fixed; top: 30px; right: 5px; }

 

نکته: IE7 و IE8 هر دو فقط زمانی از مقدار fixed پشتیبانی می کنند که یک !DOCTYPE ( نوعی معرفی در ابتدای سند sgml یا html که یک شناسه ی عمومی یا سیستمی برای تعریف نوع سند / DTD اختصاص می دهد) تعریف شده باشد .

المان هایی که به صورت ثابت ( fixed ) در صفحه قرار داده شده باشند، در حقیقت از جریان ( flow ) عادی صفحه خارج می گردند .
المان هایی که موقعیت ثابت دارند می توانند روی دیگر عناصر قرار گیرند ( همپوشانی یاoverlapping ).

تعیین موقعیت یا موقعیت دهی به صورت نسبی ( relative positioning )

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

h2.pos_top { position: relative; top: 50px; }

المان هایی که بدین ترتیب موقعیت دهی شده باشند، اغلب به عنوان دربرگیرنده های block ویژه ی عناصری که به صورت
 مطلق ( absolute ) در صفحه قرار داده شده باشند بکار گرفته می شوند .

موقعیت دهی به صورت مطلق ( absolute positioning )

در این حالت عنصر نسبت به اولین المان بالای سر خود یا همان المان پدر( parent element) موقعیت دهی می گردد که نوع موقعیتی آن کاملاً متفاوت و غیر از حالت ایستا می باشد . در صورتی که چنین المانی یافت نشد، این عناصر نسبت به عنصر html تغییر موقعیت خواهد داد. ( block دربرگیرنده <html> خواهد بود.)
مثال

h2 { position: absolute; left: 100px; top: 150px; }

در این حالت موقعیت دهی نیز المان ها از جریان عادی صفحه حذف می گردند .

عناصر با موقعیت مطلق می توانند بر روی دیگر عناصر قرار گیرند یا با آن ها هم پوش شوند .

ارسال توسط Saber

آموزش خاصیت display در CSS

CSS, طراحی سایت ۰

آموزش خاصیت display در CSS

 

خاصیت display تعیین می کند آیا المانی نمایش داده شود یا خیر و همچنین نحوه ی نمایش المان را مشخص می کند .

خاصیت دیگر نیز visibility است که تعیین می کند عنصری قابل رویت باشد یا خیر (پنهان باشد ).

پنهان سازی المان

پنهان سازی یک عنصر را می توان با تخصیص مقدار ” none ” به خاصیت display و یا تخصیص ” hidden ” به خاصیت visibility انجام داد .

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

visibility : hidden عنصر مربوطه را پنهان می کند ولی دقیقا همان فضایی را که از قبل به خود اختصاص داده بود را اشغال می کند . به عبارتی دیگر, المان مخفی خواهد شد ولی در عین حال layout (شِمای کلی) را تحت تاثیر قرار می دهد.

مثال

h1.hidden { visibility: hidden; }

display : none عنصر مورد نظر را مخفی می سازد ، ولی درست برخلاف visibility : hidden هیچ فضایی را اشغال
نمی کند . المان پنهان گشته و صفحه ی مورد نظر به گونه ای نمایش داده می شود که گویی آن المان اصلا حضور ندارد.

مثال

h1.hidden { display: none; }

خاصیت Display در CSS – عناصر Block و Inline

المان block , عنصری است کل پهنا یا عرض موجود را به خود تخصیص داده و اشغال می کند, یک خط فاصله قبل و بعد آن قرار می گیرد. ( در واقع به صورت عنصری مجزا و مستقل نمایش داده می شود)

مثال هایی از المان های block زیر ارائه شده

  • <h1>
  • <p>
  • <li>
  • <div>

یک عنصر inline ( درون خطی) تنها به اندازه ی لازم پهنا را می گیرد و هیچ خط فاصله ی ایجاد نمی کند، که حالت پیش فرض می باشد .

نمونه هایی از آن را زیر مشاهده می کنید

  • <span>
  • <a>

اصلاح نحوه ی نمایش یک عنصر

تغییر یک المان درون خطی ( inline element ) به یک block element ، و یا عکس آن ، می تواند در تنظیم ظاهر وب به صورت دلخواه ، ولی با رعایت استانداردهای فعلی وب برای طراح بسیار مفید واقع شود .

مثال ذیل المان های <li> را به صورت درون خطی ( inline ) نمایش می دهد.

مثال

li { display: inline; }

حال این مثال عناصر <span> را به صورت مجزا (block ) نمایش می دهد.

مثال

span { display: block; }

نکته: تنظیم خاصیت display تنها نحوه ی نمایش المان را تغییر می دهد و نه نوع المان مورد نظر را .

از این رو یک عنصر درون خطی ( inline ) با display : block اجازه ی جای دادن دیگر المان های block در خود را ندارد.

انتخابگرهای کاذب در CSS کلاس های کاذب_المان های کاذب_
ارسال توسط Saber

انتخابگرهای کاذب در CSS

CSS, طراحی سایت ۰

انتخابگرهای کاذب در CSS

انتخابگرهای کاذب کلمه های کلیدی هستند که آنها را میتوان به سلکتورهای دیگر اضافه کرد ، این انتخابگرها همیشه به همراه علامت دو نقطه (:) به کار میروند.

انتخابگرهای کاذب را میتوان به دو دسته ی کلی تقسیم بندی کرد:

  1. المان های کاذب (Psuedo elements)
  2.  کلاس های کاذب (Psuedo classes)

المان های کاذب :

با استفاده از  انتخابگرهای کاذب میتوان بخشی از یک المان را انتخاب و استایل های CSS را روی آن اعمال کرد , چهار دستور وجود دارد که زیر مجموعه ی المان های کاذب هستند:

  1. first-letter
  2.   first-line
  3.  before
  4.  after

انتخابگر های first-letter و first-line :

با استفاده از انتخابگر first-letter: و first-line: به ترتیب میتوان استایل مورد نظر را بر روی اولین حرف و اولین خط از یک المان اعمال کرد. این انتخابگرها فقط بر روی تگ هایی که خاصیت بلاک (block) دارند عمل میکند به عنوان مثال پاراگراف ها.

p:first-letter{font-size: 120%;}
p:first-line{font-weight: bold;}

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

انتخابگرهای before و after :

همانطور که از نام انتخابگرهای before: و after: پیداست ، این انتخابگرها مکان قبل و بعد از یک المان را مورد انتخاب قرار میدهند. از این انتخابگرها به همراه خاصیت content میتوان محتوایی را قبل یا بعد از یک المان اضافه کرد.

p:before{content:”Before”;}
p:after{content:”After”;}

این قوانین باعث می شوند پاراگراف زیر به صورت BeforeMiddleAfter نمایش داده شود!!!

<p>Middle</p>

خاصیت content به صورت خاص همراه با after: و before: به کار میرود و تنها خاصیتی است که مرز بین محتوا (html) و طراحی (css) را از بین میبرد. به یاد داشته باشید که این مرز تنها هنگامی باید شکسته شود که قرار است قسمتی از محتوا با تصمیم گیری های طراح ایجاد شود. به عنوان مثال با استفاده از خاصیت content میتوان یک ایکن را قبل از یک المان قرار داد که این کار با استفاده از تابع url انجام پذیر است :

p.bullet:before{content:url(my-bullet.png);}

تابع url را برای مشخص کردن آدرس تصویر مورد نظر استفاده میکنیم.

کلاس های کاذب :

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

  1.  نوع پویا (dynamic)
  2.  ساختار یافته (structural)
  3.  رابط کاربر (user interface)

کلاس های کاذب نوع پویا :

این نوع کلاس های کاذب برای اعمال استایل های CSS بر روی لینک ها یا دیگر المان های تعاملی (interactive) در هنگامی که تغییر حالت میدهند استفاده می شود ، پنج تا از آنها در CSS2 معرفی شده است که به صورت زیر هستند :

  1.  link
  2.  visited
  3.  hover
  4. active
  5.  focus

حال به بررسی هرکدام از کلاس های کاذب پویای بالا میپردازیم :

link و visited :

کلاس های پویای link: و visited: را فقط میتوان بر روی تگ لینک (<a>) اعمال کرد. کلاس link: لینک هایی از صفحه که هنوز بازدید نشده اند را انتخاب میکند در حالی که visited: لینک هایی که مورد بازدید قرار گرفته اند را مورد انتخاب قرار می دهد.

a:link{ } /* unvisited links */
a:visited{ } /* visited links */

در مثال بالا طریقه ی استفاده از visited: و link: را نشان دادیم.

active و hover :

کلاس کاذب active: المان هایی را تحت انتخاب قرار میدهد که فعال شده باشند!!! برای مثال نگهداشتن کلیک موس بر روی یک تگ یا نگهداشتن انگشت خود در صفحات لمسی موبایل بر روی قسمتی از صفحه باعث میشود که ان قسمت به حالت فعال درآید.

a:active{ }/* actived links */

کلاس hover و active را میتوان با تمامی تگ ها به کار برد (برخلاف link و visited که فقط با لینک ها به کار میروند).
انتخابگری که کلاس کاذب hover: به آن افزوده شده باشد قسمتی را مورد انتخاب قرار میدهد که نشانگر موس بر روی آن قرار داشته باشد یا اینکه در صفحات لمسی آن قسمت لمس شده باشد!

a:hover{ }/* hoverd links */

کلاس کاذب hover: را میتوان همراه تمامی المان ها مورد استفاده قرار داد.
هنگامی که از کلاس های کاذب link و visited و hover و active برای یک المان استفاده میکنید برای اینکه استایل های CSS شما به درستی نمایش داده شوند این کلاس های کاذب را باید طبق ترتیب خاصی مورد استفاده قرار داد. کلاس کاذب hover باید بعد از link و visited قرار بگیرد همچنین active باید بعد از hover قرار گیرد.

a:link{ }
a:visited{ }
a:hover{ }
a:active{ }

مثال بالا ترتیب استفاده از این چهار کلاس کاذب را نشان می دهد.

focus :

این کلاس کاذب تنها برای اٍلمان هایی مورد استفاده قرار میگیرد که فوکوس پذیر هستند! بدین معنی که میتوان با صفحه کلید آنها را کنترل کرد. برای مثال تگ <input> این قابلیت را داراست.

تفاوت میان active: و focus: در این است که active: در طول کلیک کردن پایدار است اما focus: تا زمانی که اٍلمان فوکوس خود را از دست دهد باقی میماند.

a:focus{ }

از کلاس کاذب focus در مرورگر IE8 به بالا میتوان استفاده کرد.

ارسال توسط Saber

border در CSS

CSS, طراحی سایت ۰

border در CSS

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

برای مثال شما میخواهید به دور تصویرتان یک خط با ضخامت مشخص با رنگ مشخص اضافه نمایید تا تصویرتان زیبا تر دیده.

نوع استفاده از خاصیت border در CSS به شکل زیر است :

 border: border-width border-style border-color | initial| inherit;

 

border-width:

ضخامت خط را مشخص میکند که شامل مقادیر زیر می باشد:

none : خط را حذف میکند.

hidden : برابر با none است و خط را حذف میکند.

dotted: خط را به صورت نقطه چین نمایش میدهد.

dashed : خط را به صورت نقطه چین نمایش میدهد.

solid : خط را به صورت ممتد و صاف نمایش میدهد.

double : خط را به صورت دو خط موازی نمایش میدهد.

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

ridge : خط را به صورت سه بعدی از خارج نمایش میدهد.

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

outset : خط را به صورت سه بعدی از خارج نمایش میدهد.

initial : مقدار پیش فرض را قرار می دهد.

inherit : با توجه به مقدار عنصر والد مقدار، مشخص میکند،مثلآ اگر برای عنصر border-style مقدار solid مشخص شده باشد، برای عنصر فرزند هم مقدار solid مشخص می شود.

border-color :

رنگ خط ( یا border در CSS ) را مشخص میکند ، برای تعیین رنگ میتوانید از نام رنگ ها ، کدهای hex، rgb ها استفاده کنید. حتی با rgba می توانید مقدار opacity خط را کم و زیاد کنید.

نحوه استفاده از این خاصیت به صورت خلاصه نویسی و استاندارد به شکل زیر است:

border:3px solid red;
border:1px dashed #000000;
border:3px dotted rgba(0,0,0,0,1);

border Radius :

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

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

نحوه استفاده از این خاصیت به شکل زیر است :

border:3px solid red;
border-radius:5px;
ارسال توسط Saber

مبحث box model در CSS

CSS, طراحی سایت ۰

مبحث box model در CSS

 

تمامی عناصر HTML به شکل یک باکس مطرح شده و در css زمانی از box model استفاده می شود که سخنی از دیزاین و ساختار مطرح شود.

تمامی عناصر HTML در css به صورت یک باکس تصور میشود. که این مبحث در طراحی و طرح بندی صفحات استفاده میشود.

box model یا مدل کاری که در باکس قرار می گیرند به شکل زیر هستند :

Margin

border

padding

content

تصویر زیر box model را به صورت واضح تشریح میکند.

margin : این قسمت از box model فضای اطراف border را پوشش می دهد.در ضمن نمی توان به این قسمت دیزاین از قبل پس زمینه تعیین نماییم.

border : این قسمت از box model فضای اطراف content و padding را پوشش می دهد.در ضمن می توانید رنگ ، سبک، و ضخامت border را تعیین نماییم.

padding : این قسمت از box model فضای اطراف content را پوشش می دهد.در ضمن می توانید رنگ پس زمینه را تعیین نماییید.

content : این قسمت از box model محتوای عنصر را برمی گیرد . یعنی این همان جایی است که متن و عکس ها قرار می گیرد.

نکته: برای تنظیم بهتر عرض و ارتفاع حقیقی یک عنصر درک مفهوم box model بسیار مهم میباشد.

در قسمت بالا ما تنها تعریفی از اجزای box model نمودیم، حال هر کدام از اجزا را به صورت مفصل مورد بحث قرار میدهیم که در این مبحث تنها در مورد margin و padding صحبت میکنیم و دیگر اجزای آن را به دلیل بزرگی در مباحث جداگانه مورد بحث قرار میدهیم.

margin :

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

<div class=”content”>
آموزش کامل CSS
</div>

در اینجا عنصر متن آموزش کامل CSS محتوای صفحه می باشد و اگر بخواهیم ای متن را از body به اندازه 50px حاشیه بدهیم از دستور زیر استفاده می کنیم.

.content {margin:50px ;}

در این صورت محتوا از طرف راست، چپ، بالا، پایین به اندازه 50px فاصله میگیرند.

چگونه از margin استفاده نماییم؟

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

margin : margin-top margin-right margin-botom margin-left ;

یعنی :

margin: 10px 15px 20px 40px ;

در مثال بالا ما به اندازه 10px از طرف بالا، به اندازه 20px از سمت راست ، به اندازه 15px از طرف پایین ، به اندازه 40px از چپ فاصله ایجاد کردیم.

انواع نوشتن margin در css :

;margin:10px 5px 15px 20px

سمت بالا 10px، سمت راست 5px ، سمت پایین 15px سمت چپ 20px

; margin:10px 5px 20px

سمت بالا 10px،سمت راست و چپ 5px، سمت چپ 20px

; margin:10px 5px

سمت بالا، پایین 10px، سمت چپ و راست 5px

;margin:10px

سمت بالا، پایین،چپ، راست 10px

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

margin-top: فاصله از بالا

margin-right: فاصله از سمت راست

margin-bottom: فاصله از پایین

margin-left: فاصله از چپ

مثال:

margin-top :20px ;
margin-right :30px ;
margin-lift :10px ;
margin-bottom :15px ;

padding:

این خاصیت در کل برای ایجاد نمودن فاصله داخلی به کار می رود .

<div class=”content”>
آموزش کامل CSS
</div>

در اینجا ما فاصله را از تگ فرزند تطبیق می کنیم. اگر ساده تر بگویم! متن ما (آموزش کامل CSS) را در بین یک باکس در نظر بگیرید فاصله باکس از اصل صفحه را margin و فاصله متن از باکس را padding می گوییم .

.content { margin:50px ; }

padding فاصله محتوای درون تگ را با لبه ی تگ تعیین میکند.به طوری که padding را فاصله داخلی می نامیم.

چگونه از padding استفاده نماییم؟

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

padding: padding-top padding-raight padding-bottom padding-left ;

یعنی

padding:10px 20px 15px 40px ;

در مثال بالا ما به اندازه 10px از طرف بالا، به اندازه 20px از سمت راست، به اندازه 15px از طرف پایین، به اندازه 40px از چپ از لبه تگ تا محتوای داخل تگ فاصله ایجاد کردیم.

انواع نوشتن padding در css :

padding:10px 5px 15px 20px;

سمت بالا 10px، سمت راست 5px ، سمت پایین 15px سمت چپ 20px

padding:10px 5px 15px;

سمت بالا 10px،سمت راست و چپ 5px، سمت پایین 15px

padding: 10px 5px;

سمت بالا، پایین 10px، سمت چپ و راست 5px

padding: 10px;

سمت بالا، پایین ،چپ ، راست 10px

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

padding-top : فاصله از بالا

padding-right : فاصله از سمت راست

padding-bottom : فاصله از پایین

padding-left : فاصله از چپ

مثال :

padding-top:20px ;
padding-right:30px ;
padding-left:10px ;
padding-bottom:15px ;
ارسال توسط Saber

آموزش استایل دهی به جداول در CSS

CSS, طراحی سایت ۰

 آموزش استایل دهی به جداول در CSS

 

در این مبحث در مورد جداول  ، نحوه نمایش جداول در CSS و محتویات آن صحبت می کنیم.

Tabels

 

border-collapse :

این خاصیت مدل حاشیه را برای تگ table مشخص میکند.

این خاصیت دارای مقادیر زیر است:

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

collapsing : در صورت استفاده از این مقدار فاصله بین خانه های جدول و حاشیه های انها قرار نمیگیرد.

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

#result {
border-collapse:separate ;
border-spacing:1em 0.5em ;
}

 

در مثال بالا میزان 1em فاصله افقی را و میزان 0.5em فاصله عمودی را در بین خانه های جدول تعیین میکند.

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

Empty-cells :

با استفاده از این خاصیت می توانید تعیین کنید که آیا رنگ پس زمینه و حاشیه های خانه هایی که محتویات ندارند نمایش داده شوند یا خیر. این خاصیت تنها زمانی استفاده می گردد که خاصیت separate برای جدول استفاده کرده باشیم . اما در مقدار collapsing در نظر گرفته نمی شود.

خاصیت Empty-cells دارای مقادیر زیر می باشد:

show: در صورت استفاده از این مقدار پس زمینه خانه های خالی نمایش داده میشود.

hide : در صورت استفاده از این مقدار پس زمینه خانه های خالی نمایش داده نمی شود.و اگر مقدار تمامی خانه های موجود در یک ردیف جدول برابر با hide باشد و در ضمن این خانه ها نیز خالی باشد ان ردیف نمایش داده نمی شود.

caption-side :

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

این خاصیت دارای مقادیر زیر است:

top: این مقدار مکان متن را در بالا قرار می دهد.

bottom: این مقدار مکان متن را در پایین قرار می دهد.

inherit: این مقدار ، مقدار پیش فرض این خاصیت است.

Posts pagination