iskm/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2024-12-23 09:41:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update the CSS tutorial

Browse Source 
add more properties, formatting, spelling/grammar, more actual examples
This commit is contained in:
Geoffrey Liu 2014-09-21 00:22:26 -07:00
parent d12bfcdc18
commit 1b90e0f41b
1 changed files with 51 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
css.html.markdown
View File

@ -3,6 +3,7 @@ language: css
contributors:
- ["Mohammad Valipour", "https://github.com/mvalipour"]
- ["Marco Scannadinari", "https://github.com/marcoms"]
- ["Geoffrey Liu", "https://github.com/g-liu"]
filename: learncss.css
---
@ -24,18 +25,19 @@ The main focus of this article is on the syntax and some general tips.
```css
/* comments appear inside slash-asterisk, just like this line! */
/* comments appear inside slash-asterisk, just like this line!
there are no "one-line comments"; this is the only comment style */
/* ####################
## SELECTORS
####################*/
#################### */
/* Generally, the primary statement in CSS is very simple */
selector { property: value; /* more properties...*/ }
/* the selector is used to target an element on page.
You can target all elments on the page! */
You can target all elments on the page using asterisk! */
* { color:red; }
/*
@ -62,61 +64,61 @@ div { }
/* or that the attribute has a specific value */
[attr='value'] { font-size:smaller; }
/* start with a value*/
/* start with a value (CSS3) */
[attr^='val'] { font-size:smaller; }
/* or ends with */
/* or ends with (CSS3) */
[attr$='ue'] { font-size:smaller; }
/* or even contains a value */
/* or even contains a value (CSS3) */
[attr~='lu'] { font-size:smaller; }
/* and more importantly you can combine these together -- there shouldn't be
any spaaace between different parts because that makes it to have another
meaning.*/
any space between different parts because that makes it to have another
meaning. */
div.some-class[attr$='ue'] { }
/* you can also select an element based on its parent.*/
/* you can also select an element based on its parent. */
/*an element which is direct child of an element (selected the same way) */
/* an element which is direct child of an element (selected the same way) */
div.some-parent > .class-name {}
/* or any of its parents in the tree */
/* the following basically means any element that has class "class-name"
and is child of a div with class name "some-parent" IN ANY DEPTH */
/* or any of its parents in the tree
the following basically means any element that has class "class-name"
and is child of a div with class name "some-parent" IN ANY DEPTH */
div.some-parent .class-name {}
/* warning: the same selector wihout spaaace has another meaning.
can you say what? */
can you say what? */
div.some-parent.class-name {}
/* you also might choose to select an element based on its direct
previous sibling */
previous sibling */
.i-am-before + .this-element { }
/*or any sibling before this */
/* or any sibling before this */
.i-am-any-before ~ .this-element {}
/* There are some pseudo classes that allows you to select an element
based on its page behaviour (rather than page structure) */
based on its page behaviour (rather than page structure) */
/* for example for when an element is hovered */
:hover {}
selector:hover {}
/* or a visited link*/
:visited {}
/* or a visited link */
selected:visited {}
/* or not visited link*/
:link {}
/* or not visited link */
selected:link {}
/* or an input element which is focused */
:focus {}
selected:focus {}
/* ####################
## PROPERTIES
####################*/
#################### */
selector {
@ -126,8 +128,12 @@ selector {
width: 200px; /* in pixels */
font-size: 20pt; /* in points */
width: 5cm; /* in centimeters */
width: 50mm; /* in millimeters */
width: 5in; /* in inches */
min-width: 50mm; /* in millimeters */
max-width: 5in; /* in inches. max-(width|height) */
height: 0.2vh; /* times vertical height of browser viewport (CSS3) */
width: 0.4vw; /* times horizontal width of browser viewport (CSS3) */
min-height: 0.1vmin; /* the lesser of vertical, horizontal dimensions of browser viewport (CSS3) */
max-width: 0.3vmax; /* same as above, except the greater of the dimensions (CSS3) */
/* Colors */
background-color: #F6E; /* in short hex */
@ -135,16 +141,20 @@ selector {
background-color: tomato; /* can be a named color */
background-color: rgb(255, 255, 255); /* in rgb */
background-color: rgb(10%, 20%, 50%); /* in rgb percent */
background-color: rgba(255, 0, 0, 0.3); /* in semi-transparent rgb */
background-color: rgba(255, 0, 0, 0.3); /* in semi-transparent rgb (CSS3) */
background-color: transparent; /* see thru */
background-color: hsl(0, 100%, 50%); /* hsl format (CSS3). */
background-color: hsla(0, 100%, 50%, 0.3); /* Similar to RGBA, specify opacity at end (CSS3) */
/* Images */
background-image: url(/path-to-image/image.jpg);
background-image: url(/path-to-image/image.jpg); /* quotes inside url() optional */
/* Fonts */
font-family: Arial;
font-family: "Courier New"; /* if name has spaaace it appears in double-quote */
font-family: "Courier New", Trebuchet, Arial; /* if first one was not found
browser uses the second font, and so forth */
font-family: "Courier New"; /* if name has spaaace it appears in single or double quotes */
font-family: "Courier New", Trebuchet, Arial, sans-serif; /* if first one was not found
browser uses the second font, and so forth */
}
```
@ -155,17 +165,17 @@ Save any CSS you want in a file with extension `.css`.
```xml
<!-- you need to include the css file in your page's <head>: -->
<link rel='stylesheet' type='text/css' href='filepath/filename.css' />
<link rel='stylesheet' type='text/css' href='path/to/style.css' />
<!-- you can also include some CSS inline in your markup. However it is highly
recommended to avoid this. -->
<style>
selector { property:value; }
a { color: purple; }
</style>
<!-- or directly set CSS properties on the element.
This has to be avoided as much as you can. -->
<div style='property:value;'>
<div style="border: 1px solid red;">
</div>
```
@ -207,27 +217,28 @@ The precedence of style is as followed:
Remember, the precedence is for each **property**, not for the entire block.
* `E` has the highest precedence because of the keyword `!important`.
It is recommended to avoid this unless it is strictly necessary to use.
It is recommended to avoid this unless it is strictly necessary to use.
* `F` is next, because it is inline style.
* `A` is next, because it is more "specific" than anything else.
more specific = more specifiers. here 3 specifiers: 1 tagname `p` +
class name `class1` + 1 attribute `attr='value'`
more specific = more specifiers. here 3 specifiers: 1 tagname `p` +
class name `class1` + 1 attribute `attr='value'`
* `C` is next. although it has the same specificness as `B`
but it appears last.
but it appears last.
* Then is `B`
* and lastly is `D`.
## Compatibility
Most of the features in CSS2 (and gradually in CSS3) are compatible across
all browsers and devices. But it's always vital to have in mind the compatiblity
all browsers and devices. But it's always vital to have in mind the compatiblity
of what you use in CSS with your target browsers.
[QuirksMode CSS](http://www.quirksmode.org/css/) is one of the best sources for this.
To run a quick compatibility check, [CanIUse](http://caniuse.com) is a great resource.
## Further Reading
* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
* [QuirksMode CSS](http://www.quirksmode.org/css/)
* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)