Css - какво искаш стила лист
Говорете за Cascading Style Sheets. Тяхното приложение дава възможност да отидете на следващото ниво, за да създадете уеб сайтове и постигане на желаните ефекти проектират по-прости и по-логичен начин.
Какви са стилове?
Cascading Style Sheets или CSS (от английски Cascading Style Sheets) са следствие от по-нататъшното развитие на HTML и ни дават възможност да преминете към следващото ниво на информация за ефективността. Стил листове позволяват да се разделят семантични съдържание на страницата и нейното проектиране.
Тъй като ние не забравяйте, в първите версии на стандарта HTML не означава да се контролира появата на тази информация не е била предоставена. Общата концепция на хипертекст е режисиран от наличието на информация за всяко устройство с възможности за възпроизвеждане на текст. Тя се препоръчва за маркиране използват само логически тагове, които определят заглавия, подзаглавия, списъци, параграфи, цитати и т.н. - това е, тези елементи, които изграждат структурата на документа. Тълкуване на същия вид остава напълно на съзнанието на терминал терминал.
Оттогава обаче много се е променил, и стандартен HTML е загубил първоначалното хармония. Първоначално, Netscape е добавил "подобрени" тагове, които позволиха по-широко да се контролира появата на предоставената информация. Нововъведението уловени и всички разширения Netscape станаха стандарт де факто. След това също толкова добре, аз получих Microsoft. Когато се събудих, за HTML представена ужасна смес логически и декорация тагове несъвместими разширения и напълно спряла да отговаря оригинална концепция - подадете информация от всяко устройство, независимо от нейните характеристики на информация заключение.
Като има предвид, мащабна е била предприета стандартизация. В резултат на това светлината се яви стандарт HTML 3.2. Той не е революционна, но слагам само на места и всички иновации и разработване на общи насоки за производителите на браузъри. Революционни промени са въведени в новия стандарт - HTML 4.0, или, както го наричаха, Dynamic HTML. Лечебните групи бяха въведени, стилове и универсален модел обект браузър.
Как тогава има проблем с представителството на външния вид на информацията, е решен? Това е революционен подход. Всичко регистрация се препоръчва да се въвеждат във външен файл стил. Но главната страница ще съдържа само информация и връзки към необходимите стилове.
Стилов трябва да пиша само веднъж при създаването на сайт за всеки от устройствата, на които показвате е планирано информация. В допълнение, стила лист може да бъде единна за целия сайт. И, следователно, няма да се налага да се повтаря една и съща описанията на стилове на всяка страница.
Поставянето на цялата информация стил в един външен файл се отваря за нас и други полезни функции - за промяна на съдържанието на само един стил файл, можем да в секунди промени цялата Дизайнът на сайта (!). Освен това, няма други промени не са необходими. Разбира се, това е вярно само ако оригиналния сайт е проектиран правилно.
След като приключва малко с теорията, нека да преминем към тази практика, и ние ще започнем с въпрос за свързване на стила лист за HTML-файл.
Свързване стилови
За да се изпълни тази задача, можем да използваме един от 3-те предложени методи:
- външен файл
- описанието в секция глава
- Пътека-описание
Да започнем с най-простите, така наречените редови описание или описание, вграденият в маркера:
С атрибута опция стил можем да определим необходимите параметри във всеки стил маркер. Това е най-лесният начин, и той работи в един маркер. Но представете си колко увеличение на размера на файла и как неудобно би било правилно, ако зададете стил за всеки маркер. Този метод не се различава твърде много, например, чрез директен вид описание използването на маркера .
Тя е много по-лесно да се определи предварително всички необходими стилове и след това просто да ги прилага по отношение на подходящите тагове. Това е Вторият метод - в описанието на секцията глава. Тя се отнася за цялата страница. Определяне на стилове се извършва от класовете, които представляват списъци с определение на всички необходими параметри на конструкцията.
При използване на този метод описанието на стилове трябва да бъде поставен в раздела за глава:
Сега тези стилове могат да се използват навсякъде в HTML-код. За да направите това, използвайте следната структура:
Както можете да видите, че не е твърде трудно. Основното нещо, за да се разберат основните принципи. В допълнение към определянето на нови класове, ние също имаме възможността да замени стандартните таговете. Например, маркерът
:
Сега целия текст в таговете ще изглежда така, както е определено в данните за стил. Това е много удобно и го прави лесно да се адаптират съществуващите стилове страница за използване. В допълнение, това до известна степен намалява количеството на файл, поради липса на резервни атрибут клас.
И накрая, третият начин - да се опише налагането на стилове във външен файл. Обхватът на влиянието му се простира до всички файлове, които са включени в описанието. Това е начинът, по най-в съответствие с концепцията на HTML 4.0. Ако трябва да промените външния вид на сайта, това ще бъде достатъчно, за да се коригира само един този файл. Сравнете го с предишните методи. В един от тях ще трябва да промените описанието на всяка страница, а в друг, още повече - за всеки таг, който, разбира се, това не е вдъхновяващо.
Как тогава направи въвеждането на външен файл? За да започнете, да създадете файл стил с описание на всички класове от които се нуждаем (mystyle.css):
Това е най-удобният начин, а основният стил лист препоръчва да го използвате.
Защо е "основен" Аз казах, че? Факт е, че на практика ние трябва да използваме трите метода, и тук влиза в действие "каскада" стил. Но ние ще говорим вече следващия път.
Ние продължаваме да се говори за използването на стилове. Първо, нека да се справят с Cascading Style Sheets, а след това пристъпва към разглеждане на синтаксиса и преглед на най-често срещаните параметри, използвани в изграждането на стилове.
Cascading Style Sheets
Така че, да започнем с това, ние трябва да разберем защо стилът се нарича каскаден. Извинете ме, скъпи читателю, аз отново цитат означава въвеждането на стилове на страница:
- използвате отделен файл стил и да я поставите използването на маркера
- описание на стила в заглавната част на документ
- приложите стил като параметър в маркера.
Каскадата е, че стилове могат да бъдат обезсилени. Горният списък на начини за въвеждане на стилове съответства Замени на поръчката. Процесът по веригата може да замени течение.
Например, ние сме дефинирали във външен файл стил, че текстът в маркера
Тя трябва да бъде написана с помощта на шрифта 10. Но ако заглавната страница, ние допълнително се отбележи, че един и същ текст в маркера
трябва да бъдат написани на шрифта 12 точки, текстът ще се появи точно такъв размер - това е, заглавна страница стил предефинирани стил във външен файл.
Какво прави той? О, това е много полезно нещо. И сега аз ще го покажа на конкретен пример. Да предположим, че за всички връзки в заглавната част на сайта ни идентифицира следния стил:
И, следователно, всеки текст, който е хипервръзка, автоматично става червено и престава да се подчертае. Затова решихме в крайна сметка да се посочи страницата на авторските права, но това не е много забележим, така че да не се фокусира върху това. Но, въпреки това, ние искаме да авторското право е и отправна точка. Направете това, ние се нуждаем само на сайта на една страница и е определено от този допълнителен клас е неуместно. В този случай, ние се притекат на помощ на Cascading Style Sheets. Достатъчно е да се замени локално цвета на връзката:
Направихме това чрез определяне на стил, а той, както си спомняте, работи само в рамките му, който е бил идентифициран. Това, което трябва.
Вероятно сте забелязали, че в горния пример, аз въведен нов маркер . Той е разработен специално за такива случаи. Всичко, което прави - то дефинира определена област, към която можем да приложим стил. Това е много удобно, защото таг Тя не се придържаме преди или след себе си ненужно кирки (т.е. празен вертикално пространство), също както и маркер
.
При всички тагове, за да определи по-добре стилове с помощта на класа? Най-често се използва за тази цел, една от следните структури:
свободен край
). Но стила на текста, който без основното съдържание на страницата, най-добре е да се направи предефиниране таг
, а не определяне отделен клас.
След като приключва с каскада и нека да поговорим за синтаксис.
синтаксис CSS
Описанието на всеки клас се състои от структурата по следния начин:
Първо, в него се посочва името на класа - тя може да бъде произволно, но е желателно да се даде още смислено име. Освен това, в скоби <> изброява всички параметри, необходими за този клас. Параметрите са разделени с запетая. Ето още един пример, при който се използва дълго описание:
Имайте предвид, че в двата модела започнах името на класа, със срок и по този начин се определи универсален клас, т.е. такъв, който може да се прилага към всеки маркер. И това се прави с помощта на следния синтаксис:
Тъй като има универсални класове, които, може би, има някои други? Добре, че все още са така наречените маркирани класове:
Класът, определено по този начин, само работи в тага, за които е предназначен, както и за всички други ще бъдат игнорирани:
Ние не можем да се определят параметрите за един маркер, но за няколко. За тази цел, при определяне на списъка със стилове достатъчно от тях, отделени със запетаи:
Това се нарича група, и в този случай сме определили и
, и
Ако замените съществуващите тагове в описанието на стила, който не може да уточни всички параметри, но само тези, които искаме да се промени. Всички останали параметри вземат стойностите по подразбиране, които са различни за различните етикети.
псевдо
В CSS има такова нещо като псевдо-класа. За разлика от конвенционалните клас, псевдо действие не се прилага за целия текст, към който се прилага стила, но само част от него и е възможно само в определена държава. За да стане по-ясно, нека разгледаме ефекта, в която се подчертава връзките само когато мишката върху тях. Ефект достатъчно общ, и това може да се види, включително на този сайт. Ето един фрагмент от стиловете маса, която може да се постигне по-горе ефекти:
Горният ред - този стандарт таг замяна , който забранява позоваване на стрес, но по-ниско - определение стил за псевдо задържа и в който се описва стила на връзки, когато курсорът е върху него.
И тук е друг пример за псевдо - определяне на букви в началото на параграфа:
Имайте предвид, че в действителност, а в друг случай, ефектът от стил се предоставя на всяко конкретно състояние (потребителят ще кликнете върху линка) или на част от текст (промяна само първия абзац на писмото). Това е смисъла на псевдо-класовете.
Основните параметри на CSS
Това, че настройките на стила определят какво ще изглежда нашата част от текст, както и основните от тях е желателно да се знае наизуст, а за другите да пазят лесна справка.
Всички параметри, използвани за определяне на стила, могат да бъдат разделени в няколко големи групи:
- за управление на шрифта (слушалки, размера, цвета, наклона, съдържанието на мазнини.)
- контрол параграф форматиране (подравняване, разстояние между редовете, разстоянието между думите, отстъп червена линия).
- На блока за управление на имоти (отстъп наляво, надясно и най-отдолу място на блока на страницата, видимостта на каре.)
- други, които не се вместват в нито една от групите, изброени по-горе (референтни страници цвят, промяна на вида на курсора.)
Нека разгледаме параметрите, използвани за контрол на външния вид на текст и параграф форматиране - като най-често използваните.
опции Основни шрифтове
Основните параметри на параграфа
Брой в СГО
В имота, който искате да зададете размера, можете да използвате няколко метода за да ги зададете:
- Относително процент (%)
- относителен размер чрез използване на вербалната описание (по-голям, по-малък, XX-малък, х-малки, малки, средни, големи, х-голям, XX-голям)
- абсолютният размер на печат единици - размерът може да бъдат посочени в точки (PT), върховете (PC), пиксел (пиксели), средна ширина на буквата "М" (ги), средната ширина на буквата "х" (EX)
- абсолютен размер в стандартни единици на дължина - размерът може да бъде определен в сантиметри (см), милиметра (ММ), инчови (в)
- абсолютна пиксел (пиксели)
Настройване на цветове в CSS
Цвят на тези свойства, когато е необходимо, може да бъде определено по един от следните три начина:
- използвайки имената на цветове: жълто, червено, зелено, сиво.
- шестнадесетичен спецификация цвят в #RRGGBB формат: # ff0000, # 883490, #ffffff.
- десетични уточняване цветните компоненти в RGB формат (червено, зелено, синьо): RGB (255,0,0), RGB (100,23,78).
- И ние сложи край на тази статия с няколко примера описват листа стил: