Каква е ролята на този код, който е в началото на .css файла? * { padding: 0; margin: 0; outline: 0; }
По подразбиране голяма част от елементите в HTML имат предварително зададен padding, margin или outline. Селекторът * избира всички елементи, а стиловете в къдравите скоби променят стойностите по подразбиране на съответните пропъртите на 0. Така, когато подреждате елементи, се подсигурявате, че няма да се чудите, защо даден елемент е с 5px отстояние, а вие никъде не сте задали такова във вашия CSS.
Пример за такова отстояние е p-тагът, който има margin-bottom зададен по подразбиране.
Това, разбира се, не е задължително, но е една добра практика вашият CSS да започва с този глобален селектор.
Здравей, Изображението ти не става кръгло, защото пропорциите му са по-различни. Преди да му сложиш border-radius, то е било правоъгълно и вертикално. Ако беше квадратно преди това, то с border-radius щеше да придобие кръгла форма. Вариантът е да го направиш с квадратна форма, като го изрежеш.
Добре, благодаря.
Мисля си - какво би станало, ако наместо да изрязваме и обработваме всяко изображение (в случая до квадрат), дефинираме квадратен блок, радиуси и в него да дефинираме изображението като елемент, но така, че с отмествания да може да го позиционираме за да се вижда желаната част от него? (Обаче остатъка от изображението трябва да не се вижда извън рамката.)
Предимствата биха били, че сменяйки стила (дебелина, цвят) на кръглата рамка и мащаба през ширината да можем с лекота да поместваме изображения в рамка ( примерно елипса като на възрожденските портрети) и така правейки страница с множество повторяеми закръглени елементи да зададем рамката в стила, а на всеки портрет на място да задаваме само мащаба и отместването в един ред, така, че да се вижда само желаната част от изображението.
И всъщност по- нататък от видеоурока за спрайтове научаваме, че това се прави по същата идея.
Здравейте, Може ли да ми разясните за какво се използва "position: relative;" защото и с него и без него ефекта си остава същия ?
Елементите с такъв стил стават отправна точка на координатната система при абсолютно позициониране на дъщерните елементи. Това означава, че ако има дъщерен елемент с position:absolute; top: 0; left: 0, to то той ще се позиционира в горния ляв ъгъл на родителя, за който е зададен position: relative. Ако няма такъв родител, ще се използва горния ляв ъгъл на страницата.
Освен гореописаното - position: relative не прави нищо друго, ако не е зададен top, bottom, left или right на същия елемент. Тогава елементът се премества със съответният offset, но мястото му се запазва в потока от данните в DOM-а (останалите елементи не се разместват).
пробвай тук: http://sec.aula.bg:3000/get/21/edit
за съжаление, подадената връзка не работи. аз вече опитах...
Името му е с таг< h1> и се залепва горе на страницата, което не е добре. Също така забележи margin-a на img-a и на aside-a.
Според мен трябва да си пресметне човек как да напасне елементите, което като начинаещ ме затруднява..
В css файла, как разбираме, кое да сложим на по-горен ред: display margin color font-size width и т.н. Какъв е принципът, по който се определя, кое след кое се подрежда? Има ли изобщо значение, защото ми направи впечатление в уроците, че когато се вмъква нова настройка, тя не се слага накрая, а се вмъква на определено място? Ако това не е случайно и наистина има значение подредбата, как да разберем, какъв е правилният ред?
За мен принципно няма значение кое след кое се подрежда, но слагам на първо място display, след това width, height, и т.н. което е въпрос на личен избор. Правя го с цел по-лесно да се ориентирам в кода когато след това трябва нещо да променям.
Аз предполагам, че е това причината (за наше улеснение), но просто исках да съм сигурен, че за самия код няма никакво значение и е въпрос на личен избор.
Да, наистина няма някаква конкретна причина - просто лична преференция, както казва Кремена.
Много благодаря!
Принципно няма значение, но за да се ориентирам по- лесно за себе си къде коя настройка да търся, аз съм възприел принципа първи да са настройките, които дефинират обекта ( позициониране, външни отстояния, отстъпи, бордер) и след това стилиранията му като подробностите са оставени за по- назад. И освен това подредбата на обектите, описани в CSS-а следва появата им в HTML-a, така, че като работя с Atom-a да не скролвам непрекъснато нагоре-надолу да търся различни неща, особенно с ниските и широки монитори ( 16:9), а HTML-a и CSS-а да са относително еднакво подредени. Опитайте - удобно е. Като стане CSS-a няколко страници - колкото става учебният пример към края на курса - така се работи по- удобно.
В html файл, някои тагове започват с отстояние спрямо горния, но някои не. Как да разберем, за кои тагове се изисква такова отстояние и за кои не и всъщност, какво е значението на това отстояние?
За самият HTML отстоянията нямат никакво значение. С тях или без тях, страницата ще се визуализира абсолютно еднакво.
Ползват се единствено за наше улеснение докато пишем и си четем кода - да е по-подреден и по-разбираем.
Така и предполагах, но исках да съм сигурен. Много благодаря!
Отстоянията подсказват кой елемент на кой е дъщерен. Така без да се проследява логиката на страницата може по-лесно да се ориентираш. Принципно Иван е прав - html-ът може да го подредиш и на един ред ако искаш без никакво форматиране. По-ясно става обаче като видиш html тагът, който е подреден плътно вляво и после head и body, които са с 1 таб навътре (веднага разбираш, че те са деца на html).
Не забелязах нагледно да се променя нещо при положителна и отрицателна стойност.
Определя пространството извън елемента, от дясната страна. По-детайлно - виж https://cssreference.io/property/margin-right/
