Уроци по HTML и CSS, урок 2

В този урок, ние ще издаде нашия уеб-страница, за да го направи по-колоритен (виж фигура 1).

Преди да се пристъпи към проектиране на страници, ще се научите как да зададете цвят в мрежата

1. Разпознаване на цветовете

При определяне на цветовете за документа за HTML, можете да използвате или имена на цветове или шестнадесетични кодове. шестнадесетичен система за кодиране се основава на три компонента - червено (червено), зелени (зелен) и синьо (в синьо), откъдето идва и името му RGB, първите букви на имената на тези цветове. Всеки от компонентите съответства на шестнадесетичен номер от 00 до FF (0 и 255 в десетичен формат). След това тези три ценности са обединени в една стойност, която се предшества от знака #, като например # 800080, което съответства на лилав цвят.

TABLE безопасни цветове, за да проектирате вашия сайт

Сейф цветова палитра дава най-точна дисплея мача на различни монитори.

Сейф палитра се състои от 216 цвята. Безопасни цветове винаги са постоянни при превключване от един браузър в друг или от една платформа на друга, от единия дисплей на друг с техните различни възможности tsvetootobrazheniya и разрешения.

Ако някое от три различни шестнадесетичен стойности 00, 33, 66, 99, SS или FF, цветът не е сигурна.

2. Определяне на CSS

Нашият уеб-страница все още не разполага регистрация, която може да се направи по два начина:

  • първо - означава stileyCSS маси (по-прогресивно и правилно метод)
  • вторият - означава атрибути в tegovHTML.

Нека да започнем веднага с по-прогресивен метод.

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

Цел: ви позволява автоматично да промените стила на HTML елемент на всички страници. Например, ние сме с помощта на десет уеб-страници H1 заглавие, което трябва да е зелен. При използване на стилове ще сме веднъж каза, зелен цвят и се прилага директно върху десет страници.

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

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

А стилове съдържа набор от CSS-елементи, чиято структура е различна от тази на HTML-елемент.

Първоначално написано име селектор, например, h1, което означава, че всички свойства стил се прилагат към маркера

, последван от скоби, който е написан в стил собственост и нейната стойност е показан след дебелото черво. Стил собственост стойности са разделени с запетая в края на този символ може да се пропусне.

Стил имот със стойност може да бъде всеки брой лотове, тяхната цел не е от значение.

CSS не е чувствителна, трансфер линии, интервали или табулации, така че формата на записа зависи от желанието на инвеститора.

или същото може да се изписва така:

  • h1 - селектор, в този случай на HTML елемент,
  • шрифт семейство и размер на шрифта - стил имоти,
  • Arial - стойността на шрифт семейство,
  • 14pt - стойността на шрифта.

Начини за включване на стилове в HTML-документ

  1. Външни стилове (свързани стил).
  2. Изпълнено стилове (глобален стил).
  3. Вътрешните стилове.

3. външен стил лист (свързани стил)

Определя стила на сайта.

Това е текстов файл с разширение CSS.

HTML-документ трябва да има връзка към външни стилове с помощта на елемента , който е разположен в елемента :

В този пример, използването на стилове е писано в текстов файл style.css а.

Казус 1

1. Отворете празен документ в Notepad ++ и го запишете в public_html папка с името на style.css. Моля, имайте предвид, че в полето Запиши като тип е създадена Всички типове (Фигура 2).

2. Тъй като CSS - е друга технология, на HTML тагове в .css файла не са написани на всички. Ние организираме нашата позиция "Каталог на архитектурни проекти" в main.html файла подравнени до центъра, в синьо шрифт Verdana, 200 PT височина на шрифта. За да направите това във файла CSS да направи следващия запис (Фигура 3):

Нека да разгледаме какво е написано в съответствие с синтаксиса на CSS-елемент, който обсъждахме по-рано в този урок.

  • h1 - селектор, т.е. елемент HTML, за които се прилага;
  • текст-приравни: център; - стил имот текст подравняване (подравняване на текст) със стойността на центъра (в центъра);
  • цвят: # 0000FF; - стилистично цвят собственост (цвят на текста) със стойността на син цвят # 0000FF (стойността е взета от цветната таблица);
  • шрифт семейство: Verdana; - стил имот шрифт семейство шрифт със стойност Verdana;
  • ценности стил собственост са разделени с точка и запетая;
  • и така нататък, всичко според синтаксиса.

За нашия уеб-страница "трион" стил лист и се прилагат свойствата на елементите-HTML необходими, за да се установи връзка между main.html файл и style.css. За да направите това, отворете файла и main.html между тагове и поставете дизайн ,както е показано на Фигура 4.

Къде мога да намеря името на свойствата на стил и техните стойности? За да направите това, има и специални ръководства и спецификация (папка CSS Референтен). За да започнете да използвате като отправна точка за употреба малък Sprav_CSS.doc.

4. Определяне на заглавната стил h2 «проект за бъдещ дом" с дясната подравнен, цвят бордо, шрифт Verdana, шрифт 106 PT висока. За да направите това, style.css файла направи следния запис за селектор h2 (Фигура 6).

5. Проверка на резултата в браузър, трябва да съвпадне с цифрата 7.

6. Параграфи уредят с оправдание, тъмно син цвят, шрифт Arial, 1:02 PT висока. За да направите това, style.css файла направи следния запис за селектор P (Фигура 8).

7. Също така правя светлосин фон цялата уеб страница. За тази добавка селектор тяло за запис (виж Фигура 9)

Мисля, че на принципа на използване на външни стилове е ясно. С цел да се лесно и красиво изпълнение svoiweb-страница, че е необходимо да се проучи от свойствата на директория стил и техните стойности, и се опитват да практикуват. Колкото повече се помни тези имоти и ценности, без да отвори директорията, толкова по-висок професионализъм.

  1. Използване позоваване Sprav_CSS.doc, Подреждане стилове заглавки

    в main.html файл. Стил свойства които да избирате.

  2. За списък на "Проекти на къщи" с помощта на стила, промяна арабски цифри в римски. Останалите параметри са задължителни.
  3. За "Квадратни къщи" списък като маркер прилага изображение spisok_1.gif на html_css_2 папка. Останалите параметри са задължителни.
  4. На фона на уеб-страници, да се прилага чрез стила на изображението fon9.jpg папка html_css_2.
  5. Използване на стилове правят смели параграфи шрифта.

Приблизителни резултати на Фигура 11.

4. Класове в спецификациите стил

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

Така например, в нашия текст, има няколко заглавия h1 и ние трябва да ги правят в различни цветове. След това разделете стиловете трябва да бъде, както следва:

След точка е името на класа, което трябва да е уникално и не може да се състои само от цифри.

Сега, когато използването на маркера

в документа, трябва да инсталирате клас атрибут. за да покаже какъв стил искате да приложите:

практика 2

1. Отворете shablon.html файл. Запазете го под ново име ploshady.html в public_html папка.

2. Напишете таговете и ново заглавие "площ от къщи."

3. Съдържанието копие на текст от файл площад domov.txt на html_ccs_2 папка.

4. стилове ще записва в същия файл style.css. което ние създадохме в предишния урок. Ето защо, в ploshady.html файл, създаден един куп с тази стилове, поставяне на тагове и (Фигура 12)

5. Формат етикет позиции

и определя всяка позиция клас си (фигура 13).

Ploshady.html Вашият файл сега трябва да изглежда така (фигура 14).

6. стилове маса style.css създаде следващия запис (фигура 15)

7. Проверка на уеб-страницата в браузър. Резултатите на Фигура 16.

8. Може да сте забелязали, че нашите нови стилове рекорд рубрики имат повтарящи дизайн шрифт семейство: Verdana; текст-приравни: ляво; размер на шрифта: 14pt. Такива конструкти могат да бъдат записани веднъж чрез групиране на селектори, към който те се прилагат. За тази цел е необходимо да се изброят селектори разделени със запетая, и след това да се предпише скоби общи свойства. Тогава нашите трапезни стилове за заглавия ще бъдат, както следва (Фигура 17):

практика 3

Във всяка графа в ploshady.html файл е текст. Формат точки с различни класове. Използвайте различни цветове, подравняване и шрифт. имената на класовете трябва да са уникални. Не е желателно да се използват едно и също име за различни селектори. Един от вариантите на Фигура 18:

5. ID стил за конкретен елемент

Всеки елемент може да бъде определен идентификатор ID. и след това се поставят в съответствие с този елемент на всеки стил, използвайки идентификатор.

Писането във файла със стилове ще бъде, както следва

Сега можете да сложите на стила в съответствие с всеки елемент в HTML кода на документа:

В този пример, думата тест - името стил. Името може да бъде всяка от буквите, но тя трябва да е уникално, т.е. нито един от елементите в стиловете вече не трябва да има име.

Казус 4

Ние правим шаблон за бъдещето на менюто на нашия уебсайт.

1. Отворете shablon.html файл и го запазете под ново име menu.html в public_html папка.

2. Съдържанието на страницата menu.html на файла, да попълнят в текста на даден файл от menu.txt html_css_2 папка.

3. Средства HTML-тагове формат на файловете, както следва:

4. В горната част на уеб-страница поставите лого (файл logo_myhouse.gif). Резултатът трябва да съвпада с модела 19.

5. За това меню, за да се направи отделна стилове на име style_menu.css. Инсталиране на пакет между файл и таблица menu.html style_menu.css стилове. Поставете рекорд между маркерите и в menu.html файл.

6. Създаване на празен документ и да го запишете като style_menu.css в папката.

8. style_menu.css стил файл за тези елементи се направи тъмно син цвят, шрифт Tahoma (фигура 21):

9. За Квадратни къщи на групата ", която включва заглавие и списък с водещи символи, ще използва кафяв или име на стил. Т.е. кода ще бъде както следва (Фигура 22):

10. style_menu.css стила на файла за тези елементи правят кафяво, Times шрифта (фигура 23):

11. И добавите малко цвят на фона menu.html файл (фигура 24)

12. В резултат на това, ние получаваме на следния интернет-страницата (Фигура 25)

В резултат на тази тема, вие трябва да се създадат следните файлове: