نام کاربری :   
کلمه عبور :   
[فراموشی کلمه عبور]
صفحه اصلي > دانش و فناوری > علوم کاربردی 


  چاپ        ارسال به دوست

آموزش تخصصی CSS (قسمت سوم)

 

لینک های 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;
}


برگرفته شده از سایت تحلیل داده


٠٧:٤٧ - 1390/12/29    /    شماره : ٧٤٢    /    تعداد نمایش : ٤٢٥



خروج





   مطالب مرتبط
بازدیدها
امروز :5743
کل بازديدها :10237920
بازديدکنندگان آنلاين :12
بازديدازاین صفحه :109845