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

[css/en] several fixes

Browse Source 
- Reduced almost all lines to less than 80 characters in length.
- ie -> e.g.
- occuring -> occurring (line 209)
This commit is contained in:
Jacob Ward 2016-03-16 10:37:27 -06:00
parent 319d426507
commit c7a157948b
1 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
css.html.markdown
View File

@ -11,13 +11,19 @@ contributors:
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 {}
@ -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