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

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

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

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

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

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

Как мога да вляза повторно в кода на урока?

за съжаление, подадената връзка не работи. аз вече опитах...

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

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

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

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

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

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

Каква е идеята на "margin-right: -100%"?

Определя пространството извън елемента, от дясната страна. По-детайлно - виж cssreference.io/property/margin-right/

Привет, благодаря за обратната връзка. Споделена е с останалата част от екипа ни, за да я имаме предвид занапред. Лек ден!

Как да разбера какви цифри на отстоянията да поставя ?

![](upload.aula.bg/tova-sa-kodovete-rv-css-1ce80eabd.jpg) ![](upload.aula.bg/kodovete-v-html-r-20d6b92d6.jpg) Здравейте, сега прочетох въпроса си, да малко не правилно съм го задала,извинявам се, за което! Прикачих кодовете в HTML и CSS. За първи път работя с HTML&CSS не мога да преценя точно какви цифри да задавам навсякъде и в ширината, заобикалянето, височината, заглавита и т.н , а може би проблема идва, че нямам познания за пикселите.

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

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

Предишен Следващ

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Няколко алтернативни варианта за организация на една страница

В урока <aside> тагът е част от <header>, но това не е задължително. Ето няколко примерни подредби на страници:

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

Пълен достъп до курса: Не

Няколко алтернативни варианта за организация на една страница

Пример 1