Основи на CSS и HTML
Този урок се препоръчва за тези, които тепърва започват да се научат мъдростта на създаване на уеб сайтове. Тя дава основните понятия на HTML и CSS. Стъпка по стъпка, следвайки инструкциите на този урок, вие имате няколко минути, за налагане на шаблон за вашия сайт.
уебсайт шаблон ще правим с помощта на оформление блок. Аз използвам маркер - «DIV».
Стъпка 1 - Маркиране на уеб страница с помощта на HTML тагове
Първо, трябва да се отбележи нашия уеб страница с помощта на HTML тагове. Само тогава може да преминете към дизайна на сайт с помощта на CSS листове със стилове.
HTML - маркиращ език за хипертекст е. С него sozdaetsyastruktura уеб страница. За тази цел на HTML тагове. Те са затворени в скоби "<" и ">".
Tags обикновено са последвани от един чифт - отваряне и затваряне. Последната се различава по това, че има скоби след първата "/" знак. (Например:
). С помощта на маркери, които определят какво ще бъде разположен на вашата уеб страница.Cascading stileyCSS маса се използва по-късно. Те са необходими, за да се побере съдържанието на маркера в определено място, както и да му се даде желаното съдържание поглед.
Най-простият таговете уеб страница е:
Впоследствие, тя е между маркерите
ще постави другите маркери за маркиране на елементи на уеб страници.
Важно маркер за структуриране на страницата е етикет
В рамките на този маркер, който може да постави други HTML тагове, които трябва да се създадат в съдържанието на сайта (линкове, текст, изображения и т.н.). Всички тези елементи по-късно ще открият свой собствен стил с помощта на CSS каскадни стилови листове.
HTML код на страницата ще се появи, както е показано по-долу. Това е един пример за използване на DIV таг:
Както можете да видите, като всеки таг DIV дадохме определен селектор за самоличност. Това означава, че всеки отделен блок на нашите страници, които са дали името му. Това е необходимо, за да се по-късно единици стил обстановка в CSS файла, бихме могли да се разграничат една от друга единица.
Има два вида селектори. ID - използва се за уникални блокове, като тези, намерени никъде другаде в страницата няма да се повтори. Докато селектор КЛАС - прилага за означаване на повтарящи се единици.
Също така, ние имаме сключен всички блокове в рамките на "контейнер" кутията. Това се прави с цел впоследствие да бъде в състояние да постави целия ни страница, както ние искаме.
Стъпка 2 - приложете CSS стилове
Както вече споменахме, CSS стил лист се определят елементите на дизайна на уеб страница. Можете да го поставите във вашия HTML документ и за свързване на външен файл. В този урок ще използваме последната опция.
Ако вече сте се отвори уеб страница в браузъра си, а след това няма нищо бе намерен. Това е така, защото не сте попълнили своите дялове или всяко съдържание, нито да им даде по форма и цвят. Съдържание за блокове, можете да добавите между съответните тагове. Но форма, местоположение, цвят, както и други симптоми, които задаваме чрез CSS файлове блокове.
Но първо, трябва да го създадете. Наречете го style.css и се намира в същата папка като HTML документ. След това, HTML файл, между маркерите, трябва да добавите следния ред:
По този начин ние свързваме двата файла заедно. Сега, когато показва уеб страница на браузъра ще използва подходящия стилове.
Стъпка 3 - Определете стила
CSS синтаксиса се състои от селектор, собственост и стойност. Selector - маркер за който искате да определите външния вид на това дава най-различни свойства. Имотът се определя от различни атрибути, което от своя страна може да има различни стойности.
За да запишете селектори освен тялото на маркер. използвайте "#" или ".". следват, преди името на селектор. Първият се използва за обозначаване на selektorID. втората, съответно selktorCLASS. Превключвателят може да има неограничен брой имоти. Кои са затворени в скоби "<> ".
CSS свойства и възможни стойности:
Фон (фон) може да се настрои или цветно изображение, или и двете от тях едновременно. За да се покаже изображение, трябва да зададете пътя до него. Ако не е посочен цвета на фона, тя използва системата за шестнадесетичен (#FFFFFF за бял цвят и така нататък.).
Цвят на имоти се използва за определяне на цвета на текста.
шрифт семейство
- Този имот се определя семейството шрифтове, в които ще бъдат показани на текст. Обикновено, определена от само три вида шрифтове. Ето защо, ако браузърът не може да покаже на първо място, той има много да избирате (Trebuchet MS, Arial, Times New Roman).
размер на шрифта - размера на текста е даден в други мерки, тук ще използваме пиксела.
марж - посочва местоположението на блока. Като отправна точка в този случай може да действа като един прозорец на браузъра, както и границите на другите елементи на уеб страницата. Тъй като искаме да се постави на страницата в средата на прозореца на браузъра, след това да напишете следните стойности за свойствата: 0px авто 0px автомобил. Записването може да изглежда по-лесно 0px автомобил. Разчитайте на данни при целева стойност е в посока на часовниковата стрелка: отгоре - долната дясна - лява. Тъй като до - надолу, надясно - наляво, ние сме едни и същи, тогава не е необходимо да ги дублира.
ширина - ширината на блока.
плава - недвижим имот, който ни позволява да поставите елементи за избор, най-вече от лявата или от дясната страна.
Сега добавете някакъв код, за да ни style.css файл от стилове (защото вие вече сте задали, нали?):
тяло фон: # f3f2f3;
цвят: # 000000;
шрифт семейство: Trebuchet MS, Arial, Times New Roman;
шрифта: 12px;
>
#container фон: #FFFFFF;
марж: 30px автомобил;
ширина: 900px;
височина: 1000px;
>
#header фон: # 838283;
височина: 200px;
ширина: 900px;
>
#navigation фон: # a2a2a2;
ширина: 900px;
височина: 20px;
>
#menu фон: # 333333;
плаваш: ляв;
ширина: 200px;
височина: 600px;
>
#content фон: # d2d0d2;
плаваш: право;
ширина: 700 пкс;
височина: 600px;
>
#footer фон: # 838283;
Височина: 180 пиксела;
ширина: 900px;
>
По време на това писание, не всички браузъри правилно показване изработен уеб страница. За да се премахне този недостатък може да се използва за допълнителна мощност, която трябва да бъде поставен непосредствено зад блока на съдържанието.