. Въпреки това, ако е възможно, тогава стойността ще бъде "navmenu" и "bigdesctop" ще се интерпретира от браузъра като okremium атрибут.

Как могат да обвиняват трудностите, как се правят правилните неща html оформление, можете да проверите за допълнителен валидатор на https://validator.w3.org :

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

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

Като бахете, разбивайки сепарето вдясно, се появиха цветове, украсиха материалите и аксесоарите. В уеб страната се наблюдават същите неща: с помощта на правилата на CSS се прилагат цветове, стъпки, стилът на шрифтовете и размерът на елементите се променят, създава се tsiliy, стилът завършва.

Прост стилов лист

Нека да разгледаме как изглежда най-простата стилова маса и как е съставена от някои елементи. Tse задник в CSS стил за всички тагове

Яки е от уеб страната:

Як вече се вижда текст

В браузъра и какво означава коженият ред? Всичко е по-просто: шрифтът е със същия размер като удебеленото изображение и цвят #1E824C (шестнадесети цветен код) и може да се показва в разширението 1em (единичното, което съответства на размера на шрифта, което е задачата за заключване на браузъра).

Стилът на описанието по-горе, сякаш е нещо друго, включва набор от елементи, които имат свои собствени имена. Запомнете ги, за часа на четене на предстоящите дивизии сте измислили какво да предприемете.

Инструктирайки yogo, ние казваме на браузъра колко искате да застосувате стил. Нашият vipad има селектор є p. Слепен блок Това е името на цялото място, което може да се намери между къдрави арки () след селектора. Мощност на стила Това е команда, която да ви помогне да посочите различна опция за форматиране (например искате да промените теглото на шрифта на изображението, цвят, разширете размера на шрифта твърде тънко). В името на силата е необходимо да се постави две кутия. Продължете и се запознайте с големия брой CSS правомощия. Значението на силата След двойното е записано като самото значение на властта, както означавате независимо, създавайки такъв ранг на стил на власт. Угар като цена, е необходимо да се покаже необходимостта от това значение.

Например, изображението на шрифта се определя с ключовите думи bold , bolder и т.н., цветът - с 16 стойности, RGB(A), HSL(A) или с ключовите думи red , orange , white и т.н., размер на шрифта - по CSS единици (vіdsotkami % , пиксели px, точки т, curlicue шрифт) или константи малки, средни, големи и т.н.

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

P (font-weight:bold;color:#1E824C;font-size:1em;)

Vіn също работи, но защо е лесно да влезете в новия? Особено ако CSS кодът е дълъг. Zvichayno, няма да навреди да добавите йога, като искате да използвате probіly. Ако използвате правилата за цаца в топъл тон и ако веднага ги спечелите, тогава в бъдеще ще си кажете „тъмен“.

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

P (тегло на шрифта: удебелен; цвят: #1E824C; размер на шрифта: 1em; )

И такава форма на писане вече е тромава, дори и да работи:

P (тегло на шрифта: удебелен;) p (цвят: #1E824C;) p (размер на шрифта: 1em;)

За да улесните навигацията в кода, се препоръчва да запишете пълномощията на кожата на нов ред и да го направите в таблица или да изчистите празнината, когато правомощията е отменено. Някъде между две точки и значенията на властта, поставете probіl, но тук можете да virishuvati, тъй като сте по-добре.

За допълнителна яснота можете да добавяте коментари точно преди CSS. Те могат да пишат обяснения, икони, които ви помагат да се ориентирате в таблици със стилове.

Коментарите в CSS се записват между знаци /* и */. Смърдите не се показват в уеб страницата в браузъра и се показват изключително в кода. Препродавачите също често хакват коментари, за да вземат своевременно необичайно парче CSS код. Вижте коментари като този:

/* Стил за основния текст */ p ( тегло на шрифта: удебелен; цвят: #1E824C; размер на шрифта: 1em; )

Вътрешни и външни стилови маси

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

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

Масите от стария стил са по-разширени. Не е необходимо да свързвате таблицата с всички необходими уеб страници, маркера wink с атрибута rel (показва връзката между страната и файла, който е свързан) и стойностите на стиловата таблица, което означава, че стиловата таблица е поставена във файла. Атрибутът href е пътят (URL) към .css файла:

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

Урок: Създаване на стилова таблица

Oskіlki zvnіshnі stіlії stіlії най-sruchnі и широко vykorovuyutsya razrobtsі дизайн, ние ще научим как да го създадете сами. Можете да изтеглите архивни файлове за този урок от тази страна.

Ще намерите HTML-документ с обикновена страна на това изображение (тестът е наличен в урока). Отворете HTML документа в браузъра. Знаете, че отстрани изглежда напълно нормално. За да й придадем по-привлекателен вид, нека й напишем стил.

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

Свързване на CSS към HTML

За първи път отворете текстов редактор на вашия компютър (т.е. бележник) и създайте празен файл с името на стила, като го запишете с разширението .css (можете да използвате и файла style.css). Запазете файла от Daddy, de znahoditsya zavantageniy HTML документ.

Отворете HTML документа в текстов редактор, както и в браузър (за да можете ръчно да прегледате промените в старомоденстрани). Добавете между таговете идващ код:

Накратко за тези, които ви шойно зроби. След като поставите този код в HTML документ, вие:

• посочи заявка за шрифт под името Roboto Condensed, който ще бъде взет от сървъра на Google (отчет за шрифтовете на Google по-добър начин);
• включите свой собствен стилов лист style.css (все още празен).

Писане на CSS стил

Запазете промените в HTML документи и прехвърлете вашите творения в празен .css файл. Нека стилизираме страничната лента:

Html ( padding-top: 5px; background-image: url(background.jpg); )

Запазете промяната. Vitaёmo, ти написа първото правило - няма нужда от таг . Първата мощност - padding-top - за добавяне на достъп до звяра между прозорците на браузъра и уеб страницата с размер 5 пиксела. В допълнение към друго мощно, фоново изображение, включихме изображение за фона на цялата страна, указващо пътя към графичния файл (рестартиране в същата папка като HTML документа).

Обновете уеб страницата в браузъра. Ако всичко е настроено правилно, можете да разберете, че фонът се е появил отстрани и Горна част vykna i text trohi zbіlshivsya vіdstup.

Тяло (ширина: 75%; подложка: 40px; поле: 15px автоматично; цвят на фона: #EBEBEB; радиус на границата: 30px; )

Запазете промените във файловете. Инфекция:

• вместо това задайте обхвата на маркера , което е 75% от ширината на прозореца на браузъра;
• осигурени 40 пиксела достъп от всички страни на региона заедно;
• те разкъсаха областта в центъра на страната и също така направиха входа на звяра и отдолу 15 пиксела;
• задайте цвета за #EBEBEB фона за региона на място;
• закръгли ъглите на правоъгълна област, като посочи радиус на закръгляне от 30 пиксела.

Актуализирам HTML документа. Ако е така, променете кеша или нулирайте страната, за да актуализирате всички файлове, свързани с нея, като използвате специална комбинация от клавиши (например за Chrome Ctrl+F5).

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

Промяна на шрифта с допълнителен CSS

Дойде часът да разкрасим нашия текст. Добавете този код към таблицата със стилове и запазете промените:

h1 ( цвят: #E87E04; размер на шрифта: 2em; margin-left: 20px; семейство шрифтове: "Roboto Condensed", sans-serif; ) h2 ( цвят: #E87E04; размер на шрифта: 1,7em; margin-left : 20px; семейство шрифтове: "Roboto Condensed", sans-serif; ) p ( цвят: #22313F; ", sans-serif; )

След като го написате, задавате цветовете на шрифта за таговете h1, h2, p, задавате техните размери, добавяте поле от 20 пиксела към лявото поле и добавяте за

Увеличихме пространството на звяра до 20 пиксела и зададохме междинната линия по височина (текстово разстояние) с 50% по-голяма от стандартната. Преди това сте включили до трите маркера в шрифта Roboto Condensed (оста, за която е необходимо да посочите заявката за нов в HTML файла).

Обновете страната в браузъра и се смили за резултата от работата. Ще опитаме още една река в това училище. Добавете този код към CSS:

Акцент (тегло на шрифта: удебелен;)

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

За вас е безопасно да имате ос като тази:

Като обучение опитайте да промените размера на текста за

(допустимо, 1.1em), както и увеличаване на достъпа между

Ляв ръб на областта вместо 10 пиксела.

Висновки

В този раздел беше разгледан синтаксисът на CSS и как да се създаде елементарен стилов лист. Разбрахте как да включите CSS преди HTML страна, а също така се научи как да създава прости стилове. Виждаме главните речи, тъй като е необходимо да запомним това разделение:

Всеки CSS стил се състои от редица елементи: селектори, стилистична сила и стойност на силата.

Силата на мощността и техните стойности се записват в блока от гласове между две къдрави арки () след въвеждане на селектора.

Необходимо е с уважение да се следват знаците: две фигурни арки (които извиват на кочана на блока зашеметяване и затварят кривата). Без тези дъги CSS не е правилен.

Необходимо е да се постави знак с две точки след силата на тази точка, с която е важно.

За яснота и стенография за CSS кода, запишете силата на кожата на новия ред и не прекалявайте с разбиването на този раздел.

Синтаксис на филмов HTML

Ориз. 1.6. Показване на проста HTML страна в уеб браузър

Основни правила на HTML

Извикайте HTML таговете, които не са чувствителни към главни букви и малките и големите букви на XHTML се зачитат по различен начин, а имената на маркери се изписват с малки букви.

Елементите могат да включват текст и поделементи (например html елемент за премахване на поделементите head и body от пример с курсора на мишката). Елементите могат да бъдат правилно инвестирани един в един.

Поделементите, включени в елемента, трябва да завършат до края на елемента. Например обидно вписване е извинение: <а>

Точно така, целият фрагмент е виновен, че майката изглежда така:

Tse napіvzhirny и крехък текст

В XHTML, въпреки че елементът не включва текст и поделементи (празен елемент), за всичко е виновен тага майка, който се обвива и затваря. Например, елементът br не се променя и повтаря реда (продължението на текста започва от нов ред). Въпреки това, според правилата на виното, виновен е да бъдете записан с офанзивен ранг:

иначе е твърде кратък
. Така че самият елемент е виновен

---

- Визия на хоризонтални линии.

Могат да се използват етикети за показване на елементи атрибути,как да зададете поведението на елемента и да зададете допълнителни стойности. Mayzhe при етикета на кожата є страхотно число neobov'yazkovyh параметри. Нека да разгледаме основните атрибути на етикетите.

Много HTML атрибути са общи за всички елементи, а някои са специфични за даден елемент или елементи. Usi смърди, за да направи форма:

атрибут_name="стойност"

Например: