HTML5 и CSS3: Решение: Header на профилната страница

Q: Каква е ролята на този код?

По подразбиране голяма част от елементите в HTML имат предварително зададен padding, margin или outline. Селекторът * избира всички елементи, а стиловете в къдравите скоби променят стойностите по подразбиране на съответните пропъртите на 0. Така, когато подреждате елементи, се подсигурявате, че няма да се чудите, защо даден елемент е с 5px отстояние, а вие никъде не сте задали такова във вашия CSS. Пример за такова отстояние е p-тагът, който има margin-bottom зададен по подразбиране. Това, разбира се, не е задължително, но е една добра практика вашият CSS да започва с този глобален селектор.

Q: Защо картинката ми не стана кръгла, а елипсовидна?

Мисля си - какво би станало, ако наместо да изрязваме и обработваме всяко изображение (в случая до квадрат), дефинираме квадратен блок, радиуси и в него да дефинираме изображението като елемент, но така, че с отмествания да може да го позиционираме за да се вижда желаната част от него? (Обаче остатъка от изображението трябва да не се вижда извън рамката.) Предимствата биха били, че сменяйки стила (дебелина, цвят) на кръглата рамка и мащаба през ширината да можем с лекота да поместваме изображения в рамка ( примерно елипса като на възрожденските портрети) и така правейки страница с множество повторяеми закръглени елементи да зададем рамката в стила, а на всеки портрет на място да задаваме само мащаба и отместването в един ред, така, че да се вижда само желаната част от изображението.

Q: За какво е "position: relative" ?

Елементите с такъв стил стават отправна точка на координатната система при абсолютно позициониране на дъщерните елементи. Това означава, че ако има дъщерен елемент с position:absolute; top: 0; left: 0, to то той ще се позиционира в горния ляв ъгъл на родителя, за който е зададен position: relative. Ако няма такъв родител, ще се използва горния ляв ъгъл на страницата. Освен гореописаното - position: relative не прави нищо друго, ако не е зададен top, bottom, left или right на същия елемент. Тогава елементът се премества със съответният offset, но мястото му се запазва в потока от данните в DOM-а (останалите елементи не се разместват).

Q: Защо се слага padding на section?

Името му е с таг и се залепва горе на страницата, което не е добре. Също така забележи margin-a на img-a и на aside-a. Според мен трябва да си пресметне човек как да напасне елементите, което като начинаещ ме затруднява..

Q: Какъв е принципа на подреждане на настройките?

Принципно няма значение, но за да се ориентирам по- лесно за себе си къде коя настройка да търся, аз съм възприел принципа първи да са настройките, които дефинират обекта ( позициониране, външни отстояния, отстъпи, бордер) и след това стилиранията му като подробностите са оставени за по- назад. И освен това подредбата на обектите, описани в CSS-а следва появата им в HTML-a, така, че като работя с Atom-a да не скролвам непрекъснато нагоре-надолу да търся различни неща, особенно с ниските и широки монитори ( 16:9), а HTML-a и CSS-а да са относително еднакво подредени. Опитайте - удобно е. Като стане CSS-a няколко страници - колкото става учебният пример към края на курса - така се работи по- удобно.

Q: Как разбираме кога даден таг трябва да започва с отстояние?

Отстоянията подсказват кой елемент на кой е дъщерен. Така без да се проследява логиката на страницата може по-лесно да се ориентираш. Принципно Иван е прав - html-ът може да го подредиш и на един ред ако искаш без никакво форматиране. По-ясно става обаче като видиш html тагът, който е подреден плътно вляво и после head и body, които са с 1 таб навътре (веднага разбираш, че те са деца на html).