Основи на HTML и CSS за начинаещи, е прости и ясни
Свързване на CSS стилове
Сега нека да разгледаме как можете да осъществите връзка с документа за стилове HTML.
Както знаем от предишния урок. за това е специален маркер:
която е поставена в секцията
HTML-файлове и показва местоположението на файла, стил лист.Като има още две начини за свързване на стилове.
- вграден стил лист
- вградени стилове за елементи
Вграден стил лист
Тя може да се включи директно в HTML-документа в секцията
В този случай, стиловете трябва да бъдат опаковани таг
Това е да се гарантира, че браузърът е, че използването на стилове.
например:
Този подход се използва рядко, тъй като това е разумно да се направи стилове в отделен файл, но може също така понякога да е полезно.
Вътрешните стилове за HTML елементи
Тази връзка вече засегна в един от уроците по HTML.
Това е, когато маркерът за определен стил веднага.
например:
Този метод се използва по-често в сравнение с предишния, най-вече, за да маркирате части от текста, и т.н.
Всеки метод на свързване се прилага индивидуално за всеки HTML документ.
По принцип стилове се извършват в отделен файл.
Вграден в таблица може да се използва, ако стила малко и да ги направи в един файл, няма смисъл.
Вградени стилове за елементи, използвани, когато е необходимо да се отпуснат определена част от текста, или да зададете свойства за един елемент. В този случай е по-лесно да определите стила инлайн за един елемент, а не да го посочите в отделен файл.
Тя може да бъде толкова дълго, тъй като не е напълно ясно, но аз съм сигурен, че след известно време ще разберете.
Основното, което прави повече практически примери.
Модулна оформление в CSS DIV
А сега да разгледаме тази важна концепция като модулна оформление DIV, с което са създадени сайтове оформления.
В същото време затвърдят знанията на CSS единици.
Както знаете в документа на HTML, текст и друго съдържание да поставите на страницата си по два различни начина.
2. Използвайте блокове таг
Таблично оформление се използва основно за показване на таблични данни и още по-малко за оформлението на сайта. Тъй като тя има обемисти HTML-код.
Имоти Z-индекс CSS. Триизмерно страница
Ние сме свикнали да се определят координатите на две оси х и у, са само с CSS можете да зададете, и една трета координата по ос Z. Затова призовавам тези триизмерната страницата. Това свойство Z-индекс.
С помощта на този имот и да зададете слоевете (координати) на страницата.
Ето как можете да направите с Z-индекс:
Тук тя ще изглежда като на CSS файл:
.дама позиции: абсолютен;
отгоре: 150px;
лява: 150px;
Z-индекс. 1;>
цар позиция: абсолютна;
отгоре: 200px;
лява: 210px;
Z-индекс. 2;>
позиция: абсолютна;
отгоре: 250px;
лява: 270px;
Z-индекс. 3;>
И добави в HTML:
Нищо сложно. В текста на картини може да се прилага, като се използва Z-индекс, или обратно. Можете да направите текста с ефект на сянка, като цяло, доколкото въображението ще са достатъчни.
достатъчно Вероятно. Влак, правят свои собствени страници, използване на CSS знания.
Полезни съвети за CSS
В нашия живот, почти всички хора, които искам да направя някои неща по-бързо, или най-малко искат да. Вие вероятно ще искате да имате любимите си сайтове натоварване по това време.
Така че аз ви съветвам да се намали влизането в CSS. От това също зависи от скоростта на изтегляне. Разбира се, ако не една или две страници е.
Ето някои съвети:
Цвят в шестнадесетичен стойност може да бъде намалена по този начин:
# 000000 # 000
#FFFFFF #fff
# 333333 # 333
Координати в нули:
Ако клас или две по-малки имоти:
В този урок ние считаме, друг важен момент свързаното
с блокове. "Плувки".
Използва се за пускане на блоковете в един ред. Той често се използва в развитието на съвременната дизайн на сайта. Съветвам ви да прочетете тази важна собственост.
материята:
лявата - блок се натисне от лявата страна, а текстът и всичко останало ще тече около него в дясно.
Точно така - блокът да бъде натиснат в дясно, тя ще тече около лявата страна.
няма - отнесена в океана на имота.
Първо, нека да си представим един прост местоположение по подразбиране, където блоковете са поставени под един от друг.
Вземете четири блока и да направи всеки стил може да бъде един и същ.
.височина box1: 100px;
ширина: 100px;
граница: 2px твърд син;>
И така нататък за .box2. box3 и .box4
НАЛЯВО
НАЛЯВО
ПРАВО
ПРАВО
В блокове, които пишат стойности поплавък попитам по-късно.
За по-голяма яснота, пишем само за първите два отляво и отдясно за последните две.
Стрелките показват мястото, където се премества на блоковете, когато е настроен да плува.
В крайна сметка се оказва, като този:
Ако HTML-документа след блоковете, за да добавите точка към текста, то ще заеме позиция между блоковете. например:
Какво можем да направим, ако искаме повече и сложи блоковете на дъното?
За да направите това, има още един имот.
Това е трудна функция позволява да се сложи блокове под блоковете.
материята:
лявата - Отменя увийте от левия ръб на елемента
полето - отменя поток около десния край на елемента
и двете - поставяне на блок-долу всички плаващи блокове и напълно отменя обвивка даден поплавък имота.
Повече Davyte създаде две пресечки от 200x200 пиксела. В CSS стилове, за да добавите:
.височина bigbox1: 200px;
ширина: 200px;
граница: 2px твърд син;
плаваш: право;
ясен. десен;>
.височина bigbox2: 200px;
ширина: 200px;
граница: 2px твърд син;
плаваш: ляв;
ясен. ляво;>
Ние се получи това:
Структурата вече се превърна в нещо подобно, нали?
Блоковете може да бъде всичко: текст, списъци, снимки, връзки и т.н.
Влак, опитайте и всичко, което получаваш.