Какво представляват css стиловите таблици. Основни CSS елементи. Класове в стилови спецификации

Оставете коментар 6,950

CSS означава „Cascading Style Sheets“, което означава „Каскадни стилови таблици“. Използва се за проектиране на уеб страници. Ако HTML кодът съдържа съдържанието (какво ще покаже браузърът), тогава CSS определя неговия дизайн (как браузърът ще го покаже). Красотата на CSS е, че с помощта на един стил можете да проектирате всички еднотипни елементи на страница или цял сайт (всички връзки, параграфи, списъци наведнъж). С CSS стил вие определяте веднъж как трябва да изглежда определен елемент, например картини, и те променят дизайна си във всички документи наведнъж. За да промените форматирането на текста в сайта си, трябва само веднъж да промените CSS кода.

Основни CSS елементи

Точно както HTML се състои от тагове, атрибути и стойности, CSS се състои от него собствени елементи. Същността на CSS конструкциите може да се обясни по следния начин: „Посочете кой елемент от страницата да стилизирате и посочете как да го стилизирате.“ Ето градивните елементи на CSS.

  • Селектор. Идентификатор, който казва на браузъра към кой елемент от страницата да приложи дизайна. Благодарение на него браузърът „разбира“, че стилът е предназначен, например, за проектиране на списъци или таблици.
  • Блок за деклариране на стил. Пише се след селектора и се огражда във фигурни скоби. Той определя стила на елемента (неговия дизайн). Блокът за деклариране на стил се състои от две части.
  • Имот. Аналог на атрибут в HTML. Определя кое свойство на външния вид ще бъде променено.
  • Значение. Посочва се за свойство чрез двоеточие и определя как точно ще бъде променено свойството.

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

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

В зависимост от свойствата на елементите на страницата, които дефинират, селекторите се предлагат в различни типове.

  • Универсален. Задава правила за всички елементи на страницата, които нямат зададени други правила.
    Код * (размер на шрифта: 14px;)задава размера на шрифта на 14 пиксела за всички елементи на документа, за които не са посочени други правила, използвайки други селектори.
  • Тега. Този тип селектор определя правила за форматиране на съдържанието на конкретен HTML таг. Името на селектора е същото като името на дескриптора, само че е написано без ъглови скоби: стр, h1, ул.
    Например код h2 (цвят: червен;)комплекти зелен цвяттекст за всички заглавия от второ ниво, тоест съдържанието на таговете

    .
  • Атрибут. Използвайки тази група селектори, можете да определите стила на съдържанието на всички тагове, които имат определен специфичен атрибут. Селекторите могат да бъдат зададени по-прецизно, като се посочи не само името на атрибута, но и стойността, която му е присвоена, както и името на тага, който го съдържа. Това може да се използва, за да направите дизайна по-индивидуален.
  • клас. Тип селектори, когато трябва да форматирате съдържанието на тагове от същия тип по различен начин. Например, искате да направите връзките в долната част на сайта червени, докато всички останали трябва да останат сини, както са били. За да приложите правила на клас към елемент на сайта, трябва да посочите името на класа в атрибута классъответния етикет.

Да кажем с помощта на класа стъпкана отделните елементи трябва да се даде ляво поле от 15 пиксела.

CSS кодът ще бъде така:

Стъпка (маржин-ляво: 15px;)

HTML кодът, който ще обвърже елемента с правилото, ще бъде:

Текст с отстъп

  • документ за самоличност. Използва се във връзка с атрибута документ за самоличност HTML таг и се използва, когато трябва да се зададат свойства за един елемент. За разлика от селектор на клас, чието име е предшествано от точка, той се записва с помощта на хеш:

#exclusive (цвят:оранжев;)

  • Контекстуален. В HTML някои тагове често се появяват в други и контекстните селектори помагат да се дефинират правила точно за такъв случай. Например, можете да ги използвате, за да форматирате елементи в номерирани списъци или курсив на текст в параграфи:

P i (финт-семейство: Century;)

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

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

A.step (маржин-ляво: 15px;)

Как да включите CSS в HTML страница?

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

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

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

Следният код задава размера и цвета на шрифта за текста вътре в етикета

Текст, форматиран с помощта на вътрешен стил.

Глобални стилове

Задаване по етикет …

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

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

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

За да свържете правила от CSS файл към HTML страница, използвайте етикета добавени към контейнера , и неговите атрибути.

Ето реда, свързващ правилата от файла mystyle.cssс HTML страница:

rel="stylesheet"указва, че етикетът се отнася до файл със стилова таблица, href="mysyle.css"задава адреса си. Правилата за адресиране са същите като редовни връзки– пътят може да бъде абсолютен, относителен и др.

Импортирани стилове

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

Кодът по-долу импортира файлова таблица в документа any.css, който се намира в папката с редактирания HTML документ:

@import url(any.css);

Командата е написана в реда под отварящия таг

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

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

Така, какво представляват каскадните стилови таблици 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. И така, нека започнем с най-простото нещо и да зададем етикетанов стил , определяне на фонастраници, цвят на фона на страницата (ако изображенията са деактивирани в браузъра на посетителя на страницата), горно и долно поле, шрифт по подразбиране, неговия размер и цвят.

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

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

За какво са стиловите таблици?

Каскадните стилови таблици или CSS (от английски Cascading Style Sheets) са следствие по-нататъчно развитие HTML и ни дават възможност да преминем към следващото ниво на представяне на информация. Стиловите таблици ви позволяват да отделите семантичното съдържание на страница от нейния дизайн.

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

Оттогава обаче много се е променило и HTML стандартът е загубил първоначалната си хармония. В началото Netscape добави "подобрени етикети", които позволяват по-голям контрол върху външния вид на представената информация. Иновацията се наложи и всички разширения на Netscape станаха де факто стандарт. Тогава Microsoft направи същото. Когато го разбраха, HTML беше ужасна смесица от логически и дизайнерски тагове, несъвместими разширения и напълно престана да съответства на първоначалната концепция - да представя информация на всяко устройство, независимо от неговите характеристики на изход на информация.

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

Новият стандарт се опита да се върне към произхода на концепцията HTML. Четвъртата версия, подобно на първата, препоръчва създаване на страници по такъв начин, че да могат да се възпроизвеждат на всяко устройство - било то 21" монитор или малко черно-бял екранмобилен телефон.

Как беше решен проблемът с представянето на външния вид на информацията? Именно тук се крие революционността на подхода. Препоръчително е да поставите целия дизайн във външен стилов файл. Главната страница ще съдържа само информация и връзки към необходимите стилове.

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

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

Поставянето на цялата информация за стил в един външен файл отваря други полезни функции- в крайна сметка, като променим съдържанието само на един (!) стилов файл, можем да променим целия дизайн на сайта за секунди. Освен това няма да са необходими други модификации. Разбира се, това е вярно само ако сайтът първоначално е проектиран правилно.

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

Свързване на стилови листове
За да изпълним тази задача, можем да използваме един от 3 предложени метода:

външен файл

описание в заглавната част

вградено описание

Нека започнем с най-простото, с така нареченото вградено описание или описание, вградено в таг:

Този текст е заменен от стил

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

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

Когато използвате този метод, описанието на стила трябва да бъде поставено в заглавната секция:


....

Сега тези стилове могат да се прилагат навсякъде в html кода. За това се използва следната конструкция:

Този текст е написан в стил заглавка

Този текст е написан в червено

Както можете да видите, всичко не е толкова сложно. Основното нещо е да разберете основните принципи. В допълнение към дефинирането на нови класове, ние също имаме способността да заменим стандартните тагове. Например етикет

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

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

Как се осъществява внедряването? външен файл? Първо се създава стилов файл с описание на всички класове, от които се нуждаем (mystyle.css):

Горен колонтитул (подравняване на текста: център; размер на шрифта: 27pt;)
.red ( цвят: червен; )
p (подравняване на текст: център; размер на шрифта: 12pt;)


....

....

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

Защо казах "основен"? Факт е, че на практика трябва да използвате и трите метода и тук влиза в действие „каскадното“ нареждане на стилове. Но ще говорим за това следващия път.

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

Каскадни стилове
Така че, първо, нека да разберем защо стиловете се наричат ​​каскадни. Позволете ми, скъпи читателю, още веднъж да ви дам начини за прилагане на стилове на страница:

използване на отделен стилов файл и вмъкването му с помощта на етикет

описание на стила в заглавката на документа

Прилагане на стил като параметър в таг.

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

Например, ние дефинирахме във външния стилов файл, че текстът в тага

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

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

За какво е? О, това е много полезно нещо. И сега ще покажа това с конкретен пример. Да приемем, че следният стил е дефиниран за всички връзки в заглавката на нашата страница:


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

Авторско право (C)
1998-2001 Cherry-Design

Направихме това с помощта на параметъра style и както си спомняте, той действа само в рамките на тага, в който е дефиниран. Което е точно това, от което се нуждаем.

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

В кои тагове е по-добре да се дефинират стилове с помощта на клас? Най-често за това се използва един от следните дизайни:

нещо


нещо

нещо

Етикет

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

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

А не чрез дефиниране на отделен клас.

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

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

След като се занимавахме с каскадирането, нека поговорим за синтаксиса.

Синтаксис на CSS
Описанието на всеки клас се прави с помощта на конструкция като тази:

Малък (размер на шрифта: 9pt; )

Първо се посочва името на класа - то може да е произволно, но все пак е препоръчително да се даде смислено име. След това, в фигурни скоби() всички са изброени необходими параметриЗа от този клас. Параметрите са разделени един от друг с точка и запетая. Ето друг пример, който използва по-дълго описание:

Малък ( размер на шрифта: 9pt; цвят: #eeeeee; подравняване на текста: център; )

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


След като има универсални класове, може би има и други? Точно така, има и така наречените класове тагове:

p.small (размер на шрифта: 9pt; )

Клас, дефиниран по този начин, ще работи само с етикета, за който е предназначен, и ще бъде игнориран за всички останали:

Този текст ще бъде показан в малък стил


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

p, td (размер на шрифта: 9pt; цвят:зелен;)

Тази техника се нарича групиране и в в такъв случайсме дефинирали и за

същия размери цвят на текста.

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

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

a (текстова декорация: няма; )
a:hover (украса на текст: подчертаване;)

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

И ето още един пример за псевдо-клас - дефиниране на капачка в началото на параграф:

p:първа буква (размер на шрифта: 200%; тегло на шрифта: получер;)

Обърнете внимание, че и в двата случая стилът засяга или конкретно състояние (потребителят е на път да щракне върху връзка), или част от текст (само първата буква от абзаца се променя). Това е смисълът на псевдокласовете.


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

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

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

Стиловите таблици се предоставят от препоръките на 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 (тип стил на списък: десетичен)

                    За същия етикет

                  1. можете да дефинирате друг стил, валиден само ако е подчинен на таг
                      :

                      UL LI (тип стил на списък: квадрат)

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

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

                      Как работи? Браузърът присвоява коефициент на тежест на всяко правило. Когато интерпретира всеки таг, програмата преглежда всички правила на този таг и ги сортира по стойността на тегловния коефициент. „Най-тежкото“ правило печели.

                      Съществуват следните общи указания за разрешаване на конфликти между листове със стилове:

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

                      Можете също така да промените тежестта на правило, като използвате важната ключова дума. В следващия пример стойността на червеното свойство е

                      полк Стойността or и sans-serif на свойството font-family са маркирани с тази функционална дума и следователно зрителят не трябва да ги отменя. Въпреки това, ако две такива правила влязат в конфликт, конфликтът се разрешава съгласно принципите, посочени по-горе.

                      H1 (цвят: червен ! важно тегло на шрифта: удебелен шрифт-семейство: sans-serif ! важно)

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

                      H1 син (цвят: син) H1 .червен (цвят: червен) H1 .черен (цвят: черен)

                      Сега, включително етикета в документа

                      , можете да посочите конкретен стил в него, като използвате атрибута CLASS:

                      Червено заглавие

    Можете да комбинирате множество свързани CSS свойства в едно свойство, за да спестите време и усилия.

    Сравнение на индивидуални и съкратени стойности

    Помислете за следното правило за полетата (съкращенията за подложка и граници работят по същия начин):

    div.foo ( margin-top: 1em; margin-right: 1.5em; margin-bottom: 2em; margin-left: 2.5em; )

    Това правило може да се напише по-кратко:

    div.foo ( поле: 1em 1.5em 2em 2.5em; )

    Посочване на по-малко от четири стойности за съкратено свойство

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

    Справочник със съкращения

    Гранични съкращения за различни свойства

    Също така си струва да споменем, че можете дори да зададете стойностите на свойствата на border само за една граница на елемент като този:

    border-left-width: 2px; border-left-style: плътен; border-left-color: черен;
    Преки пътища за някои свойства на полета, подложки и граници Всичко това работи по същия начин, както е показано по-горе в раздела „Избор между едно свойство и съкратена стойност“.
    Шрифтови съкращения С един ред за бърз достъп можете да определите размера на шрифта, теглото, стила, семейството и височината на реда. Например, разгледайте следния код:

    размер на шрифта: 1.5em; височина на реда: 200%; тегло на шрифта: удебелен; стил на шрифта: курсив; семейство шрифтове: Georgia, "Times New Roman", serif

    Можете да дефинирате всичко това със следния ред:

    шрифт: 1.5em/200% удебелен курсив Georgia,"Times New Roman",serif;
    Стенография за фон С едно CSS низовеМожете да определите цвета на фона, фоновото изображение, повторението на изображението и позицията на изображението. Нека вземем следния код:

    цвят на фона: #000; фоново изображение: url(image.gif); фоново повторение: без повторение; фонова позиция: горе вляво;

    Това може да бъде представено със следното съкращение:

    фон:#000 url(image.gif) без повторение горе вляво;
    Съкращения за списъци В този случай подобна история с свойства на списъцитеви позволява да зададете стойности на свойствата за тип маркер на списък, позиция и изображение на един ред. Нека вземем следния код:

    list-style-type: кръг; list-style-position: вътре; list-style-image: url(bullet.gif);

    Това е еквивалентно на следното:

    стил на списък: кръг в url(bullet.gif);

    Прилагане на CSS към HTML

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

    • низ;
    • вложени;
    • външни стилови листове.

    Струнни стилове

    Можете да приложите лист със стилове към елемент, като използвате атрибута style по следния начин:

    Вътре в този атрибут са изброени всички CSS свойства и техните стойности.

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

    Големият проблем с вградените стилове е, че те правят стиловете много по-трудни за поддържане. Използване на CSSима за цел да отдели представянето на документ от неговата структура, но вградените стилове правят точно обратното – разпръскват правилата за представяне в целия документ.

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

    Вложени стилове

    Вложените листове със стилове се поставят в главата на документа в стилов елемент, както в следната примерна страница:

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

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

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

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

    Импортиране на таблици със стилове

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

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

    Наследство

    Наследствов CSS е механизъм, чрез който определени свойства се предават от предшестващ елемент към неговите наследствени елементи.

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

    Всеки елемент в HTML документще наследи всички наследени свойства на своя предшественик, с изключение на коренния елемент (html), който няма предшественик.

    Каскадно

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

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

    Важност

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

    • Таблици със стилове на потребителски агент
    • Редовни декларации в потребителски стилови листове
    • Редовни декларации в авторски листове със стилове
    • Важни декларации в листовете със стилове на автора
    • Важни декларации в потребителските стилови листове

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

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

    Авторски стилов листе това, което обикновено се нарича "лист със стилове". Това е лист със стилове, който авторът на документа (или по-вероятно дизайнерът на сайта) е написал и прикачил (или включил).

    За да превърнете една обикновена декларация във важна, трябва да поставите директивата !important след нея. Както можете да видите, важните декларации в стиловия лист на потребителя ще припокриват всичко останало, което има смисъл.

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

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

    Специфичностсе определя като мярка за това колко специфичен е селектор на дадено правило. Селекторът с ниска специфичност може да съпостави много елементи (като *, който съответства на всеки елемент в документа), докато селекторът с висока специфичност може да съпостави само един елемент на страница (като #nav, който съвпада само с елемент с идентификатор съответстваща навигация).

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

    Специфичността има четири компонента, които могат да бъдат означени като a, b, c и d. Компонент a е най-различителен, d е най-малко.

    • Компонентът a се дефинира много просто: той е 1 за декларацията на стиловия атрибут, в противен случай е 0 .
    • Компонент b е броят на селекторите на id в селектора (тези, които започват с#).
    • Компонент c е число селектори на атрибути, включително селектори на класове и псевдокласове.
    • Компонентът d е броят на типовете елементи и псевдоелементите в селектора.

    С малко математика можете да получите низ от тези четири компонента, който определя спецификата на всяко правило. CSS декларациите в атрибута style нямат селектор, така че тяхната специфика винаги ще бъде 1,0,0,0.

    Таблицата показва някои примери.

    Селектор а b ° С д Специфичност
    h1 0 0 0 1 0,0,0,1
    .foo 0 0 1 0 0,0,1,0
    #бар 0 1 0 0 0,1,0,0
    html>head+body ul#nav *.home a:link 0 1 2 5 0,1,2,5

    Струва си да се отбележи, че свързващите знаци (като >, + и



© Copyright 2024, https://qzoreteam.ru