this week I leand about it ............

ancestor tag:

The ancestors of an element are its parent, its parent's parent, and so on up to the root element of the tree. For any Element instance E, this method returns an iterator that visits E's ancestors in reverse document order:

>>> xml = '''<class sci='Aves' eng='Birds'>
...   <order sci='Strigiformes' eng='Owls'>
...     <family sci='Tytonidae' eng='Barn-Owls'>
...       <genus sci='Tyto'>
...         <species sci='Tyto alba' eng='Barn Owl'/>
...       </genus>
...     </family>
...   </order>
... </class>'''
>>> root = etree.fromstring ( xml )
>>> barney = root.xpath ( '//species' ) [0]
>>> print "%s: %s" % (barney.get('sci'), barney.get('eng'))
Tyto alba: Barn Owl
>>> for  ancestor in barney.iterancestors():
...     print ancestor.tag,
genus family order class
>>> for  fam in barney.iterancestors('family'):
...    print "%s: %s" % (fam.get('sci'), fam.get('eng'))
Tytonidae: Barn-Owls

descendant tag:

A CSS descendant selector applies to the elements that are inside another element. For example an unordered list has a <ul> tag with <li> tags as descendants. In the following HTML:

<ul>
<li><a href="">this is a link</a></li>
</ul>

parent tag:
CSS2 allows you to select based on an element's parents* (' ', '>') and to a limited extent siblings of its parents ('+'). CSS3 allows you slightly more leeway in selecting siblings of an element's parents ('~'). 

<section id="1">
<info>
blah
</info>
</section> <section id="2">
no info tag here
</section> 

child tag:

The EM element is a child of the H1 element, and any styles on the H1 that are inherited will be passed on to the EM text as well. For example:

h1 { font-size: 120%; }

Since the font-size property is inherited, the "Big" text will be 120% in size as well as the rest of the H1.

sibling tag: 

Cascading Style Sheets defines siblings as elements that are next to one another. They are also called adjacent elements. This means that you can define a style rule on an element based on what element immediately precedes it in the XHTML.
How to define a sibling rule:
  h1 + h2 { color : #00f; }
This rule says that any h2 that immediately follows an h1 should be colored blue.

CSS: Use Descendant Selectors:

Summary: Descendant selectors are an elegant way to apply styles to specific areas of your page while reducing the need to embed classes within elements.

Descendant selectors are an elegant way to apply styles to specific areas of your page while reducing the need to embed classes within elements. First introduced in CSS1 in 1996, descendant selectors (then called contextual selectors) match elements that are descendants of other elements in the document tree. Composed of two or more selectors separated by whitespace, descendant selectors apply styles to elements that are contained within other elements. For example:

div.nav ul {font-size:1.1em;}

The above selector is a pattern that matches all ul elements contained within divs with a class of .nav. So this:

.nav {font-size:1.1em;}
...
<div>
<ul>
<li class="nav">One</li>
<li class="nav">Two</li>
...
</ul>
</div>

Becomes this:

div.nav ul {font-size:1.1em;}
...
<div class="nav">
<ul>
<li>One</li>
<li>Two</li>
...
</ul>
</div>

Even better, adopt a uniform look for all unordered lists within divs and eliminate the class, like this:

div ul {font-size:1.1em;}
...
<div>
<ul>
<li>One</li>
<li>Two</li>
...
</ul>
</div>

Essentially, descendant selectors utilize the existing structure of your XHTML document to selectively apply styles. Rather than hard coding classes within specific elements you use the relationships among elements to apply styles. Your code becomes more modular, using containers that style their contents selectively. This separation of presentation from structure keeps your code clean and your style sheets lean.

new learn ................................

Tag Selector

The tag selector applies to specific XHTML tags, as we saw in the previous examples. The selector consists simply of the tag name as it appears in the XHTML source, but without the angle brackets. The following example removes the underlining from all anchor elements and changes the base font-size of the text within the page to 20 points. The body tag is one of the top-level tags automatically created by Seaside enclosing the whole page.

a { text-decoration: none; }
body { font-size: 20pt; }

What is a CSS ID Selector?
A CSS id selector applies to the one element in the HTML document with the specified ID. But unlike classes, each ID must be unique on the page.
<p id="bordered">
Or
<div id="bordered">
The id selector is then defined with a hash- or pound-sign (#) before the id name. You can set a id:
#bordered {
border : 1px solid black ;
}
You can also set a id selector including the specific element that has that id. Do this by placing the type selector before the hash-sign in the id selector without any spaces:
div#bordered {
border : 2px solid red ;
}

Here is 1 more..................

A stylesheet consists of HTML elements, followed by rules defining how the elements will look. Font sizes, types, background colours, table borders are a few example of what would be defined in a typical stylesheet. The syntax of a stylesheet defines an HTML element followed by an attribute, which is then defined by a value. For instance, BODY is an HTML element, H1 is an attribute and color: black; is a value. 

Example : Simple inline stylesheet

<HTML>
<HEAD>
 <TITLE>Introduction to styles</TITLE>
<STYLE>
  H1, H2, H3
  {
  font-family: arial, trebuchet ms;
  text-decoration: underline;
  color: navy;
  }
</STYLE>
</HEAD>

<BODY>

 <H1>this is the h1 tag, modified using css</H1>
 <H2>this is the h2 tag, modified using css</H2>
 <H3>this is the h3 tag, modified using css</H3>

</BODY>
</HTML>

So, what is the above code doing? - Well, we have redefined the H1, H2 and H3 tags in an "inline" stylesheet, i.e. one that is hardcoded within the page, rather than a separate CSS document. We have declared how we want H1, H2 and H3 to look, and then we have used the tags to display some text, using our styles.

In this instance, we have grouped H1, H2 and H3 together. HTML elements can be redefined individually, or, as shown, as a group.

This is my 2nd learn

What Are Declaration Blocks?

Declaration Blocks begin with a left curly brace ('{') and end when a matching right curly brace ('}') is reached. Between these braces lie semi-colon separated style declarations. 

A style declaration consists of a simple assignment: a CSS property is given a specific value. This is the heart of CSS - the assignment of rendering properties. A CSS property is followed by a colon character (':'), which is followed in turn by a value appropriate to the property. White space around all of these declaration components is optional. 

Syntax: "{" [space]? [Property] [space]? ":" [space]? [Value] [space]? "}"

Example:

{ font-size: 14pt }

css selector

CSS selectors are the heart and soul of CSS. They define which HTML elements you are going to be manipulating with CSS code and you should have a solid understanding of them when you are finished with this tutorial. Luckily for you, they are pretty simple to comprehend!

• SELECTOR { PROPERTY: VALUE }

"Property" is the CSS element you wish to manipulate and "VALUE" represents the value of the specified property.

p { PROPERTY: VALUE }

.......................................................................................................................................................

 

declaration:The position declaration lets you declare what the position of an element should be.

This is the test element. It has the following styles:

top: 100px;
left: 100px;
padding: 1em;
border: 1px solid #cc0000;

CSS learn-2

This week I have been finish CSS and I also learned "The Missing Manuel CSS" chapter-3.
What is the selector??
CSS selectors are the heart and soul of CSS. They define which HTML elements you are going to be manipulating with CSS code.

• SELECTOR { PROPERTY: VALUE }

"Property" is the CSS element you wish to manipulate and "VALUE" represents the value of the specified property.

The selector name creates a direct relationship with the HTML tag you want to edit. If you wanted to change the way a paragraph tag behaved, the CSS code would look like:

• p { PROPERTY: VALUE }

The above example is a template that you can use whenever you are manipulating the paragraph HTML element. 

The first part of a style, the selector, indicates the element or elements of a page to format. In this case, h1 stands for "every heading 1, or <h1>, tag on this page."

                          h1 { font-family: Arial, sans-serif; color: #CCCCFF; }

    

Class selectors While type selectors target every instance of an element, class selectors can be used to select any HTML element that has a class attribute, regardless of their position in the document tree. For example

   <body>

<p class="big">This is some <em>text</em></p>
<p>This is some text</p>
<ul>
<li class="big">List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body>

CSS: Group Selectors

So this:

CSS allows you to group multiple selectors that share the same declaration. This optimization technique allows you to apply the same style to multiple elements to save space.

div#main {border:1px solid red;}
div#sidebar {border:1px solid red;}

Becomes this:

dive#main, div#sidebar {
    border:1px solid red;
}

You can combine grouped selectors with contextual and other selectors to create powerful yet compact rules for your style sheets. The body id/class method used to highlight current tabs is one example of this technique.

This abbreviated form of specifying style is supported by most modern browsers. You can combine grouping of selectors with grouping of declarations to create even more powerful CSS rules. We'll cover grouping of declarations in an upcoming tweak.

css learn

I learned from the missing book selector Identifying and I applied  for my website. hear is my LINK.