mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-11-22 21:52:31 +03:00
Merge pull request #2196 from JacobCWard/typos-5
[css/en] several fixes
This commit is contained in:
Jacob Ward
commit
2f3597efc4
@ -7,17 +7,23 @@ contributors:
|
||||
- ["Connor Shea", "https://github.com/connorshea"]
|
||||
- ["Deepanshu Utkarsh", "https://github.com/duci9y"]
|
||||
- ["Tyler Mumford", "https://tylermumford.com"]
|
||||
|
||||
|
||||
filename: learncss.css
|
||||
---
|
||||
|
||||
Web pages are built with HTML, which specifies the content of a page. CSS (Cascading Style Sheets) is a separate language which specifies a page's **appearance**.
|
||||
Web pages are built with HTML, which specifies the content of a page.
|
||||
CSS (Cascading Style Sheets) is a separate language which specifies
|
||||
a page's **appearance**.
|
||||
|
||||
CSS code is made of static *rules*. Each rule takes one or more *selectors* and gives specific *values* to a number of visual *properties*. Those properties are then applied to the page elements indicated by the selectors.
|
||||
CSS code is made of static *rules*. Each rule takes one or more *selectors* and
|
||||
gives specific *values* to a number of visual *properties*. Those properties are
|
||||
then applied to the page elements indicated by the selectors.
|
||||
|
||||
This guide has been written with CSS 2 in mind, which is extended by the new features of CSS 3.
|
||||
This guide has been written with CSS 2 in mind, which is extended by the new
|
||||
features of CSS 3.
|
||||
|
||||
**NOTE:** Because CSS produces visual results, in order to learn it, you need to try everything in a CSS playground like [dabblet](http://dabblet.com/).
|
||||
**NOTE:** Because CSS produces visual results, in order to learn it, you need to
|
||||
try everything in a CSS playground like [dabblet](http://dabblet.com/).
|
||||
The main focus of this article is on the syntax and some general tips.
|
||||
|
||||
## Syntax
|
||||
@ -67,7 +73,7 @@ div { }
|
||||
[otherAttr~='foo'] { }
|
||||
[otherAttr~='bar'] { }
|
||||
|
||||
/* or contains a value in a dash-separated list, ie, "-" (U+002D) */
|
||||
/* or contains a value in a dash-separated list, e.g., "-" (U+002D) */
|
||||
[otherAttr|='en'] { font-size:smaller; }
|
||||
|
||||
|
||||
@ -114,7 +120,8 @@ selector:first-child {}
|
||||
/* any element that is the last child of its parent */
|
||||
selector:last-child {}
|
||||
|
||||
/* Just like pseudo classes, pseudo elements allow you to style certain parts of a document */
|
||||
/* Just like pseudo classes, pseudo elements allow you to style certain parts of
|
||||
a document */
|
||||
|
||||
/* matches a virtual first child of the selected element */
|
||||
selector::before {}
|
||||
@ -133,9 +140,9 @@ selector::after {}
|
||||
#################### */
|
||||
|
||||
selector {
|
||||
|
||||
|
||||
/* Units of length can be absolute or relative. */
|
||||
|
||||
|
||||
/* Relative units */
|
||||
width: 50%; /* percentage of parent element width */
|
||||
font-size: 2em; /* multiples of element's original font-size */
|
||||
@ -144,14 +151,14 @@ selector {
|
||||
font-size: 2vh; /* or its height */
|
||||
font-size: 2vmin; /* whichever of a vh or a vw is smaller */
|
||||
font-size: 2vmax; /* or greater */
|
||||
|
||||
|
||||
/* Absolute units */
|
||||
width: 200px; /* pixels */
|
||||
font-size: 20pt; /* points */
|
||||
width: 5cm; /* centimeters */
|
||||
min-width: 50mm; /* millimeters */
|
||||
max-width: 5in; /* inches */
|
||||
|
||||
|
||||
/* Colors */
|
||||
color: #F6E; /* short hex format */
|
||||
color: #FF66EE; /* long hex format */
|
||||
@ -162,10 +169,10 @@ selector {
|
||||
color: transparent; /* equivalent to setting the alpha to 0 */
|
||||
color: hsl(0, 100%, 50%); /* as hsl percentages (CSS 3) */
|
||||
color: hsla(0, 100%, 50%, 0.3); /* as hsl percentages with alpha */
|
||||
|
||||
|
||||
/* Images as backgrounds of elements */
|
||||
background-image: url(/img-path/img.jpg); /* quotes inside url() optional */
|
||||
|
||||
|
||||
/* Fonts */
|
||||
font-family: Arial;
|
||||
/* if the font family name has a space, it must be quoted */
|
||||
@ -196,7 +203,13 @@ Save a CSS stylesheet with the extension `.css`.
|
||||
|
||||
## Precedence or Cascade
|
||||
|
||||
An element may be targeted by multiple selectors and may have a property set on it in more than once. In these cases, one of the rules takes precedence over others. Rules with a more specific selector take precedence over a less specific one, and a rule occuring later in the stylesheet overwrites a previous one (which also means that if two different linked stylesheets contain rules for an element and if the rules are of the same specificity, then order of linking would take precedence and the sheet linked latest would govern styling) .
|
||||
An element may be targeted by multiple selectors and may have a property set on
|
||||
it in more than once. In these cases, one of the rules takes precedence over
|
||||
others. Rules with a more specific selector take precedence over a less specific
|
||||
one, and a rule occurring later in the stylesheet overwrites a previous one
|
||||
(which also means that if two different linked stylesheets contain rules for an
|
||||
element and if the rules are of the same specificity, then order of linking
|
||||
would take precedence and the sheet linked latest would govern styling) .
|
||||
|
||||
This process is called cascading, hence the name Cascading Style Sheets.
|
||||
|
||||
@ -225,18 +238,25 @@ and the following markup:
|
||||
<p style='/*F*/ property:value;' class='class1 class2' attr='value' />
|
||||
```
|
||||
|
||||
The precedence of style is as follows. Remember, the precedence is for each **property**, not for the entire block.
|
||||
The precedence of style is as follows. 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 that you avoid its usage.
|
||||
* `E` has the highest precedence because of the keyword `!important`. It is
|
||||
recommended that you avoid its usage.
|
||||
* `F` is next, because it is an inline style.
|
||||
* `A` is next, because it is more "specific" than anything else. It has 3 specifiers: The name of the element `p`, its class `class1`, an attribute `attr='value'`.
|
||||
* `C` is next, even though it has the same specificity as `B`. This is because it appears after `B`.
|
||||
* `A` is next, because it is more "specific" than anything else. It has 3
|
||||
specifiers: The name of the element `p`, its class `class1`, an attribute
|
||||
`attr='value'`.
|
||||
* `C` is next, even though it has the same specificity as `B`.
|
||||
This is because it appears after `B`.
|
||||
* `B` is next.
|
||||
* `D` is the last one.
|
||||
|
||||
## Compatibility
|
||||
|
||||
Most of the features in CSS 2 (and many in CSS 3) are available across all browsers and devices. But it's always good practice to check before using a new feature.
|
||||
Most of the features in CSS 2 (and many in CSS 3) are available across all
|
||||
browsers and devices. But it's always good practice to check before using
|
||||
a new feature.
|
||||
|
||||
## Resources
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user