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

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

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

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

Предимства на CSS

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

Здравейте, скъпи читатели на сайта на блога. Днес искам да започна да говоря подробно за CSS (материалите ще бъдат натрупани в съответния раздел).

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

Разбира се, Css изглежда много по-сложен в сравнение с Html, но това е, когато става въпрос за оформление на различни браузъри, но когато става въпрос за коригиране на някои малки детайли в дизайна на собствения ви уебсайт, тогава нямате нужда много интелигентност. Като цяло ще се опитаме да анализираме подробно основите му, а нюансите на тяхното филигранно използване ще оставим за незадължително изучаване (по избор). Но всички уебмастъри трябва да знаят основните понятия.

Какво е CSS език и за какво служи?

Съкращението CSS означава Cascading Style Sheets или в превод на руски като каскадни стилови таблици. Какво е това и защо този език е измислен наведнъж?

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

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

Защо? Спомняте ли си как можете да зададете цвета на текстов фрагмент в чист HTML? Точно така, с помощта на. Какво става, ако искате да оцветите няколко абзаца в текста наведнъж в желания цвят?

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

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

Затова те излязоха със следния изход от настоящата ситуация. Разработчиците от W3C решиха да проектират всички визуални представяния на уеб документ под формата на специален език за маркиране на стилове, който те нарекоха каскадни стилови таблици или просто CSS (чете се като CSS). Каква е същността на технологията?

И въпросът е следният: чрез свързване на език за маркиране на стил към всякакви документи (страници), ние ще можем да зададем визуално представяне на всички онези елементи (създадени от Html тагове), които ще се появят в този документ.

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

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

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

Моля, обърнете внимание, че изходният HTML код остава абсолютно същият и Само дизайнът на CSS се променя. Удивително, нали?!

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

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

И така, какво е това и от какво се състои? Този предполагаем език може да бъде разделят на две части:

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

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

1. Прикачен файл - CSS кодът се записва директно в етикета на желания елемент с помощта на атрибута Style
2. Вграждане - целият стилов код за уеб документ е написан в неговия хедър (вътре в таговете Head) с помощта на елемента Style
3. Свързване - целият CSS код се поставя (извлича) в отделен външен файл, който се свързва с документа чрез елемента Link в неговия хедър

Е, виждате как вече сме научили много за езика за маркиране на стилове. Сега е моментът да поговорим за това синтаксис. Като цяло е доста просто:

Едно правило в CSS кода се състои от два елемента – свойство (в нашия пример е ) и неговата стойност (в нашия пример е червено и #CCCCCC). Предпоставка е разделяне на свойство от неговата стойност с двоеточие.

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

Използване на стил за свързване на CSS към Html код

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

Първият метод се нарича метод CSS вграждания в Htmlизползвайки атрибута Style:

Нека видим как можем да използваме този метод, за да зададем цвета и фона на параграф:

Какъв е методът на гнездене

Както можете да видите, с едно лесно движение оцветихме текста на абзаца в червено (color:red) и в същото време поставихме сив фон под него (background:#cccccc). Стилът се отнася до онези шест, които могат да се използват заедно с абсолютно всякакви тагове (те са изброени в долната част на екранната снимка):

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

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

Следващият начин за свързване на стилов език за маркиране се нарича метод вграждане на CSS в Html. Този метод е фундаментално различен от разгледания по-рано инвестиционен метод.

Вместо да включваме във всеки таг на страницата атрибута Style, съдържащ правилата на стиловия език, сега ще напишем всички CSS правила, от които се нуждаем за този уеб документ, в един единствен таг Стил, който от своя страна ще бъде поставен в заглавката на този документ (между елементите Head).

Помните ли какво е Head и къде е записано в структурата на уеб документ? Ако не си спомняте, потърсете го в тази блокова диаграма:

Тези. в код може да изглежда така:

... ...

Не е съвсем ясно? Е, сега ще се опитам да го илюстрирам:

За да попречите на браузъра да сбърка правилата за стил с език за маркиране на хипертекст, в елемента Style ще трябва да бъде указан задължителен атрибут Въведете със стойност „текст/css“(заглавка на медийно съдържание за каскадни листове със стилове). Че. Кодът, съдържащ се в този елемент, ще бъде интерпретиран от браузъра като CSS.

Нека разгледаме по-нататък примера, даден малко по-горе. Както можете да видите, стилът управлява оградени във фигурни скоби, а пред тях е изписан така нареченият селектор под формата на латинската буква “P”. Защо е необходим този селектор?

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

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

CSS селектор (Свойство: Стойност; Свойство: Стойност)

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

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

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

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

Експортиране на таблици със стилове на CSS в отделен файл чрез връзка

Последният начин за интегриране на код на стил в уеб документ се извиква метод на свързване. Най-лесният начин да илюстрирате този метод е:

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

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

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

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

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

Атрибутът type=”text/css” на етикета Link означава, че това медийно съдържание няма да бъде нищо повече от стилов език за маркиране. Но също и когато свързвате CSS файл и Html документ, той се използва Атрибут Rel със стойност на Stylesheet. Факт е, че Link (сервизна хипервръзка) може да се използва за напълно различни цели.

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

И целта на всяка от тези хипервръзки към услугата се определя от стойността на атрибута Rel. Например rel="икона за пряк път" се използва за указване на пътя до файла, а rel="alternate" може да се използва за указване на алтернативна версия на страницата (пример за алтернативно представяне на Html документ би бил) .

Е, в случай на използване на атрибута rel="stylesheet" в Link, ние настройваме браузъра път към файла със стилова таблица(в атрибута Href този път може да бъде посочен в абсолютна или относителна форма). Тези. Използвайки атрибута Rel, ние казваме на браузъра как ще изглежда файлът, пътят до който е посочен в Href (stylesheet - с CSS).

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

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

Късмет! Ще се видим скоро на страниците на сайта на блога

Може да се интересувате

Стил на списък (тип, изображение, позиция) - Css правила за персонализиране на външния вид на списъци в Html код
Display (block, none, inline) в CSS - задайте типа на показване на Html елементите на уеб страницата
За какво е CSS, как да свържете каскадни стилови таблици към Html документ и основния синтаксис на този език
Фон в CSS (цвят, позиция, изображение, повторение, прикачен файл) - всичко за настройка на цвета на фона или фоновото изображение на Html елементи
Приоритети в Css и тяхното увеличаване поради Важно, комбинация и групиране на селектори, потребителски и авторски стилове
Височина, ширина и преливане - CSS правила за описание на областта на съдържанието в блоково оформление
Размерни единици (пиксели, Em и Ex) и правила за наследяване в CSS Различен стил за вътрешни и външни връзки чрез CSS
Селектори на псевдо-класове и псевдо-елементи в CSS (hover, first-child, first-line и други), връзки между Html код тагове
Плаване и изчистване в CSS - инструменти за блоково оформление