Каскадни стилови таблици

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

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

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

CSS предполага 3 вида стилови таблици - вградени, вградени (вътрешни) и свързани (външни).

Идеята за форматиране на HTML документи с CSS беше препоръчана за първи път от W3C през 1996 г. Тази препоръка, която беше актуализирана през 1998 г., все още се използва от уеб разработчиците днес.

Какво означава думата "каскадно"? Терминът "каскаден" означава, че различни стилове могат да се използват в една и съща HTML страница. Браузър, който поддържа таблици със стилове, ще следва техния ред (както в каскада), когато интерпретира информацията за стила. Това означава, че можете да използвате и трите вида стилове и браузърът ще интерпретира първо свързаните стилове, след това вградените стилове и накрая вградените стилове. Дори ако шаблоните за стил са приложени към целия сайт, можете да контролирате конкретни аспекти на страници с вградени стилове и конкретни области в тези страници с вградени стилове.стилове. Друг аспект на каскадирането е наследяването. Наследяването означава, че освен ако не е указано друго, конкретният стил ще бъде наследен от други елементи на HTML страницата. Например, ако приложите конкретен цвят на текста в таг, тогава всички тагове в този абзац ще наследят този цвят, освен ако не е указано друго.

Методи и синтаксис

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

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

Както можете да видите от примера по-горе, стиловият лист вече е различен от стандартния код на HTML страницата, но логиката все още е лесна за следване. В нашия случай за основната част на страницата (тялото) цветът на фона, цветът на текста и горното, лявото и дясното поле са посочени в инчове. За заглавието от първо ниво (HI) се посочва шрифтът (име на шрифта и размер на точки). Това е удобството на каскадните стилови таблици - можете да задавате размери не само в точки, но и в пиксели (px), проценти (75%) и сантиметри (cm).

Има и няколко нови мерни единици, най-забележителната от които е m. За разлика от точките или пикселите, които представляват абсолютните размери на различни обекти, 1m е ширината на малка буква m във въпросния шрифт. Вярно е, че повечето браузъри не знаят за това иследователно 1m просто се дефинира като размер по подразбиране. Например в Internet Explorer 4.0 и по-нови версии за слушалки Verdana 1m съответства на 12 точки. По-точно, "съответства на стойността, която потребителят е задал като размер на шрифта по подразбиране. Така, ако зададете размера на шрифта по подразбиране на браузъра на 16 пункта, тогава 1m също ще стане 16 пункта и всички останали размери ще бъдат съответно увеличени.

Но да се върнем към нашия пример. Друга интересна точка относно този лист със стилове е разликата между стиловете на шрифта на заглавието и абзаца. Те се различават по цвят, отстъп и шрифт. В тага за котва (A) можете да видите друг много удобен синтаксисен елемент. Линията text-decoration: none премахва подчертаването на връзките, така че резултатът изглежда чист и привлекателен.

Сега нека да видим как този пример за вграден стил ще изглежда на екрана. Натисни тук!

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

Ето как изглежда пример за свързан стилов лист:

Сега нека запазим този документ като отделен файл. Нека го наречем style-l.css и го поставим в папката stylesheets, наречена style. С този документ произволен брой HTML страници. За да направите това, трябва да използвате следната конструкция между таговете и:

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

Кодът за тази страница изглежда така:

Тук е важно да запомните значението на концепцията за каскада. Ако имате нужда от 10 HTML страници, които този стилов лист засяга глобално, можете да го приложите. След това, ако трябва да направите малки корекции на отделни страници, можете или да инжектирате допълнителни стилове в тези страници, илиизползвайте вграден стил.

След това към кода беше добавен вграден стил и това се случи. - вграденият стил се прилага върху свързания стил

Уверете се, че разглеждате страниците със стилови таблици в подходящ браузър - Internet Explorer 3.0 или по-нова версия и Netscape 4.0 или по-нова версия. В противен случай всичките ви стилове може да изчезнат! Винаги трябва да тествате такива страници без лист със стилове (използвайте по-стар браузър или просто сменете временно името на листа със стилове, така че браузърът да не може да го намери) и да видите дали изглеждат приемливо.

Поддръжка на шрифтове в таблици със стилове

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

Уви! На практика, когато шрифтът Verdana беше посочен като първи шрифт и показването беше извършено от браузъра Internet Explorer 3.0, вместо заглавието „Каскадни стилови таблици“ получих абракадабра.

Задаване на свойства и стойности на шрифта

Шрифтовете имат много свойства, които можете да промените, и много стойности, които тези свойства могат да приемат. Както при стандартните HTML шрифтове, можете да зададете свойства, за да контролирате размера и цвета. За HTML шрифтове обаче не можете да промените теглото и вида на шрифта, както и височината на реда или началото (разстоянието между отделните редове от текста). В допълнение, методите за контрол на размера на шрифта, налични в таблиците със стилове, са далеч над нивото, предлагано от HTML стандартите. Цвят Стиловите листове използват стандартни цветови методи на браузъра. С други думи, за най-добри резултати използвайте шестнадесетичен (и най-добре поддържанбраузъри) цвят. Можете да добавите цвят, както и други стилови свойства, към всеки подходящ HTML таг за вградени, вградени и свързани стилове. Например, когато описваме цвета на заглавието от първо ниво, се посочва стойносттаcolor:#333399;, в резултат на което виждаме заглавието „Каскадни таблици със стилове“ в тъмно синьо. Наситеност Наситеността (тегло) показва дебелината на шрифта. Например за шрифтаArialима такива разновидности: удебелен (черен), удебелен (удебелен), светъл (светъл) и др.

Има различни стилове за шрифтове. Ако не сте 100% сигурни, че определен шрифт е инсталиран на компютъра на клиента, по-разумно е да използвате лице, което е налично за всички шрифтове. Има само едно (различно от нормалното) стандартно тегло, което е налично за повечето шрифтове. Това е смело!

Ето пример за използване на вграден стил:

Получер се прилага към абзац.

Ние сме интелигентен вид и използването на нашата интелигентност съвсем правилно ни доставя удоволствие. В това отношение мозъкът е като мускул. Когато се използва се чувстваме много добре. Разбирането е радостно.

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

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

Използването на единици, различни от точки, може да причини сериознипроблеми. Ако се използват пиксели вместо точки, въпреки че текст с размери в пиксели ще бъде видим в браузъри, които поддържат таблици със стилове (като Internet Explorer 3.0 и по-нови или Netscape 4.0 и по-нови), той може да не се отпечата!

Други опции за шрифт

Класове и групиране

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

На клас стил се присвоява име в листа със стилове. Това име се дава като нормално име, но с точка като първи знак.

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

За да изберете между два стила на клас в таг (подобни правила се прилагат за други тагове, които имат описание в лист със стилове), използвайте атрибута class=style_name. Моля, имайте предвид, че тук името на стила се използва без точка. Например:

Думата Wisdom се показва в Times New Roman, 34 pt, тъмночервено (на тези компютри, които имат поддръжка на браузър за таблици със стилове), а думите More Wisdom се показват в Arial, 18 pt, тъмно оранжево (с горния колонтитул, подравнен към средата на страницата). За текста между тези заглавия шрифтът по подразбиране е Times, защото не съм посочил изрично шрифт за тези фрагменти. Следователно, браузърът избира своя собствена основна по подразбиранешрифт. Мъдрите мисли са написани на добър английски и принадлежат на истински мъдри хора. Като упражнение се опитайте да преведете.

В HTML кода записът за тези мъдрости изглежда така:

Групирането се състои от комбиниране на множество свойства и стилови стойности. В този случай има по-строги правила за форматиране. По-долу е даден пример за обикновен клас:

Това означава, че всички параграфи от g-клас ще бъдат показани в Arial, 22pt, с 14pt водещи. Ако приложим групиране към този клас, получаваме следната дефиниция:

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

ПРИМЕР за параграф от g-клас, който има приложено групиране.

Кратък преглед на това как са разположени елементите на страницата

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

Да видим как ще изглежда.

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

Четири свойства се използват за контролиране на полетата на уеб страница: margin-top, margin-bottom, margin-left и margin-right. Както всички CSS свойства, те могат да бъдат приложени към всеки логически обект. Обикновено обектите BODY и P (параграф - параграф) се използват за управление на полета. За да зададете стойности на полетаМожете да използвате различни мерни единици: пиксели, точки, сантиметри, инчове и проценти. За справка, стандартните оформления на HTML страници обикновено се измерват в пиксели.

CSS позволява отрицателни стойности за полета. Това позволява на дизайнера да създаде припокриващи се области на страницата за интересен ефект.

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

Пример за създаване на 3-D ефект

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

В този пример етикетът

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

В този пример текстовете са дефинирани като в слоеве, които са насложени един върху друг. Първо се показва слоят със сянка, върху него се наслагва основният слой и след това слой 1 и слой 2. Редът, в който слоевете се припокриват, се определя от реда на текстовите фрагменти, маркирани с етикета

В нашия пример бяха използвани следните свойства: