document tree

Kráčet prostorem mezi myšlenkami
Walk in the space between thoughts

Narodní park Veluwe v Holandsku poskytuje člověku krásnou příležitost na dlouhé procházky v objetí stromů. I zde je bezpočet krásných alejí, které mnohdy působí jako jakýsi tunel, někam jinam. Tunel do nitra člověka. Chůze uvnitř tohoto prostoru zpřítomňuje vědomí. Člověk je jako buňka procházející žilou života. Také se mi moc líbí komentář pana Cílka, který o chůzi v alejích jednou hovořil v nějakém pořadu. Říká, že tato chůze může v některých z nás vyvolávat vzpomínky na dětství. Na momenty, kdy jsme leželi v kočáře a dívali se před sebe a nahoru do korun stromů.

National park Veluwe in Holland provide a beautiful opportunity for a long walks with embraced by a trees. You can find here a lot of alleys which works like a tunnel to somewhere else. Tunnel into a soul. The man is like a cell walking through the vein of life. I like the comment Mr. Cilek in one old document about alleys of trees. Mr. Cilek says that walk through the alleys could summon our deepest child memories. When our mothers carried us in baby-carriages and we could observed branches of trees and leaves with blue sky above us.

Deer Park Project

I am starting a photographic project to document the veteran trees of the Deer Park of Drogo Castle. 

This will be an ongoing project and will include not only the trees but the other flora and fauna of the park, throughout the seasons and years. I have posted pictures from here regularly since I started my blog, but this will be a more serious attempt at a structured approach. All photos relating to the project will be tagged #Deer Park Project.

Any comments or suggestions are welcome.

Summary: Document Trees and Inheritance

Document Tree

All HTML documents are trees, and all document trees are made from HTML elements.

·         Ancestor: element that is connected but further up the tree – <body>

·         Descendant: element that is connected but lower down the tree - <ul> and <li>

·         Parent: element that is connected & directly above an element - <body> is parent to <ul>

·         Child: element that is connected & directly below an element - <ul> is child of <body>

·         Sibling: shares the same parent as another element - <li> <li> <li> siblings of <ul>

Basics of CSS Rules

CSS rules tell browsers how to render specific elements on an HTML page. They are made up of 5 components:

·         Selector: “selects” the elements on an HTML page that are affected by the rule.

o   p { color: red; } – p is the selector

·         Declaration block: container that consists of anything between (and including) the brackets. It tells a browser how to render any element on a page that is selected.

o   p { color: red; } – { color: red; } is the declaration block

·         Property: aspect of that element that you are choosing to style.

o   p { color: red; } – color is the property

·         Value: exact style you wish to set for the property

o   p { color: red; } – red is the value

Inheritance

Inheritance is where specific CSS properties are passed down to descendant elements. It is designed to make it easier for us, because otherwise we would need to specify properties for ALL descendant elements. CSS files would be much larger in size, harder to create and maintain as well as slower to download.

Example:

<p>

Lorem <em>ipsum</em> dolor

sit amet consect etuer.

</p>

Note that the <em> element sits inside the <p> element.

p { color: red; } - Note that the <em> element has not been specified.

In a browser, the <p> and <em> elements will both be coloured red. The <em> element has inherited the color property from the <p> element.

Not all CSS properties are inherited, otherwise it would make it much harder. We would have to turn off unwanted CSS properties for descendant elements.

Example:

If the border property was inherited, and we then applied a border to the <p> element, the <em> inside the <p> would also have a red border.

Text-related properties that are inherited:

·         font-family

·         font-size

·         font-style

·         font-variant

·         font-weight

·         font

·         letter-spacing

·         line-height

·         text-align

·         text-indent

·         text-transform

·         word-spacing

List-related properties that are inherited:

·         list-style-image

·         list-style-position

·         list-style-type

·         list-style

The color property is also inherited.

Font-size is inherited in a different way to many other properties. Rather than the actual value being inherited, the calculated value is inherited. Why is it not directly inherited?

Example:

<p>

Lorem <em>ipsum</em> dolor

sit amet consect etuer.

</p>

p { font-size: 80%; }

If the font-size value was inherited, the <em> would be sized to 80% of the <p> element. But this is not the case, so it would be wrong.

·         Pixels:

p { font-size: 14px; }

This pixel value (14px) overrides the browsers default font-size value (approx 16px). The <em> element inherits the 14px value.

·         Percentage:

p { font-size: 85%; }

The browsers default font-size (16px) and the percentage value (85%) are used to create a calculated value (16px x 85% = 13.6px). The <em> element inherits the 13.6px calculated value.

·         EMs:

Note: Avoid using EMs for font-size values under 1em as IE5 renders these values in pixels instead of EMs (.8em is rendered as 8px).

p { font-size: .85em; }

The browsers default font-size (16px) and the EM value (.85em) are used to create a calculated value (16px x .85em = 13.6px). The <em> element inherits the 13.6px calculated value.

·         More complicated example:

body { font-size: 85%; }

h1 { font-size: 200%; }

h2 { font-size: 150%; }

The browsers default font-size (16px) and the body percentage value (85%) are used to create a

calculated value (16px x 85% = 13.6px). This calculated value is inherited by descendants unless new values are specified. Thus, h1 and h2 will have different calculated font sizes.

We can use inheritance to write efficient CSS. For example, you can set the color, font-size and font-family on the body element, and these properties will then be inherited by all descendant elements (such as lists). These properties can then be overridden, specifying new colour values, family values and font-size values as needed.

body {

color: #222;

font-family: arial, helvetica, sans-serif;

font-size: 90%;}

h1, h2, h3 { color: green; }

h4, h5, h6 { color: black; }

h1, h2, h3, h4, h5, h6 {

font-family: georgia,

times, serif;

}

h1 { font-size: 200%; }

h2 { font-size: 150%; }

h3 { font-size: 125%; }

#footer { font-size: 90%; }