Къде са блоковете
Първо трябва да се разбере, че не създава CSS блокове - тя ги привлича. Сами по себе си, те се формират в HTML - език за маркиране на хипертекст. По подразбиране височина единица ще заемат място, равно на височината на съдържанието му. По широчина, той ще вземе всички наличното пространство, което е в компанията-майка.
Например, ако ширината на майка контейнер е 300 пиксела и там се създава блок, тя също така ще заема ширина (само ако родителят не е уточнено отстъп). Всички останали елементи, които ще бъдат създадени в съда не могат да стоят на една и съща линия с първия модул и ще бъдат преместени на.
Нормално празен блок елемент е записан с помощта на двойка маркер - Разделение. Сама по себе си тя не прави нищо. Например, нека не забравяме, че много тагове имат специфично значение: параграфа е част от текст, субтитри трябва да се подобри навигацията и възприятие и т.н. Но маркер Разделение стои просто един контейнер.
Познати модел блок
В обичайното му поведение на няколко пресечки създадени ще отиде от горе до долу по един на друг. Тук веднага там е сериозен проблем, нали? И как да се направи лента, като, в крайна сметка, да направите сайтове, които са на една и съща линия 3-5 на новинарски съобщения, а дори и на снимка? Тук стигаме до СГО и помощ, с която да се организира елементи на страницата могат да бъдат абсолютно никакъв начин.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Модулната структура на сайта, като използвате CSS: основни свойства
Както видяхме по-горе, единици по подразбиране са много упорити. Не допуска до себе си, от друга, и дори да заема цялата ширина. Разбира се, понякога е необходимо да се коригира, защото структурата на много места е необходима.
Нека първо се справят с размерите. Размерът на CSS от елементите може да бъде записана с помощта на ширината и височината. Често стойност е определена в пиксели, въпреки че понякога процент или други относителни единици.
Тук нека да си представим, че има голяма майка контейнер и в него има някакъв елемент блоков. За определяне на свойствата за него чрез стилове, трябва някак си да обжалва пред него. Ако напишете това:
Това е абсолютно всички блокове ще има такава ширина, че ние очевидно не е нужно да. Така че, ние трябва да добавите към класа на блок стил или ID. Те се добавят с помощта на клас атрибут и идентификационния номер, а стойността стои всяко име, но то трябва да се започне с един английски писмо. Предоставя се разрешение за ползване на номера, тирета и долни черти. Обикновено най-важните елементи на страницата, са идентификатора (хедър, съдържание, мазе), а по-малко важни (менюта, заглавията и т.н.) класовете стил.
Дори бих казал, че това не е важно, но дали това е уникален елемент. Ясно е, че двете капачки на сайта не могат да бъдат по принцип (имам предвид основната капачка в горната част на сайта), но елементите на менюто могат да бъдат неограничен брой.
Най-важното нещо, за да си спомня - идентификаторът се дава един елемент веднъж и не може да се запише за всеки друг елемент. Този уникален етикет. Стил клас може да се запише най-малко сто елементи, както и един блок могат да бъдат разделени с интервал, за да зададете произволен брой класове. Ето как:
И си мислиш, че сега се случи с него, когато пишем тези имоти?
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
За да блокирате ще се прилага на всички тези правила, а сега някои са елемент не укажете, например, граничен клас, той получава плътна зелена граница от 10 пиксела.
На няколко пресечки от една и съща линия
На следващо място, ще разгледам накратко две важни свойства, които позволяват на блоковете, подредени в една линия. Веднага например контейнер е 1000 пиксела. Вашата задача - да го бутам по ширината на 3 блок от пиксели 300 трябва да се намира на същия хоризонтална линия. Как да го направя? Има два начина.
Първо, всяка единица трябва да се настрои клас. Като цяло, някои разработчици са добавени към блокови елементи на общите класове:
По този начин, всеки елемент може да бъде украсена по свой собствен начин, но те могат да получат същите инструкции, тъй като всички съдържат вградени клас. И това може да се запише по следния начин:
Първото свойство превръща елементите в ред-блок. Те не губят свойствата си, но могат да бъдат подредени в една линия, ако те имат достатъчно широчина в майка.
Вторият собственост на всеки елемент притиска левия ръб на контейнера майка. Но тъй като на втория и третия елементи не могат да се придържат към ръба, те стоят на първия и също образуват линия.
Относителните размери
Както това е направено в CSS оформление блок гума сайт? Този шаблон има голямо предимство пред фиксирани, защото тя може да варира в зависимост от ширината на прозореца. Той е най-вече на следния принцип: общ елемент контейнер получава фиксирана ширина, и да го пуснат структурни части, кой размер е написана като процент.
Ето как всичко е на път да бъде реализирана. Останалите 8% от ширината на уплътнението в отпуск, например. Нашата шаблон вече е получил определена адаптивност - тя ще се свие с намаляване на ширината на прозореца в браузъра.
Разбира се, преди адаптивно оформление е далече, но тези правила се поставят основите за него. На следващо място, с помощта на медийни заявки можете да контролирате това, което ширина за трансформиране на модела в една колона, къде и кога да се намали ширината и т.н. и т.н.
На тази днес, бих искал да завърша. Повече информация за оформлението на блок можете да получите от нашите класове премия, по-специално от учебника на CSS за начинаещи. който описва основните характеристики, които трябва да знаете, когато се работи с блокови елементи.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Най-IT новини и уеб разработки на нашия канал Телеграма
HTML5 и CSS3 практика от нула до резултата!
Свързани статии