تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

یکشنبه 12 آبان 1392

آموزش تخصصی css قسمت دوم

نویسنده: امیر حسینی   

پیش زمینه CSS

propertyهای پیش زمینه CSS برای تعریف افکت های یک عنصر بکار می رود.

propertyهای CSS برای افکت های پیش زمینه استفاده می شوند:

  • رنگ پیش زمینه (background-color)
  • تصویر پیش زمینه (background-image)
  • تکرار پیش زمینه (background-repeat)
  • الصاق پیش زمینه (background-attachment)
  • موقعیت پیش زمینه (background-position)
رنگ پیش زمینه

property رنگ پیش زمینه، رنگ پیش زمینه یک عنصر را تعیین می کنند.

رنگ پیش زمینه صفحه در سلکتور body تعریف می شود:

body {background-color:#b0c4de;}

 

رنگ پیش زمینه را می توان از طریق طرق زیر تعیین کرد:

  • نام – نام یک رنگ، مثلاً "قرمز"
  • RGB – مقدار RGB، مثلاً "rgb(255,0,0)"
  • Hex – مقدار Hex، مثلاً ""#ff0000

در مثال زیر، عنصر های h1، p، و div دارای رنگهای پیش زمینه مختلفی هستند:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

 

تصویر پیش زمینه

property تصویر پیش زمینه، تصویری را برای استفاده به عنوان پیش زمینه عنصر تعیین می کند.

این تصویر بطور پیش فرض تکرار می شود تا کل عنصر را بپوشاند.

تصویر پیش زمینه صفحه را می توان بشکل زیر تعیین کرد:

body {background-image:url('paper.gif');} 

 

مثال زیر، ترکیب بدی از متن و تصویر پیش زمینه است. این متن تقریباً غیر قابل خواندن است:

body {background-image:url('bgdesert.jpg');}

 

تصویر پیش زمینه – تکرار افقی و عمودی

بطور پیش فرض، property تصویر پیش زمینه، تصویری را هم بطور افقی و هم عمودی تکرار می کند.

بعضی از تصویر ها فقط باید افقی یا عمودی تکرار کرد، مگر نه عجیب غریب دیده می شوند، مانند مثال زیر:

body
{
background-image:url('gradient2.png');
}

 

اگر تصویر فقط افقی تکرار شود (repeat-x)، پیش زمینه بهتر بنظر می رسد:

 

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

 

تصویر پیش زمینه – تعیین موقعیت و عدم تکرار

نشان دادن تصویر فقط یکبار، توسط property تکرار پیش زمینه (background-repeat) تعیین می شود:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

 

در مثال بالا، تصویر پیش زمینه در همان مکانی که متن نشان داده شده، نشان داده می شود. ما می خواهیم موقعیت تصویر را تغییر دهیم، بطوریکه زیاد با متن تداخل نداشته باشد.

موقعیت تصویر توسط property موقعیت پیش زمینه (background-position) تعیین می شود:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

 

متن CSS

رنگ متن

property رنگ برای تعیین رنگ متن استفاده می شود. رنگ را می توان از طرق زیر تعیین کرد:

  • نام – نام یک رنگ، مثلاً "قرمز"
  • RGB – مقدار RGB، مثلاً "rgb(255,0,0)"
  • Hex – مقدار Hex، مثلاً ""#ff0000

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

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

 

تراز کردن متن (Text Alignment)

property تراز متن برای تعیین تراز افقی متن استفاده می شود.

می توان متن را در میان، چپ یا راست صفحه چید، یا می توان justify کرد.

وقتی متن justify می شود، هر خط کشیده می شود بطوریکه هر خط دارای پهنای مساوی خواهد بود، و حاشیه های چپ و راست صاف می شوند.

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

 

decoration متن

از این property برای تعیین یا حذف decorationها از متن استفاده می شود.

اکثراً از این property برای حذف underline از لینکها استفاده می شود:

a {text-decoration:none;}

 

همچنین می توان برای decorate کردن متن نیز استفاده کرد:

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

 

انتقال متن (Text Transformation)

از این property برای تعیین بزرگ یا کوچک بودن حروف متن استفاده می شود.

می توان از آن برای بزرگ یا کوچک کردن حروف، یا بزرگ کردن حرف اول هر کلمه استفاده کرد.

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

 

Indentation متن

از این property برای تعیین indentation سطر اول متن استفاده می شود.

p {text-indent:50px;}

 

فونت CSS

propertyهای فونت CSS، نوع فونت، ضخیم بودن، اندازه و سبک متن را تعریف می کنند.

تفاوت بین فونت های SERIF و Sans-serif

clip_image001[1]

گروه فونت های CSS

در CSS، دو گروه فونت وجود دارد:

گروه معمولی – گروهی از فونت ها با ظاهری مشابه (مانند "serif"، یا Monospace)

گرو مخصوص – نوع بخصوصی از فونت ها ( مانند Times New Roman یا Arial)

گروه فونت

گروه فونت متن با property نوع فونت تعیین می شود.

این property باید چندین نام فونت را به صورت سیستم "fallback" داشته باشد. اگر مرورگر اولین فونت را ساپورت نکند، از فونت بعدی استفاده می کند.

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

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

استایل فونت

property استایل فونت (font-style) اکثراً برای کج (italic) کردن متن بکار می رود.

این property دارای سه value است:

  • نرمال – متن بطور عادی نمایش داده می شود
  • کج – متن بصورت کج نمایش داده می شود
  • اریب – متن بصورت "تکیه زده" نمایش داده می شود ( این value شبیه قبلی است، اما کمتر استفاده می شود)
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

اندازه فونت

این property،اندازه فونت را تعیین می کند.

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

همیشه از تگ HTML مناسب، از قبیل <h1> - <h6> برای هدینگ ها و از <p> برای پاراگراف ها استفاده کنید.

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

فونت مطلق:

  • متن را به اندازه ای معین در می آورد
  • به کاربر اجازه تغییر اندازه فونت را در همه مرورگرها نمی دهد
  • فونت مطلق هنگامی مفید است که اندازه فیزیکی خروجی مشخص باشد

فونت نسبی:

  • اندازه را نسبت به عنصر مجاور تعیین می کند
  • به کاربر اجازه تغییراندازه متن در مرورگر را می دهد.

تعیین اندازه فونت با پیکسل ها

تنظیم اندازه متن با پیکسل ها به شما امکان کنترل کامل روی اندازه متن را می دهد.

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

مثال بالا به Firefox، Chrome، و Safari اجازه resize کردن متن را می دهد، ولی به Internet Explorer نمی دهد.

می توان متن را با استفاده از ابزار zoom در همه مرورگرها resize کرد ( اما این کار، کل صفحه را resize می کند، نه فقط متن را).

تعیین اندازه فونت با Em

خیلی از برنامه نویسان جهت پرهیز از مشکل resize کردن ذر Internet Explorer، از em بجای پیکسل استفاده می کنند.

واحد اندازه em، توسط W3C معرفی شده است.

یک em برابر با اندازه کنونی فونت است. اندازه متن پیش فرض در مرورگرها 16px است. پس اندازه پیش فرض یک em، برابر با 16px است.

تبدیل پیکسل به em را می توان از طریق این فرمول انجام داد: pixels/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

در مثال بالا، اندازه متن در em همان اندازه مثال قبلی در پیکسل است. اما، با اندازه em، تنضیم اندازه متن در همه مرورگرها ممکن است.

متاسفانه، هنوز مشکلی در IE وجود دارد. هنگام resize کردن متن، از مقداری که باید، بزرگتر ، و از مقداری که باید، کوچکتر می شود.

استفاده از ترکیبی از درصد و Em

solutionیی که در همه مرورگرها جواب می دهد، تنظیم اندازه فونت به درصدی از عنصر بدنه است:

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

حالا کد ما کار می کند. و در همه مرورگرها اندازه یکسان را نشان می دهد، و به همه مرورگرها اجازه zoom یا resize کردن متن را می دهد.

لینک های CSS

لینک ها را می توان به روش های مختلفی style کرد.

Style کردن لینک ها

لینک ها را می توان با هر پراپرتی CSS، استایل کرد ( مثلاً رنگ، گروه فونت، رنگ پشت زمینه).

نکته ویژه در مورد لینک ها این است که می توان آنها را به طور متفاوتی، بسته به حالتی که در آن هستند، استایل کرد.

لینک ها چهار حالت دارند:

  • a:link – یک لینک نرمال و بازدید نشده
  • a:visited – لینکی که کاربر بازدید کرده است
  • a:hover – یک لینک، هنگامی که کاربر روی آن کلیک می کند
  • a:active – یک لینک، لحظه ای که کلیک می شود
a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */

برای تنظیم استایل برای حالت های مختلف لینک، چند قانون وجود دارد:

  • a:hover باید بعد از a:link و a:visited باشد
  • a:active باید بعد از a:hover باشد

استایل های رایج لینک

در مثال بالا، لینک، رنگ را بر اساس حالتی که در آن است تغییر می دهد.

بیایید نگاهی به روش های رایج دیگر برای استایل کردن لینک ها بیاندازیم:

decoration متن

از پراپرتی text-decoration اکثراً برای حذف underline از لینک ها استفاده می شود:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

رنگ پیش زمینه

پراپرتی رنگ پیش زمینه (background-color)، رنگ پیش زمینه برای لینک را تعیین می کند:

 
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

لیست های CSS

پراپرتی های لیست CSS به شما اجازه می دهند:

  • لیستی متفاوت از item markerها را برای لیست های سفارش داده شده تعیین کنید
  • لیستی متفاوت از item markerها را برای لیست های سفارش داده نشده تعیین کنید
  • تصویری را بعنوان لیست item marker تعیین کنید

لیست

در HTML، دو نوع لیست وجود دارد:

  • لیست های سفارش داده شده – لیست آیتم ها با bullet نشانه گذاری می شوند
  • لیست های سفارش داده شده – لیست آیتم ها به اعداد یا حروف نشانه گذاری می شوند

با CSS، می توان لیست ها را بیشتر style کرد، و می توان تصاویر را بعنوان لیست item marker استفاده کرد.

لیست Item Markerهای مختلف

نوع لیست item marker، با پراپرتی list-style-type تعیین می شود:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

بعضی از مقادیر property مخصوص لیست های سفارش داده نشده هستند، و بعضی شان مخصوص لیست های سفارش داده شده.

 
untitled
 
 

یک تصویر بعنوان List Item Marker

جهت تعیین یک تصویر بعنوان List Item Marker، از پراپرتی list-style-image استفاده کنید:

ul
{
list-style-image: url('sqpurple.gif');
}

مثال بالا به یک اندازه در همه مرورگرها نمایش داده نمی شود. IE و Opera، مارکر تصویر را کمی بزرگتر از Firefox، Chrome، و Safari نمایش می دهند.

اگر می خواهید image-marker در همه مرورگرها به یک اندازه نمایش داده شوند، یک crossbrowser solution در زیر توضیح داده شده است.

Crossbrowser Solution

مثال زیر، image-marker را به یک اندازه در همه مرورگرها نمایش می دهد:

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

این مثال توضیح می دهد که:

  • برای ul:
  •  
    • list-style-type را روی none تنظیم کنید تا list item marker را حذف کنید
    • هم padding و هم margin را روی 0px تنظیم کنید
  • برای li
    • URL تصویر را تعیین کنید، و آن را ققط یکبار نمایش دهید (no-repeat)
    • تصویر را جایی قرار دهید که می خواهید (چپ 0px و پایین 5px)
    • متن را در لیست با padding چپ قرار دهید

لیست – تسریع در نوشتن CSS

تعیین کردن همه پراپرتی در یک پراپرتی واحد نیز ممکن است. به این پراپرتی، shorthand property می گویند.

shorthand propertyیی که برای لیست ها استفاده می شود، پراپرتی list-style است:

 
ul
{
list-style: square url("sqpurple.gif");
}

هنگام استفاده از این پراپرتی، ترتیب valueها به ترتیب زیر است:

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

اگر یکی از valueهای بالا وجود نداشته باشد، تا وقتی که valueهای دیگر در ترتیب خود باشند، مشکلی پیش نمی آید.

 
 
 
 

جدول های CSS

ظاهر یک جدول HTML را می توان با CSS به طور چشم گیری بهبود داد:

 
image

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

قاب های جدول (Table Border)

جهت تعیین کردن قاب های جدول در CSS، از پراپرتی border استفاده کنید.

مثال زیر، قابی سیاه را برای جدول تعیین می کند، عنصر های th، و td:

table, th, td
{
border: 1px solid black;
}

 

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

جهت نمایش دادن قاب مجزا برای جدول، از پراپرتی border-collapse استفاده کنید.

Collapse Borderها

پراپرتی border-collapse تعیین می کند آیا قاب های جدول به یک قاب مجزا یا ادغام شوند یا جدا شوند:

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

 

ارتفاع و پهنای جدول

ارتفاع و پهنای جدول بوسیله پراپرتی های پهنا و ارتفاع تعریف می شوند.

مثال زیر پهنای جدول را روی 100%، و ارتفاع عنصر th را روی 50px تنظیم می کند:

table 
{
width:100%;
}
th
{
height:50px;
}

 

تراز کردن متن جدول

متن درون جدول با پراپرتی های text-align و vertical-align تراز می شود.

پراپرتی text-align، تراز افقی مانند چپ، راست، یا مرکز را تنظیم می کند:

td
{
text-align:right;
}

 

پراپرتی vertical-align، تراز عمودی مانند بالا، پایین، یا وسط را تنظیم می کند:

td
{
height:50px;
vertical-align:bottom;
}

 

padding جدول

جهت کنترل فضای بین قاب و محتوای جدول، باید از پراپرتی padding روی عناصر td و th استفاده کرد:

td
{
padding:15px;
}

 

رنگ جدول

مثال زیر، رنگ قاب ها، متن و رنگ پیش زمینه عناصر td و th را تنظیم می کند:

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}


نظرات() 
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
How do you treat Achilles tendonitis?
پنجشنبه 23 شهریور 1396 08:35 ق.ظ
I've been surfing online more than 3 hours today,
yet I never found any interesting article like yours. It's pretty worth enough for
me. In my view, if all site owners and bloggers
made good content as you did, the web will be much more
useful than ever before.
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com