CSS: Cascading Style Sheets

Slides:

Advertisements

Similar presentations

CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.

Advertisements

CSS: Separating Design and Content Kevin Campbell Duke University/Grouchyboy.com.

Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.

Part 2 Introduction to CSS. CSS Syntax – class selector 1 With the class selector you can define different styles for the same type of HTML element. You.

Making Things Look Nice: Visual Appearance and CSS CMPT 281.

Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.

Cascading Style Sheets Controlling the Display Of Web Content.

CM143 Week 4 Introducing CSS. Cascading Style Sheets A definition for the style in which an element of the webpage will be displayed Border width, colour,

Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.

Pre-Module CSS BTM 395: Internet Programming. Cascading Style Sheets (CSS) Separation of structure from presentation CSS guide and tutorial –

CSS Cascading Style Sheets By Garrett Garman. CSS Why use Style Sheets? Separates Appearance and Structure Modularity Quick and Easy changes Flexibility.

18 People Surveyed HTML (HyperText Markup Language) HTML “tags” Describes structure Building blocks Headings, paragraphs, lists, links, images, quotes,

 cascade Style Sheets (CSS) is a mark-up language that was first proposed in 1994 by Håkon Wium Lie. CSS works in conjunction with HTML to greatly increase.

The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1.

Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,

DHTML. What is it? Dynamic HTML. Not a standard unlike HTML or Java It is a term applied by both Netscape and Microsoft to a collection of technologies.

CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.

Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains.

Designing Web Pages The case for CSS. The Power of CSS css Zen Garden

Kyle Zimmermann.  What are CSS?  History  The Box Model  CSS Styles  Rules and Selectors  Cascade & Specificity  Inheritance  Video  Demo.

CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets.

CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.

CSS (Cascading Style Sheets). CSS CSS – Cascading Style Sheets – Cascade because of the way CSS rules can stack on top of each other. Allows you to add.

WebD Introduction to CSS By Manik Rastogi.

Introduction to CSS: Selectors

Cascading Style Sheets (CSS) Internal Style Sheets Classes

External Style Sheets.

CSS Cascading Style Sheets

4.01 Cascading Style Sheets

An Introduction to Cascading Style Sheets

Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.

CSS Rule Selector Declaration Block Value Attribute Name body {

>> Introduction to CSS

Cascading Style Sheets

Cascading Style Sheet (CSS)

Cascading Style Sheets

Lecture 9. Cascading Style Sheets

IS 360 Declaring CSS Styles

Madam Hazwani binti Rahmat

>> CSS Rules Selection

CX Introduction to Web Programming

Cascading Style Sheets

Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.

Intro to CSS CS 1150 Fall 2016.

Principles of Software Development

CASCADING STYLE SHEET CSS.

Cascading Style Sheets

Intro to CSS CS 1150 Spring 2017.

Cascading Style Sheet (CSS)

Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.

Cascading Style Sheet (CSS)

Stylin’ with CSS.

Working with Cascading Style Sheets (CSS)

Working with Cascading Style Sheets (CSS)

The Internet 10/6/11 Cascading Style Sheets

Web Development & Design Foundations with H T M L 5

Web Design and Development

Part 1: Cascading Style Sheets

Cascading Style Sheets

Stylin’ with CSS.

4.01 Cascading Style Sheets

Web Client Side Technologies Raneem Qaddoura

Stylin’ with CSS.

INTERNATIONAL INSTITUTE OF IFORMATION TECHNOLOGY, (I²IT)

Introduction to Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

Cascading Style Sheets - CSS

CASCADING STYLE SHEET WEB TECHNOLOGY

Presentation transcript:

CSS: Cascading Style Sheets

سرفصل Css چیست؟ چند کد نمونه چرا از Css استفاده می کنیم؟ پیاده سازی

CSS چیست؟ در سال 1994 توسط Hakon Wium Lie از دانشگاه MIT ایجاد شد. استاندارد سازمان W3C برای کنترل نحوه نمایش صفحات وب شده است. عناصر طراحی صفحه را از ساختار منطقی صفحه جدا می کند.

نمونه کد نمونه کد CSS

انتخاب کننده ها Element Selectors – (انتخاب تگ ها) H1 {color: purple;} H1, H2, P {color: purple;} Contextual – (انتخاب تگ داخل تگ دیگر) LI B {color: purple;} ID – (انتخاب با شناسه) #warning {color:Red;} در کد html <H1 id=“warning”>Danger</H1>

انتخاب کننده ها Class Selectors – (انتخاب کلاس) در کد html <H1 CLASS=“warning”>Danger!</H1> <P CLASS=“warning”>Be careful…</P> در کد css H1.warning {color: red;} یا به همه المان های کلاس .warning {color:red;}

اعمال css به html سه روش برای این کار وجود دارد. روش اول: استایل درون خطی (inline style) <H1 STYLE=“color: blue; font-size: 20pt;”>A large purple Heading</H1>

اعمال css روش دوم: استایل تعبیه شده (embedded style sheet) <HTML><HEAD><TITLE>Stylin’!</TITLE> <STYLE TYPE=“text/css”> H1 {color: purple;} P {font-size: 10pt; color: gray;} </STYLE> </HEAD> … </HTML>

اعمال css روش سوم: در فایل جدا از html <HEAD> <LINK REL=stylesheet” TYPE=“text/css” HREF=“styles/mystyles.css”> </HEAD>

مزایای استفاده از css جریان کاری صفحه دانلود سریعتر نگهداری سایت بهینه تر کنترل یکپارچه ظاهر سایت قابلیت نمایش در دستگاه های مختلف کنترل دقیق المان های صفحه مکان و مختصات دقیق ظاهر قابل تغییر با اندازه صفحه نمایش

مزایای استفاده از css کاهش هزینه ها کاهش هزینه پهنای باند یک فایل استایل مشترک در همه صفحه ها استفاده می شود و فقط یکبار دانلود می شود امتیاز بالاتر در موتورهای جستو کد html تمیز و مرتب قابلیت جستجوی بهتری برای موتورهای جستجو دارد

Css هنوز کامل نیست! پشتیبانی از همه المان های css در همه مرورگرها مثل هم نیست بنابر این هنگام طراحی سایت از یکسان بودن ظاهر در همه مرورگرها اطمینان حاصل کنید