m-lamonaca/dev-notes
1
0
Fork 0
mirror of https://github.com/m-lamonaca/dev-notes.git synced 2025-04-06 10:56:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove duplicate units section, fix typos

Browse source
This commit is contained in:
Marcello 2021-09-16 14:54:30 +02:00
parent 3bf43bc55b
commit 8a74634625
1 changed files with 47 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
CSS/CSS.md
View file

@ -5,7 +5,7 @@
### Inline CSS ### Inline CSS
```html ```html
<tag style=”property:value”></tag> <tag style="property:value"></tag>
``` ```
Uses the HTML style attribute. Uses the HTML style attribute.
@ -20,14 +20,14 @@ Not recommended except in cases where choices are constrained.
selector { selector {
property: value; property: value;
/* box and display */ /* box and display */
/* alignement, position */ /* alignment, position */
/* margin, border, padding */ /* margin, border, padding */
/* max/min height-width*/ /* max/min height-width*/
/* colors */ /* colors */
/* font */ /* font */
/* text alignement */ /* text alignment */
} }
</style> </style>
</head> </head>
@ -42,7 +42,7 @@ Not Recommended, only use when the number of rules is small and there are constr
```html ```html
<head> <head>
<link rel=”stylesheet” type=”text/css” href=”style.css”> <link rel="stylesheet" href="style.css">
</head> </head>
``` ```
@ -52,7 +52,7 @@ Easier to maintain, especially in larger projects.
## Selectors ## Selectors
Tthe selector points to the html element to style. The selector points to the html element to style.
```css ```css
selector {property: value; property: value} selector {property: value; property: value}
@ -87,7 +87,7 @@ Should apply to one element on a page.
### Class Selector ### Class Selector
Many elements can have the same class, calsses are used to group HTML elements togheter. Many elements can have the same class, classes are used to group HTML elements together.
```css ```css
.selector {property: value;} /* selects <tag class="selector"> */ .selector {property: value;} /* selects <tag class="selector"> */
@ -291,19 +291,19 @@ selector:pseudo-class { property: value; }
`a:hover {...}` selects a link when the mouse rolls over it (hover state). `a:hover {...}` selects a link when the mouse rolls over it (hover state).
`a:active {...}` selects the link while it's being activated (clicked or otherwise). `a:active {...}` selects the link while it's being activated (clicked or otherwise).
`selector:focus {...}` selects an element whent the user focuses on it (e.g. tab w/ keyboard). Often used on links, inputs, textareas. `selector:focus {...}` selects an element when the user focuses on it (e.g. tab w/ keyboard). Often used on links, inputs, text-areas.
### User Interface State Pseudo-Classes ### User Interface State Pseudo-Classes
`input:enabled {...}` selects an input that is in the default state of enabled and aviable for use. `input:enabled {...}` selects an input that is in the default state of enabled and available for use.
`input:disabled {...}` selects an input that has the attibute. `input:disabled {...}` selects an input that has the attribute.
`input:checked {...}` selects checkboxes or radio buttons that are checked. `input:checked {...}` selects checkboxes or radio buttons that are checked.
`input:indeterminate {...}` selects checkboxes or radio button that has neither selected nor unselected. `input:indeterminate {...}` selects checkboxes or radio button that has neither selected nor unselected.
### Structural & Position Pseudo-Classes ### Structural & Position Pseudo-Classes
`selector:first-child {...}` selects an element if it’s the first child within its parent. `selector:first-child {...}` selects an element if it's the first child within its parent.
`selector:last-child {...}` selects an element if it’s the last element within its parent. `selector:last-child {...}` selects an element if it's the last element within its parent.
`selector:only-child {...}` will select an element if it is the only element within a parent. `selector:only-child {...}` will select an element if it is the only element within a parent.
`selector:first-of-type {...}` selects the first element of its type within a parent. `selector:first-of-type {...}` selects the first element of its type within a parent.
@ -339,44 +339,45 @@ When used within selectors allow unique parts of the page to be stylized. Only o
```css ```css
a::after/before { a::after/before {
propery: value; property: value;
content: " (" attr(attribute_name) ")"; content: " (" attr(attribute_name) ")";
propery: value; property: value;
} }
``` ```
### Fragment Pseudo-Elements ### Fragment Pseudo-Elements
`selector::selection {...}` identifies part of the document that has been selected, or highlighted, by a user’s actions. `selector::selection {...}` identifies part of the document that has been selected, or highlighted, by a user's actions.
`selector::-moz-selection {...}` Mozilla prefixed fragment pseudo-element has been added to ensure the best support for all browser. `selector::-moz-selection {...}` Mozilla prefixed fragment pseudo-element has been added to ensure the best support for all browser.
## Units ## Units
### Absolute Length units ### Absolute Length units
| Unit | Name | Equivalent to | | Unit | Name | Equivalent to |
| ---- | ------------------- | -------------------- | | ------ | ------------------- | -------------------- |
| cm | centimeters | 1cm = 38px = 25/64in | | `cm` | centimeters | 1cm = 38px = 25/64in |
| mm | Millimeters | 1mm = 1/10th of 1cm | | `mm` | Millimeters | 1mm = 1/10th of 1cm |
| Q | Quarter-millimeters | 1Q = 1/40th of 1cm | | `Q` | Quarter-millimeters | 1Q = 1/40th of 1cm |
| in | Inches | 1in = 2.54cm = 96px | | `in` | Inches | 1in = 2.54cm = 96px |
| pc | Picas | 1pc = 1/6th of 1in | | `pc` | Picas | 1pc = 1/6th of 1in |
| pt | Points | 1pt = 1/72th of 1in | | `pt` | Points | 1pt = 1/72th of 1in |
| px | Pixels | 1px = 1/96th of 1in | | `px` | Pixels | 1px = 1/96th of 1in |
### Relative Length Units ### Relative Length Units
| Unit | Relative to | | Unit | Relative to |
| ---- | ------------------------------------------------------------------- | | ------ | ------------------------------------------------------------------- |
| rem | Font size of the root element. | | `rem` | Font size of the root element. |
| em | Font size of the parent or the element itself | | `em` | Font size of the parent or the element itself |
| ex | x-height of the element's font. | | `ex` | x-height of the element's font. |
| ch | The advance measure (width) of the glyph "0" of the element's font. | | `ch` | The advance measure (width) of the glyph "0" of the element's font. |
| lh | Line height of the element. | | `lh` | Line height of the element. |
| vw | 1% of the viewport's width. | | `vw` | 1% of the viewport's width. |
| vh | 1% of the viewport's height. | | `vh` | 1% of the viewport's height. |
| vmin | 1% of the viewport's smaller dimension. | | `vmin` | 1% of the viewport's smaller dimension. |
| vmax | 1% of the viewport's larger dimension. | | `vmax` | 1% of the viewport's larger dimension. |
| `%` | Relative to the parent element |
## Element Properties ## Element Properties
@ -449,7 +450,7 @@ Can also accept Keywords: `left`, `center`, `right` and `top`, `center`, `bottom
**Background-attachment** **Background-attachment**
Specifies whether the background image should scroll with the page or be fixed Specifies whether the background image should scroll with the page or be fixed
### Font Familty ### Font Family
The font family defines which font is used. When listing multiple fonts, always list a generic name last. The font family defines which font is used. When listing multiple fonts, always list a generic name last.
@ -516,7 +517,7 @@ selector {
```css ```css
selector { selector {
text-decoration: line color style thickness; text-decoration: line color style thickness;
text-align: alignement; text-align: alignment;
} }
``` ```
@ -541,7 +542,7 @@ selector {
### Width ### Width
Sets the width of a block-level element or img; does not work for inline elements (unless their display property is changed). Sets the width of a block-level element or img; does not work for inline elements (unless their display property is changed).
Accepts a veriety of length units. Accepts a variety of length units.
```css ```css
selector { selector {
@ -555,7 +556,7 @@ selector {
### Height ### Height
Sets the height of a block-level element or img; does not work for inline elements (unless their display property is changed). Sets the height of a block-level element or img; does not work for inline elements (unless their display property is changed).
Accepts a veriety of length units. Accepts a variety of length units.
```css ```css
selector { selector {
@ -590,33 +591,6 @@ selector {
} }
``` ```
## CSS Units
### Absolute Lengths
| Symbol | Unit |
| ------ | ---------------------------- |
| `cm` | centimeters |
| `mm` | millimeters |
| `in` | inch (1 in = 96px = 2.54 cm) |
| `px` | pixel (1 px = 1/96 of 1 in) |
| `pt` | points (1 pt = 1/72 of 1 in) |
| `pc` | picas (1 pc = 12 pt) |
### Relative Lengths
| Symbol | Unit |
| ------ | ----------------------------------------------------------------------------------------- |
| `em` | Relative to the font-size of the element (2em means 2 times the size of the current font) |
| `ex` | Relative to the x-height of the current font (rarely used) |
| `ch` | Relative to width of the "0" (zero) |
| `rem` | Relative to font-size of the root element |
| `vw` | Relative to 1% of the width of the viewport* |
| `vh` | Relative to 1% of the height of the viewport* |
| `vmin` | Relative to 1% of viewport's* smaller dimension |
| `vmax` | Relative to 1% of viewport's* larger dimension |
| `%` | Relative to the parent element |
## CSS Cascading ## CSS Cascading
The browser assigns different priorities to CSS depending on the type of selector. The browser assigns different priorities to CSS depending on the type of selector.
@ -689,7 +663,7 @@ selector {
#### Padding shortcuts #### Padding shortcuts
```css ```css
selectopr { selector {
padding: top right bottom left; /* Four values (TRBL) */ padding: top right bottom left; /* Four values (TRBL) */
padding: top right/left bottom; /* Three values (T/TL/B) */ padding: top right/left bottom; /* Three values (T/TL/B) */
padding: top/bottom right/left; /* Two values (TB/RL) */ padding: top/bottom right/left; /* Two values (TB/RL) */
@ -728,9 +702,9 @@ selector {
Defines whether the width and height (and min/max) of an element should include padding and borders or not. Defines whether the width and height (and min/max) of an element should include padding and borders or not.
```css ```css
selecot { selector {
box-sizinbg: content-box; /* Border and padding are not included */ box-sizing: content-box; /* Border and padding are not included */
box-sizinbg: border-box; /* Include the content, padding and border */ box-sizing: border-box; /* Include the content, padding and border */
} }
``` ```
@ -968,7 +942,7 @@ When elements overlap, the order of overlapping can be changed with z-index:
- Without z-index, elements stack in the order that they appear in the DOM - Without z-index, elements stack in the order that they appear in the DOM
- Elements with non-static positioning will always appear on top of elements with default static positioning - Elements with non-static positioning will always appear on top of elements with default static positioning
**Nesting is importan**t: if element *B* is on top of element *A*, a child of element *A* can never be higher than element *B*. **Nesting is important**: if element *B* is on top of element *A*, a child of element *A* can never be higher than element *B*.
```css ```css
selector { selector {
@ -981,7 +955,7 @@ selector {
```css ```css
selector { selector {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equl columns */ grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-rows: 1fr 1fr 1fr; /* 3 equal rows */ grid-template-rows: 1fr 1fr 1fr; /* 3 equal rows */
} }
``` ```
@ -1043,7 +1017,7 @@ Risks miscommunications with clients and impacts the User Experience (UX).
3. **Use content to define the layout and design**: 3. **Use content to define the layout and design**:
Understand how content can inform design Understand how content can inform design
Don't spend time creating templates you won’t use Don't spend time creating templates you won't use
Focus on problem-solving for your users Focus on problem-solving for your users
4. **Use proto-content**: 4. **Use proto-content**:
@ -1156,7 +1130,7 @@ A media query is a logical expression: true or false; if a media query is true,
| `all` | all media type devices | | `all` | all media type devices |
| `print` | printers | | `print` | printers |
| `screen` | computer screens, tablets, smart-phones, etc | | `screen` | computer screens, tablets, smart-phones, etc |
| `speech` | screenreaders that "reads" the page out loud | | `speech` | screen readers that "reads" the page out loud |
```css ```css
@media type operator (feature) { @media type operator (feature) {