HTML трябва да е максимално концентриран върху семантиката на една страница – самата информация и смисъл.
За това как изглежда страницата имаме CSS.
Представяйте си, че гледате на информацията през някой data-reader, или някой стар DOS браузър като Lynx, и ви интересува самата суха информация, без да ви интересува как изглежда страницата.
Toва трябва да е добрия HTML код.
Затова не се препоръчва в HTML-а да няма нищо, свързано с външният изглед, дори и атрибути като width, height и т.н…
Често се случва да имаме две или повече CSS правила за един HTML обект. Как тогава браузърът решава кое да приложи?
The cascade
Според това правило, всяко CSS правило върху даден HTML обект, презаписва предишното. Тоест тук обектът H1 ще е със син текст.
h1 {
color: red;
}
h1 {
color: blue;
}
Аt a very simple level this means that the order of CSS rules matter, when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.
Specificity
В случай, че за даден HTML обект имаме повече от едно свойство но зададено с различен селектор.
В този случай ако имаме селектор по клас, той ще презапише селекторът по елемент. Aко имаме селектор по ID, той пък ще презапише този по клас. Тоест, тук цветът на H1 ще е зелен. Явно редът на презаписване е: ID презаписва клас, който презаписва елемент.
#h1_title {
color: green;
}
.h1_title {
color: red;
}
h1 {
color: blue;
}
Inheritance
Всички зададени за родителя свойства се наследяват автоматично от децата. Може да бъдат и презапсани. Например тук ще имаме всички тесктове в синьо, но само P обектите – в черно.
body {
color: blue;
}
p {
color: black;
}
Some properties do not inherit — for example if you set a width of 50% on an element, all of its descendants do not get a width of 50% of their parent’s width. If this was the case, CSS would be very frustrating to use!
display: none; ще скрие елементът така, че все едно изобщо го няма. Без да запазва мястото му в лейаута. Тоест, при използване на display: none; лейаутът ще се промени съобразно с освободеното място.
visibility: hidden; пак ще скрие елемента, но ще запази мястото му в лейаута без да го размества (лейаута).
Добра аналогия би била: с display: none; вземаме нещо от някъде и го махаме, пренареждайки останалите неща (ако е необходимо).
С visibility: hidden; само го правим невидимо, но то си е пак там, подобно на Невидимият, дето може да го пипнеш и без да го виждаш.
С display: none; човекът не става невидим, а по-скоро излиза от стаята.
Но и в двата случая, елементите остават в DOM-a и са достъпни с JavaSctipt.
Kaто зададеш width на body таг да е например 100%, добре, ама 100% от колко?
От т.н. viewport size, а колко да е този viewport size вече се задава с meta тага, демек, задаваш широчината на viewport size да е колкото е широчината на екранът на устройството.
Ако не зададеш широчината на viewport-a, брауза ще използва някаква дефолтна, която е например 980px
Браузърите блокират рендването на страницата докато не получат целият CSS.
Защо каскадни?
Защото стиловете на родителя биват автоматично наследявани от децата.
Children of a node inherit its parent style rules. This is what we mean by cascading rules.
Демек, образно казано, от горе надолу се получава един вид натрупване и оверрайдване на стилове (CSS пропъртита)
Правила, на които дадена уебстраница трябва да се подчинява при зареждането си, за да става това (зареждането и) максимално оптимално.
PRPL is an acronym that describes a pattern used to make web pages load and become interactive, faster:
The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.
Или още, АПИ с което може да се достъпват различни части от CSS дървото, през JavaScript, например така: document.body.style.background = ‘lightblue’;
Ако искаме да достъпим CSS пропърти, което е с тире, например background-color , го обръщаме в camelCase – демек става
document.body.style.backgroundColor = ‘lightblue’;
Ако искаме да достъпим например пропъртито „float“, при условие, че има такава запазена дума в JS, пишем „cssFloat“