کارگاه آموزشی توسعه وب

کارگاه آموزشی توسعه وبکارگاه آموزشی توسعه وبCSSCSSبخش دوم - بخش دوم -

ارائه: عباس نادریانجمن علمی دانشجوییمهندسی کامپیوتردانشگاه شهید بهشتی 11نسخه نسخه

CSSچیست ؟

•CSS ی"ا Casacading Style Sheets ی"ک اس"تاندارد ق"الب بن"دی ظ"اهری اس"ناد

است.

منظ"ور می (HTML) ب"رای ق"الب بن"دی اس"ناد وب CSSمعم"ول ت"رین اس"تفاده •

شود.

با پیچی"ده ش"دن وب ه"ا، تص"میم ب"ر آن ش"د ت"ا محت"وا از ق"الب بن"دی تفکی"ک ش"ود •

و توسعه وب تسهیل گردد.

•CSS:سه نسخه اصلی دارد

•CSS 1 توسط 1996: در سال W3C.استاندارد شد

•CSS 2 توس"ط 1998: در س"ال W3C.اس"تاندارد ش"د و هن"وز ب"ه عن"وان استاندارد بکار می رود

•CSS 3 هنوز در دست توسعه توسط :W3C.است

•CSS ب"ه دلی"ل امک"ان اس"تفاده مج"دد، ب"ه ش"دت توس"عه وب را س"اده و س"ریع می

ک"ن"د. "همچ"نین" ق"الب" "بن"دی "ص"فحا"ت "ب"ا ا"س"ت"فا"ده" از آن" در "ق"الب" تیمی مق"دور" خواه"د

بود.

• CSS ق"الب بن"دی را س"رعت می بخش"د. همچ"نین از موت"ور انتخابگره"ا از طری"ق

"در کارب"ردهای دیگر بهره فرا"وان بر"ده م"ی شو"د.CSSانت"خابگر

•Layout Engine برنام"ه ایس"ت در کاوش"گرها ک"ه س"ند :HTML

را دری"افت ک"رده، خ"روجی گ"رافیکی ب"ر روی ص"فحه CSSو فای"ل

تولید می نماید.

•Selector Engine ک""ه کاوش""گر روی ب""ر موتوریس""ت :

را انتخاب می کند.HTMLزیرمجموعه ای از برچسب های

•CSS گرام"ر بس"یار س"اده ای دارد، ب"ا چن"د مث"ال آن"را بررس"ی می کنیم:

Template:Selection {

Property: value;Property: value;//Comment /*Comment */

}

Example:div.main {

background-color:#777777;border-width: 1px;border-style: solid;font-family: ‘Tahoma’;

}

•CSS جزئی"ات گرام"ری مختلفی ن"یز دارد ک"ه در طی این ارائ"ه ب"ا آنه"ا بیش"تر

آشنا خواهیم شد.

استفاده کرد:CSSدر سه جای مختلف می توان از •

ه"ای • ت"وان CSSفای"ل در CSS: می آن"را و نوش"ت ف"ایلی جداگان"ه در را HTML

افزود.

در Style: می ت"وان ب"ا اف"زودن برچس"ب HTML در داخ"ل فای"ل Styleبرچس"ب ه"ای •

Head یاBody ،یک سند CSS.تعریف کرد

CSS ب"رای برچس"ب ه"ا: می ت"وان در یکی از ص"فتهای ه"ر برچس"ب، Styleصفت •

آن"را" ت"ع"ری"ف ک"ر"د. "در "ا"ین "ح"ال"ت "دیگ"ر" ان"تخ"اب"گر" "مط"ر"ح ن"یس"ت و "ق"ا"لب "بن"د"ی ت"نه"ا ب"رای

آن برچسب اعمال می شود.

تعری"ف • ن"وع ت"رتیب CSSسه ب"ه آنه"ا اول"ویت باش"ند. توانن"د همزم"ان می

افزایش می یابد.

( توص"یه نمی ش"ود و ج"دابودن محت"وی از Inline CSSاس"تفاده از ح"الت س"وم )•

ک"ار "را ا"ز "آن ا"س"تفا"ده" جاه"ا"ی "خاص"ی د"ر ام"ا ب"ر"د،" م"ی" زی"ر" س"وال" را ق"ال"ب"

راحتتر می کند.

:HTML جدا و استفاده از آن در CSSتعریف در فایل •

//SomeFile.css

input[text] {

width:200px;

background-color:#000000;

border:solid 0px;

}



<head>

<link rel="stylesheet" href=“SomeFile.css" type="text/css" />

</head>

:HTML در بدنه سند CSSتعریف •

<head>

<style>

Div {

color:#ff0000;

text-align:center;

}

P {

font-size: 16px;}

</style>

</head>

در صفت یک برچسب:CSSتعریف •

<div style=‘background-color:black;color:white;’>

<p style=‘font-family:tahoma;’>

This is some text with tahoma font

</p>

</div>

چگونگی انتخاب برچسبها

ب_ه ك_دامين اش_ياء ي_ك ص_فحه اعم_ال CSSبراي مش_خص ك_ردن اينك_ه ي_ك •

ش_ود، باي_د از انتخابگره_ا اس_تفاده نم_ود. ه_ر انتخ_اب گ_ر ي_ك ي_ا چن_د ش_يء در ي_ك

را انتخ_اب مي كن_د و س_پس مي ت_وان ق_الب ه_اي م_ورد نظ_ر را HTMLص_فحه

به آن اعمال كرد.

تن_وع و ق_درت ب_ه س_زايي دارن_د بن_ابراين در اين بخش در CSSانتخابگره_اي •

حدي كه نيازهاي اوليه مرتفع شوند آنها را بررسي خواهيم كرد.

اولي_ه تعري_ف • ب_ه CSSانتخ_ابگر ه_ا در دو نح_وه ه_ا قاب_ل اس_تفاده هس_تند

قالب زير:

SelectorStatement {

Css Properties & Values;

}

*انتخاب تمام برچسب ها :

tagNameانتخاب برچسب هاي خاص:

ديگ__ر: برچس__ب ي__ك ه__اي زيربرچس__ب از برچس__بي ParentTagانتخ__اب

DescendantTag

ParentTag > ChildTagانتخاب برچسبي از فرزندان يك برچسب ديگر :

Tag1 + Tag2انتخاب برچسبي بعد از يك برچسب ديگر:

Tag[attrib=“value”]انتخاب برچسبي با صفتي خاص:

آنتخاب يك برچسب در وضعيت هاي خاص:

مي توان_د ص_فات خاص_ي HTMLهم_انطور ك_ه قبال ذك_ر ش_د، ه_ر بچس_ب در •

, class ب_ه م_ا كم_ك مي كنن_د، دو ص_فت CSSرا داش_ته باش_د. ص_فاتي ك_ه در

id ب_ه ي_ك برچس_ب در ب_ا اختص_اص دادن اين دو ص_فت مي HTML هس_تند.

آنرا به سادگي كنترل كرد.CSSتوان ويژگيهاي

با تعري_ف ي_ك كالس خ_اص ب_راي برچس_بي ، مي ت_وان آن_را ج_زو دس_ته اي •

مشترك خاصي بر روي همگي آنها اعمال شود. CSSقرار داد كه ويژگيهاي

( ب_راي ي_ك برچس_ب، Unique Identifierبا تعري_ف ي_ك مشخص_ه منحص_ره )•

طري_ق از خاص_ي ه_اي كن_ترل ت_وان آن CSSمي روي ب_ر جاوااس_كريپت و

برچسب اعمال كرد.

نباي_د يكس_ان HTML هيچ دو برچس_بي در ي_ك س_ند idباي_د توج_ه گ_ردد ك_ه •

باشند، در غير اينصورت نتايج قابل پيش بيني نخواهد بود.

* {font-family: “Tahoma”, “Trebuchet”,”MS Sans Serif”

}div.Container {

background-color:#777777;border-width: 1px;

}P#title {

font-weight:bold;}H1 + P {

font-style:italic;}input [type=‘button’] {

border-style:none;}Body Form > input[type=‘text’] {

text-align:center;}DIV P * [title] {

color:#ffffff;}

خاص_ي را ب_ه چن_د انتخ_ابگر يكج_ا اعم_ال ك_نيم، مي ت_وانيم CSSبراي اينك_ه •

آنها را به صورت گروهي قرار دهيم:

div.Container , p , input[type=‘text’] {

font-family: ‘Tahoma’, ‘Comic Sans MS’ ;

}

ب_ه ي_ك برچس_ب خ_اص اعم_ال CSS در ص_ورتي ك_ه چن_د دس_تور يكس_ان •

شوند، آخرين آنها باقي مي ماند.

• CSS ب_ا اس_تفاده از عب_ارات جاوااس_كريپت مي توان_د مق_ادير پوي_ا )نس_بت ب_ه

ها اعمال كند:Property( را به Clientشرايط

Width: expression) document.width /2 (px;

CSS 2مشخصه هاي استاندارد

oBackground خالصه اي براي تنظيم تمام مشخصات : Background

oBackground-Attachement )scroll,fixed( قرارگ__يري وض__عيت :

باش_د، ب_ا جابج_ايي ص_فحه پش_ت fixed، در ص_ورتي ك_ه Backgroundتص_وير در

صفحه آن حركت نخواهد كرد.

oBackground-color )RGB Value(رنگ پشت صفحه :

o Background-image مق_دار ي_ا :none از اس_تفاده ب_ا ي_ا و گ_يرد مي

URL)adress()يك آدرس فايل تصويري )آدرس وب

oBackground-position مق_اديري مانن_د :top left, center center… ,

oBackground-repeat روش ش_ود، اس_تفاده تص_وير از ك_ه ص_ورتي در :

-no-repeat, repeatتك_رار آن_را مش_خص مي كن_د. مق_ادير مج_از عبارتن_د از

x,repeat-y,repeat

oBorder خالص_ه اي ب_راي تنظيم مشخص_ات حاش_يه، ب_ه ت_رتيب ع_رض، ن_وع و رن_گ :

مي گيرد.

oBorder-width ب_ه ع_دد، درص_د و واح_د ه_اي ديگ_ر : ع_رض حاش_يه )ض_خامت آن(

اندازه

oBorder-color رنگ حاشيه به :RGB

oBorder-style مق_ادير از حاش_يه ن_وع :none, hidden, dotted, dashed,

solid, double, groove, ridge, inset, outset

o براي تغي_ير تنظيم_ات مرب_وط ب_ه حاش_يه ن_واحي مختل_ف )ب_اال، پ_ايين، چپ، راس_ت( مي

توا_نيد از چهار_ ويژگي _باال _به هم_راه ن_ام ط_رف مو_رد ن_ظر ا_ستفاده_ نما_ييد، براي مثال:

oBorder-left-width

oBorder-top-color

oBorder-bottom

oCursor مج_از مق_ادير س_ازد، مي معين را م_اوس گ_ر اش_اره ش_مايل :

از -url)file(, auto, crosshair, default, pointer, move, eعبارتن_د

resize, ne-resize, nw-resize , n-resize, se-resize, sw-resize, s-

resize, w-resize , text, wait , help

oDisplay از عبارتن_د مج_از مق_ادير برچس_ب، ي_ك نم_ايش نح_وه :none,

inline, block, list-item, run-in, compact, marker, table, inline-

table.… ,

oFloat ب_ه ط_رفي خ_اص، مق_ادير مج_از ي_ك برچس_ب : گ_رايش و ش_ناوري

left, right, noneعبارتند از

oPosition نح_وه قرارگ_يري ي_ك برچس_ب در ي_ك س_ند، مق_ادير مج_از عبارتن_د :

Static, Relative, Absolute, Fixedاز

oHeightارتفاع يك برچسب در سند. مشخصه اندازه اي :

oLine-Heightفاصله بين دو خط متن در سند :

oMax-Heightحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد :

oMin-Heightحداقل ارتفاع يك برچسب :

oWidthعرض يك برچسب :

oMax-Widthحداكثر عرض يك برچسب :

oMin-Widthحداقل عرض يك برچسب :

oFontميانبري براي اعمال مشخصات كامل فونت و قلم :

oFont-Family ن_ام قلم، به_تر اس_ت ليس_تي از قلمه_ا بس_ته ب_ه پش_تيباني از سيس_تم ه_ا :

ق_لم _ نوش_ته_ _ه_اي _فا_رس_ي _ب_ا م_عم_وال_ خ_وب _نم_ايش_ _داده _مي Tahomaا_نت_خ_اب _ش_ود._

شوند.

oFont-Size ان_دازه قلم. هم مي توان_د از ان_واع مق_داري ق_رار داده ش_ود هم مي توان_د :

,xx-small, x-small, small, medium, large, x-largeيكي _از مق_ا_دير م_ج_از با_ش_د

xx-large, smaller, larger

oFont-Stretch كش_يدگي ف_ونت )فاص_لي افقي م_ابين حرفه_اي آن( ي_ا مق_دار ع_ددي ي_ا :

از_ _مق_ادي_ر ,normal, wider, narrower, ultra-condensed, extra-condensedي_ك_ي

condensed, semi-condensed, semi-expanded, expanded, extra-expanded,

ultra-expanded

oFont-Style يكي از مقادير :Normal, Italic, Oblique

oFont-Weight يكي از مق_ادير :normal, bold, bolder, lighterو ي_ا مق_دار عددي

oList-Style مي_انبري ب_راي تنظيم_ات ليس_ت. ب_ه ت_رتيب، ن_وع ، م_وقعيت و :

تصوير ليست را مي گيرد

oList-Style-Image: none , url)file(

oList-style-Position: inside, outside

oList-Style-Type از ,none: ش_كل م_وارد ليس_ت، م_وارد مج_از عبارتن_د

disc, circle, square, decimal, decimal-leading-zero, lower-

roman, upper-roman, lower-alpha, upper-alpha, lower-greek,

lower-latin, upper-latin, hebrew, armenian, georgian, cjk-

ideographic, hiragana, katakana, hiragana-iroha, katakana-

iroha

oMarker-Offset مقدار يا( فاصله عالمت از نوشتار :auto)

oMargin ،مي_انبري ب_راي تنظيم_ات كن_اره. ب_ه ت_رتيب ان_دازه كن_اره ه_اي ب_اال :

راست، پايين و چپ را مي گيرد )ساعتگرد(

oMargin-left, Margin-right, Margin-top, Margin-bottom مق_دار :

autoكناره، مقدار يا

oPadding ،ب_اال ت_رتيب ب_ه ب_راي تنظيم مشخص_ات اليي گ_ذاري، : مي_انبري

راست، پايين و چپ

oPadding-left, Padding-right, Padding-top, Padding-bottom :

autoمقدار اليي گذاري، مقدار يا

oOutline مي_انبري ب_راي تم_ام تنظيم_ات خ_ط حاش_يه، ب_ه ت_رتيب رن_گ، ن_وع و :

عرض

oOutline-color رنگ خط حاشيه به :RGB

oOutline-style ن_وع خ_ط حاش_يه ي_ك ش_يء، ان_وع مج_از عبارتن_د از :none,

dotted, dashed, solid , double , groove, ridge, inset, outset

oOutline-width از مق_ادير يكي ي_ا : قط_وري خ_ط حاش_يه، مق_دار ع_ددي

thin, thick, medium

oOverflow در ص_ورتي ك_ه محتوي_ات ي_ك برچس_ب در آن ج_اي نگيرن_د، اين :

از عبارتن_د مج_از مق_ادير بيافت_د. اتف_اقي چ_ه ك_ه س_ازد مي معين مشخص_ه

Visible, Hidden, Auto, Scroll

oPosition نح_وه قرارگ_يري برچس_ب نس_بت ب_ه س_ند، مق_ادير مج_از عبارتن_د :

Static, Relative, Absolute, Fixedاز

oVertical-Align نح_وه قرارگ_يري عم_ودي ي_ك برچس_ب در داخ_ل برچس_ب :

از عبارتن_د مج_از مق_ادير كن_د. مي مش_خص را خ_ود ,baseline, subپ_در

super, top, text-top, middle, bottom, text-bottom مق_دار ي_ا و

عددي

oZ-Index يع_ني جل_و پش_ت( بع_د س_وم در ص_فحه اول_ويت قرارگ_يري در :

يا يك عددAutoديگر برچسب ها(.

oBorder-Collapse معين مي س_ازد ك_ه حواش_ي ج_داول ج_دا باش_ند و ي_ا :

Separate , Collapseيك مجموعه خط بهم پيوسته باشند. مقادير مجاز

oBorder-Spacing تنه_ا در ص_ورتي ك_ه مي_ان دو حاش_يه ج_دول، : فاص_له

Seperate.باشد

o½ٍEmpty-Cells م_دل در خ_الي ه_اي س_لول ك_ه كن_د مي مش_خص :

Seperate نمايش داده شوند و يا خير. مقادير مجاز Show/Hide

oTable Layout ،ج__دول ي__ك س__لولهاي نم__ايش نح__وه الگ__وريتم :

Auto/Fixed

oColor ،رنگ يك متن را مشخص مي سازد :RGB

oDirection ،جهت متن )و محتوي_ات( ي_ك برچس_ب را مش_خص مي س_ازد :

LTR/RTLمقادير مجاز

oText-Align مقادير مجاز :Left, Right, Center, Justify

oText-Decoration از عبارتن_د مج_از مق_ادير متن، ب_ه افك_تي اف_زودن :

none, underline, overline, line-through, blink

oText-Indentتو رفتگي اولين خط يك متن. مقدار عددي :

oWord-Spacing ،فاصله ميان لغات يك متن :normalيا مقدار عددي

oLetter-Spacing ،فاصله ميان حروف يك متن :normalيا مقدار عددي

CSSتسلط كامل بر

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

o بیتی 24تعیین مقدار RGBآنها

oاستفاده از نام رنگ

o میلی_ون رن_گ مختل_ف ب_رای انتخ_اب وج_ود دارن_د، ام_ا در 16در روش اول

رنگ با نام های مختلف قابل استفاده هستند.200روش دوم حدود

o :برای مش_خص ک_ردن رن_گ ب_ا ن_ام آن، کافیس_ت ن_ام رن_گ را بنویس_یدCyan,

Purple

o برای مش_خص ک_ردن رن_گRGB ب_ه ت_رتیب #، پس از ق_رار دادن عالمت

FFFFFF , #00FF00# وارد می کنیم: 16 را در مبنای B و G و Rمقدار

o همچ_نین می ت_وان ب_رای مش_خص ک_ردن رن_گRGB ب_ه ص_ورت روب_رو عم_ل

)70%,20%,100%(RGB و یا)RGB)100,255,10 کرد:

o تم_امی مق_ادیر ان_دازه ای درCSS واح_د ه_ای متف_اوتی را می پذیرن_د. پای_ه

ب_ا Pixelای ت_رین واح_د هم_ان انته_ای مق_دار مش_خص می px اس_ت ک_ه در

گردد. واحدهای دیگر عبارتند از:

o%!درصد :

oInاینچ :

oCmسانتیمتر :

oMmمیلیمتر :

oEmاندازه فونت :

oPt: 1/72اینتچ

oPc: 12 pt

oPxیک نقطه :

o شفافیت(Transparency) ک_ه هاییس_ت سیس_تم ب_رای پیچی_ده عملی_ات ی_ک

ک_ارت گ_رافیکی ق_درتم_ن_دی ن_دارد _و مو_ت_ور گ_رافیکی_ کاو_ش_گر ب_ر_ای پی_اده ک_ردن _آن

بشدت زیر بار قرار می گیرد.

o با اس_تفاده از ش_فافیت می ت_وان ج_ذابیت بص_ری را بس_یار ب_االتر ب_رد، ام_ا بای_د

دقت_ داشت که _کند_ی پر_دازش_ تصویری _سایت ب_رای ک_اربر _ایجاد مز_احمت نکند.

o متاس_فانه کاوش_گرIE ک_ه کن_د اس_تفاده می از دس_تورات خ_ود ب_رای ش_فافیت

استاندارد نیستند.

o ب_رای ایج_اد ش_فافیت در کاوش_گرهای اس_تادارد، از Opacity : .5 اس_تفاده می

شود.

o برای ایج_اد ش_فافیت درIE از filter:alpha)opacity=50(.اس_تفاده می شود

o برای اینک_ه ش_فافیت در تم_امی کاوش_گرها درس_ت نم_ایش داده ش_ود الزم اس_ت

هردو دستور باال بکار روند.

o کاوش_گرهایی مانن_دFirefox دس_تورات CSS وی_ژه ای دارن_د )البت_ه IE ن_یز

دستورات مخصوص خود را داراست( .

o عب_ارت–moz-border-radius می توان_د گوش_ه ه_ای مس_تطیل ه_ا را از

;moz-border-radius: 5px-تیزی درآورده و آنها را نرم کند:

o اس_تفاده از این عب_ارت و راه ح_ل ه_ای مش_ابه پیش_نهاد نمی ش_ود زی_را این

قابل مشاهده خواهد بود.Firefoxنما تنها در

oCSS توان_ایی آن_را داراس_ت ک_ه ب_رای رس_انه ه_ای خ_اص تف_اوت کن_د! ب_رای

ی_ک س_ایت را ط_وری تعری_ف کنی_د ک_ه رن_گ نوش_ته ه_ای آن CSSمث_ال می توانی_د

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

o اینک_ه را ب_رای چ_ه رس_انه ای می نویس_یم، از CSSبرای مش_خص ک_ردن

@media:استفاده می کنیم

@media screen

* { color:#ff0000;}

@media print

* { color:#000000;}

از: عبارتن__د معم__ول ه__ای ,all, braille, handheld, printرس__انه

projection, screen, tv… ,

CSS!را قورت بده

o فای_لHTML ای ک_ه در تمرین_ات HTML س_اخته ای_د و تم_امی برچس_ب ه_ا را

ق_الب بن_دی کنی_د. س_عی CSSداراس_ت، ب_ا اس_تفاده از تم_امی برچس_ب ه_ای

کنی_د زیب_ایی ک_اف_ی و ق_ا_لب بن_دی_ من_اس_ب ب_رای س_ن_د اتف_اق _بیافت_د! د_ر د_اخ_ل س_ن_د

اض_اف_ه کنی_د و_ ی_ا ب_ه_ بر_چس_ب ه_ا_ی SPAN و DIVتنه_ا می _توانی_د_ برچس_بهای

بیافزایید.ID , CLASSموجود

o بدون اس_تفاده از ج_داول و تنه_ا ب_ا اس_تفاده ازCSS ی_ک ص_فحه س_ه س_تونی

( بسازید.SBCE.ir)مانند

o آی_ا می ت_وان ب_ا اس_تفاده ازCSS من_و س_اخت؟ اگ_ر بل_ه راه ح_ل را معین

کنید.

o مزایا و معایب نوشتنCSS.در یک فایل جداگانه را برشمارید

o با اس_تفاده ازCSS ی_ک taskbar ب_رای ی_ک ص_فحه بس_ازید ک_ه هم_واره در

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

کارگاه آموزشی توسعه وب

Documents