کارگاه آموزش ی توسعه وب بخش دوم CSS - ارائه : عباس نادری انجمن علمی دانشجویی مهندس ی کامپیوتر نسخه 1 دانشگاه شهید بهشتی CSS چیست ؟ • •معمول ترین.
Download ReportTranscript کارگاه آموزش ی توسعه وب بخش دوم CSS - ارائه : عباس نادری انجمن علمی دانشجویی مهندس ی کامپیوتر نسخه 1 دانشگاه شهید بهشتی CSS چیست ؟ • •معمول ترین.
Slide 1
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 2
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 3
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 4
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 5
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 6
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 7
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 8
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 9
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 10
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 11
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 12
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 13
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 14
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 15
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 16
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 17
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 18
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 19
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 20
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 21
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 22
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 23
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 24
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 25
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 26
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 27
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 28
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 29
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 30
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 31
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 32
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 33
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 34
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 35
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 2
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 3
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 4
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 5
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 6
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 7
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 8
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 9
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 10
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 11
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 12
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 13
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 14
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 15
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 16
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 17
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 18
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 19
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 20
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 21
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 22
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 23
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 24
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 25
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 26
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 27
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 28
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 29
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 30
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 31
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 32
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 33
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 34
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.
Slide 35
کارگاه آموزش ی توسعه وب
بخش دوم CSS -
ارائه :عباس نادری
انجمن علمی دانشجویی
مهندس ی کامپیوتر
نسخه 1
دانشگاه شهید بهشتی
CSSچیست ؟
•
•معمول ترین استفاده CSSبرای قالب بندی اسناد وب ) (HTMLمنظور می شود.
•با پیچیده شدن وب ها ،تصمیم بر آن شد تا محتوا از قالب بندی تفکیک شود و توسعه وب تسهیل
CSSیا Casacading Style Sheetsیک استاندارد قالب بندی ظاهری اسناد است.
گردد.
•
CSSسه نسخه اصلی دارد:
•
• :CSS 2در سال 1998توسط W3Cاستاندارد شد و هنوز به عنوان استاندارد بکار می رود.
• :CSS 3هنوز در دست توسعه توسط W3Cاست.
:CSS 1در سال 1996توسط 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جزئیات گرامری مختلفی نیز دارد که در طی این ارائه با آنها بیشتر آشنا خواهیم شد.
•
•برچسب های Styleدر داخل فایل :HTMLمی توان با افزودن برچسب Styleدر Headیا Body
فایل های :CSSمی توان CSSرا در فایلی جداگانه نوشت و آنرا در HTMLافزود.
یک سند CSS ،تعریف کرد.
•
صفت Styleبرای برچسب ها :می توان در یکی از صفتهای هر برچسب CSS ،آنرا تعریف کرد .در این
حالت دیگر انتخابگر مطرح نیست و قالب بندی تنها برای آن برچسب اعمال می شود.
•
•استفاده از حالت سوم ( )Inline CSSتوصیه نمی شود و جدابودن محتوی از قالب را زیر سوال می
سه نوع تعریف CSSمی توانند همزمان باشند .اولویت آنها به ترتیب افزایش می یابد.
برد ،اما در جاهای خاص ی استفاده از آن کار را راحتتر می کند.
:HTML جدا و استفاده از آن درCSS تعریف در فایل
//SomeFile.css
input[text] {
width:200px;
background-color:#000000;
border:solid 0px;
}
•
:HTML در بدنه سندCSS تعریف
•
: در صفت یک برچسبCSS تعریف
This is some text with tahoma font
•
چگونگی انتخاب برچسبها
•
براي مشخص كردن اينكه يك CSSبه كدامين اشياء يك صفحه اعمال شود ،بايد از انتخابگرها استفاده
نمود .هر انتخاب گر يك يا چند ش يء در يك صفحه HTMLرا انتخاب مي كند و سپس مي توان قالب هاي
مورد نظر را به آن اعمال كرد.
•
انتخابگرهاي CSSتنوع و قدرت به سزايي دارند بنابراين در اين بخش در حدي كه نيازهاي اوليه مرتفع
شوند آنها را بررس ي خواهيم كرد.
•
انتخابگر ها در دو نحوه اوليه تعريف CSSها قابل استفاده هستند به قالب زير:
{ SelectorStatement
;Css Properties & Values
}
انتخاب تمام برچسب ها * :
انتخاب برچسب هاي خاصtagName :
انتخاب برچسبي از زيربرچسب هاي يك برچسب ديگرParentTag DescendantTag :
انتخاب برچسبي از فرزندان يك برچسب ديگر ParentTag > ChildTag :
انتخاب برچسبي بعد از يك برچسب ديگرTag1 + Tag2 :
انتخاب برچسبي با صفتي خاصTag[attrib=“value”] :
آنتخاب يك برچسب در وضعيت هاي خاص:
لينك ديده نشده Tag:link
برچسبي كه ماوس رويش است Tag:hover
لينك ديده شده Tag:visited
برچسب درحال كليك Tag:active
برچسب فعال صفحه Tag:focus
•
همانطور كه قبل ذكر شد ،هر بچسب در HTMLمي تواند صفات خاص ي را داشته باشد .صفاتي كه در
CSSبه ما كمك مي كنند ،دو صفت class , idهستند .با اختصاص دادن اين دو صفت به يك برچسب
در HTMLمي توان ويژگيهاي CSSآنرا به سادگي كنترل كرد.
•
با تعريف يك كلس خاص براي برچسبي ،مي توان آنرا جزو دسته اي قرار داد كه ويژگيهاي CSSمشترك
خاص ي بر روي همگي آنها اعمال شود.
•
با تعريف يك مشخصه منحصره ( )Unique Identifierبراي يك برچسب ،مي توان كنترل هاي
خاص ي از طريق CSSو جاوااسكريپت بر روي آن برچسب اعمال كرد.
•
بايد توجه گردد كه idهيچ دو برچسبي در يك سند HTMLنبايد يكسان باشند ،در غير اينصورت نتايج
قابل پيش بيني نخواهد بود.
*{
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با استفاده از عبارات جاوااسكريپت مي تواند مقادير پويا (نسبت به شرايط )Clientرا به
در صورتي كه چند دستور يكسان CSSبه يك برچسب خاص اعمال شوند ،آخرين آنها باقي مي ماند.
Propertyها اعمال كند:
;Width: expression( document.width /2 )px
مشخصه هاي استاندارد CSS 2
o
(scroll,fixed)o
: Backgroundخلصه اي براي تنظيم تمام مشخصات Background
: Background-Attachementوضعيت قرارگيري تصوير در
،Backgroundدر صورتي كه fixedباشد ،با جابجايي صفحه پشت صفحه آن حركت نخواهد كرد.
o
:Background-image oيا مقدار noneمي گيرد و يا با استفاده از )URL(adressيك آدرس
) : Background-color (RGB Valueرنگ پشت صفحه
فايل تصويري (آدرس وب)
o
:Background-repeatoدر صورتي كه از تصوير استفاده شود ،روش تكرار آنرا مشخص مي كند.
:Background-positionمقاديري مانند … top left, center center ,
مقادير مجاز عبارتند از no-repeat, repeat-x,repeat-y,repeat
o
:Border-widthoعرض حاشيه (ضخامت آن) به عدد ،درصد و واحد هاي ديگر اندازه
:Border-coloroرنگ حاشيه به RGB
:Border-styleoنوع حاشيه از مقادير none, hidden, dotted, dashed, solid,
:Borderخلصه اي براي تنظيم مشخصات حاشيه ،به ترتيب عرض ،نوع و رنگ مي گيرد.
double, groove, ridge, inset, outset
o
براي تغيير تنظيمات مربوط به حاشيه نواحي مختلف (باال ،پايين ،چپ ،راست)مي توانيد از چهار ويژگي باال
به همراه نام طرف مورد نظر استفاده نماييد ،براي مثال:
o
Border-top-coloro
Border-bottomo
Border-left-width
o
url(file), auto, مقادير مجاز عبارتند از، شمايل اشاره گر ماوس را معين مي سازد:Cursor
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize , nresize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- مقادير مجاز عبارتند از، نحوه نمايش يك برچسب:Display
o
item, run-in, compact, marker, table, inline-table , ….
left,
right,
مقادير مجاز عبارتند از، گرايش و شناوري يك برچسب به طرفي خاص:Float
o
none
Static, Relative, مقادير مجاز عبارتند از، نحوه قرارگيري يك برچسب در يك سند:Position
o
Absolute, Fixed
o
:Line-Heightoفاصله بين دو خط متن در سند
:Max-Heightoحداكثر ارتفاعي كه يك برچسب مي تواند داشته باشد
:Min-Heightoحداقل ارتفاع يك برچسب
:Widthoعرض يك برچسب
:Max-Widthoحداكثر عرض يك برچسب
:Min-Widthoحداقل عرض يك برچسب
:Heightارتفاع يك برچسب در سند .مشخصه اندازه اي
o
:Font-Familyoنام قلم ،بهتر است ليستي از قلمها بسته به پشتيباني از سيستم ها انتخاب شود.
:Fontميانبري براي اعمال مشخصات كامل فونت و قلم
معموال نوشته هاي فارس ي با قلم Tahomaخوب نمايش داده مي شوند.
o
:Font-Sizeاندازه قلم .هم مي تواند از انواع مقداري قرار داده شود هم مي تواند يكي از مقادير مجاز
باشد
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
o
:Font-Stretchكشيدگي فونت (فاصلي افقي مابين حرفهاي آن)يا مقدار عددي يا يكي از مقادير
normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
o
:Font-Weightoيكي از مقادير normal, bold, bolder, lighterو يا مقدار عددي
:Font-Styleيكي از مقادير Normal, Italic, Oblique
o
none , url(file) :List-Style-Imageo
inside, outside :List-style-Positiono
موارد مجاز عبارتند از، شكل موارد ليست:List-Style-Typeo
موقعيت و تصوير ليست را مي گيرد، نوع، به ترتيب. ميانبري براي تنظيمات ليست:List-Style
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
)auto فاصله علمت از نوشتار (مقدار يا:Marker-Offset
o
o
:Marginميانبري براي تنظيمات كناره .به ترتيب اندازه كناره هاي باال ،راست ،پايين و چپ را مي گيرد
(ساعتگرد)
o
:Margin-left, Margin-right, Margin-top, Margin-bottomمقدار كناره ،مقدار يا
auto
o
:Padding-left, Padding-right, Padding-top, Padding-bottomoمقدار اليي
:Paddingميانبري براي تنظيم مشخصات اليي گذاري ،به ترتيب باال ،راست ،پايين و چپ
گذاري ،مقدار يا auto
o
:Outline-coloroرنگ خط حاشيه به RGB
:Outline-styleoنوع خط حاشيه يك ش يء ،انوع مجاز عبارتند از none, dotted, dashed,
:Outlineميانبري براي تمام تنظيمات خط حاشيه ،به ترتيب رنگ ،نوع و عرض
solid , double , groove, ridge, inset, outset
o
:Outline-widthقطوري خط حاشيه ،مقدار عددي يا يكي از مقادير thin, thick, medium
o
:Overflowدر صورتي كه محتويات يك برچسب در آن جاي نگيرند ،اين مشخصه معين مي سازد كه
چه اتفاقي بيافتد .مقادير مجاز عبارتند از Visible, Hidden, Auto, Scroll
o
:Positionنحوه قرارگيري برچسب نسبت به سند ،مقادير مجاز عبارتند از Static, Relative,
Absolute, Fixed
o
:Vertical-Alignنحوه قرارگيري عمودي يك برچسب در داخل برچسب پدر خود را مشخص مي كند.
مقادير مجاز عبارتند از baseline, sub, super, top, text-top, middle, bottom,
text-bottomو يا مقدار عددي
o
:Z-Indexاولويت قرارگيري در بعد سوم در صفحه (يعني جلو پشت ديگر برچسب ها) Auto .يا يك
عدد
o
:Border-Collapseمعين مي سازد كه حواش ي جداول جدا باشند و يا يك مجموعه خط بهم
پيوسته باشند .مقادير مجاز Separate , Collapse
o
:Empty-Cellsٍoمشخص مي كند كه سلول هاي خالي در مدل Seperateنمايش داده شوند و يا
:Border-Spacingفاصله ميان دو حاشيه جدول ،تنها در صورتي كه Seperateباشد.
خير .مقادير مجاز Show/Hide
o
:Table Layoutالگوريتم نحوه نمايش سلولهاي يك جدولAuto/Fixed ،
o
:Directionoجهت متن (و محتويات)يك برچسب را مشخص مي سازد ،مقادير مجاز LTR/RTL
:Text-Alignoمقادير مجاز Left, Right, Center, Justify
:Text-Decorationoافزودن افكتي به متن ،مقادير مجاز عبارتند از none, underline,
:Colorرنگ يك متن را مشخص مي سازدRGB ،
overline, line-through, blink
o
:Word-Spacingoفاصله ميان لغات يك متن normal ،يا مقدار عددي
:Letter-Spacingoفاصله ميان حروف يك متن normal ،يا مقدار عددي
:Text-Indentتو رفتگي اولين خط يك متن .مقدار عددي
تسلط كامل بر CSS
o
در CSSرنگها را به دو شیوه می توان مشخص کرد:
o
oاستفاده از نام رنگ
تعیين مقدار 24بیتی RGBآنها
o
در روش اول 16میلیون رنگ مختلف برای انتخاب وجود دارند ،اما در روش دوم حدود 200رنگ با نام
های مختلف قابل استفاده هستند.
o
oبرای مشخص کردن رنگ ،RGBپس از قرار دادن علمت #به ترتیب مقدار Rو Gو Bرا در مبنای 16
برای مشخص کردن رنگ با نام آن ،کافیست نام رنگ را بنویسیدCyan, Purple :
وارد می کنیم#FFFFFF , #00FF00 :
o
همچنين می توان برای مشخص کردن رنگ RGBبه صورت روبرو عمل کردRGB(100,255,10):
و یا)RGB(70%,20%,100%
o
تمامی مقادیر اندازه ای در CSSواحد های متفاوتی را می پذیرند .پایه ای ترین واحد همان Pixelاست
که با pxدر انتهای مقدار مشخص می گردد .واحدهای دیگر عبارتند از:
o
:Inoاینچ
:Cmoسانتیمتر
:Mmoمیلیمتر
:Emoاندازه فونت
1/72 :Ptoاینتچ
pt 12 :Pco
:Pxoیک نقطه
:%درصد!
o
شفافیت ) (Transparencyیک عملیات پیچیده برای سیستم هاییست که کارت گرافیکی قدرتمندی
ندارد و موتور گرافیکی کاوشگر برای پیاده کردن آن بشدت زیر بار قرار می گيرد.
o
با استفاده از شفافیت می توان جذابیت بصری را بسیار باالتر برد ،اما باید دقت داشت که کندی پردازش
تصویری سایت برای کاربر ایجاد مزاحمت نکند.
o
oبرای ایجاد شفافیت در کاوشگرهای استادارد ،از Opacity : .5استفاده می شود.
oبرای ایجاد شفافیت در IEاز ) filter:alpha(opacity=50استفاده می شود.
oبرای اینکه شفافیت در تمامی کاوشگرها درست نمایش داده شود الزم است هردو دستور باال بکار روند.
متاسفانه کاوشگر IEبرای شفافیت از دستورات خود استفاده می کند که استاندارد نیستند.
o
کاوشگرهایی مانند Firefoxدستورات CSSویژه ای دارند (البته IEنيز دستورات مخصوص خود را
داراست) .
o
عبارت –moz-border-radiusمی تواند گوشه های مستطیل ها را از تيزی درآورده و آنها را نرم
کند-moz-border-radius: 5px; :
o
استفاده از این عبارت و راه حل های مشابه پیشنهاد نمی شود زیرا این نما تنها در Firefoxقابل مشاهده
خواهد بود.
o
CSSتوانایی آنرا داراست که برای رسانه های خاص تفاوت کند! برای مثال می توانید CSSیک سایت
را طوری تعریف کنید که رنگ نوشته های آن قرمز باشد ولی هنگام پرینت مشکی شود.
o
برای مشخص کردن اینکه CSSرا برای چه رسانه ای می نویسیم ،از @mediaاستفاده می کنیم:
@media screen
};* { color:#ff0000
@media print
};* { color:#000000
رسانه های معمول عبارتند ازall, braille, handheld, print, projection, screen, tv, :
…
CSSرا قورت بده!
o
فایل HTMLای که در تمرینات HTMLساخته اید و تمامی برچسب ها را داراست ،با استفاده از تمامی
برچسب های CSSقالب بندی کنید .سعی کنید زیبایی کافی و قالب بندی مناسب برای سند اتفاق بیافتد! در
داخل سند تنها می توانید برچسبهای DIVو SPANاضافه کنید و یا به برچسب های موجود ID ,
CLASSبیافزایید.
o
oآیا می توان با استفاده از CSSمنو ساخت؟ اگر بله راه حل را معين کنید.
oمزایا و معایب نوشتن CSSدر یک فایل جداگانه را برشمارید.
oبا استفاده از CSSیک taskbarبرای یک صفحه بسازید که همواره در قسمت پایين پنجره کاوشگر
بدون استفاده از جداول و تنها با استفاده از CSSیک صفحه سه ستونی (مانند )SBCE.irبسازید.
(نه لزوما انتهای سند) باشد.