آموزش تخصصی css (قسمت اول)

**ملیساا** · 27 شهریور، ۱۳۸۹

مقدمه :

سی اس اس (CSS) چیست؟

CSS سر نام کلمات Cascading Style Sheets به معنی شیوه نامه های آبشاری مي باشد.

اولین ورژن استایلها در سال ۱۹۹۶ ساخته شد. که اولین ورژن آن CSS1 بود. دیگر وژن آن CSS2 می باشد که در سال ۱۹۹۸ ساخته شد که بیشتر برای ویرایش صفحات، نحوه نمایشها تگها و … کاربرد دارد. فایل استایلها با فرمت CSS ذخیره میشوند.

اگرچه برای کد نویسی صفحات Web از HTML استفاده می کنیم ولی در انجام عملیات کنترلی روی قالب بندی ها مشکلات فراوانی در این زبان وجود دارد که باعث ناکارآمدی آن می گردد و اینجاست که قالب بندی آبشاری یا CSS به کمک HTML می آید تا ایجاد قالب بندیهای حرفه ای به راحتی بیشتری انجام شود.

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

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

- Inline Style:

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

تبلیغات وب سایت شخصی - جهانی شوید!

مطالب و نظرات خود را جهانی کنید - پست مطالب - دریافت نظرات بازدید کنندگان - آرشیو موضوعی / تاریخی - ارسال تصاویر و انوع فایل های چند رسانه ای در فضای شخصی خودتان و ...

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

- Embedded or Global Style:

در این نوع، استایل نوشته شده در تمامی صفحه تاثیر خواهد گذاشت.

- Linked or External style sheet:

نوع آخر هم معروف به استایلهای خارجی هستند که به صورت لینک فایل استایل را به صفحات خود لینک میدهید. فایلهای استایل با فرمت CSS ذخیره میشوند.

نسخه های مختلف CSS عبارتند از:

CSS1

CSS2

CSS3

CSS-P

**ملیساا** · 27 شهریور، ۱۳۸۹

در این سلسله ازمقالات، شما چگونگی استفاده از CSS جهت کنترل style و layout چندین صفحه وب بطور همزمان را یاد خواهید گرفت. برای یادگیری CSS، شما باید درکی پایه ای از مفاهیم HTML و XHTML داشته باشید.

نمونه از CSS

نقل قول:

body

{

background-color:#d0e4fe;

}

h1

{

color:orange;

text-align:center;

}

p

{

font-family:"Times New Roman";

font-size:20px;

}

CSS چیست؟

CSS مخفف Cascading Style Sheets است
styleها چگونگی نمایش عناصر HTML را تعریف می کنند
styleها برای حل یک مشکل به HTML 4.0 اضافه شدند
External Style Sheets می تواند در در انجام کار صرفه جویی کند
External Style Sheets در فایل های CSS ذخیره می شوند

نمایش CSS

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

Styleها مشکل بزرگی را حل کردند

HTML هرگز به قصد در برگرفتن tag برای فرمت کردن یک سند ایجاد نشد.

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

وقتی tagهایی مانند و attributeهای رنگ به HTML 3.2 اضافه شد، کابوسی برای برنامه نویسان بود. develop کردن وبسایت های بزرگ، که فونت ها و اطلاعات رنگ به هر صفحه مجزا اضافه شدند، فرآیندی طولانی و پرهزینه شد.

برای حل این مشکل، کنسرسیوم World Wide Web، تصمیم گرفت CSS را ایجاد کند.

در HTML 4.0، می توان کل فرمتینگ را از سند HTML حذف کرد، و در فایل CSS جداگانه ای ذخیره کرد.

امروزه، همه مرورگرها CSS را ساپورت می کنند.

CSS، در انجام مقدار زیادی کار صرفه جویی می کند

CSS، تعریف می کند عناصر HTML چگونه نمایش داده می شوند.

معمولاً Styleها در فایلهای .css ذخیره می شوند. style sheetهای خارجی شما راتنها با ویرایش یک فایل قادر به تغییر ظاهر و layout همه صفحات موجود در یک وبسایت می کند.

مثال

فایل HTML زیر، لینکی به یک style sheet خارجی با تگ است:

نقل قول:

type="text/css" href="ex1.css" />

This header is 36 pt

This header is blue

This paragraph has a left margin of 50 pixels

این، فایل style sheet است:

نقل قول:

body

{

background-color:yellow;

}

h1

{

font-size:36pt;

}

h2

{

color:blue;

}

p

{

margin-left:50px;

}

سینتکس CSS

قاعده CSS، دارای دو بخش اصلی است: یک selector، و یک یا چندین تعریف (declaration):

selector، معمولاً عنصر HTML است که می خواهید style کنید.

هر declaration، از یک property و یک value تشکیل شده است.

property، استایل اتریبیوتی (style attribute) است که می خواهید تغییر دهید. هر property دارای یک value است.

نمونه از CSS

declarationهای CSS، همیشه با یک نقطه ویرگول (;) تمام می شوند، و گروههای declaration در کمانک {} قرار می گیرند:

نقل قول:

p {color:red;text-align:center;}

برای اینکه CSS را بیشتر قابل خواندن کنید، می توانید هر declaration را در یک خط قرار دهید، مانند مثال زیر:

نقل قول:

p

{

color:red;

text-align:center;

}

Commentهای CSS می توانید ازcommentها برای توضیح کدتان استفاده کنید، و ممکن است هنگامی که source code را ویرایش می کنید، به شما کمک کنند. مرورگرها، کامنت ها را نادیده می گیرند.

نقل قول:

/*This is a comment*/

p

{

text-align:center;

/*This is another comment*/

color:black;

font-family:arial;

}

Selectorهای id و class

CSS علاوه بر تنظیم یک style برای عنصر HTML، به شما اجازه تعیین selectorهای خودتان به نام های "id" و "class" را هم می دهد.

سلکتور id

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

سلکتور id از اتریبیوت عنصر HTML استفاده می کند، و با یک "#" تعریف می شود.

قانون style زیر به عنصری با آی دی ="para1" اعمال می شود:

نقل قول:

#para1

{

text-align:center;

color:red;

}

نام id را با عدد شروع نکنید! زیرا در Mozilla/Firefox کار نمی کند.

سلکتور class

از سلکتور class برای تعیین یک style برای گروهی از عناصر استفاده می شود. برخلاف سلکتور id، سلکتور class اغلب روی چندین عنصر بکار می رود.

این کار به شما اجازه تعیین یک style معین برای هر عنصر HTML با همان کلاس را می دهد.

سلکتور کلاس از اتریبیوت کلاس HTML استفاده می کند، و با یک "." تعریف می شود.

در مثال زیر، همه عناصر HTML با کلاس ""center، وسط چین خواهند شد:

.center {text-align:center;}

هرگز نام یک کلاس را با عدد شروع نکنید! زیرا فقط در Internet Explorer ساپورت می شود.

**ملیساا** · 27 شهریور، ۱۳۸۹

سه راه برای insert کردن CSS

External style sheet
Internal style sheet
Inline style

Style Sheet خارجی (external)

Style Sheet خارجی، هنگامی که style به صفحات زیادی اعمال می شود، مناسب است. با یک Style Sheet خارجی، می توانید ظاهر کل یک سایت ر با تغییر دادن یک فایل عوض کنید. هر صفحه باید با استفاده از تگ به style sheet لینک شود. تگ ، درون بخش head قرارمی گیرد:

نقل قول:

Style Sheet خارجی، را می توان در یک text editor نوشت. این فایل نباید حاوی هیچ تگ html باشد. style sheet شما باید با پسوند .css ذخیره شود. نمونه ای از یک style sheet در زیر نشان داده شده است:

نقل قول:

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

فضاهای بین مقدار property و واحدها را خالی نگذارید!

Style Sheet داخلی (internal)

Style Sheet داخلی باید هنگامی مورد استفاده قرار گیرد که یک سند واحد، style منحصر به فردی دارد. styleهای داخلی با استفاده از تگ

نقل قول:

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

Styleهای Inline

استایل inline، با ترکیب کردن contentبا presentation، بسیاری از مزایای style sheetها را از دست می دهد. از این متد باید به ندرت استفاده کرد.

برای استفاده از استایل های inline، باید از اتریبیوت استایل در تگ مربوط استفاده کرد. اتریبیوت استایل ممکن است هر نوع خصوصیت CSS را در بر گیرد. این مثال چگونگی تغییر دادن رنگ و حاشیه چپ یک پاراگراف را نشان می دهد:

نقل قول:

This is a paragraph.

Style Sheetهای چندگانه

اگر بعضی از propertyها برای یک selector در style sheetهای مختلف تعیین شده باشد، valueها از style sheet معینی ارث برده خواهند شد.

مثلاً، یک style sheet خارجی دارای propertyهای زیر برای سلکتور h3 است:

نقل قول:

h3

{

color:red;

text-align:left;

font-size:8pt;

}

و یک style sheet داخلی دارای propertyهای زیر برای سلکتور h3 است:

نقل قول:

h3

{

text-align:right;

font-size:20pt;

}

اگر صفحه ای با style sheet داخلی به یک style sheet خارجی لینک شود، propertyهای h3 اینگونه خواهد بود:

نقل قول:

color:red;

text-align:right;

font-size:20pt;

رنگ، از style sheet خارجی ارث می برد و text-alignment و اندازه فونت با style sheet داخلی جایگزین می شود.

Styleهای چندگانه به یک استایل cascade می شوند

Styleها را می توان به طرق زیر معین کرد:

درون یک عنصر HTML
درون بخش head صفحه HTML
در یک فایل CSS خارجی

نکته: حتی style sheetهای خارجی چندگانه را نیز می توان درون یک سند HTML واحد reference کرد.

ترتیب cascade کردن

هنگامی که بیش از یک style که برای عنصر HTML تعیین شده، وجود داشته باشد، از کدام style استفاده می شود؟

معمولاً می توان گفت که همه styleها، با قوانین زیر به یک style sheet مجازی cascade می شود، و قانون چهارم بالاترین اولویت را دارد:

پبش فرض مرورگر
style sheet خارجی
style sheet داخلی (در بخش head)
استایل inline (درون عنصر HTML)

بنابراین، یک استایل inline، بالاترین اولوین را دارد، که بدین معناست که استایلی را که درون تگ

تعریف شده، یا در یک style sheet خارجی، یا در مرورگر را override می کند.

نکته: اگر لینک به style sheet خارجی بعد از style sheet داخلی در HTML

داخلی قرار داده شود، style sheet خارجی، style sheet داخلی را override می کند.

**ملیساا** · 27 شهریور، ۱۳۸۹

پیش زمینه 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;

}

**ملیساا** · 27 شهریور، ۱۳۸۹

متن 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

گروه فونت های 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 {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 */

حالا کد ما کار می کند. و در همه مرورگرها اندازه یکسان را نشان می دهد، و به همه مرورگرها اجازه 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;}

**ملیساا** · 27 شهریور، ۱۳۸۹

لیست های 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 مخصوص لیست های سفارش داده نشده هستند، و بعضی شان مخصوص لیست های سفارش داده شده.

یک تصویر بعنوان 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های دیگر در ترتیب خود باشند، مشکلی پیش نمی آید.

**ملیساا** · 27 شهریور، ۱۳۸۹

از جمله transparent کردن اشیا در مرورگرها ، لود پیشاپیش عکس ها، ثابت کردن فوتر در صفحه ، گرد کردن گوشه های المان ها ، استفاده از فونت ttf خاص در صفحات ، تعیین رنگ متن در هنگام select شدن با موس ،

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

*sepid* · 20 تیر، ۱۳۹۰

تموم شد ؟

مریم راد · 24 تیر، ۱۳۹۰

سپیده تو کی شروع می کنی به آموزش!واسه تو برگشتما!

*sepid* · 25 تیر، ۱۳۹۰

سپیده تو کی شروع می کنی به آموزش!واسه تو برگشتما!

میام ... بزار اون جریانه تموم شه ...نوکرتم هستم ... اون HTML رو شروع کن ... :wubpink:

**masoume** · 14 مرداد، ۱۳۹۰

جدول های CSS

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

قاب های جدول (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;

}

**masoume** · 14 مرداد، ۱۳۹۰

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

متن درون جدول با پراپرتی های 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;

}

**masoume** · 14 مرداد، ۱۳۹۰

دور قاب CSS Box Model

تمامی عناصر HTML را می توان box در نظر گرفت. در CSS، عبارت "box model" هنگام صحبت در مورد design و layout استفاده می شود.

CSS Box Model، الزاماً یک box است که دور عناصر HTML را می گیرد، و تشکیل شده است از: حاشیه ها، قاب ها (border)، padding، و محتوای واقعی.

box model، به ما اجازه می دهد قابی را اطراف عناصر و فضای عناصر در رابطه با عناصر دیگر قرار دهیم.

تصویر زیر، box model را تشریح می کند:

توضیح بخش های مختلف:

margin: نواحی اطراف border را پاک می کند. margin رنگ پیش زمینه ندارد، و کاملا شفاف است

border: یک border اطراف padding و content را می پوشاند. border، از رنگ پیش زمینه box تاثیر می گیرد

padding: نواحی اطراف content را پاک می کند. padding از رنگ پیش زمینه box تاثیر می گیرد

content: محتوای box، یعنی جاییکه متن و تصاویر ظاهر می شوند

به منظور تنظیم صحیح پهنا و ارتفاع عنصر در همه مرورگرها، باید بدانید box model چگونه کار می کند.

پهنا و ارتفاع عنصر

نکته مهم: هنگامی که پراپرتی پهنا و ارتفاع عنصر با CSS را تعیین می کنید، فقط پهنا و ارتفاع ناحیه content را تعیین می کنید. به منظور درک اندازه عنصر، همچنین باید padding، border، و margin را نیز اضافه کنید.

کل پهنای عنصر در مثال زیر، 300px است:

width:250px;

padding:10px;

border:5px solid gray;

margin:10px;

بیایید محاسبه ریاضی اش را هم انجام دهیم:

250px (پهنا)

+ 20px (چپ و راست padding )

+ 10px (چپ و راست border )

+ 20px (چپ و راست margin )

= 300px

تصور کنید فقط 250px فضا دارید. بیایید عنصری با پهنای کل بسازیم:

width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

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

کل پهنای عنصر = پهنا + padding چپ + padding راست + border چپ + border راست + margin چپ + margin راست

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

کل ارتفاع عنصر = ارتفاع + padding بالا + padding پایین + border بالا + border پایین + margin بالا + margin پایین

مبحث سازگاری مرورگرها

اگر مثال قبلی را در Internet Explorer امتحان کرده باشید، دیده اید که کل ارتفاع دقیقاً 250px نبود.

IE، هنگام تعیین پراپرتی پهنا، padding و border را در پهنا محاسبه می کند، مگر اینکه یک DOCTYPE تعریف شود.

برای حل این مشکل، کافیست یک DOCTYPE به کد اضافه کنید:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

div.ex

{

width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

}

**masoume** · 16 مرداد، ۱۳۹۰

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

ورود

آموزش تخصصی css (قسمت اول)

ارسال های توصیه شده

ملیساا 5015

لینک به دیدگاه

ملیساا 5015

This header is 36 pt

This header is blue

لینک به دیدگاه

ملیساا 5015

لینک به دیدگاه

ملیساا 5015

لینک به دیدگاه

ملیساا 5015

-

برای هدینگ ها و از

لینک به دیدگاه

ملیساا 5015

لینک به دیدگاه

ملیساا 5015

لینک به دیدگاه

sepid 9772

لینک به دیدگاه

مریم راد 2736

لینک به دیدگاه

sepid 9772

لینک به دیدگاه

masoume 5751

لینک به دیدگاه

masoume 5751

لینک به دیدگاه

masoume 5751

لینک به دیدگاه

masoume 5751

لینک به دیدگاه

سایت نواندیشان

انجمن نواندیشان

جریان فعالیت های من

کسب درآمد کنید

ورود

آموزش تخصصی css (قسمت اول)

ارسال های توصیه شده

ملیساا 5015

لینک به دیدگاه

ملیساا 5015

This header is 36 pt

This header is blue

لینک به دیدگاه

ملیساا 5015

لینک به دیدگاه

ملیساا 5015

لینک به دیدگاه

ملیساا 5015

-

برای هدینگ ها و از

لینک به دیدگاه

ملیساا 5015

لینک به دیدگاه

ملیساا 5015

لینک به دیدگاه

*sepid* 9772

لینک به دیدگاه

مریم راد 2736

لینک به دیدگاه

*sepid* 9772

لینک به دیدگاه

masoume 5751

لینک به دیدگاه

masoume 5751

لینک به دیدگاه

masoume 5751

لینک به دیدگاه

masoume 5751

لینک به دیدگاه

سایت نواندیشان

انجمن نواندیشان

جریان فعالیت های من

کسب درآمد کنید

sepid 9772

sepid 9772