Upload
mustafa-hasani
View
227
Download
2
Embed Size (px)
DESCRIPTION
این مجله برای اموزش طراحی وب سایت میباشد
Citation preview
Web Design & Development 09- Introduction Cascading Style Sheet
Lecturer : Parisa Naimi
Introduction to CSS Anatomy and Syntax Types of CSS Class ID Example question
Agenda
By: Parisa Naimi Summer 2013
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Its most common application is to style web pages written in HTML . With CSS, you can control the color of the text, the style of fonts,
the spacing between paragraphs, how columns are sized and what background images or colors are used, as well as a variety of other effects.
CSS Induction
By: Parisa Naimi Summer 2013
CSS is combined with the markup languages HTML or XHTML. These markup languages contain the actual text you see in a web page—the paragraphs, headings, lists, and tables—and are the glue of a web document. They contain the web page’s data, as well as the CSS document that contains information about what the web page should look like.
Cont…
By: Parisa Naimi Summer 2013
every Cascading Style Sheet (whether it is contained in a .css file, or embedded in the head element of an HTML document) is a series of instructions called statements. A statement does two things:
•It identifies the elements (paragraphs, links, list items and so on) in an HTML document that it affects •it tells the browser how to draw these elements
Anatomy and Syntax
By: Parisa Naimi Summer 2013
The part of a statement which identifies page elements is called a selector. Selectors select page elements.
The part of a statement which tells a browser how selected elements should be drawn is called the declaration.
A declaration can contain any number of properties, the individual pieces of style to be applied to the selected element.
By: Parisa Naimi Summer 2013
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
Selector { property : value}
selector {property: value} selector {property: value}
By: Parisa Naimi Summer 2013
Example
selector {property: value} selector {property: value} selector {property: value}
• body {color: black}
• p {font-family: "sans serif"}
• P {text-align: center;color:red}
• p { text-align: center; color: black; font-family: arial }
By: Parisa Naimi Summer 2013
Grouping Selectors and Declarations
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:
h1,h2,h3,h4,h5,h6 { color: red }
By: Parisa Naimi Summer 2013
How to Insert a Style Sheet
There are three ways to insert a style sheet:
External Style Sheet
Inline Styles
Internal Style Sheet
By: Parisa Naimi Summer 2013
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.
Inline Styles
<p style="color: green; margin-left: 20px"> This is a paragraph </p>
By: Parisa Naimi Summer 2013
An internal style sheet should be used when a single document has a unique style. The internal styles define in the head section by using the <style> tag.
Internal Style Sheet
<style type="text/css">………………</style>
By: Parisa Naimi Summer 2013
Internal Style Sheet
<head> <style type="text/css"> h1 {color: green} p {margin-left: 20px} </style> </head>
By: Parisa Naimi Summer 2013
External Style Sheet
An external style sheet is use when the style is applied to many pages. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
By: Parisa Naimi Summer 2013
External Style Sheet
Rel= “ ”: define the relation between the external document and calling document. In this case ,the relation is that the external document is the style sheet for calling document. Href= “ ” : like the anchor tag <a>, href stand for hyperlink reference, it accepts an absolute path to the style sheet document. Type= “”: refers to the type of external file.
By: Parisa Naimi Summer 2013
With the class selector we can define different styles for the same type of HTML element.
Class is specified by including a period (.) before the selector name. The syntax for declaring a Class selector is as follows:
.[Class Name] { property:value
...
}
.right {text-align: right}
<p class="right"> This paragraph will be right-aligned. </p>
class Selector
By: Parisa Naimi Summer 2013
Cont… We can also specify different instances of a class selector. This is
achieved by using the following syntax:
[Type Selector].[Class Name] { property: value; ... }
By: Parisa Naimi Summer 2013
ID ID is specified by including a number sign (#) before the selector
name.
The syntax for declaring an ID selector is as follows:
#[ID Name] { property :value; ... }
By: Parisa Naimi Summer 2013
# right {text-align: right} <p Id="right"> This paragraph will be right-aligned. </p>
Class vs ID The difference between ID and class is that an ID selector can be called only once in a document, while a class selector can be called multiple times in a document.
The second difference is that ID can be called by Javascript's getElement ByID function.
By: Parisa Naimi Summer 2013
By: Parisa Naimi Summer 2013