Internet Engineering
This presentation is the property of its rightful owner.
Sponsored Links
1 / 22

css3 PowerPoint PPT Presentation


  • 68 Views
  • Uploaded on
  • Presentation posted in: General

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Css3

Internet Engineering

css3

Negar Alizadeh

Sara Kardanan

93.2.28


Css3

مقدمه

  • CSS(CascadingStyleSheet) برای تزیین صفحات وب مورد استفاده قرار گرفته شده است.

  • با استفاده ازCSSامکان کنترل قالب و صفحه بندی چندین web page در یک زمان میسر می شود .

  • ویژگی های نسخه های مختلف CSSتوسط سازمان W3Cاستاندارد سازی می شود.

  • نسخه های موجود CSSعبارتند از :

  • CSS1

  • CSS2

  • CSS2.1

  • CSS3


Css 1

css1

  • این نسخه بیشتر در خصوص ویژگی های یک سند ( document ) بود.

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

  • فونت

  • متن

  • رنگ

  • پس زمینه ها

  • ...


Css 2

css2

علاوه بر ویژگی های CSS1، ویژگی های دیگری در این نسخه ارائه شد که عبارتند از:

  • جای دهی عناصر گرافیکی در صفحه (Positioning)

  • فرمت بندی عناصر در صفحه (Visual Formatting)

  • نمایش بر اساس نوع رسانه (Media Type)

  • واسط (Interface)

  • ...


Css 2 1

css2.1

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


Styling

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">


Selector

Selector

  • در CSS هر Style از دو بخش اصلی Selector و Declaration تشکیل می شود.

  • Selector دستور مربوط به انتخاب تگی است که می خواهیم style دهی کنیم و Declaration حاوی شرح مقادیر صفات Selector می باشد.

    • Class Selector

      • .ClassName

    • Tag Selector

      • TagName

    • ID Selector

      • #ID


Font properties

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


Box model

BoxModel

  • Margin

  • Padding

  • Border

  • Width & Height


Positioning

Positioning

  • یکی از مهم ترین ویژگی ها در CSS، positioning و کنترل چینش عناصر در صفحه وب است.

  • Static

  • Fixed

  • Absolute

  • Relative

    • Float

  • اگر چند عنصر float با مقدار یکسان داشته باشند، همگی به صورت افقی کنار هم قرار می گیرند.


Css 3

css3

  • CSS3 همزمان با html5و عرضه ی کتابخانه JQuery موجب تحولی عظیم در صنعت طراحی وب شدند .

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


Css 31

css3

  • در این نسخه ویژگی های زیر اضافه شد:

  • selector

  • transition

  • border-radius

  • transform

  • box shadow

  • که به اختصار توضیح داده می شوند.


Selector1

Selector

  • انتخاب کننده های جدید

  • انتخاب کردن فرزند مستقیم:

  • ul < li

  • انتخاب عنصری که بلافاصله پس از دیگری آمده باشد:

  • div ~ p

  • انتخاب بر اساس صفت ها:

  • Input [ type=text ]

  • a[src$=".pdf"]

  • a[src*="w3schools"]

  • و ...


Transition

Transition

  • برای ساختن افکت و انیمشناستفاده می شود و می تواند در دو selector متفاوت، ویژگی های یک عنصر را تغییر دهد.

  • transition: property1 duration, property2 duration,…;

Animation,Keyframe

  • animation: name duration;

  • @keyframesanimationName{keyframes-selcteor{css-styles;}}

  • برای ساختن انیمیشن، نسبت به transitionقابلیت های بیشتری دارند، مثلا وقتی 10% از زمان انیمیشن گذشت یککار راانجام دهد، وقتی 35% گذشت یک کاردیگر ودر انتها یک کار دیگر .


Border radius

border-radius

  • گرد کردن گوشه boxها

  • دستور :border-radius

  • ساختن دایره : border-radius: 50%

Transform

  • برای حرکت دادن، چرخاندن، تغییر اندازه، skew و ... (حالت های 3Dهم دارد.)

  • Transform: none|transform-functions|initial|inherit;

  • Transform : rotate(180deg);


Box s hadow

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;


Background image

background-image

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

  • تعیین سایز عکس های background

background-size


Css3

border-image

  • تعریف مرز (border) ها به کمک عکس(قبلا فقط خط ساده بودند.)

  • border-image : url(border.png) 30 30 stretch;

  • قابلیت ایجاد سایه روشن

  • چهار نوع سایه روشن مختلف داریم.

  • background: linear-gradient (red, blue);

  • background: radial-gradient(red, green, blue);

Gradient


@font face

@font-face

  • وب فونت ها (attacheکردن یک فونت به صفحه)

  • قبلا اگرکاربر فونتی که ما در استایل انتخاب کرده بودیم رانداشت یکفونت defoultانتخاب میشد که هم ظاهر قشنگی نداشت، هم ممکن بود صفحه بهم بریزد.

    @font-face{

    Font-family: name;font-properties}

  • شفافیت

  • رنج از 0 تا 1Opacity : 0.5;

Opacity


Media query

Color

Media Query

  • روش های تعریف رنگ جدید

  • RGBA (Red, Green, Blue, Alpha)

  • HSL (Hue, Saturation, Lightness)

  • HSLA

  • به کمک Media Queryها میشه برای صفحه نمایش های مختلف، style های مختلف تعیین کرد.

  • به این روش که برای صفحه نمایش ها و device های مختلف ظاهر و style های مختلفی داشته باشیم طراحی responsive میگن.(معیار سنجش خود دستگاها نیستبلکه اندازه صفحه نمایش است.)


V endor p refix

VendorPrefix

  • پشتیبانی هر دستور در ورژن های مختلف یک مرورگر و مرورگر های مختلف، متفاوت است، برای اینکه تا حدود زیادی خطای مرورگر ها راپوشش دهیم باید برای هرکداماز Engine ها دستورات مشابه بنویسیم، مثلا :

  • سری دستوراتwebkit برای مرورگرهایی مثل Chrome و Safari و Opera

  • دستورات moz برای مرورگرهای Mozilla firefox

  • دستورات ms برای مرورگر IE

  • دستورات O برای مرورگرهای Opera


R esources

Resources

  • http://www.w3.org/TR/CSS1/

  • http://www.w3schools.com/css/

  • www.Lynda.com


  • Login