ПредишенСледващото

HTML в чист вид не дава много богата регистрация възможност страница. За да се реши този проблем, се наричат ​​CSS стилове. Почти всеки елемент (HTML тагове), има атрибут стил. стойност е описание на маркер CSS стил. елемент стилове са определени съгласно следния модел:

CSS стилове са изброени, разделени с точка и запетая, като всеки има по една двойка "име на стила: стойност стил", разделени с двоеточие. Стил обикновено описва параметрите на външния вид на стоката като цяло, или неговия всеки под-елемент. Разгледаме следния пример:

Продължителността на контейнер, сключен текста "Hello, свят.". педя - този етикет двойка, която сама по себе си е без видими промени в съдържанието им не произвежда, обаче, ви позволява да прилагате специални CSS стилове, посочени в него. Най-често тя се използва за тези цели. В този таг определя две CSS стил: стил на шрифт семейство с стойност и стил Verdana шрифта със стойност 10px. Стил шрифт семейство определя шрифта на текста и стила на шрифта - неговия размер. По този начин, в текста "Hello, свят." Ще бъдат изготвени размер на шрифта Verdana от 10 пиксела.

Както е случаят с HTML от ключово значение за успеха е познаването на най-полезните и общи CSS стилове. И в идеалния случай - всички. Много от тях, някои от тях са общи за всички видове елементи, някои от тях са специфични за определен тип. Ето някои често срещани стилове, освен на шрифт семейство, както и размер на шрифта: фон-цвят - цвета на фона на елемента, например, стойността на червени или # ff0000 съответства на червения цвят (втора опция за запис - стойност на цвят шестнадесетичен в HTML, той може да бъде получена от масата за HTML -Цвят или с помощта на специален калкулатор), цвят -. на цвета на текста, текст подравняване - хоризонталното подравняване на текста (от ляво - в левия край, център - в средата, нали - отдясно, оправдават - в ширина). Запознайте се със съществуващата стил ще бъде вашата домашна работа :).

Сега нека да разгледаме един пример: ние сме внедрили меню с помощта на маса, където всеки от своята клетка - меню:

За всяка клетка е посочено CSS стилове, които формират общ изглед на нашето меню:

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

Точка на селектор означава, че този блок на CSS стилове прилага за всички елементи, които имат клас стойност атрибут на името на селектора. В "диез" # да селектора означава, че силата на CSS стилове, прилагани към елемент с номер негова стойност на името на селектора. Това означава, че един блок с лост за .link прилага за всички елементи с еднаква връзка клас, блок със селектор # Текст1 ще прилага по отношение на елемента с идентификационен номер текст1.

С този метод, можете да укажете стилове компактно описват нашето меню:

#menu селектор TD ще бъдат избрани всички клетки вътре в менюто елемент номер. Тя може да се използва вместо идентификатора и клас, но идентификационен подчертава уникалността на нашия елемент (едно меню на страницата).

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

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

който обикновено се намира в устройство. Една страница, можете да зададете няколко файла CSS стилове (вашата връзка маркер за всеки файл).

стилове уроци морско меню в отделен файл:

Всичко в style.css файла:

съдържанието на файла index.html:

Запознайте се със съществуващите стилове тук. Практика)

Свързани статии

Подкрепете проекта - споделете линка, благодаря!