slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
css3 PowerPoint Presentation
Download Presentation
css3

Loading in 2 Seconds...

play fullscreen
1 / 22

css3 - PowerPoint PPT Presentation


  • 116 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'css3' - nita-bentley


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
slide1

Internet Engineering

css3

Negar Alizadeh

Sara Kardanan

93.2.28

slide2
مقدمه
  • 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

slide18

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