All notes
Css

Good References

Properties

clear

The clear property specifies which side(s) of an element other floating elements are not allowed.

clear: none(default)|left|right|both|initial|inherit.

content

w3schools.com.

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

Example: attr


/* <a href="http://www.w3schools.com">W3Schools</a> will becomes:
W3Schools (http://www.w3schools.com)
*/
a:after {
  content: " (" attr(href) ")";
}

Example: counter


div {
  counter-reset: myIndex;
}

p {
  counter-increment: myIndex;
}

p:before {
  content:counter(myIndex);
}

counter-reset, counter-increment

w3schools.com.

counter-increment: none|id|initial|inherit;
  The default increment is 1.
  0 or negative values, are allowed.
counter-reset: none|name number|initial|inherit;
  The default reset value is 0.

/* Auto numbering on headings. */
h1 {
  counter-reset: h2;
}
h2 {
  counter-reset: h3;
}
h3 {
  counter-reset: h4;
}
h4 {
  counter-reset: h5;
}

h2:before {
  counter-increment: h2;
  content: counter(h2) ". ";
}
h3:before {
  counter-increment: h3;
  content: counter(h2)"." counter(h3) ". ";
}
h4:before {
  counter-increment: h4;
  content: counter(h2)"." counter(h3)"." counter(h4) ". ";
}
h5:before {
  counter-increment: h5;
  content: counter(h2)"." counter(h3)"."counter(h4)"." counter(h5) ". ";
}

display

none

The value "none" lets you turn off the display of an element; when you use "none", all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.

flex, inline-flex

css-tricks: A guide to flexbox.

text-decoration

none	Defines a normal text. This is default.
underline 	Defines a line below the text.
overline 	Defines a line above the text.
line-through 	Defines a line through the text.
initial		Sets this property to its default value.
inherit		Inherits this property from its parent element.

box-shadow

none 	Default value. No shadow is displayed
h-shadow 	Required. The position of the horizontal shadow. Negative values are allowed
v-shadow 	Required. The position of the vertical shadow. Negative values are allowed
blur 	Optional. The blur distance.
spread 	Optional. The size of shadow.
color 	Optional. The color of the shadow. The default value is black.
inset 	Optional. Changes the shadow from an outer shadow (outset) to an inner shadow.

Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all.

overflow

visible	The overflow is not clipped. It renders outside the element's box. This is default.
hidden	The overflow is clipped, and the rest of the content will be invisible
scroll	The overflow is clipped, but a scroll-bar is added to see the rest of the content
auto	If overflow is clipped, a scroll-bar should be added to see the rest of the content

width, min-width, max-width

MozillaDeveloper: CSS-width.

The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.

The min-width and max-width properties override width.

word-wrap

normal 	Break words only at allowed break points
break-word 	Allows unbreakable words to be broken

pre tag not affected by word-wrap:break-word?

Reference.


pre {
	white-space: pre-wrap;		 /* CSS 3 */
	white-space: -moz-pre-wrap;	 /* Mozilla, since 1999 */
	white-space: -pre-wrap;		 /* Opera 4-6 */
	white-space: -o-pre-wrap;	 /* Opera 7 */
	word-wrap: break-word;		 /* Internet Explorer 5.5+ */
}

To be more browser robust, use the following: Reference


word-wrap:break-word;
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

white-space

normal 	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default.
nowrap 	Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line.
pre 	Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the pre tag in HTML.
pre-line 	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
pre-wrap 	Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks .

word-break

normal 	Default value. Break words according to their usual rules.
break-all 	Lines may break between any two letters.
keep-all  	Breaks are prohibited between pairs of letters.

hyphens

Reference.

none	Words are never hyphenated at at line breaks.
manual	Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities.
auto	Words can be broken at appropriate hyphenation points either as determined by hyphenation chars or as determined automatically by a language-appropriate hyphenation resource (if supported by the browser or provided via @hyphenation-resource).
The hyphenation chars for manual breaks are

Positions: relative, fixed, absolute

static. The default. Any element with static position is said to be not positioned, otherwise is said to be positioned.

relative. The element is adjusted away from its normal position by setting top, right, bottom, left properties. See example below.
Other contents will not take its place, e.g. a relative element holds its place. This makes "relative" appear not very useful, but it performs an important task: setting ancestral container for "absolute" element. See example below.

fixed. The element is positioned relative to the viewport. It does not leave a gap, in other words, its element will not occupy a position in normal flow.

absolute. Behaves like fixed but relative to the nearest positioned ancestor.

barelyfitz.com: css positioning.

Relative example:


#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1.


#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

/* If we float one column to the left, then also float the second column to the left, they will push up against each other. */
#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}

/* Then after the floating elements we can "clear" the floats to push down the rest of the content. */
#div-1c {
 clear:both;
}

float and clear

Float is used to wrapping text around images, such as


img {
	float: right;
	margin: 0 0 1em 1em;
}

will put images on the right of its container, and the image has a margin with regards to surrounding text.

Sometimes when floated elements cause trouble to its followers, its followers could use clear to get rid of it. For example, the element following a left-floated div could use clear: left.

Grammer

Selectors

Grouping Selectors


h1 {
    text-align: center;
    color: red;
}
h2 {
    text-align: center;
    color: red;
}

/* Is the same as: */
h1, h2 {
    text-align: center;
    color: red;
}

Descendant selector

Ref.

如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写

h1 em {color:red;}

Child selector

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。Ref.


/* 选择只作为 h1 元素子元素的 strong 元素,可以这样写:*/
h1 > strong {color:red;}

/* 选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性。*/
table.company td > p

Q: is there any parent selectors?

StackOverflow: is there a css parent selector?.

jQuery

jQuery: has-selector.

Format: jQuery( ":has(selector)" )

For example, the expression $( "div:has(p)" ) matches a "div" if a "p" exists anywhere among its descendants, not just as a direct child.
$( "div:has(p)" ).addClass( "test" );

CSS4 WD (not supported yet)

The Selectors Level 4 Working Draft includes a :has() pseudo-class that works the same as the jQuery implementation.


<!-- Select the <li> element that is a immediate parent of the anchor tag -->
li:has(> a.active) { /* styles to apply to the li tag */ }

Adjacent sibling selector

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。Ref.


/* 例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:*/
h1 + p {margin-top:50px;}

General sibling selectors

Selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.


/* match all <span> elements that follow a <p> element inside the same element. */
p ~ span {}

Attribute selectors

Introduced in CSS2. Ref.

[attribute] 	选取带有指定属性的元素。
[attribute=value] 	The attribute has to have the exact value specified.
[attribute~=value] 	The attribute's value needs to be a whitespace separated list of words (for example, class="title featured home"), and one of the words is exactly the specified value.
[attribute|=value] 	The attribute's value is exactly "value" or starts with the word "value" and is immediately followed by "-", so it would be "value-".
[attribute^=value] 	The attribute's value starts with the specified value.
[attribute$=value] 	The attribute's value ends with the specified value.
[attribute*=value] 	The attribute's value contains the specified value.

/* 包含标题(title)的所有元素变为红色:*/
*[title] {color:red;}

/* 只对有 href 属性的锚(a 元素)应用样式: */
a[href] {color:red;}

/* 将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色:*/
a[href][title] {color:red;}

/* 所有带有 alt 属性的图像应用样式,突出显示这些有效的图像。更适合用来诊断而不是设计。*/
img[alt] {border: 5px solid red;}

/* 将指向 Web 服务器上某个指定文档的超链接变成红色:*/
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

/* 选择 class 属性中包含 important 的元素。如果忽略了波浪号,则说明需要完成完全值匹配。*/
p[class~="important"] {color: red;}
/* 可以匹配如下 */
<p class="important warning">This paragraph is a very important warning.

/* all the div elements that are posts */
div[class*="post"] {
  background-color: #333;
}

a[href$=".jpg"] {
  background: url(jpeg.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
}
a[href$=".pdf"] {
  background: url(pdf.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
}

CSS precedence

we sometimes have the tendency to litter our HTML with excessive and unnecessary classes and ids, divs and spans. The best way is using more complex CSS selectors, ones that can target specific elements without the need of a class or an id.

  1. Author > User > default.
  2. !important > normal.
  3. Specificity. Calculate as (a,b,c,d). See below for example.
    1. Inline style
    2. ID
    3. class (eg. .example), pseudo class, attribute selectors (li[id=red]).
    4. element, pseudo element
  4. Latter > earlier.

A good reference.

override with !important


td {height: 100px !important}

Calculate specificity


p: 1 element - (0,0,0,1)
div: 1 element - (0,0,0,1)
#sidebar: 1 id - (0,1,0,0)
div#sidebar: 1 element, 1 id - (0,1,0,1)
div#sidebar p: 2 elements, 1 id - (0,1,0,2)
div#sidebar p.bio: 2 elements, 1 class, 1 id - (0,1,1,2)

div p.bio {font-size: 14px} - (0,0,1,2)
#sidebar p {font-size: 12px} - (0,1,0,1)

FAQ

Comment

A CSS comment is deliminated by /* and */. The comment can span multiple lines.

Center

sitePoint: setting body width.

"margin: auto;" only works if you have a valid DOCTYPE declaration on top of your page. See this like for why doctype is so important.

This will work in every browser except for IE5/Windows. If you want it to work there, you have to wrap another "div" around #content and give it the CSS property of "text-align: center;".


#content {
   width: 600px;
   margin-left: auto;
   margin-right: auto;
}

Set width and centered

stackOverflow: best way to make the body max-width and centered.


html {
    margin:    0 auto;
    max-width: 900px;
}
body
{
    /* whatever you want */
}

HTML and its fonts

Font names

There are two types of font family names:

When setting font-family, always start with the font you want, and end with a generic family name so that the browser could fall back on it. Example:


body {
	font-family: courier, sans-serif, monospace;
}

TT, teletype, monospace

Reference. The TT tag specifies that the enclosed text must be rendered in a teletype/monospaced font. The tag is not supported in HTML5, so use CODE etc instead.

Other similar tags include:

EM, emphasized text, italics

Although usually EM has the same effect as I, the two must be used non-interchageably: I specifies directly the italic font, while EM indicates that its enclosed text must be emphasized. EM must be rendered differently from STRONG (strongly emphasized text, usually rendered in bold). Other similar tags include:

white-space

The CSS white-space could be:

The CSS-trics page explains well the relationships of pre, pre-wrap and pre-line, and it gives an excellent summary table. This page give a good example.

Media query

Width. This is probably the most important property, since it can be used to choose page layout - less columns for narrower screens and more columns for wider ones. The property accepts min/max prefixes, so we'd better add those to specify a width range.


<link rel="stylesheet" media="print and (min-width:25cm)" href="a.css" /> <!-- In HTML -->

/* In CSS. The {...} only works when the 3 conditions are met. */
@media screen and (min-width: 400px) and (max-width: 700px) {}

/* In CSS. Import the CSS file only when either the two conditions are met: screen and (min-width: 400px), */
/* or projection and (color). The comma denotes an 'or' logic. */
@import url(example.css) screen and (min-width: 400px), projection and (color);

Orientation. There are two values for this property: portrait an landscape. It is easy to distinguish: when the height is larger than or equal to the width, it's portrait, otherwise landscape.


@media all and (orientation:portrait) {...}

Color. It accepts min/max prefixes. Its value type is integer, which specifies the bit number per color component of the device. If the device is not color device, the value is 0. The example below express a style for all color devices.


@media all and (color) { … }
@media all and (min-color: 1) {...}

Box model

The width

As defined in box model, the width of an element is just the width of its content. When designing a layout, its padding and border width may cause the mis-alignment. For such an element as follows, its box has a visual width of 210px:


p#big {
	width: 100px;
	border: 10px;
	padding: 100px;
}

In order to add the counting of padding and border width into the box width, we can set the following:


* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Then when we set an element with width equal to 200px, its total box width is 200px. Go to learlayout.com for reference.

calc in css3

In CSS3 there comes a powerful tool: calc. It supports these operators: "+ - * /". Example:

width: calc(100% - 2px*2);
Note that the two operators "+ -" must be surrounded by spaces, so this is wrong:
width: calc(100%-2px*2);

transition

An example. When you hover the mouse on the div element, the transition takes effect.

div {
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	-moz-transition:width 2s; /* Firefox 4 */
	-webkit-transition:width 2s; /* Safari and Chrome */
	-o-transition:width 2s; /* Opera */
}

div:hover {
	width:300px;
}

z-index

All elements has a default z-index of 0. The element with lower z-index is beneath those with higher z-index.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Pseudo classes/elements

Pseudo class has the format: "element:pClassName". Pseudo element has the format: "element::pElementName".

Selector Example Example description
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:active a:active Selects the active link
:hover a:hover Selects links on mouse over
:focus input:focus Selects the input element which has focus
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
::before p::before Insert content before every <p> element
::after p::after Insert content after every <p> element
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"