58811138 css jquery training

7/31/2019 58811138 CSS JQuery Training

1/33

CSS & JQuery training


2/33

Agenda

Web page architecture

Understanding reasons behind cross-browser issues

CSS crash course

Comparison between tables, div, span, etc. and when to usewhat

Advanced CSS

Web 2.0 concept

HTML5 features

CSS Browser Hacks Performance

JQuery basics & architecture

Advanced JQuery


3/33

Web Page Technologies

Web standard trios: HTML, JS & CSS

Flash


4/33

Box Model

content goes in here

div {

width: 100px;padding: 10px;

border: 5px solid black;margin: 10px; }


5/33

Box Model (cont)


6/33

Box Model (cont)


7/33

Box Model (cont)

Boxes are of one of two types, block and inline, each withits own rules about where it lays and where elementsthat come after it lay.

When a box is set via display: none the space thatbox occupied collapses.

When a box is set via visibility: hidden the box isnot seen, but it still holds its space.e that box occupiedcollapses.

Floats and positioned elements: take boxes out ofthe normal document flow and affect where they sitand where the elements around them also sit.


8/33

Quirks Mode: is a mode of operation of web browsers

such as Internet Explorer (IE), Firefox, and Opera. Basically,Quirks Mode (also called Compatibility Mode) means that arelatively modern browser intentionally simulates many bugsin older browsers, especially IE 4 and IE 5.

Standard (Strict) Mode: W3C standard mode

Compatibility Mode: Present only in IE8

Compatibility- Quirks: Browser tries to emulate IE 7 insome issues. Compatibility-Standard: Broser tries to emulate IE 5 in

some issues.

Browser Operation Modes


9/33

Document Type (DOCTYPE)The "DOCTYPE" begins the HTML document and tells a validator which version of

HTML to use in checking the document's syntax.


10/33

DIV vs Tables

Tables should be used only for structured data.

DIVs should be used for layouts.

Overall page size when using DIVs is less thancorresponding design using tables in almost all

practical scenarios

Performance of DIV bases websites is better ascompared to Tables


11/33

Span vs Div

The main difference is that a tag isan inlineelement and tag isa blockelement.

Use when you want to change the style ofelements without placing them in a new block-levelelement in the document.


12/33

CSS Positioning absolute: Generates an absolutely positioned element, positioned relative to the first

parent element that has a position other than static. The element's position isspecified with the "left", "top", "right", and "bottom" properties.

fixed: Generates an absolutely positioned element, positioned relative to the browserwindow. The element's position is specified with the "left", "top", "right", and "bottom"properties.

relative: Generates a relatively positioned element, positioned relative to its normalposition, so "left:20" adds 20 pixels to the element's LEFT position.

static: Default. No position, the element occurs in the normal flow (ignores any top,bottom, left, right, or z-index declarations).

inherit: Specifies that the value of the position property should be inherited from theparent element.

http://www.w3schools.com/Css/tryit.asp?filename=trycss_position_relative
http://www.w3schools.com/Css/tryit.asp?filename=trycss_position_relativehttp://www.w3schools.com/Css/tryit.asp?filename=trycss_position_relativehttp://www.w3schools.com/Css/tryit.asp?filename=trycss_position_relative


13/33

CSS z-index The z-index property specifies the stack order of an

element.

An element with greater stack order is always in front ofan element with a lower stack order.

z-index only works on positioned elements

(position:absolute, position:relative, orposition:fixed).

http://www.w3schools.com/Css/tryit.asp?filename=trycss_zindex
http://www.w3schools.com/Css/tryit.asp?filename=trycss_zindexhttp://www.w3schools.com/Css/tryit.asp?filename=trycss_zindex


14/33

CSS Selectors

In CSS, pattern matching rules determine which stylerules apply to elements in the document tree.These patterns, called selectors, may range fromsimple element names to rich contextual patterns. Ifall conditions in the pattern are true for a certainelement, the selector matches the element.


15/33

CSS Attribute SelectorsAttribute selectors let you target an element based on its attributes. (6 types)

[att=value]The attribute has to have the exact value specified.

[att~=value]The attributes value needs to be a whitespace separated list of words (for

example, class=title featured home), and one of the words is exactly thespecified value.

[att|=value]The attributes value is exactly value or starts with the word value and is

immediately followed by -, so it would be value-.

[att^=value]The attributes value starts with the specified value.

[att$=value]The attributes value ends with the specified value.

[att*=value]The attributes value contains the specified value.


16/33

CSS Attribute SelectorsExamples:

div[class*="post"]

{ background-color: #333; }

This will match all the div elements whose class attribute contains the words posts, in anyposition.

input[type="text"]

{ width: 200px; }

This will target all the input elements whose type attribute is exactly text.

What does following code do?

a[href$=".jpg"]

{ background: url(jpeg.gif) no-repeat left 50%; padding: 2px 0 2px 20px; }

a[href$=".pdf"] { background: url(pdf.gif) no-repeat left 50%; padding: 2px 0 2px20px; }

a[href$=".doc"] { background: url(word.gif) no-repeat left 50%; padding: 2px 0 2px20px; }


17/33

CSS Descendent SelectorsDescendant selectors allow you to select any element that's a descendant of

another.

Example

ul li

{border: 1px solid black;}

This will put a border around both of the elements in this markup:

This is a list item

This is another list item


18/33

CSS Child SelectorsChild selectors are just restricted descendant selectors, so that the second element

must be a child of the first.

Example

ul > li

{border: 1px solid black;}

This will put a border around first elements in this markup:

This is a list item

This is another list item


19/33

CSS Sibling SelectorsThere are two types of sibling combinators: adjancent sibling combinators and

general sibling combinators.

Adjacent sibling combinator:

This selector uses the plus sign, +, to combine two sequences of simple selectors.The elements in the selector have the same parent, and the second one must

come immediately after the first.Example:

p + h2 { margin-top: 10px; }

General sibling combinator:

The selector uses the tilde sign ~. It works pretty much the same as the adjacentsibling combinator, but with the difference that the second selector doesnthave to immediately follow the first one.

Example:

.post h1 ~ p { font-size: 13px; }


20/33

CSS Pseudo-classesDynamic pseudo-classes

These are called dynamic pseudo-classes because they actually do not exist withinthe HTML: they are only present when the user is or has interacted with thewebsite.

There are two types of dynamic pseudo-classes: link and user action ones. The link

are :link and:visited, while the user action ones are :hover, :active and :focus.

:first-child

The :first-child pseudo-class allows you to target an element that is the first child ofanother element. For example, if you want to add a top margin to the

first li element of your unordered lists, you can have this:ul > li:first-child

{ margin-top: 10px; }


21/33

CSS Pseudo-classes (cont)language

The language pseudo-class, :lang(), allows you to match an element based on itslanguage.

For example, lets say you want a specific link on your site to have a differentbackground color, depending on that pages language:

:lang(en) > a#flag

{ background-image: url(english.gif); }

:lang(fr) > a#flag

{ background-image: url(french.gif); }


22/33

CSS 3 Pseudo classes

:nth-child

The :nth-child() pseudo-class allows you to target one or more specific childrenof a parent element.

Example:

ul li:nth-child(3) { color: red; }Turns the text on the third li item within the ul element red. Note: If a different

element is inside the ul (not a li), it will also be counted as its child.

ul li:nth-child(3n+4) { color: yellow; }

Matches every third li element starting from the fourth

ul li:nth-child(-n+4) { color: green; }

Targets only the first four li elements within the list


23/33

CSS Selectors - Excercise1. body > div > div blockquote

{ margin-left: 30px; }

2. .post h1 ~ p{ font-size: 13px; }

3. div#sidebar > h2{ font-size: 20px; }

4. a[hreflang|="en"]

5. ul li:nth-child(2n+1)

{ color: yellow; }


24/33

CSS SelectorsExercise (cont)


25/33

Web 2.0

Web 2.0 is a concept and not a technology.

Some treat it as a meaningless marketingbuzzword.

Others accept it as the new conventional wisdom.

Netscape can be put under Web 1.0, while Googleunder Web 2.0


26/33

Web 2.0 (cont)

Netscape focused on creating software, updating iton occasion, and distributing it to the end users.

Google did not at the time focus on producingsoftware, such as a browser, but instead focusedon providing a service based on data such as thelinks Web page authors make between sites.

Google exploits this user-generated content to offerWeb search based on reputation through its "pagerank algorithm.

Others accept it as the new conventional wisdom.


27/33

Refrences

http://www.w3.org/TR/CSS2/selector.html

http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

http://kimblim.dk/css-tests/selectors/ http://www.w3schools.com/css/css_examples.asp

http://www.oreillynet.com/oreilly/tim/news/2005/09/30/what-is-web-20.html

http://gwthtml5.appspot.com/
http://www.w3.org/TR/CSS2/selector.htmlhttp://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/http://kimblim.dk/css-tests/selectors/http://www.w3schools.com/css/css_examples.asphttp://www.oreillynet.com/oreilly/tim/news/2005/09/30/what-is-web-20.htmlhttp://www.oreillynet.com/oreilly/tim/news/2005/09/30/what-is-web-20.htmlhttp://gwthtml5.appspot.com/http://gwthtml5.appspot.com/http://www.oreillynet.com/oreilly/tim/news/2005/09/30/what-is-web-20.htmlhttp://www.oreillynet.com/oreilly/tim/news/2005/09/30/what-is-web-20.htmlhttp://www.oreillynet.com/oreilly/tim/news/2005/09/30/what-is-web-20.htmlhttp://www.oreillynet.com/oreilly/tim/news/2005/09/30/what-is-web-20.htmlhttp://www.oreillynet.com/oreilly/tim/news/2005/09/30/what-is-web-20.htmlhttp://www.oreillynet.com/oreilly/tim/news/2005/09/30/what-is-web-20.htmlhttp://www.oreillynet.com/oreilly/tim/news/2005/09/30/what-is-web-20.htmlhttp://www.w3schools.com/css/css_examples.asphttp://kimblim.dk/css-tests/selectors/http://kimblim.dk/css-tests/selectors/http://kimblim.dk/css-tests/selectors/http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/http://www.w3.org/TR/CSS2/selector.html


28/33

CSS Browser Hacks

Sometimes there is no reasonable way to accomplish a desired layout in all major webbrowsers without the use of some special exception rules for certain layout engines.Hacks necessarily lead to potential complications and should be avoided wheneverpossible, but when the circumstances require hacks to be used, it's best to know whatyour options are and weigh the consequences appropriately.

Most in-CSS hacks deal with selector bugs.

Conditional Comments:Positive

Negative HTML

!importantp {

background: green !important; /* Major browsers other than IE 6 and belowrespect the importance immediately */

background: red; /* IE 6 and below use this value instead, even though the abovewas marked as important */

}


29/33

jQuery

Tag line: The Write Less, Do More, JavaScript Library

jQuery is a JavaScript Library.

jQuery greatly simplifies JavaScript programming.

jQuery is easy to learn.
http://jquery.com/http://jquery.com/


30/33

jQuery Conflicts

Many JavaScript libraries use $ as a function or variable name, just asjQuery does. In jQuery's case, $ is just an alias for jQuery, so allfunctionality is available without using $. If we need to use anotherJavaScript library alongside jQuery, we can return control of $ back tothe other library with a call to $.noConflict():

$.noConflict();

// Code that uses other library's $ can follow here.


31/33

jQuery VS CSS VS DOM

CSS:

#container a { ... }

DOM:

document.getElementById('container').getElementsByTagName('a');

jQuery:

$('#container a');


32/33

jQuery Document Ready

An alternative to body onload.

$(document).ready(function() {

// do stuff when DOM is ready});


33/33

jQuery Load a page in DIV

Just like we load pages in frames or iframes, we can loadother pages in div elements.

$(div).load();

58811138 css jquery training

Documents