1 / 22

css3

Internet Engineering. css3. Negar Alizadeh Sara Kardanan. 93.2.28. مقدمه. CSS ( C ascading S tyle S heet ) برای تزیین صفحات وب مورد استفاده قرار گرفته شده است. با استفاده از CSS امکان کنترل قالب و صفحه بندی چندین web page در یک زمان میسر می شود .

Download Presentation

css3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Internet Engineering css3 Negar Alizadeh Sara Kardanan 93.2.28

  2. مقدمه • CSS(CascadingStyleSheet) برای تزیین صفحات وب مورد استفاده قرار گرفته شده است. • با استفاده ازCSSامکان کنترل قالب و صفحه بندی چندین web page در یک زمان میسر می شود . • ویژگی های نسخه های مختلف CSSتوسط سازمان W3Cاستاندارد سازی می شود. • نسخه های موجود CSSعبارتند از : • CSS1 • CSS2 • CSS2.1 • CSS3

  3. css1 • این نسخه بیشتر در خصوص ویژگی های یک سند ( document ) بود. این ویژگی های عبارت اند از: • فونت • متن • رنگ • پس زمینه ها • ...

  4. css2 علاوه بر ویژگی های CSS1، ویژگی های دیگری در این نسخه ارائه شد که عبارتند از: • جای دهی عناصر گرافیکی در صفحه (Positioning) • فرمت بندی عناصر در صفحه (Visual Formatting) • نمایش بر اساس نوع رسانه (Media Type) • واسط (Interface) • ...

  5. css2.1 • در این نسخه ویژگی جدیدی اضافه نشد و فقط در بعضی ویژگی های css2تغییراتی اعمال کرد و بعضی ها را هم حذف کرد که در نسخه ی بعدی که همان css3است آن ها را با تغییرات محسوسی اضافه کرد .

  6. Styling • <p style="font-family: arial; font-size: 3px; color: brown; text-align: center;"> This is my text </p> 2. <style> p: { font-family: arial; font-size: 3px; color: brown; text-align: center; } </style> 3. Style.css <link rel="stylesheet" type="text/css" href="style.css">

  7. Selector • در CSS هر Style از دو بخش اصلی Selector و Declaration تشکیل می شود. • Selector دستور مربوط به انتخاب تگی است که می خواهیم style دهی کنیم و Declaration حاوی شرح مقادیر صفات Selector می باشد. • Class Selector • .ClassName • Tag Selector • TagName • ID Selector • #ID

  8. Font Properties Property Value • Body { Font-family: Georgia, “Time New Roman”, Times, Serif; Font-size: 15px; Font-weight: bold; Font-Style: italic; Text-align: justify; Text-indent: 1px; Letter-spacing: normal; Word-spacing: normal; Line-height: 1.6; } Selector Declaration Rules

  9. BoxModel • Margin • Padding • Border • Width & Height

  10. Positioning • یکی از مهم ترین ویژگی ها در CSS، positioning و کنترل چینش عناصر در صفحه وب است. • Static • Fixed • Absolute • Relative • Float • اگر چند عنصر float با مقدار یکسان داشته باشند، همگی به صورت افقی کنار هم قرار می گیرند.

  11. css3 • CSS3 همزمان با html5و عرضه ی کتابخانه JQuery موجب تحولی عظیم در صنعت طراحی وب شدند . • طراحی های پیچیده ای مانند گردبر نمودن گوشه ها یا سایه دار نمودن جعبه ها که می بایست در فتوشاپ تنظیم می شد و بعد از کسر حجم با گرافیکی معمولا غیر قابل قبول در فضایی آپلود می شد با دستورات css3اجرا گردیدند .

  12. css3 • در این نسخه ویژگی های زیر اضافه شد: • selector • transition • border-radius • transform • box shadow • … • که به اختصار توضیح داده می شوند.

  13. Selector • انتخاب کننده های جدید • انتخاب کردن فرزند مستقیم: • ul < li • انتخاب عنصری که بلافاصله پس از دیگری آمده باشد: • div ~ p • انتخاب بر اساس صفت ها: • Input [ type=text ] • a[src$=".pdf"] • a[src*="w3schools"] • و ...

  14. Transition • برای ساختن افکت و انیمشناستفاده می شود و می تواند در دو selector متفاوت، ویژگی های یک عنصر را تغییر دهد. • transition: property1 duration, property2 duration,…; Animation,Keyframe • animation: name duration; • @keyframesanimationName{keyframes-selcteor{css-styles;}} • برای ساختن انیمیشن، نسبت به transitionقابلیت های بیشتری دارند، مثلا وقتی 10% از زمان انیمیشن گذشت یککار راانجام دهد، وقتی 35% گذشت یک کاردیگر ودر انتها یک کار دیگر .

  15. border-radius • گرد کردن گوشه boxها • دستور :border-radius • ساختن دایره : border-radius: 50% Transform • برای حرکت دادن، چرخاندن، تغییر اندازه، skew و ... (حالت های 3Dهم دارد.) • Transform: none|transform-functions|initial|inherit; • Transform : rotate(180deg);

  16. BoxShadow • ایجاد سایه برای boxها • box-shadow: none|h-shadow v-shadow blur spread color|inset|initial|inherit; TextShadow • ایجاد سایه برای متن ها • text-shadow: h-shadow v-shadow blur color|none|initial|inherit;

  17. background-image • قابلیت قرار دادن چند عکس backgroundبرای یک box(قبلا فقط یکعکس امکان پذیر بود.) • تعیین سایز عکس های background background-size

  18. border-image • تعریف مرز (border) ها به کمک عکس(قبلا فقط خط ساده بودند.) • border-image : url(border.png) 30 30 stretch; • قابلیت ایجاد سایه روشن • چهار نوع سایه روشن مختلف داریم. • background: linear-gradient (red, blue); • background: radial-gradient(red, green, blue); Gradient

  19. @font-face • وب فونت ها (attacheکردن یک فونت به صفحه) • قبلا اگرکاربر فونتی که ما در استایل انتخاب کرده بودیم رانداشت یکفونت defoultانتخاب میشد که هم ظاهر قشنگی نداشت، هم ممکن بود صفحه بهم بریزد. @font-face{ Font-family: name;font-properties} • شفافیت • رنج از 0 تا 1Opacity : 0.5; Opacity

  20. Color Media Query • روش های تعریف رنگ جدید • RGBA (Red, Green, Blue, Alpha) • HSL (Hue, Saturation, Lightness) • HSLA • به کمک Media Queryها میشه برای صفحه نمایش های مختلف، style های مختلف تعیین کرد. • به این روش که برای صفحه نمایش ها و device های مختلف ظاهر و style های مختلفی داشته باشیم طراحی responsive میگن.(معیار سنجش خود دستگاها نیستبلکه اندازه صفحه نمایش است.)

  21. VendorPrefix • پشتیبانی هر دستور در ورژن های مختلف یک مرورگر و مرورگر های مختلف، متفاوت است، برای اینکه تا حدود زیادی خطای مرورگر ها راپوشش دهیم باید برای هرکداماز Engine ها دستورات مشابه بنویسیم، مثلا : • سری دستوراتwebkit برای مرورگرهایی مثل Chrome و Safari و Opera • دستورات moz برای مرورگرهای Mozilla firefox • دستورات ms برای مرورگر IE • دستورات O برای مرورگرهای Opera

  22. Resources • http://www.w3.org/TR/CSS1/ • http://www.w3schools.com/css/ • www.Lynda.com

More Related