Notes![what is notes.io? What is notes.io?](/theme/images/whatisnotesio.png)
![]() ![]() Notes - notes.io |
If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.
Cascading Order:
1.Inline style (inside an HTML element)
2.Internal stylesheet
3.External stylesheet
4.Browser default
If the internal is defined after the external style sheet(link) the internal will override. If the internal is defined before external(link) the external will override.
1. Id such as #navbar (An ID selector will only take precedence over a Class selector if they are both used in the same element.)
2. Class such as .header
3. Element such as p, h1, div, etc..
!important can be overwritten if the conflict is not in the same element.
#testid {
color: red !important;
font-weight: bold;
}
.testclass {
color: blue;
font-family: arial;
}
Here !important will be overwritten by the color: blue in the .testclass if the element are placed like this:
<div id="testid">
<span class="testclass">
The Bears will go 16-0 this season. <== this will be blue!
</span>
</div>
Box model:
1. Content
2. Padding
3. Border
4. Margin
div p { ceva... } - Selecteaza toate elementele p din div
div > p { ceva... } - Selecteaza toate elementele p care sunt copii lui div ( <div><p asta da></p><section><p asta nu></p> )</section> )
div + p {ceva...} - Selecteaza elementul p care este imediat dupa un div ( <div></div><p asta da></p><p asta nu></p> )
div ~ p {ceva...} - Selectaza toate elementele p care sunt dupa div ( <div></div><p asta da></p><p asta da></p> )
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover ==> a:link, a:visited, a:hover, a:active
a[target] {
background-color: yellow;
} - Face toate elementele a cu target sa fie selectate
a[target="_blank"] {
background-color: yellow;
} - Face toate elementele a cu target _blank sa fie selectate
[title~="flower"] {
border: 5px solid yellow;
} - Face toate elementele care au title="flower" sa fie selectate
[class|="top"] {
background: yellow;
} - Face toate elementele care au la inceputul clasei cuvantul top(ex: class="top-title") sa fie selectate
[class^="top"] {
background: yellow;
} - Face toate elementele care au la inceputul clasei cuvantul top (ex: class="top-title" sau "toptitle" sau "toppulameaceofi") sa fie selectate
[class$="test"] {
background: yellow;
} - Face toate elementele care au la sfarsitul clasei cuvantul test(ex: class="pulatest" sau "pula-test") sa fie selectate
[class*="te"] {
background: yellow;
} - Face toate elementele care au in continutul numelui clasei cuvantul "te"(ex: class="pulatest" sau "pula-test") sa fie selectate
ID selectors have a higher specificity than attribute selectors - div#a { ceva...} este mai specific decat div[id=a] {ceva...}
background-position : pozitia imaginii background
background-repeat : no-repeat, repeat-x, repeat-y
z-index: poate avea valori pozitive sau negative si dicteaza ordinea de afisare a elementelor unul peste celalalt
HTML:
Tags that don't need closing - img, input, br, meta
Formating tags: b, i, sup, sub, strong, em
New form elements in HTML5 - Email, Search, Date, Number, Time
HTML5 new tags - HEader, Footer, Article, Section, Nav
JS:
Is a dynamic language (variables can change their type at runtime).
The typeof a undefined variable is undefined. Ex: let name = undefined => typeof undefined.
The typeof a null variable is object. Ex: let name = null=> typeof object.
== checks value only. === checks value and type;
Primitive types: String, Number, Boolean, Symbol, undefined, null;
Reference types: Object, Array, Function;
NaN - not a number; isNaN() - functie care iti arata daca variabila este numar sau nu. Daca nu este, returneaza NaN.
Variabila e undefined daca e declarata si neinitializata. Null se poate asigna doar.
Events - onclick, onmouseover, onkeydown, onmouseout, onhange, onload, onblur, onsubmit, oncopy, onpaste
String methods:
toUpperCase():
toLowerCase();
concat() joins two or more strings:
var text1 = "Hello";
var text2 = "World";
var text3 = text1.concat(" ", text2);
The txt.length property returns the length of a string:
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length; ==> output: 26
The indexOf() method returns the position of the first occurrence of a specified text in a string:
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate"); ==> output: 7
The lastIndexOf() method returns the index of the last occurrence of a specified text in a string:
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate"); ==> output: 21
.slice(start, end) ==> takes 2 parameters: the start position, and the end position (end not included).
.substring(start, end) ==> substring() cannot accept negative indexes.
.substr(start, length) ==> the difference is that the second parameter specifies the length of the extracted part.
The replace() method replaces a specified value with another value in a string:
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3Schools");
The trim() method removes whitespace from both sides of a string:
var txt = "a,b,c,d,e"; // String
txt.split(","); // Split on commas
txt.split(" "); // Split on spaces
txt.split("|"); // Split on pipe
Number methods:
The toString() method returns a number as a string.
toFixed() returns a string, with the number written with a specified number of decimals:
var x = 9.656;
x.toFixed(0); // returns 10
x.toFixed(2); // returns 9.66
x.toFixed(4); // returns 9.6560
Array methods:
var x = cars.length; cars is an array // The length property returns the number of elements
var y = cars.sort(); // The sort() method sorts arrays
fruits.push("Lemon"); // adds a new element (Lemon) to fruits array
toString()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // Removes the last element ("Mango") from fruits
fruits.shift(); // Removes the first element "Banana" from fruits
fruits.unshift("Lemon"); // Adds a new element "Lemon" to fruits
fruits.sort(); // Sorts the elements of fruits
fruits.reverse(); // Then reverse the order of the elements
function func(x){
console.log(typeof x, arguments.length); ==> arguments se refera la argumentele din functie.
}
func(); //==> "undefined", 0
func(7); //==> "number", 7
func("1", "2", "3"); //==> "string", 3
![]() |
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team