Основи на CSS: оформление на страницата

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

Какво е CSS?

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


CSS абревиатурата означава Cascading Style Sheets (Cascading Style Sheets). Той се състои от параметрите, които отговарят за визуализирането на обектите на страницата.

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

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

CSS връзка

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


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

Правилото за CSS

Проучването на маркировката за CSS трябва да започне с изучаване на синтаксиса. Няма никакви маркери, скриптове или опции в каскадния стилов лист. Има само едно правило, което трябва да се следва. Състои се от селектор и блок от стилове. Например, в каскадния стилов лист се дава позиция: body {background: black; цвят: бял}. Тук тялото е селектор, отговорен за стилистично форматиране на тялото на сайта; фон: черен и цвят: бели са свойствата и техните значения. Те са написани чрез точка със запетая. Тази позиция прави фона на сайта черно, а текстът е бял.

Селектори

Е, ние продължаваме интензивното въвеждане в CSS. Страниците на оформлението ще бъдат трудни за изпълнение, без да знаете за селекторите. Ако свойствата и техните значения са ясни, тогава допълнителни познания за селекторитепомогнете да направите желаното оформление на страницата.
Какво трябва да знаете за селекторите? Първо, техните разновидности:
  • Идентификатор. Като селектори могат да се използват имената на елементите на страницата. В случай, когато например е необходимо да се маркира абзац от текст в различен цвят, добавете идентификатор. Той е зададен с параметър id.
  • Струва си да си припомним, че един идентификационен номер може да се използва само веднъж. В този пример селекторът се нарича розов, ако се нуждаете от още един идентификатор, тогава трябва само да дадете различно име (розово2 зелено и т.н.). Клас. Селекторът на класа се използва, ако няколко обекта трябва да бъдат зададени на едни и същи параметри. Например за два параграфа от текста трябва да посочите червен цвят.
    Класовете могат да бъдат произволен брой обекти. За същия обект можете да укажете както клас, така и идентификатор - той не противоречи на маркировката на CSS. Но тъй като ID има по-висок приоритет, обектът ще използва свой собствен стил. При маркиране на страници в CSS това трябва да се вземе под внимание. Идентификатори и класове могат да се използват за всякакви обекти. И ако трябва да сложите един стил на текст и картини, не можете да посочите името на елемента, както в примера (p # pink, p.red). Можете просто да поставите точка или решетка. Можете също да групирате селектори. Например, h1 h2 h3 {цвят: червен; font-sixe: 17px}.

    Оформление на страницата

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

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

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

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

    Първото нещо, с което да започнете, е да създадете оформление. Това трябва да бъде обикновен образ с разширението psd. След създаването му (закупуване или изтегляне) е необходимо да се отреже изображениетоблокове и поставени в една папка (за предпочитане отделно). Тези фрагменти ще се използват като фон за блоковете. В HTML документа за оформление на блок се използва маркер. Всичко в него се нарича слой, а форматът на този слой се задава в каскаден стилов лист, като се използват класове или идентификатори. Първото нещо, което трябва да направите, след като оформлението на сайта ще бъде нарязано на парчета, в HTML задайте структурата на сайта, като използвате етикета и назначите селектор за всеки слой. Например, ако това е менюто, напишете: id = menu. След това трябва да свържете каскаден стилов лист и да зададете собствени параметри за всеки слой. Най-простият код има следната форма.

    Задаване на параметри

    Примерът показва как са зададени параметри за CSS блокове. Оформлението на оформлението на страницата е дадено в пиксели, въпреки че в повечето случаи е по-добре да се използва интерес. В прозореца на браузъра този сайт ще има формата "изрязана от различни части на платното", като в примера е използван само цветът на блоковата област. Но ако го замените с фоново изображение, тогава можете да получите не само красив, но и функционален продукт.
    Между етикетите можете да напишете всяка необходима информация с необходимото форматиране. Всеки текст, написан в този маркер, се поставя непосредствено върху слой върху форматиран блок. Обектите между тях автоматично намаляват, за да не надвишават размера на блока. Този пример е само малка част от всичко, което уебмастъра трябва да се справи с работата по качеството.характеристики на ресурса. Когато създавате добър уеб ресурс, хакове често могат да се използват за закупуване на кръстоски. Можете да редактирате кодове на страници в специални редактори, което значително опростява работата, въпреки че не лишава уебмастъра от необходимостта от ръчно редактиране.
    Всеки може да създаде сайт самостоятелно. Основното нещо - да се разбере, че и CSS, HTML са създадени от хора и предназначени за хора. Основите на маркирането на страниците са достъпни за всички, а създаването на уеб ресурси не е само прерогатив на избраните, но може да бъде и ежедневна дейност на всеки, който иска.

    Свързани публикации