css3

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