Css: Difference between revisions

From miki
Jump to navigation Jump to search
Line 67: Line 67:
}
}
</source>
</source>



== Selectors ==
== Selectors ==
Line 75: Line 76:
!Pattern!!Meaning!!Described in section
!Pattern!!Meaning!!Described in section
|-
|-
|{{nb|<source lang="css">*</source>}}
|<source lang=css enclose=none>*</source>
|Matches any element.
|Matches any element.
|Universal selector
|Universal selector
|-
|-
|{{nb|<source lang="css">E</source>}}
|<source lang=css enclose=none>E</source>
|Matches any E element (i.e., an element of type E).
|Matches any E element (i.e., an element of type E).
|Type selectors
|Type selectors
|-
|-
|{{nb|<source lang="css">E F</source>}}
|<source lang=css enclose=none>E F</source>
|Matches any F element that is a descendant of an E element.
|Matches any F element that is a descendant of an E element.
|Descendant selectors
|Descendant selectors
|-
|-
|{{nb|<source lang="css">E > F</source>}}
|<source lang=css enclose=none>E > F</source>
|Matches any F element that is a child of an element E.
|Matches any F element that is a child of an element E.
|Child selectors
|Child selectors
|-
|-
|{{nb|<source lang="css">E:first-child</source>}}
|<source lang=css enclose=none>E:first-child</source>
|Matches element E when E is the first child of its parent.
|Matches element E when E is the first child of its parent.
|The :first-child pseudo-class
|The :first-child pseudo-class
|-
|-
|{{nb|<source lang="css">
|<source lang=css enclose=none>
E:link
E:link
E:visited
E:visited
</source>}}
</source>
|Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
|Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
|The link pseudo-classes
|The link pseudo-classes
|-
|-
|{{nb|<source lang="css">
|<source lang=css enclose=none>
E:active
E:active
E:hover
E:hover
E:focus
E:focus
</source>}}
</source>
|Matches E during certain user actions.
|Matches E during certain user actions.
|The dynamic pseudo-classes
|The dynamic pseudo-classes
|-
|-
|{{nb|<source lang="css">E + F</source>}}
|<source lang=css enclose=none>E + F</source>
|Matches any F element immediately preceded by a sibling element E.
|Matches any F element immediately preceded by a sibling element E.
|Adjacent selectors
|Adjacent selectors
|-
|-
|{{nb|<source lang="css">
|<source lang=css enclose=none>
E[foo]
E[foo]
E[foo="warning"]
E[foo="warning"]
E[foo~="warning"]
E[foo~="warning"]
</source>}}
</source>
|Matches any E element whose "foo" attribute set OR value is exactly equal to "warning" OR value is a list of space-separated values, one of which is exactly equal to "warning".
|Matches any E element whose "foo" attribute set OR value is exactly equal to "warning" OR value is a list of space-separated values, one of which is exactly equal to "warning".
|Attribute selectors
|Attribute selectors
|-
|-
|{{nb|<source lang="css">DIV.warning</source>}}
|<source lang=css enclose=none>DIV.warning</source>
|Language specific. (In HTML, the same as DIV[class~="warning"].)
|Language specific. (In HTML, the same as DIV[class~="warning"].)
|Class selectors
|Class selectors
|-
|-
|{{nb|<source lang="css">E#myid</source>}}
|<source lang=css enclose=none>E#myid</source>
|Matches any E element with ID equal to "myid".
|Matches any E element with ID equal to "myid".
|ID selectors
|ID selectors

Revision as of 16:47, 15 January 2014

References

Syntax

External

External CSS is a file that contains only CSS code and is saved with a .css file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>.

Content of file test.css: 

body{ background-color: gray;} 
p { color: blue; } 
h3{ color: white; }

Example html file using the stylesheet above: 

<html>
<head>
  <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
  <h3> A White Header </h3>
  <p> This paragraph has a blue font.  
  The background color of this page is gray because we changed it with CSS! </p>
</body>
</html>

Internal

When using internal CSS, you must add a new tag, <style>, inside the <head> tag. 

<html>
<head>
  <style type="text/css">
    p {color: white; }
    body {background-color: black; }
  </style>
</head>
<body>
  <p>White text on a black background!</p>
</body>
</html>

Inline

To add style to a given HTML element, just specify the desired CSS properties with the HTML style attribute: 

<p style="background: blue; color: white;">A new background and font color with inline CSS</p>

Examples

/* install_log class for install log table */
table.install_log td:first-child
{
	width:7.5em;
	font-size: x-small;
}
table.install_log td:first-child:before
{
	content:url(/miki/skins/monobook/bullet.gif);
	margin-right:0.6em;
}


Selectors

See the reference here.

Pattern Meaning Described in section
* Matches any element. Universal selector
E Matches any E element (i.e., an element of type E). Type selectors
E F Matches any F element that is a descendant of an E element. Descendant selectors
E > F Matches any F element that is a child of an element E. Child selectors
E:first-child Matches element E when E is the first child of its parent. The :first-child pseudo-class
E:link E:visited Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes
E:active E:hover E:focus Matches E during certain user actions. The dynamic pseudo-classes
E + F Matches any F element immediately preceded by a sibling element E. Adjacent selectors
E[foo] E[foo="warning"] E[foo~="warning"] Matches any E element whose "foo" attribute set OR value is exactly equal to "warning" OR value is a list of space-separated values, one of which is exactly equal to "warning". Attribute selectors
DIV.warning Language specific. (In HTML, the same as DIV[class~="warning"].) Class selectors
E#myid Matches any E element with ID equal to "myid". ID selectors
Retrieved from "https://miki.immie.org/mediawiki/index.php?title=Css&oldid=5426"