Основни положения на CSS: Разположение на страниците

Създаването на уебсайтове не е работа за хора със слаби нерви. В допълнение към знанието, човек трябва да притежава творческо мислене, перфекционистки предпочитания и филигранна точност при маркиране на страница. CSS по този въпрос е просто незаменим. И всеки уеб администратор трябва да знае своите основи.

Какво представлява CSS?

Тези, които са запознати с HTML, не трябва да казват, че това е език за маркиране на страници. Но творците му решиха да добавят тагове към него, които отговарят за външния вид и дизайна. Това е само с този подход, кода на страницата става твърде обемист и почти нечетлив. Естествено, този начин доведе до никъде, така че е прието цялостно решение: HTML е отговорен за оформлението на страницата, CSS за визуален дизайн.

Съкращението CSS означава Каскадни стилови листове (каскаден стилов лист). Състои се от параметри, които са отговорни за визуализирането на обектите на страницата.

Предимства на CSS

Каскадният лист за стилове позволява на уеб администратора не само да създаде красив ресурс, но и да направи кода четлив, което значително намалява размера му. С помощта на CSS можете да посочите такива параметри, които не са възможни в HTML маркировката на страницата.

С CSS можете буквално да промените външния вид на страниците с ресурси само с няколко кликвания. Това е много удобно, особено ако сайтът е многостраничен. Всички промени в дизайна се правят в каскаден лист стил, а не чрез промяна на параметрите на всяка страница на ресурса. И само благодарение на CSS можете да реализирате блокиране.

Свързване на CSS

Говорейки за основните принципи на CSS, първата стъпка е да научите как да свържете каскаден лист с стилове към HTML файл. Този процес е съвсем прост. Първата стъпка е да създадете HTML документ. За тези, които все още не знаят, те го създават в програмата на Notepad. След това, като използвате функцията "Запазване като", трябва да посочите разширение на HTML.

Каскадният лист за стилове се създава по същия начин, като само файлът трябва да се указва с разширение css. Полученият документ трябва да бъде запазен в същата папка като HTML файловете. Например, документът със стилови листове се нарича style.css. За да го свържете с HTML документ, трябва да използвате маркера , който отговаря за свързването на външни файлове. Между етикетите , е необходимо да въведете следното:

Може би това е един от най-удобните начини за свързване на външни файлове.

Правило за CSS

Изследването на CSS маркирането трябва да започне с изследване на синтаксиса. Няма тагове, скриптове или параметри в каскадния стилов лист. Има само правило, което да следваме. Състои се от селектор и блок стилове. Например, в каскадния стилов лист, позицията е дадена: body {background: black-color: white}.

Тук тялото е селектор, който отговаря за стиловото форматиране на тялото - фон: черно и цвят: бели са свойствата и техните значения. Те са написани чрез точка и запетая. Тази позиция прави фоновете на сайта черни, а текстът е бял.

селектори

Е, продължаваме интензивното запознаване с CSS. Оформлението на страниците ще бъде доста трудно, без да са известни селекторите. Ако всичко е ясно със свойствата и техните стойности, допълнителните знания за селекторите ще ви помогнат да направите желаното оформление на страницата.

Какво трябва да знаете за селекторите? Първо, техните сортове:

• Идентификаторът. Името на елементите на страницата може да се използва като селектори. В случай, когато например трябва да изберете параграф от текст с друг цвят, добавете идентификатор. Тя се определя от id параметъра.

Струва си да се помни, че един идентификатор може да бъде използван само веднъж. В този пример селекторът се нарича розово, ако имате нужда от друг идентификатор, просто трябва да зададете друго име (розово, зелено и т.н.).

класове. Селекторът на класа се използва, ако искате да зададете същите параметри за няколко обекта. Например за два параграфа от текста трябва да посочите червен цвят.

Обекти с класове могат да бъдат числа.

За същия обект можете да посочите както класа, така и идентификатора - това не противоречи на маркирането на CSS. Но тъй като идентификаторът има по-висок приоритет, стилът ще бъде използван за обекта. Когато маркирате страница в CSS, си струва да разгледате.

Идентификаторите и класовете могат да се прилагат към всякакви обекти. И ако трябва да посочите един стил за текст и картини, тогава не можете да зададете името на елемента, както беше в примера (p # pink, p.red). Можете просто да поставите точка или решетка. Също така селекторите могат да бъдат групирани. Например, h1, h2, h3 {цвят: червен-шрифт-шест: 17px}.

Структура на страницата

Изучавайки оформлението на страниците, можете да разберете, че има няколко от нейните разновидности:

• Таблично. Когато нямаше каскаден стил, този маркер беше основният. Тя позволяваше най-точното разположение на ресурсните обекти един от друг. Но кодът се оказва твърде голям и е слабо индексиран от търсачките. Друг недостатък на този метод е скоростта на изтегляне. Докато цялата таблица се зареди, потребителят дори няма да види началото на текста.
• Блок. Сега това е основният начин за оформление на страницата. Използването му стана възможно само благодарение на развитието и подобряването на листа стил.

Предимства на оформлението на блока

Блокирането на оформлението на страницата чрез CSS има няколко неопровержими предимства. Първо, стилът на обектите е отделен от HTML документа, което значително подобрява четивността на кода и ви позволява бързо да правите визуални промени. На второ място, възможно е да се покрие един слой върху друг и това няколко пъти улеснява процеса на позициониране. Разбира се, такива сайтове се зареждат по-бързо и се индексират от търсачките. Оформлението на страницата в CSS улеснява създаването на съвременни визуални ефекти.

Единственият недостатък на този подход е различното "разбиране" на браузърите. Някои хора показват ресурса във формата, в която го вижда уеб администраторът. Но има браузъри, които изкривяват изображението, така че с голям брой класове и селектори трябва да използвате хакове, които ще направят кода да бъде приятелски настроен към браузъра.

Как да направите оформление на сайта?

Първото нещо, с което трябва да започнете, е създаването на оформление. Това трябва да е обикновен образ с разширението psd. След създаването му (покупка или изтегляне) е необходимо изображението да се изреже на блокове и да се постави в една папка (за предпочитане отделна). Тези фрагменти ще бъдат използвани като фон за блоковете.

В HTML документа за оформление на блок използвайте маркера

Първото нещо, което трябва да направите, след като оформлението на обекта е било нарязано на парчета, в HTML, задайте структурата на сайта, като използвате маркера

Задайте параметри

Например можете ясно да видите как са зададени параметрите за CSS блокове. Разположението на оформлението на страницата е посочено в пиксели, въпреки че в повечето случаи е по-добре да се използват проценти. В прозореца на браузъра този сайт ще изглежда като "пригоден от различни части на платното", защото в примера е използван само цветът на блоковата зона. Но ако го замените с фоново изображение, можете да получите не само красив, но и доста функционален продукт.

Между етикетите

Този пример е само малка част от всичко, с което уеб администраторът ще трябва да се справи, докато работи върху качествените характеристики на ресурса. Когато създавате добър уеб ресурс, често можете да използвате хакове, за да придобиете функцията за кръстосан браузър. Редактирането на кодовете на страниците може да бъде в специални редактори, което значително опростява работата, макар че не премахва уеб администратора от необходимостта от ръчна редакция.

Всеки може самостоятелно да създаде уебсайт. Основното е да разберем, че и CSS и HTML са създадени от хора и са предназначени за хора. Основите на оформлението на страницата са достъпни за всички и създаването на уеб ресурси не е само прерогатив на избраните, но може да бъде и обикновена дейност на всеки, който желае.