Internal Style Sheets

INTERNAL STYLE SHEETS (OVERRIDE)
Internal Styles are also called "Embedded" Styles. We use the <style> tag to
embed Internal Styles in the <head> section of a given web page.
Cascading Order and Inheritance in CSS
CSS styles can be specified in many ways, but they will all cascade into one
style sheet in the end. Sometimes conflicts will arise between the style
sheets that influence how styles are merged. The cascading priorities of CSS
can be confusing, and could often lead to excessive use of the !
important rule in frustration when dealing with large sites. This post is to
clarify the cascading order of CSS.
The Cascading Order
Styles are read in three ways: browser default (blue links etc), style
sheets (internal in the <head> or external via @import or <link>)
and inline styles. Here is the simulated default priority order, where no.4 as
most important:
1. Browser default
2. External style sheet
3. Internal style sheet
4. Inline style
If two rules have the same weight, the latter wins. Imported style
sheets and internal style sheets actually carry the same weight, but since
imported styles are considered to be before any rules in the style sheet itself,
the latter will win (the internal). This is not the case if you f.ex have two
<style> tags inside your <head>, where second one uses the @import rule
to import an external style sheet. That could be considered invalid according
to the specs: In CSS1, all @import statements must occur at the start of a
style sheet, before any declarations.
Also worth noting in this list, is that any inline style will carry the same
weight as #id definitions inside the style sheet. But again, since the
inline style attribute comes latter, it will win the battle.
Internal Priorities
Now, lets make a general list of the internal priorities for CSS (3 has the
highest priority):
1. element
2. .class
3. #id
This is the default priority order. In addition to this, specificity will also count,
f.ex ul li will override li. W3C has made a decent table over how you should
calculate internal weight:
LI
{...} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI
{...} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL LI
LI.red
{...} /* a=0 b=0 c=3 -> specificity = 3 */

{...} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */

#list
{...} /* a=1 b=0 c=0 -> specificity = 100 */
a represents the number of #id attributes in the selector
b represents the number of class attributes
c represents the number of tag names
Combining these into a number will give you the actual weight. This means
that f.ex li#list will have the same weight as ul #list. This is probably one of
the most confusing things about the cascade, but its actually simpler than
you might think: its all about counting.
!important
The !important rule is the way to override all of this. Putting !important after the
declaration, but before the semicolon will simply override all previous cascade and
give it the highest priority. If !important is specified more than once for the same
element, they will fall back to the normal cascading rules. Also, declaring a
shorthand property to be !important is equivalent to declaring all of its subproperties to be !important.Inheritance
Many web designers who are new to CSS often get confused by inheritance
and how it works. During the cascade, property values are resolved
to computed values. Some of these values are inherited from its parents
element in the document tree. The very basic principle of inheritance is that
properties with the value inherit will inherit its parents value for the same
property into a computed value. Heres a basic example:
red text
<q>red
text</q>
The property color with the value red will be inherited into
the <q> and elements, because it has the value inherit as default.
The border property does not have inherit as default value, so only the
paragraph will have a border, not its children. This is the most
straightforward inheritance. Here is another more complex example, where a
computed value will be calculated when inheritance occurs:
big text
big
text
The property font-size with the value 10px will be inherited into
the element. The span takes this value and sums up its property
font-size by combining it with the inherited value. So the s
property font-size will have the value 20px after the cascade.
Some screen properties already have inherit as a default value, forcing
themselves on children in the document tree. Heres the list:
border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font
font-family
font-stretch
font-size
font-size-adjust
font-style
font-variant
font-weight
letter-spacing
line-height
list-style
list-style-image
list-style-type
quotes
text-align
text-indent
text-transform
white-space
word-spacing
Note: When using the universal selector * in CSS, be careful not to include
any of the properties above that naturally inherit. Doing so will ruin the
inheritance flow in the document later on.
Examples
We set up some cascading examples here as a reference. Here is the sample
HTML I used for the test:
text
Here are some CSS scenarios that could reside inside the style sheet with
results explained:
1. span#sid { color: red; }
2. #pid span { color: green; }
The text will be rendered green. Both styles carry the same weight (one id,
one tag) but the green value is last defined.
1. #pid #sid { color: red; }
2. p.pclass span#sid.sclass { color: green; }
The text will be rendered red. The first definition has two ids, (weight 200)
and second has one id, two tag names and two class attributes (122).
1. #pid { color: red !important; }
2. span { color: green; }

The text will be rendered green. Even if the first definition is #id-specified
with !important and colour will be inherited, targeting elements further down
the document tree wins.
1. #pid { color: blue; font-size: 10px; }
2. #pid span { color: red !important;}
3. p #sid { color: green; font-size: 150%; }
The text will be rendered red in 15px size. Both definitions carry the same
weight as default, but red wins the colour battle for its !important rule. The
span will inherit the #pid defined font-size: 10px; and combine it with its
own 150%. The result will be 101.5=15px.
This ends this guide on Cascading Order and Inheritance in CSS. Now you are
ready to create amazing websites using CSS3 and HMTL5.

Internal Style Sheets

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Internal Style Sheets

Загружено:

Авторское право:

Доступные форматы

INTERNAL STYLE SHEETS (OVERRIDE)

{...} /* a=0 b=0 c=1 -> specificity = 1 */

{...} /* a=0 b=0 c=2 -> specificity = 2 */

{...} /* a=0 b=0 c=3 -> specificity = 3 */

UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */

{...} /* a=1 b=0 c=0 -> specificity = 100 */

a represents the number of #id attributes in the selector

b represents the number of class attributes

c represents the number of tag names

2. span { color: green; }

Вам также может понравиться