استایل دهی عناصر در CSS(جلسه دوم) 


استایل دهی عناصر در CSS(جلسه دوم)

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

تغییر رنگ و تصویر پس زمینه در CSS

 

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

این خصوصیات عبارتند از:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

رنگ پس زمینه

 

خصوصیت background-color رنگ پس زمینه یک عنصر را مشخص می کند.

در مثال زیر رنگ پس زمینه در گزینشگر body تنظیم شده است:

مثال

body {background-color:#b0c4de;}

در CSS رنگ به یکی از روش های زیر مشخص می شود:

  • name: نام رنگ باید مشخص شود مانند “red”
  • RGB: به صورت RGB مشخص می شود مانند “(rgb(255,0,0”
  • Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

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

مثال

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

نمایش یک عکس در پس زمینه

 

خصوصیت background-image یک عکس را به عنوان پس زمینه برای یک عنصر مشخص می کند.

به صورت پیش فرض عکس در محور X و Y تکرار می شود و تمام پس زمینه عنصر مورد نظر را می پوشاند.

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

مثال

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

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

مثال

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

تکرار عکس در محور X و Y

 

اگر تکرار عکس تنظیم نشود، به صورت پیشفرض عکس مورد نظر در دو محور X و Y تکرار خواهد شد.

بعضی مواقع یک عکس باید فقط در محور X و یا فقط در محور Y تکرار شود، در مثال زیر عکس به طور پیشفرض در دو محور X و Y تکرار شده است:

مثال

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

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

مثال

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

تنظیم مکان عکس پس زمینه

 

توجه: زمانی که از عکس پس زمینه استفاده می کنید، توجه داشته باشید که عکس مورد نظر باعث ناخوانایی متن نشود.

در مثال زیر با تنظیم خصوصیت background-repeat با مقدار “no-repeat” عکس پس زمینه فقط یکبار نمایش داده می شود.

مثال

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

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

مکان عکس پس زمینه یک عنصر، با خصوصیت background-position مشخص می شود:

مثال

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

مختصر نویسی – پس زمینه

 

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

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

در CSS از خصوصیت “background” برای مختصر نویسی پس زمینه استفاده می شود:

مثال

body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}

ترتیب مقادیر باید به صورت زیر باشد:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

 

 


کلیه خصوصیات مربوط به پس زمینه

 

خصوصیت توضیحات
background

کلیه خصوصیات مربوط به پس زمینه را در یک مرحله تنظیم می کند.

background-attachment

مکان عکس پس زمینه با Scroll خوردن صفحه حفظ شود یا نه

background-color

رنگ پس زمینه یک عنصر را تنظیم می کند.

background-image

عکس پس زمینه یک عنصر را تنظیم می کند

background-position

مکان عکس پس زمینه یک عنصر را تنظیم می کند

background-repeat

چگونگی تکرار عکس پس زمینه یک عنصر را تنظیم می کند


استایل دهی متن

ویژگی های متن در CSS

 

قالب بندی متن

این متن بوسیله چند خصوصیت مربوط به متن، قالب بندی شده است، در عنوان، از خصوصیت text-align و color و text-transform استفاده شده است، البته خصوصیت text-transform برای حروف فارسی کارایی ندارد. برای این پاراگراف نیز، تورفتگی خط ابتدایی ، ترازبندی متن و فاصله بین حروف تنظیم شده است. همچنین underline از لینک روبرو حذف شده است.

رنگ متن (Color)

 

خصوصیت color رنگ متن را تنظیم می کند.

در CSS رنگ، به یکی از روش های زیر مشخص می شود:

  • name: نام رنگ باید مشخص شود مانند “red”
  • RGB: به صورت RGB مشخص می شود مانند “(rgb(255,0,0”
  • Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

در این مثال رنگ پیشفرض برای صفحه در گزینشگر body تنظیم شده است:

مثال

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

تراز بندی متن (Alignment)

 

خصوصیت text-align برای تراز بندی متن در جهت محور X استفاده می شود.

متن را می توان در مرکز یا چپ یا راست و یا کل فضای اختصاص داده شده قرار داد.

زمانی که خصوصیت text-align با مقدار justify تنظیم می شود، با کش آمدن خطوط پاراگراف، خطوط یکسان خواهند شد. (مانند متن روزنامه ها و مجله ها)

مثال

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

آذین بندی متن (Decoration)

 

خصوصیت text-decoration برای تنظیم و یا حذف Decorationهای یک متن استفاده می شود.

این خصوصیت معمولاً برای حذف underline لینک ها استفاده می شود (به صورت پیشفرض یک لینک دارای underline می باشد):

مثال

a {text-decoration:none;}

این خصوصیت همچنین برای آذین بندی یا Decoration متن استفاده می شود:

مثال

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

توجه: توصیه می شود برای متن های معمولی که لینک نیستند، از underline استفاده نشود، چون اغلب، کاربران را به اشتباه می اندازد.


حروف کوچک و بزرگ (Transformation)

 

خصوصیت text-transform حروف یک متن را به حروف بزرگ یا کوچک تبدیل می کند، بنابراین برای حروف فارسی کاربرد ندارد.

  1. uppercase: تمام حروف یک متن را به حروف بزرگ تبدیل می کند.
  2. lowercase: تمام حروف یک متن را به حروف کوچک تبدیل می کند.
  3. capitalize: حروف ابتدایی کلمات یک متن را به حروف بزرگ تبدیل می کند.

مثال

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

تو رفتگی ابتدای پاراگراف (Indentation)

 

خصوصیت text-indentation تورفتگی خط ابتدایی یک پاراگراف را تنظیم می کند.

مثال

p {text-indent:50px;}

 

 


کلیه خصوصیات مربوط به متن

 

خصوصیت توضیحات
color رنگ متن را تنظیم می کند
direction

جهت متن (راست به چپ یا چپ به راست) را تنظیم می کند

letter-spacing

فاصله بین حروف متن را تنظیم می کند

line-height

فاصله بین خطوط یک پاراکراف را تنظیم می کند

text-align

تراز بندی متن در جهت محور X را تنظیم می کند

text-decoration

آذین بندی یا decoration یک متن را تنظیم می کند

text-indent

تورفتگی خط ابتدایی یک پاراگراف را تنظیم می کند

text-shadow

به یک متن افکت سایه اضافه می کند

text-transform

کوچکی یا بزرگی حروف یک متن را تنظیم می کند

unicode-bidi  
vertical-align

تراز بندی یک عنصر در جهت محور Y را تنظیم می کند.

white-space

مشخص می کند که با فضاهای خالی داخل یک عنصر چگونه برخورد شود

word-spacing

فاصله بین کلمات یک متن را افزایش یا کاهش می دهد


استایل دهی فونت

فونت در CSS

Wiki

ویژگی های مربوط به فونت در CSS در واقع نوع قلم، ضخامت، اندازه و نوع نمایش یک متن را مشخص می کنند.

در CSS برای مشخص کردن قلم دو راه وجود دارد:

  1. generic family: یک گروه از Fontهایی که شبیه یکدیگرند (مانند Serif,Monospase)
  2. font family: در این روش باید نام یک Font را مشخص کنیم (مانند Tahoma,Arial)

در جدول زیر بعضی از فونت های عمومی لیست شده است:

Generic family Font family توضیحات
Serif Times New Roman
Georgia

 در پایان کاراکترهای این مجموعه از Fontها، یک خط کوچک وجود دارد

Sans-serif Arial
Verdana

در پایان کاراکترهای این مجموعه از Fontها، خطی وجود ندارد

Monospace Courier New
Lucida Console

تمام کاراکترهای این مجموعه، عرض یکسانی دارند


 تنظیم قلم یک متن

 

خصوصیت font-family در واقع نوع قلم یک متن را تنظیم می کند.

این خصوصیت باید چندین نام را به عنوان یدکی در خود نگه دارد تا اگر مرورگر اولین font را پشتیبانی نکرد به سراغ بعدی برود. 

توجه: اگر نام یک font بیشتر از یک کلمه باشد باید آنرا در کوتیشن مارک قرار دهید، مانند: “Times New Roman”

برای لیست کردن fontها از جدا کننده کاما استفاده کنید:

مثال

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

در مثال بالا اگر “Times New Roman” در کامپیوتر کاربر نصب شده باشد، به تگ <p> اختصاص داده خواهد شد و اگر نصب نباشد “Times” استفاده می شود و در نهایت اگر هیچکدام از Fontها موجود نباشد، مرورگر از بین مجموعه فونتهای serif یکی را اختصاص خواهد داد.


تنظیم نوع نمایش یک متن

 

خصوصیت font-style اغلب برای مشخص کردن متن مورب یا italic استفاده می شود.

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

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

مثال

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

تنظیم اندازه یک متن

 

خصوصیت font-size اندازه یک متن را تنظیم می کند.

توجه داشته باشید که مدیریت اندازه متن در وب بسیار مهم است، البته برای تنظیم اندازه متن عنوان ها(header)، استفاده از این خصوصیت مناسب نیست و باید از تگهای <h1> تا <h6> استفاده شود.

مقدار خصوصیت font-size می تواند نسبی یا مطلق باشد:

اندازه مطلق:

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

اندازه نسبی:

  • اندازه با توجه به عناصر احاطه کننده دیگر تنظیم می شود.
  • در این روش به کاربر اجازه داده می شود که در مرورگرها، اندازه متن را تغییر دهد.

نکته: اگر اندازه متن را مشخص نکنید، مقدار پیشفرض برای متن های معمولی مثل پاراگراف ها، ۱۶ پیکسل خواهد بود(۱۶px=1em)


تنظیم اندازه متن با واحد pixel

 

تنظیم اندازه متن با واحد پیکسل، به شما اجازه می دهد تا کنترل بیشتری، روی اندازه متن عناصر داشته باشید:

مثال

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

در مثال بالا اجازه تغییر اندازه متن در مرورگرهای Explorer 9, Firefox, Chrome, Opera, Safari داده می شود.

توجه: مثال بالا در نسخه های IE9 و قبلتر کار نخواهد کرد.

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


تنظیم اندازه متن با واحد Em

 

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

واحد اندازه em توسط W3C پیشنهاد شده است.

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

با استفاده از فرمول روبرو می توان pixel را به 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 */

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

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


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

 

راه حل نهایی که در تمام مرورگرها کار خواهد کرد این است که، یک اندازه پیشفرض به درصد، در تگ <body> تنظیم کنیم:

مثال

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

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

 

 


کلیه خصوصیات مربوط به متن در CSS

 

خصوصیت توضیحات
font

همه ی ویژگی های مربوط به متن را در یک مرحله تنظیم می کند

font-family

Font یک متن را تنظیم می کند

font-size

اندازه یک متن را تنظیم می کند

font-style

Style یک متن را تنظیم می کند

font-variant

اگر با مقدار small-caps تنظیم شود حروف کوچک را در همان فضا به حروف بزرگ تبدیل می کند(حروف بزرگ در اندازه کوچک)

font-weight

ضخامت یک متن را مشخص می کند

 

استایل دهی لینک ها

لینک ها در CSS

 

با توجه به اینکه لینک ها در چه حالتی هستند، می توانید هر Styleی را که مورد نظرتان است به آنها اختصاص دهید.

لینکها چهار وضعیت دارند:

  1. a:link – لینک در حالت معمولی است یعنی مشاهده نشده است.
  2. a:visited – لینک توسط کاربر مشاهده شده است.
  3. a:hover – زمانی که موس کاربر روی لینک قرار دارد.
  4. 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 */

توجه: برای تنظیم Styleهای یک لینک به موارد زیر توجه فرمایید:

  1. a:hover باید بعد از a:link و a:visited آورده شود.
  2. a:active باید بعد از a:hover آورده شود.

Styleهای متداول لینک

 

در مثال بالا رنگ لینک در حالت های مختلف تغییر داد می شود.

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

Styleهای متداول لینک – آذین بندی متن (Decoration)

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

مثال

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

Styleهای متداول لینک – رنگ پس زمینه (Background)

 

خصوصیت background-color برای مشخص کردن رنگ پس زمینه لینک ها استفاده می شود:

مثال

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

استایل دهی لیست ها

لیست ها در CSS

 

خصوصیات مربوط به لیست ها در CSS به شما اجازه می دهد تا:

  • برای لیست های مرتب و نامرتب علامتگذاری های مختلفی را تنظیم کنید.
  • برای علامتگذاری آیتمها، از یک عکس استفاده کنید.

لیست ها در HTML

 

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

  1. لست های نامرتب(unorder list): آیتم های این نوع لیست با هرچیزی غیر از اعداد و حروف علامتگذاری می شوند.
  2. لیست های مرتب(order list): آیتم های لیست با اعداد و حروف، علامتگذاری می شوند.

با CSS بیشتر می توان لیست ها را دستکاری کرد، مثلاً آیتم های لیست را با یک عکس علامتگذاری نمود.


 علامتگذاری های مختلف(Bullet)

 

با خصوصیت 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;}

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


علامتگذاری آیتم ها با یک عکس

 

برای مشخص کردن یک عکس به عنوان علامت آیتم، از خصوصیت list-style-image استفاده کنید:

مثال

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

مثال بالا، در تمام مرورگرها بطور یکسان نمایش داده نخواهد شد. عکس در IE و Opera یک مقدار بزرگ تر از Firefox و Chrome و Safari نمایش داده می شود.

راه حل؟

 

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

مثال

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;
}

توضیح مثال بالا:

  1. ul:
    • با تنظیم خصوصیت list-style-type با مقدار “none” علامتگذاری، حذف خواهد شد.
    • Padding و margin را با مقدار ۰px تنظیم می کنیم(برای سازگاری بیشتر یا compatibility)
  2. li:
    • خصوصیت background-image با آدرس عکس و البته بدون تکرار تنظیم می شود.
    • جای که می خواهید عکس قرار گیرد در خصوصیت background-position تنظیم شده است.(چپ ۰px و پایین ۵px)
    • مکان متن آیتم (</li>متن<li>) در خصوصیت padding-left تنظیم شده است.(برای لیست های فارسی باید خصوصیت padding-right تنظیم شود)

خصوصیت list-style-position

 

اگر آیتم های لیست علامتگذاری شده باشند، این خصوصیت مشخص می کند که علامتگذاری باید داخل(inside) یا خارج(outside) محتوی باشد

مثال

ul
{
list-style-position:inside;
}

 مختصر نویسی – لیست

 

تمام خصوصیات مربوط به لیست را می توان در یک مرحله تنظیم نمود. این کار به اصطلاح، مختصر نویسی نامیده می شود.

خصوصیت list-style برای مختصرنویسی در CSS استفاده می شود:

مثال

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

ترتیب مقادیر:

  1. list-style-type
  2. list-style-position
  3. list-style-image

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


 کلیه ویژگی های مربوط به لیست ها در CSS

 

خصوصیت توضیحات
list-style

 تمام خصوصیات مربوط به لیست را در یک مرحله تنظیم خواهد کرد

list-style-image

آیتم های یک لیست را با یک عکس علامتگذاری می کند

list-style-position

اگر آیتم های لیست علامتگذاری شده باشند، این خصوصیت مشخص می کند که علامتگذاری باید داخل(inside) یا خارج(outside) محتوی باشد

list-style-type

نوع علامتگذاری آیتم های لیست را مشخص می کند.


استایل دهی جداول

جداول در CSS

در CSS به خوبی می توان ظاهر جداول HTML را اصلاح نمود:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France
The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Denmark

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

 

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

همان طور که می دانید برای ساخت جدول در HTML از تگ <table> استفاده می گردد. به عنوان مثال جدول بالا به صورت زیر خواهد بود:

<table>
 <tr>
  <th>…</th>
  <th>…</th>
  <th>…</th>
 </tr>
 <tr>
  <td>…</td>
  <td>…</td>
  <td>…</td>
 </tr>
 …
 …
</table>

در مثال زیر برای عناصر table و th و td خصوصیت border تنظیم شده است:

مثال

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

توجه داشته باشید که جدول مثال بالا دو لبه خواهد داشت. این به خاطر این است که هم برای table و هم برای th/td به صورت جداگانه border تنظیم شده است.

اگر می خواهید فقط یک لبه داشته باشید از خاصیت border-collapse استفاده کنید.

یکی کردن Borderها

 

برای تبدیل لبه های دوخطی به لبه های یک خطی و مجزا از خاصیت border-collapse استفاده می گردد:

مثال

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

عرض و ارتفاع یک جدول (Width/height )

 

عرض و ارتفاع یک جدول با خصوصیات Width و height تعریف می شود.

در مثال زیر عرض جدول ۱۰۰% و ارتفاع آن با ۵۰px تنظیم شده است:

مثال

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

 تراز بندی متن جدول(Alignment)

 

با خصوصیات text-align و vertical-align می توان متن داخل یک سلول جدول را تراز بندی کرد.

خصوصیت text-align متن را در جهت محور X تنظیم می کند (مثل چپ ، راست یا وسط)

مثال

td
{
text-align:right;
}

خصوصیت vertical-align متن را در جهت محور Y تنظیم می کند(مثل بالا، پایین یا وسط)

مثال

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

Padding یک جدول

 

برای کنترل فاصله بین لبه ها و متن در جدول می توان از خصوصیت padding استفاده کرد:

مثال

td
{
padding:15px;
}

رنگ جدول

 

در مثال زیر، در گروه اول یعنی (table, td, th) رنگ لبه ها با رنگ سبز تنظیم شده است و در گزینشگر (th) برای header جدول، رنگ پس زمینه با رنگ سبز و متن داخل آن با رنگ سفید تنظیم شده است:

مثال

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



یک دیدگاه

نقد و بررسی

تگ های مجاز:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">


آیا می خواهید مقاله یا پروژه آموزشی خود را به نام خود جهانی کنید؟
فرصتی عالی برای جهانی شدن.


با عضویت در خبرنامه آموزش های ویژه را در ایمیل خود دریافت کنید.