diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | Makefile | 16 | ||||
| -rw-r--r-- | README | 2 | ||||
| -rw-r--r-- | index.md | 184 | ||||
| -rw-r--r-- | templates/footer.html | 2 | ||||
| -rw-r--r-- | templates/header.html | 11 |
6 files changed, 213 insertions, 3 deletions
@@ -1 +1,2 @@ css/*.css +*.html @@ -1,13 +1,25 @@ +htmlpages = index.html +htmlheader = templates/header.html +htmlfooter = templates/footer.html cssfiles := css/main.css css/print.css sass_includedir = /usr/share/compass/frameworks/toolkit/stylesheets -all: $(cssfiles) +all: $(htmlpages) + +$(htmlpages): %.html : %.md $(htmlheader) $(htmlfooter) $(cssfiles) + cat $(htmlheader) > $@ + echo "<div id="book">" >> $@ + echo "<div id="page1" class="page"><div class="inner">" >> $@ + cmark $< >> $@ + perl -p0i -e '$$i or $$i++; s!(<hr\s*/?>\s*){2}(?{$$i++})!</div></div>\n\n<div id="page$$i" class="page"><div class="inner">!g' $@ + echo "</div></div>" >> $@ + cat $(htmlfooter) >> $@ $(cssfiles): css/%.css : css/%.scss $(sass_includedir) sassc -I $(sass_includedir) $< $@ clean: - rm -f $(cssfiles) + rm -f $(cssfiles) $(htmlpages) .PHONY: clean @@ -8,7 +8,7 @@ Preparations 1) Use the stable release (Stretch) of Debian <http://www.debian.org/> 2) Install needed tools: - sudo apt install git sassc compass-toolkit-plugin + sudo apt install git sassc compass-toolkit-plugin cmark Use diff --git a/index.md b/index.md new file mode 100644 index 0000000..929672d --- /dev/null +++ b/index.md @@ -0,0 +1,184 @@ +[dinky pocket book]{}CSS Selectors +================================== + +--- + +--- + +Simple selectors +---------------- + +assume throughout that `E` and `F` are elements, +they can have attribute `foo` +e.g. `<e foo="bar">`{style="white-space: nowrap"} +you can replace these with any elements or attributes. + +In HTML, elements in CSS can be uppercase like these examples. +In XHTML, elements must be lower case. +Classes and IDs are **always** case sensitive + +[**universal selector**, match any element]{.micro} `*` + +[**type** (or element) selector]{.micro} `E` + +[**ID selector** an E element with ID equal to "myid", +e.g.`<e id="myid">`]{.micro} `E#myid` + +[**class selector** an E element whose class is "myclass", +e.g.`<e class="myclass">`]{.micro} `E.myclass` + +--- + +--- + +Combinators & negation +---------------------- + +[**descendant combinator** to style an F element, +which is a descendant of an E element]{.micro} `E F` + +[**child combinator** an F element +which is the direct child of an E element]{.micro} `E > F` + +[**adjacent sibling combinator** an F element +that is immediately preceded by an E element]{.micro} `E + F` + +[**general sibling combinator** an F element +preceded at some point by an E element]{.micro} `E ~ F` + +[**negation pseudo-class** an E element +that does not match simple selector `s`]{.micro} `E:not(s)` + +--- + +--- + +Attribute selectors +------------------- + +[element E with a "foo" attribute]{.micro} `E[foo]` + +[E’s attribute `foo`, +value exactly equal to `bar`]{.micro} `E[foo="bar"]` + +[E’s attribute `foo`, +value is whitespace-separated values, +one of which is exactly "bar"]{.micro} `E[foo~="bar"]` + +[E’s attribute `foo`, +value begins exactly "bar"]{.micro} `E[foo^="bar"]` + +[E’s attribute `foo`, +value ends exactly "bar"]{.micro} `E[foo$="bar"]` + +[E’s attribute `foo`, +value contains substring "bar"]{.micro} `E[foo*="bar"]` + +[E’s attribute `foo` has a hyphen-separated list of values +beginning (from the left) with "en"]{.micro} `E[foo|="en"]` + +--- + +--- + +Structural pseudo-classes +------------------------- + +`n` can be replaced with an expression +in all following cases +`n` can be (odd), (even) or expressions such as (3n + 1) + +an E element, +the n-th child of its parent + +`E:nth-child(n)` +[an E element, the n-th child of its parent, +counting from the last one]{.micro} `E:nth-last-child(n)` + +[an E element, +the n-th sibling of its type]{.micro} `E:nth-of-type(n)` + +[an E element, +the n-th sibling of its type, +counting from the last one]{.micro} `E:nth-last-of-type(n)` + +[an E element that is the document root, +i.e. html]{.micro} `E:root` + +--- + +--- + +Structural pseudo-classes +------------------------- + +[an E element, +first child of its parent]{.micro} `E:first-child` + +[an E element, +first sibling of its type]{.micro} `E:first-of-type` + +[an E element, +last child of its parent]{.micro} `E:last-child ` + +[an E element, +last sibling of its type]{.micro} `E:last-of-type` + +[an E element, +only child of its parent]{.micro} `E:only-child` + +[an E element, +only sibling of its type]{.micro} `E:only-of-type` + +[an E element that has no children +(including text nodes)]{.micro} `E:empty` + +--- + +--- + +Pseudo-classes +-------------- + +[matches a link E when E is a link +and not visited, hovered over focused on or active]{.micro} `E:link` + +[the href target of the link E has been visited]{.micro} `E:visited` + +[the link E has been activated]{.micro} `E:active` + +[any element E +when hovered over with a mouse]{.micro} `E:hover` + +[the link or form control E +when tabbed to with a keyboard]{.micro} `E:focus` + +[element E is the fragment in the referring URI]{.micro} `E:target` + +[an element of type E in language "fr"]{.micro} `E:lang(fr)` + +--- + +--- + +Forms & [Pseudo-elements]{style="white-space: nowrap"} +------------------------------------------------------ + +[a user interface element E +which is enabled]{.micro} `E:enabled` + +[a user interface element E +which is disabled ]{.micro} `E:disabled` + +[a user interface element E +which is checked]{.micro} `E:checked` + +[the first formatted line of an E element]{.micro} `E::first-line` + +[the first formatted letter of an E element]{.micro} `E::first-letter` + +[generated content before an E element]{.micro} `E::before` + +[generated content after an E element]{.micro} `E::after` + +[http://www.w3.org/TR/css3-selectors/]{.micro} diff --git a/templates/footer.html b/templates/footer.html new file mode 100644 index 0000000..308b1d0 --- /dev/null +++ b/templates/footer.html @@ -0,0 +1,2 @@ +</body> +</html> diff --git a/templates/header.html b/templates/header.html new file mode 100644 index 0000000..d8f909c --- /dev/null +++ b/templates/header.html @@ -0,0 +1,11 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> +<title>pocket book</title> +<meta name="author" content="Jonas Smedegaard"> +<!-- heavily based on http://natbat.net/2009/May/21/pocketbooks/ --> +<link rel="stylesheet" href="css/main.css" type="text/css"> +<link rel="stylesheet" href="css/print.css" type="text/css" media="print"> +</head> +<body> |