1. Какво представляват CSS Cascading Style Sheets?

Здравейте скъпи читатели. Реших да отворя нова част от сайта, посветена на работата с CSS cascading style sheets.

така че какво представляват каскадните стилови таблици css?

css(английски) Каскадни стилови таблици — каскадни стилови листове) - език за описание външен виддокумент, написан с помощта на език за маркиране.
За да бъде по-лесно за разбиране от начинаещи, каскадните стилови таблици css са предназначени да създават красиви, лесни за редактиране дизайни за html страници на уебсайтове.

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

След известно време, за да се опрости работата на създателите на сайтове, браузърите започнаха да се „адаптират“ към същите стандарти. Днес почти всички програми, използвани за преглед на интернет страници, еднакво възпроизвеждат сайтове, които използват CSS каскадни стилови таблици.

Моите наблюдения!!!По мои лични наблюдения такива най-новите версии браузъри като Opera, Mazilla ForeFox, Maxthon, Google ChromeИ Internet ExplorerСтраниците, които използват каскадни таблици със стилове, се показват почти идентично, но ако браузърите не го правят последните поколения, тогава самите страници на уебсайта ще изглеждат различно. И за да изглежда вашият сайт еднакво в почти всички браузъри, има специални технологии за определяне на каскадни стилови таблици.

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

2. Как да създадете каскаден css стилов лист?

В тази част на статията ще създадем и свържем каскаден стилов лист към най-простата html страница.

И така, нека направим това:

1. Създаваме папка, която ще съдържа нашата html страница и каскаден лист със стилове.
Нека моята папка се нарича "css"

2. Създаваме проста html страница (index.html). Можете да прочетете как става това.

3. Сега нека създадем един прост текстов документ(подобно на създаване на htmlстраници), просто го наречете style.css.

В резултат на това трябва да получите това:

Това е всичко, файлът, който ще съдържа css стиловете е готов.

Сега нека свържем създадения лист със стилове към файла index.html.

3. Как да свържа каскаден стилов лист css?

И така, за да свържете стилов лист към html страница, трябва да във файла index.html в маркера добави етикет:

Тук в атрибута href="style.css"посочен е пътя до файла с css стилове. В този случай css файли index.html са в една и съща папка.

Например, ако нашият файл index.html има следния код:

важно!!! Между другото, не забравяйте да зададете кодирането на 1251 (ANSI-кирилица), когато записвате файла index.html в Notepad. Защото, ако не направите това и запишете файла в различно кодиране, браузърът ще ви покаже „драскулки“ вместо текстове.

Ако всичко е направено и запазено правилно, тогава в браузъра ще видите следното:

Това е всичко, файлът index.html е създаден и css style sheets също са свързани към него.

Сега нека проверим работата на css style sheets.

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

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

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

Прилагане на стилов лист към документ

Вграждане на таблици със стилове в документ
Задаване на стил за отделен фрагмент от документ
Импортиране на лист със стилове

Задаване на няколко свойства наведнъж
Групиращи селектори
Коментиране на стилов лист
Свойства на стила
свойства на фона
Рамкиращи елементи
Списък със свойства
Текстови свойства
Групиране на свойства за по-лесно дефиниране на стил
Наследяване на имоти
Използване на контекстни селектори
Защо стиловите таблици се наричат ​​каскадни

Стиловите таблици са част от насоките на W3C и са стандартен инструмент. Уеб форматиране- страници, използващи подходи, характерни за работния плот издателски системи. Microsoft Internet Explorer 3.0 беше първият браузър, който поддържа стилови таблици. Браузърът Netscape Navigator поддържа таблици със стилове от версия 4.0B2 (Beta 2), достъпна през февруари 1997 г.

Подробна информация относно препоръките на W3C можете да намерите на: h ttp://www.w3.org/pub/WWW/TR/WD-cssl.html . Стандартът W3C използва термина "каскадни стилови таблици ниво 1 (CSSI").

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

М Действам по абсолютно същия начин. По-долу е даден кратък списък на основните характеристики:

Променете разстоянието между редовете, думите и отделните знаци.

Задаване на ляво, дясно, горно и долно поле на елемент (блок от текст на HTML контейнер).

Задаване на отстъп на елемент.

Променете размера, стила и други атрибути на шрифта на елемент.

Задаване на рамка около елемент.

Активиране фоново изображениеи цвят на фона на елемент.

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

Има четири метода за прилагане на лист със стилове към документ:

Свързване - можете да свържете HTML документ със стилов лист, съхранен в отделен файл.

Вграждане - можете да вградите таблица със стилове в HTML документ с помощта на контейнер



Етикет

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

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

,

,

И . Всяка дефиниция се нарича правило (правило д). Правилото съдържа селектор(HTML таг), последван от декларация(дефиниция на стил). Селекторът е връзката между дефиницията и тага. По-долу е даден пример за правило, определящо стила за всеки от етикетите за заглавие

:

H1 (цвят: син)

Декларацията е оградена във фигурни скоби. Всяка декларация има две части: името на свойството и присвоената му стойност, разделени с двоеточие. HTML включва десетки свойства (размер на шрифта, стил на шрифта, цвят, дясно поле и т.н.), които ще бъдат обсъдени по-долу. Всяко свойство може да приема множество стойности, една от които му е присвоена по подразбиране.

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

HI (цвят: син; размер на шрифта: 12pt; текстов ред: център)

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

Ако трябва да дефинирате един и същ стил за няколко етикета, можете да ги изброите в отделен списък:

P (размер на шрифта: 12pt)
UL (размер на шрифта: 12pt)
LI (размер на шрифта: 12pt)

HTML ви позволява да направите същото нещо в по-компактна форма - в един ред:

P, UL, LI (размер на шрифта: 12pt)

Запетаята е задължителен елемент тук. Ако е пропуснато, значението на правилото се променя (вижте раздела " " по-нататък в тази глава).

Тъй като вашата таблица със стилове става по-сложна, вероятно ще трябва да включите повече информация за целта на дадено правило. Коментарите се появяват между знаците /* и */ и се игнорират от браузърите, например:

BODY (поле-ляво: lin) /* Отстъп 1 инч */
H1 (маржин-ляво: -lin) /* Преместване наляво 1 инч */
H2 (маржин-ляво: -lin) /* Преместване наляво 1 инч */

HTML ви позволява да дефинирате широк набор от свойства на стиловия лист. Имената на имотите се състоят от една или по-често две или три думи, разделени с тире. В сложните имена първата дума обикновено представлява категорията и също така е съкращение за името на свойството (вижте раздел " ").

Таблицата предоставя общ преглед на свойствата на HTML таблиците със стилове, показва дали дадено свойство може да бъде групирано с други свойства. Третата колона предоставя информация за това дали свойството е наследено или не от подчинени тагове (за наследяване на свойства вижте раздела „ “).

		Наследство
		HTML стиловите таблици ви позволяват да украсите фона на елемент на страница с цвят или изображение. Трябва да се отбележи, че тук и по-нататък ще говорим за използването на свойства не за цялата страница, а за отделен елемент. Например, ако дефинирате фон за етикет , тогава само етикетите ще имат този фон цяла страница: U L (фоново изображение: URL(http://www.myserver.com/images/watermark.gif)) Препоръките на W3C предоставят възможност за дефиниране на граници, полета и бяло пространство за елементите на страницата. Можете например да оградите заглавие в рамка или да промените полетата в таг на абзац<Р>така че да организирате отстъп за всички параграфи от текста. За тези цели можете да използвате следните групи свойства: граница - използва се за определяне на граница, разположена отляво, отдясно, отгоре и отдолу на елемент. Можете да зададете ширината, цвета и стила на рамката. margin - използва се за определяне на полета, разположени отляво, отдясно, отгоре и отдолу на елемент. Можете също да зададете ширината на полетата. padding - използва се за указване на свободното пространство между рамката и съдържанието на елемента. Тези свойства се използват за определяне на начина на показване на списъците. С тяхна помощ можете да промените позицията на маркера (свойство list-style-position), стила или изображението на маркера (свойства list-style-type и list-style-image). Свойствата на списъка се наследяват, т.е. ако свойството е дефинирано в тага , то ще е валидно за всички тагове UL контейнер. Свойствата ви дават пълен контрол върху начина, по който визуализаторът показва текст. С тяхна помощ можете да контролирате цвят, размер, шрифт, разстояние между редовете и т.н. Всички свойства на текста ще бъдат описани подробно по-долу. Много от свойствата, описани по-горе, могат да бъдат групирани помежду си. И така, вместо правилото H1 (тегло на шрифта: удебелен; стил на шрифта: нормален; размер на шрифта: 12pt; семейство шрифтове: сериф) Можете да напишете по-кратка формулировка: H1 (шрифт: удебелен нормален 12pt сериф) HTML таблиците със стилове ви позволяват да групирате свойствата на рамката, фона, шрифта, списъка, полето и подложката. Нека разгледаме всяка от групите поотделно. гранична имотна група Можете да групирате свойства на граници по пет различни начина. Можете да дефинирате свойства за отделна страна на рамката, като използвате b order-top, border-right, border-bottom И border-left, или дефинирайте цялата рамка наведнъж с помощта на border. С всяко от тези свойства можете да укажете ширината, стила и цвета на рамката, например: b поръчка-отгоре: тънко пунктирано черно група свойства на фона В групата свойства на фона можете да посочите стойности за цвят, изображение, повторение, прикачен файл и позиция, например: фон: бял URL(http://www.myserver.com/image/bg.gif) repeat-x фиксиран горе вляво група свойства на шрифта Групата шрифтове може да получи тегло, стил, размер и фамилни стойности, например: шрифт: удебелен нормален 12pt пъти, сериф списък свойства група Свойствата се групират с помощта на свойството стил на списък. Възможно е да се посочи изображението за маркера, вида и позицията на маркера, например: list-style: квадратен URL(http://www.myserver.com/images/marker.gif) вътре маржин група свойства Групата полета може да се използва за определяне на ширина за всяко от горното, дясното, долното и лявото поле, например: поле: .5in 1in .5in 1in Ако е посочена само една стойност, визуализаторът ще направи останалите полета с еднаква ширина. Ако не посочите една или две стойности, полетата с неуточнена стойност ще бъдат със същата ширина като противоположните полета. Например, ако пропуснете последната стойност (ляво), ширината на левите полета ще бъде равна на ширината на десните полета, т.е. 1 инч. Група свойства за подложка В групата за подложки можете да зададете стойности за горната, дясната, долната и лявата, например: подложка: .25in .25in .25in .25in Ако е посочена само една стойност, програмата за преглед ще присвои същата стойност на липсващите стойности. Ако не посочите една или две стойности, празните пространства с неуточнени стойности ще бъдат със същата ширина като противоположните им стойности. Например, ако пропуснете последната стойност (вляво), разстоянието между лявата страна на рамката и съдържанието на елемента ще бъде същото като пространството от дясната страна. В HTML подчинените тагове наследяват някои свойства на своите родителски тагове. Например всички етикети на контейнери (< P >И ) ще има някои свойства на етикета . Абсолютно същия етикет наследява свойствата на етикета . Разгледайте следния код: здравей Това е абзац от текста. Това се подчертава Стиловата таблица на този документ задава цвета в етикета < P > синьото обаче е цветът за етикета не е изрично дефинирано (по подразбиране е черно). Тук няма за какво да се притеснявате, тъй като този етикет е в родителския контейнер И по този начин наследява синия цвят. Понякога става необходимо да се дефинират два (или повече) стила за един таг. Например, може да се наложи да посочите два стила за етикет : един за случая, когато е подчинен на етикет , а вторият, когато е подчинен на тага . Това може да стане с помощта на контекстни селектори. Контекстният селектор определя точната последователност от тагове, за които ще бъде приложен определен стил. С други думи, можете да посочите, че трябва да се приложи някакъв стил, например в таг само ако този таг е подчинен таг : OL LI (тип стил на списък: десетичен) За същия етикет можете да дефинирате различен стил, валиден само ако е подчинен на таг : UL LI (тип стил на списък: квадрат) Трябва да се отбележи, че списъкът със селектори не е разделен със запетаи. В противен случай на всички тагове в списъка ще бъде присвоен един и същ стил. Насоките на W3C наричат ​​стиловите листове "каскадни стилови листове" " защото за оформлението на уеб страница можете да използвате не една, а няколко таблици наведнъж. В този случай зрителят сам определя последователността на използване на таблици и разрешава конфликти между тях, като използва каскадния принцип. Например стиловият лист за страница може да бъде дефиниран не само от неговия автор, но и от читателя и след това каскадните правила решават кой стилов лист ще влезе в сила. Как действа? Браузърът присвоява тежест на всяко правило. Когато интерпретира всеки таг, програмата преглежда всички правила на този таг и ги сортира по стойността на тегловния коефициент. „Най-тежкото“ правило печели. Следните са общи принципи за разрешаване на конфликти между листовете със стилове: Предимство на типовете стилови листове в документа (низходящо): текуща настройка на стил (вградена), вграждане, свързване. Можете също така да промените тежестта на правило, като използвате важната ключова дума. В следващия пример стойността на червеното свойство е полк Стойността or и sans-serif на свойството font-family са маркирани с тази функционална дума и следователно зрителят не трябва да ги отменя. Въпреки това, ако две такива правила влязат в конфликт, конфликтът се разрешава съгласно принципите, посочени по-горе. H1 (цвят: червен ! важно тегло на шрифта: удебелен шрифт-семейство: sans-serif ! важно) Класът е дефиниция на няколко стила на един елемент, всеки от които може да се използва на правилното място на страницата. Например, можете да дефинирате три варианта на стила на заглавие H1. Дефинирането на варианти е подобно на определянето на стил, само произволно име на клас се добавя към името на етикета, разделено с точка: H1 син (цвят: син) H1 .червен (цвят: червен) H1 .черен (цвят: черен) Сега, включително етикета в документа , можете да посочите конкретен стил в него, като използвате атрибута CLASS: Червено заглавие

CSS (Cascading Style Sheets) или каскадни стилови таблици, се използват за описание на външния вид на документ, написан на език за маркиране. CSS стиловете обикновено се използват за създаване и стилизиране на елементи от уеб страници и потребителски интерфейси, написани на HTML и XHTML, но могат да се прилагат и към всякакъв вид XML документ, включително XML, SVG и XUL.

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

Декларацията на стил се състои от две части: елементът на уеб страницата − селектори команди за форматиране - рекламен блок. Селекторът казва на браузъра кой елемент да форматира, а блокът за декларация (код във фигурни скоби) изброява командите за форматиране - свойства и техните стойности.


ориз. 1. Структура за деклариране на CSS стил

Видове каскадни стилови таблици и тяхната специфика

1. Видове стилови листове

1.1. Външен стилов лист

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

Можете да прикачите множество таблици със стилове към всяка уеб страница, като добавите няколко тагове последователно , указвайки целта на този стилов лист в атрибута на медийния таг. rel="stylesheet" указва типа връзка (връзка към лист със стилове).

Атрибутът type="text/css" не се изисква от стандарта HTML5, така че може да бъде пропуснат. Ако атрибутът липсва, стойността по подразбиране е type="text/css" .

1.2. Вътрешни стилове

Вътрешни стиловевграден в раздел HTML документ и са дефинирани в тага. Вътрешните стилове имат предимство пред външните, но са по-ниски от вградените стилове (посочени чрез атрибута style).

...



1.3. Вградени стилове

Когато пишем вградени стилове, ние записваме CSS кода в HTML файла, директно в тага на елемента, като използваме атрибута style:

Обърнете внимание на този текст.

Такива стилове засягат само елемента, за който са зададени.

1.4. правило @import

правило @importПозволява ви да зареждате външни стилови листове. За да работи директивата @import, тя трябва да се появи в листа със стилове (външен или вътрешен) преди всички други правила:

Правилото @import също се използва за включване на уеб шрифтове:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Видове селектори

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

2.1. Универсален селектор

Съвпада с всеки HTML елемент. Например * (марж: 0;) ще се нулира маржовеза всички елементи на сайта. Селекторът може да се използва и в комбинация с псевдо-клас или псевдо-елемент: *:after (CSS стилове), *:checked (CSS стилове) .

2.2. Селектор на елементи

Селекторите на елементи ви позволяват да форматирате всички елементи от този типна всички страници на сайта. Например h1 (семейство шрифтове: Lobster, cursive;) ще зададе общия стил на форматиране за всички h1 заглавия.

2.3. Селектор на клас

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

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

Указания за употреба персонален компютър

.headline (преобразуване на текст: главни букви; цвят: светлосин;)

2.4. ID селектор

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

#sidebar (ширина: 300px; float: ляво;)

2.5. Селектор на потомък

Селекторите на наследници прилагат стилове към елементи в контейнерен елемент. Например ul li (преобразуване на текст: главни букви;) - ще избере всички li елементи, които са деца на всички ul елементи.

Ако трябва да форматирате потомци специфичен елемент, този елемент трябва да получи стилов клас:

p.first a (цвят: зелен;) — този стилще се прилага за всички връзки, наследници на параграф с първи клас;

p .first a (цвят: зелено;) - ако добавите интервал, връзките, намиращи се във всеки таг .first клас, който е дете на елемента, ще бъдат стилизирани

First a (color: green;) - този стил ще бъде приложен към всяка връзка, разположена вътре в друг елемент, обозначен от class.first.

2.6. Детски селектор

Дъщерен елемент е пряк дъщерен елемент на съдържащия го елемент. Един елемент може да има няколко дъщерни елементии всеки елемент може да има само един родител. Дъщерният селектор ви позволява да прилагате стилове само ако дъщерният елемент идва непосредствено след родителския елемент и няма други елементи между тях, тоест дъщерният елемент не е вложен в нищо друго.
Например p > strong ще избере всички силни елементи, които са деца на p елемента.

2.7. Сестра селекционер

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

h1 + p - ще избере всички първи абзаци непосредствено след всеки таг

без да се засягат останалите параграфи;

h1 ~ p - ще избере всички абзаци, които са родствени на всяко заглавие h1 и непосредствено след него.

2.8. Селектор на атрибути

Селекторите на атрибути избират елементи въз основа на името на атрибута или стойността на атрибута:

[атрибут] - всички елементи, съдържащи посочения атрибут - всички елементи, за които е указан атрибутът alt;

selector[attribute] - елементи от този тип, съдържащи посочения атрибут, img - само изображения, за които е указан атрибут alt;

selector[attribute="value"] - елементи от този тип, съдържащи посочения атрибут с определена стойност, img - всички картинки, чието заглавие съдържа думата цвете;

селектор[атрибут~="стойност"] - елементи, съдържащи частично дадена стойност, например, ако на даден елемент са дадени няколко класа, разделени с интервал, p — параграфи, чието име на клас съдържа функция;

selector[attribute|="value"] - елементи, чийто списък със стойности на атрибути започва с посочената дума, p - параграфи, чието име на клас е функция или започва с характеристика;

selector[attribute^="value"] - елементи, чиято стойност на атрибут започва с посочената стойност, a - всички връзки, започващи с http:// ;

selector[attribute$="value"] - елементи, чиято стойност на атрибут завършва с посочената стойност, img - всички изображения във формат png;

selector[attribute*="value"] - елементи, чиято стойност на атрибута съдържа посочената дума навсякъде, a - всички връзки, чието име съдържа book .

2.9. Псевдо-клас селектор

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

:hover - всеки елемент, върху който е поставен курсора на мишката;

:фокус — интерактивен елемент, който е бил достъпен с помощта на клавиатурата или активиран с помощта на мишката;

:active - елемент, който е активиран от потребителя;

:valid - полета на формата, чието съдържание е проверено в браузъра за съответствие с посочения тип данни;

:invalid — полета на формуляр, чието съдържание не отговаря на посочения тип данни;

:enabled - всички активни полета на формата;

:disabled - блокирани полета на формуляри, т.е. в неактивно състояние;

:in-range - полета на формата, чиито стойности са в посочения диапазон;

:out-of-range - полета на формуляр, чиито стойности не са в посочения диапазон;

:lang() - елементи с текст на посочения език;

:not(селектор) - елементи, които не съдържат посочения селектор - клас, идентификатор, име или тип поле на формуляр - :not() ;

:target е елемент със символа #, който се споменава в документа;

:checked — избрани (избрани от потребителя) елементи на формуляр.

2.10. Структурен селектор на псевдокласове

Структурните псевдокласове избират дъщерни елементи според параметъра, посочен в скоби:

:nth-child(odd) - нечетни дъщерни елементи;

:nth-child(even) - четни дъщерни елементи;

:nth-child(3n) - всеки трети елемент сред децата;

:nth-child(3n+2) - избира всеки трети елемент, започвайки с второто дете (+2) ;

:nth-child(n+2) - избира всички елементи, започвайки от втория;

:nth-child(3) - избира третия дъщерен елемент;

:nth-last-child() - в списъка с дъщерни елементи избира елемента с определено местоположение, подобно на:nth-child() , но започвайки от последния, в обратна посока;

:first-child - позволява ви да стилизирате само първия дъщерен елемент на тага;

:last-child - позволява ви да форматирате последния дъщерен елемент на тага;

:only-child - избира елемент, който е единственият дъщерен елемент;

:empty - избира елементи, които нямат деца;

:root - избира елемента, който е основният в документа - html елемент.

2.11. Селектор на псевдокласове от структурен тип

Показва конкретен тип дъщерен етикет:

:nth-of-type() - избира елементи, подобни на :nth-child() , но взема предвид само типа на елемента;

:first-of-type - избира първото дете от даден тип;

:last-of-type - избира последен елементот този тип;

:nth-last-of-type() - избира елемент даден типв списък от елементи според посоченото местоположение, започвайки от края;

:only-of-type - избира единствения елемент от посочения тип сред дъщерните елементи на родителския елемент.

2.12. Псевдо селектор на елементи

Псевдо елементите се използват за добавяне на съдържание, което се генерира с помощта на свойството content:

:first-letter - избира първата буква на всеки параграф, важи само за блокови елементи;

:first-line - избира първия ред от текста на елемента, важи само за блокови елементи;

:before - вмъква генерирано съдържание преди елемента;

:after - добавя генерирано съдържание след елемента.

3. Селекторна комбинация

За да изберете по-точно елементи за форматиране, можете да използвате комбинации от селектори:

img:nth-of-type(even) - ще избере всички четни изображения, чийто алтернативен текст съдържа думата css.

4. Групиращи селектори

Същият стил може да се приложи към няколко елемента едновременно. За да направите това, трябва да изброите необходимите селектори от лявата страна на декларацията, разделени със запетаи:

H1, h2, p, span ( цвят: доматен; фон: бял; )

5. Наследяване и каскада

Наследяването и каскадата са две основни концепции в CSS, които са тясно свързани. Наследяването е мястото, където елементите наследяват свойства от своя родител (елементът, който ги съдържа). Каскадата се проявява в това как различни видовестиловите таблици се прилагат към документ и как противоречивите правила се заменят взаимно.

5.1. Наследство

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

Свойствата, свързани с блоковото форматиране, не се наследяват. Това са background, border, display, float and clear, height и width, margin, min-max-height and-width, outline, overflow, padding, position, text-decoration, vertical-align и z-index.

Принудително наследяване

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

Как се задават и работят CSS стиловете

1) Стиловете могат да бъдат наследени от родителския елемент (наследени свойства или използване на наследената стойност);

2) Стиловете, разположени в листа със стилове по-долу, заместват стиловете, разположени в таблицата по-горе;

3) Към един елемент могат да се прилагат стилове от различни източници. Можете да проверите кои стилове се прилагат в режима за програмисти на браузъра. За да направите това, щракнете върху елемента щракнете с десния бутонмишката и изберете „Преглед на кода“ (или нещо подобно). Дясната колона ще изброява всички свойства, които са зададени на този елемент или са наследени от родителски елемент, заедно със стиловите файлове, в които са посочени, и сериен номерредове код.


ориз. 2. Режим за програмисти в Google браузър Chrome

4) Когато дефинирате стил, можете да използвате произволна комбинация от селектори - селектор на елемент, псевдоклас на елемент, клас или идентификатор на елемент.

div (граница: 1px solid #eee;) #wrap (width: 500px;).box (float: left;).clear (clear: both;)

5.2. Каскада

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

Правило! важно

Теглото на правило може да бъде указано с помощта на ключовата дума!important, която се добавя веднага след стойността на свойството, например span (font-weight: bold!important;) . Правилото трябва да бъде поставено в края на декларацията преди затварящата скоба, без интервал. Такова съобщение ще има предимство пред всички останали правила. Това правило ви позволява да отмените стойност на свойство и да зададете нова за елемент от група елементи в случай, че няма директен достъпкъм стиловия файл.

Специфичност

За всяко правило браузърът изчислява специфика на селектораи ако даден елемент има противоречиви декларации на свойства, се взема предвид правилото, което има най-голяма специфичност. Стойността на специфичността има четири части: 0, 0, 0, 0. Специфичността на селектора се определя, както следва:

за id се добавя 0, 1, 0, 0;
за клас 0 се добавя 0, 1, 0;
за всеки елемент и псевдоелемент се добавят 0, 0, 0, 1;
за вграден стил, добавен директно към елемент - 1, 0, 0, 0 ;
Универсалният селектор няма специфичност.

H1 (цвят: светлосин;) /*специфичност 0, 0, 0, 1*/ em (цвят: сребрист;) /*специфичност 0, 0, 0, 1*/ h1 em (цвят: златен;) /*специфичност: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (цвят: син;) /*специфичност: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .странична лента (цвят: сив;) /*специфичност 0, 0, 1, 0 */ #странична лента (цвят: оранжево;) /*специфичност 0, 1, 0, 0*/ li#странична лента (цвят: аква;) /*специфичност: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

В резултат на това тези правила, които са по-специфични, ще бъдат приложени към елемента. Например, ако даден елемент има две специфики със стойности 0, 0, 0, 2 и 0, 1, 0, 1, тогава второто правило ще спечели.

Ред на свързаните таблици

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

Вероятно всеки знае това HTMLопределя структурата на документа и CSS(Cascading Style Sheets, каскадни стилови таблици) отговаря за дизайна на уеб страницата, позицията и външния вид на елементите. Случва се така, че HTML и CSS не се използват отделно. Всяка уеб страница по същество е комбинация от HTML код и CSS код. Без основни познания за тези
технология, няма да е възможно компетентно да се оформи всеки документ. Много от нас са разглеждали тези технологии по-подробно. Но лично аз никога не успях напълно да „разбера“ всички истини и CSS функции. След това ще се опитам да подчертая най-много важни точкинеща, които трябва да знаете за CSS.

Какво представляват каскадните стилови таблици?

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

Изходният код на такъв документ изглежда така:

1 2 3 4 5 6 7 8 9 10 11 12 13

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=> <глава > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / > <заглавие >Флексагон</заглавие> <връзка rel = "stylesheet" href = "style.ess" type = "text/css" / > </глава> <тяло > <h1 >Флексагок</h1> <р>Flexagok е хартиена фигура, която има три или повече страни. Първоначално изглежда, че това е невъзможно, но помнете лентата на Мобиус, тя има само една страна, за разлика от лист хартия, и въпреки това е истинска. Flexagon също е истински, който лесно се прави и лепи в домашни условия. Прилича на двустранен шестоъгълник, но го огънете по специален начин и виждаме трета страна. Лесно е да се уверим, че имаме точно три страни, ако ги боядисаме в различни цветове. Чрез огъване на флексагона ще наблюдаваме последователно всичките му повърхности.</p> </тяло> </html>

Самият HTML код не е претърпял никакви промени и единственото допълнение е редът . Тя се позовава на външен файлс описание на стиловете под името style.css. Съдържанието на този файл е показано по-долу:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

тяло ( размер на шрифта: llpt; цвят на фона: #f0f0f0; /* Цвят на фона на уеб страницата */ цвят : #333 ; /* Цвят на основния текст */ } h1 ( цвят : #a52 a2 a; /* Цвят на заглавката */ размер на шрифта: 24pt; /* Размер на шрифта в точки */ семейство шрифтове: Georgia, Times, serif; /* Семейство шрифтове */ тегло на шрифта: нормално; /* Нормален стил на текст */ } p( подравняване на текста: оправдаване; /* Подравняване по ширина */ margin-left: bOrx; /* Ляво пълнеж в пиксели */ margin-right : Юрх; /* Десен подложка в пиксели */ border-left : lpx solid #999 ; border-bottom : lpx solid #999 ; подложка -ляво: Юрх; подложка -отдолу: 1Opx; }

Във файл style.cssвсички параметри на дизайна на етикети като, <тяло >, И<p>
Обърнете внимание, че самите тагове са написани както обикновено в HTML кода. Тъй като файлът със стиловата таблица може да бъде препратен от всеки уеб документ, това в крайна сметка намалява количеството дублирани данни. А благодарение на разделянето на кода и дизайна се увеличава гъвкавостта при управление на типа документ и скоростта на работа на сайта.

Типове стилове

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



Стил на браузъра. Подобни стилове се използват при използване на „чист“ HTML.

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

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

Как да добавя стилове към страница?

Има няколко начина за добавяне на CSS стилове към страница:



Свързани стилове

При използване свързани стиловеописанието на селекторите и техните стойности се намират в отделен файл, обикновено с разширение css, и се използва таг за свързване на документа с този файл . Този етикет се поставя в контейнер .

Можете да свържете тези стилове, както следва:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> "http://www.w3.org/1999/xhtml">