CSS (каскадни стилови таблици)е стилов език, който позволява стилизиране (като шрифтове и цвят) да бъде прикачено към структурирани документи (като HTML документи и XML приложения). Обикновено CSS стиловете се използват за създаване и промяна на стила на елементите на уеб страницата и потребителски интерфейсинаписано в HTML езиции XHTML, но може да се приложи и към всякакъв вид XML документ, включително XML, SVG и XUL. Като разделя стила на представяне на документите от съдържанието на документите, CSS улеснява създаването на уеб страници и поддържането на сайтове.
CSS поддържа специфични за медиите стилови таблици, така че авторите да могат да приспособят представянето на своите документи към тях визуални браузъри, слухови апарати, принтери, брайлови устройства, преносими устройства и др.
Каскадните стилови таблици описват правилата за форматиране на елементи с помощта на свойства и позволени стойноститези имоти. За всеки елемент можете да използвате ограничен набор от свойства, други свойства няма да имат ефект върху него.
Декларацията на стила има две части: селектори реклами. В HTML имената на елементите не са чувствителни към главни и малки букви, така че "h1" работи по същия начин като "H1". Декларацията се състои от две части: името на имота (например цвят) и стойността на имота (сив). Селекторът казва на браузъра кой елемент да форматира, а блокът за декларация (кодът във фигурни скоби) изброява командите за форматиране - свойства и техните стойности.
Ориз. 1. Рекламна структура Въпреки че горният пример се опитва да повлияе само на няколко свойства, необходими за изобразяване на HTML документ, той сам по себе си се квалифицира като стилов лист. В комбинация с други стилови листове (един основен CSS функцияе, че стиловите листове са обединени), правилото ще определи окончателното представяне на документа.
Видове каскадни стилови таблици и тяхната специфика
1. Видове стилови листове
1.1. Външен стилов лист
Външен стилов листпредставлява текстов файлс разширение .css, което съдържа набор от CSS стилове за елементи. Файлът се създава в редактора на кодове, точно като HTML страница. Файлът може да съдържа само стилове, без HTML маркиране. Външен стилов лист се прикачва към уеб страница с помощта на етикет разположени вътре в секцията
. Тези стилове работят за всички страници на сайта.Можете да прикачите множество таблици със стилове към всяка уеб страница, като добавите няколко тагове последователно , указвайки целта на този стилов лист в атрибута на медийния таг. rel="stylesheet" показва типа връзка (връзка към 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 трябва да е уникална, може да се появи само веднъж на една страница и трябва да съдържа поне един знак. Стойността не трябва да съдържа интервали.
Няма други ограничения за това каква форма може да приеме идентификаторът, по-специално идентификаторите могат да бъдат само цифри, да започват с цифра, да започват с долна черта, само препинателни знаци и т.н.
Уникалният идентификатор на елемент може да се използва за различни цели, включително като начин за препратка към конкретни части от документ с помощта на идентификатори на фрагменти, като начин за насочване към елемент в скриптове и като начин за стилизиране на конкретен елемент от CSS .
#sidebar (ширина: 300px; float: ляво;)
2.5. Селектор на потомък
Селекторите на наследници прилагат стилове към елементи, разположени вътре в контейнерен елемент. Например ul li (преобразуване на текст: главни букви;) ще избере всички li елементи, които са деца на всички ul елементи.
Ако искате да форматирате дъщерните елементи на определен елемент, трябва да дадете на този елемент стилов клас:
p.first a (цвят: зелен;) - даден стилще се прилага към всички връзки, наследници на абзаца с класа first ;
p .first a (цвят: зелено;) - ако добавите интервал, тогава връзките, разположени във всеки таг .first клас, който е дъщерен на елемента, ще бъдат стилизирани
Първо a (цвят: зелен;) - този стил ще бъде приложен към всяка връзка, разположена вътре в друг елемент, обозначен с .first клас.
2.6. Детски селектор
Дъщерен елемент е пряк дъщерен елемент на съдържащия го елемент. Един елемент може да има множество дъщерни елементи и всеки елемент може да има само един родителски елемент. Дъщерният селектор позволява да се прилагат стилове само ако дъщерният елемент идва непосредствено след родителския елемент и няма други елементи между тях, т.е. дъщерният елемент не е вложен в нищо друго.
Например p > strong ще избере всички силни елементи, които са деца на p елемента.
2.7. Сестра селекционер
Връзките между братя и сестри възникват между елементи, които имат общ родител. Селекторите на сродни елементи ви позволяват да избирате елементи от група сродни елементи.
h1 + p - избира всички първи параграфи непосредствено след който и да е таг
без да се засягат останалите параграфи;
h1 ~ p ще избере всички параграфи, които са братя и сестри на всяко заглавие h1 и непосредствено след него.
2.8. Селектор на атрибути
Селекторите на атрибути избират елементи въз основа на името на атрибута или стойността на атрибута:
[attribute] - всички елементи, съдържащи посочения атрибут, - всички елементи, за които е зададен атрибут alt;
selector[attribute] - елементи от този тип, които съдържат посочения атрибут, img - само картини, за които е зададен атрибут alt;
selector[attribute="value"] — елементи от този тип, които съдържат посочения атрибут с определена стойност, img — всички картинки, чиито имена съдържат думата цвете;
selector[attribute~="value"] - елементи, съдържащи частично дадената стойност, например, ако даден елемент има няколко класа, разделени с интервал, 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 - всеки елемент, който се задържа с курсора на мишката;
:focus - интерактивен елемент, който е навигиран с клавиатурата или активиран с мишката;
: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 - избира елемента, който е 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 (ширина: 500px;) .box (float: ляво;) .clear (изчистване: и двете;)
5.2. Каскада
Каскадное механизъм, който контролира крайния резултат в ситуация, в която различни CSS правила се прилагат към един и същи елемент. Има три критерия, които определят реда, в който се прилагат свойствата - правилото !important, спецификата и реда, в който са включени листовете със стилове.
Правило! важно
Теглото на правило може да бъде указано с помощта на ключовата дума !important, която се добавя веднага след стойността на свойството, например span (font-weight: bold!important;) . Правилото трябва да бъде поставено в края на декларацията преди затварящата скоба, без интервал. Такава декларация ще има предимство пред всички останали правила. Това правило ви позволява да отмените стойността на свойство и да зададете нова за елемент от група елементи в случай, че няма директен достъп до стиловия файл.
Специфичност
За всяко правило браузърът изчислява специфика на селектораи ако елементът има противоречиви декларации за свойства, се взема предвид правилото с най-голяма специфичност. Стойността на специфичността има четири части: 0, 0, 0, 0. Специфичността на селектора се определя, както следва:
0, 1, 0, 0 се добавя за id;
за клас 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, тогава второто правило ще спечели.
Ред на свързаните таблици
Можете да създадете множество външни таблици със стилове и да ги свържете към една и съща уеб страница. Ако различните таблици съдържат различни стойности на свойствата на един елемент, тогава в резултат на това правилото ще се приложи към елемента, който е в листа със стилове в списъка по-долу.
CSS (Cascading Style Sheets) е кодът, който използвате за стилизиране на вашата уеб страница. Основи на CSS да ви помогне да разберете от какво се нуждаете, за да започнете. Ще отговорим на въпроси като: Как да направя текста си черен или червен? Как да накарам съдържанието да се показва на определено място на екрана? Как да украся уеб страницата си с фонови изображенияи цветя?
И така, какво е CSS?
Подобно на HTML, CSS всъщност не е език за програмиране. Това не е език за маркиране, а език на стиловия лист.Това означава, че позволява селективно прилагане на стилове към елементи в HTML документи. Например, за да изберете всичкопараграфни елементи на HTML страница и промените текста вътре в тях от черен на червен, трябва да напишете този CSS:
P ( цвят: червен; )
Нека опитаме: вмъкнете тези три css низовев нов файлвъв вашия текстов редактори след това запазете файла като style.css във вашата папка styles.
Но все още трябва да приложим CSS към нашия HTML документ. В противен случай стилът на CSS няма да повлияе на начина, по който вашият браузър изобразява HTML документа. (Ако не сте следвали нашия проект, прочетете Работа с файлове и Основи на HTML, за да разберете какво трябва да направите първо.)
- Отворете файла index.html и поставете следния ред някъде в заглавката между итагове:
- Запазете index.html и го заредете в браузъра си. Трябва да видите нещо подобно:
Ако текстът на абзаца ви сега е червен, поздравления! Написахте първия си успешен CSS!
Анатомия на набор от CSS правила
Нека да разгледаме горния CSS малко по-подробно:
Цялата структура се нарича набор от правила(но често "правило" за кратко). Обърнете внимание и на имената на отделните части:
Селектор Името на HTML елемента в началото на набора от правила. Той избира елемента(ите), към който да приложи стила (в този случай p елементите). За да стилизирате друг елемент, просто сменете селектора. Декларация Едно правило, като цвят: червен; показва кой от Имотиелемента, който искате да стилизирате. Свойства Начините, по които можете да стилизирате конкретен HTML елемент (в този случай цветът е свойство на елементи, които определят абзац от текст.">
). В CSS вие избирате кои свойства искате да засегнете във вашето правило. Стойност на свойството Отдясно на свойството, след двоеточието, имаме стойност на имота, който избира един от множеството възможни стойностиза това свойство (има много цветови стойности освен червено).
Обърнете внимание на важните части от синтаксиса:
- Всеки набор от правила (с изключение на селектора) трябва да бъде увит във фигурни скоби (()).
- Трябва да използвате двоеточие (:) във всяка декларация, за да отделите свойството от неговите стойности.
- Във всеки набор от правила трябва да използвате точка и запетая (;), за да отделите всяка декларация от следващата.
По този начин, за да промените няколко стойности на свойства наведнъж, просто трябва да ги напишете разделени с точка и запетая, така:
P (цвят: червен; ширина: 500px; рамка: 1px плътно черно; )
Избиране на множество елементи
Можете също да изберете множество елементи от различни типове и да приложите един и същ набор от правила към всички тях. Добавете няколко селектора, разделени със запетаи. Например:
P,li,h1 ( цвят: червен; )
Различни видове селектори
Има много различни видовеселектор. По-горе само разгледахме селектор на елементи, който избира всички елементи от определен тип в HTML документ. Но можем да направим избора по-конкретен. Ето някои от най-често срещаните типове селектори:
| Име на селектора | Какво избира | Пример |
|---|---|---|
| Селектор на елемент (понякога наричан селектор на етикет или тип) | Всички HTML елементи от посочения тип. | стр избира
|
| ID селектор | Елементът на страницата с посочения идентификатор (на една HTML страница може да има само един елемент с произволен идентификатор). | #my-id избира |
| селектор на клас | Елемент(и) на страницата с указания клас (на страницата могат да бъдат декларирани множество екземпляри на класа). | .Моят клас избира |
| Селектор на атрибути | Елементът(ите) на страницата с посочения атрибут. | img избира  но не |
| Псевдо селектор на клас | Посоченият елемент(и), но само ако възникне определено състояние, като например задържане. | a: задържам избира , но само когато показалецът на мишката е над връзката. |
Шрифтове и текст
Сега, след като разгледахме някои основи на CSS, нека добавим още правила и информация към нашия файл style.css, за да направим нашия пример да изглежда добре. Първо, нека направим нашите шрифтове и текст да изглеждат малко по-добре.
- Първо се върнете и намерете този, който вече сте запазили някъде. Добавяне на елемент някъде в заглавката на вашия index.html (отново навсякъде между таговете и). Ще изглежда нещо подобно:
- След това изтрийте съществуващото правило във вашия файл style.css. Това беше добър тест, но червеният текст наистина не изглежда добре.
- Добавете следните редове към Правилно място, заменяйки низа на контейнера с действителния низ от семейство шрифтове, който сте получили от Google Fonts. (font-family просто означава кой шрифт(ове) искате да използвате за вашия текст). Това правило задава глобалния основен шрифт и размера на шрифта за цялата страница (тъй като е родител на цялата страница и всички елементи в нея наследяват същия размер на шрифта и семейството на шрифта): html (размер на шрифта: 10px; /* px означава "пиксели": основният шрифт ще бъде с височина 10 пиксела * / font -family: placeholder: това трябва да е името на шрифта от Google Fonts )
Забележка: Всичко в CSS документа между /* и */ е CSS коментар , които браузърът игнорира при изпълнение на кода. Това е мястото, където можете да пишете полезни бележки за това, което правите.
- Сега ще зададем размера на шрифта за елементи, съдържащи текст в тялото на HTML (
и дефинира абзац от текст.">
). Също така ще центрираме текста на заглавието и ще зададем някаква височина на реда и разстояние между буквите в тялото на документа, за да го направим малко по-четлив: h1 ( размер на шрифта: 60px; подравняване на текста: център; ) p, li (размер на шрифта: 16px; височина на реда: 2; разстояние между буквите: 1px;)
Можете да коригирате стойностите на px както желаете, за да изглежда дизайнът ви така, както искате, но като цяло вашият дизайн трябва да изглежда така:
Блокове, блокове и още блокове
Едно нещо, което ще забележите при писането на CSS е, че голяма част от него е свързано с блокове - персонализиране на техния размер, цвят, позиция и т.н. Повечето HTML елементи на една страница могат да се разглеждат като блокове, подредени един върху друг.
Не е изненадващо, че CSS оформлението се основава предимно на кутия модел. Всеки от блоковете, които заемат място на вашата страница, има свойства като:
- padding , интервал само около съдържанието (например около параграф от текст)
- граница , плътна линия, която се намира до подложката
- margin , пространството около външната страна на елемента
В този раздел ние също използваме:
- ширина (ширина на елемента)
- цвят на фона, цветът зад съдържанието и елементите за подплата
- color , цветът на съдържанието на елемента (обикновено текст)
- text-shadow: задава сянка върху текст вътре в елемент
- дисплей: задава режима на показване на елемента (засега не се притеснявайте за това)
Така че нека да започнем и да добавим повече CSS към нашата страница! Продължете да добавяте тези нови правила в долната част на страницата и не се страхувайте да експериментирате с промяна на стойностите, за да видите как работи.
Промяна на цвета на страницата
html (цвят на фона: #00539F;)Това правило задава цвета на фона на цялата страница. Променете цветовия код в горната част на цвят, който е .
Справяне с тялото
тяло (ширина: 600px; поле: 0 автоматично; цвят на фона: #FF9500; подложка: 0 20px 20px 20px; рамка: 5px плътно черно; )Сега за
елемент. Тук има доста декларации, така че нека да ги прегледаме една по една:- ширина: 600px - принуждава тялото винаги да е широко 600 пиксела.
- марж: 0 авто; - когато зададете две стойности за свойства като margin или padding, първата стойност на елемента засяга горната част идолната страна (в този случай ги прави 0) и втората стойност вляво идясната страна (тук auto е специална стойност, която разделя наличното пространство хоризонтално еднакво отляво и отдясно). Можете също да използвате една, три или четири стойности, както е описано.
- цвят на фона: #FF9500; - както преди, задава цвета на фона на елемента. Използвах червеникаво оранжево за тялото, за разлика от тъмно синьо за ). Всички други елементи трябва да бъдат деца на този елемент."> елемент, но не се колебайте да експериментирате.
- подложка: 0 20px 20px 20px; - имаме четири зададени стойности на подложка, за да дадем малко пространство около нашето съдържание. Този път не задаваме подложка в горната част на тялото, а 20px отляво, отдолу и отдясно. Стойностите се задават отгоре, отдясно, отдолу, отляво в този ред.
- рамка: 5px плътно черно; - просто задава плътна черна рамка с ширина 5 пиксела от всички страни на тялото.
Позициониране и стилизиране на заглавката на началната ни страница
h1 (поле: 0; подложка: 20px 0; цвят: #00539F; текстова сянка: 3px 3px 1px черно; )Може би сте забелязали, че има ужасно разкъсване в горната част на тялото. Това се случва, защото браузърите прилагат някои стил по подразбиранеза елемент
(в сравнение с други), дори ако изобщо не сте приложили CSS! Това може да звучи като лоша идея, но ние искаме уеб страница без стилове да има основна четливост. За да се отървем от празнината, ние отменяме стила по подразбиране, като задаваме margin: 0; .
След това зададохме горната и долната подложка на 20px и направихме текста на заглавката със същия цвят като цвета на фона на html.
Тук сме използвали едно доста интересно свойство, което е text-shadow, което прилага сянка към текстово съдържаниеелемент. Има следните четири значения:
- Стойността на първия пиксел определя хоризонтално отместванетекстова сянка - колко далеч се движи напречно: отрицателна стойност трябва да го премести наляво.
- Стойността на втория пиксел определя вертикално отместванетекстова сянка - колко далеч се движи надолу, в този пример: отрицателна стойност трябва да го движи нагоре.
- Стойността на третия пиксел определя радиус на размазванесенки - по-голямата стойност ще означава по-размазана сянка.
- Четвъртата стойност определя основния цвят на сянката.
Отново опитайте да експериментирате с различни стойности, за да видите какво можете да измислите.
Последна актуализация: 21.04.2016
Всеки html документ, без значение колко елемента съдържа, ще бъде по същество "мъртъв" без използването на стилове. Стиловете или по-добре казано каскадните стилови таблици (Cascading Style Sheets) или просто CSS определят представянето на документа, неговия външен вид. Нека да разгледаме набързо прилагането на стилове в контекста на HTML5.
Стилът в CSS е правило, което казва на уеб браузъра как да форматира даден елемент. Форматирането може да включва задаване на цвета на фона на даден елемент, задаване на цвета и вида на шрифта и т.н.
Дефиницията на стила има две части: селектор, който сочи към елемента и блок за декларация на стил- набор от команди, които задават правила за форматиране. Например:
Div(фонов цвят:червен; ширина: 100px; височина: 60px; )
В този случай селекторът е div. Този селектор указва, че този стил ще бъде приложен към всички div елементи.
След селектора във фигурни скоби идва блок за декларация на стил. Командите са дефинирани между отварящите и затварящите фигурни скоби, които показват как да форматирате елемента.
Всяка команда се състои от свойство и стойност. И така, в следния израз:
цвят на фона: червен;
фоновият цвят представлява свойството, а червеният представлява стойността. Имотът определя специфичен стил. Има много свойства на CSS. Например фоновият цвят указва цвета на фона. Двоеточие е последвано от стойността за това свойство. Например горната команда задава свойството цвят на фона на червено. С други думи, цветът на фона на елемента е зададен на "червен", т.е. червен.
Всяка команда е последвана от точка и запетая, която отделя тази команда от останалите.
Наборите от такива стилове често се наричат стилови листове или CSS (каскадни стилови листове или каскадни стилови листове). Съществуват различни начинистилови определения.
стилов атрибут
Първият начин е да вградите стилове директно в елемента с помощта на атрибута style:
Стилове
Тук са дефинирани два елемента - заглавието h2 и блокът div. Заглавието има син цвят на текста, дефиниран чрез свойството цвят. Блокът div има свойства за ширина (width), височина (height) и цвят на фона (background-color).
Вторият начин е да използвате елемента style в html документа. Този елемент казва на браузъра, че данните вътре са css код, не html:
Стилове
Резултатът в този случай ще бъде абсолютно същият като в предишния случай.
Често елементът style се дефинира в елемента head, но може да се използва и в други части на HTML документа. Елементът style съдържа набори от стилове. Всеки стил първо има селектор, последван от същите дефиниции на css свойства и техните стойности във фигурни скоби, които бяха използвани в предишния пример.
Вторият начин прави html кодпо-чист, като поставите стиловете в елемента style. Но има и трети начин, който е да поставите стиловете във външен файл.
Нека създадем в същата папка с html страницатекстов файл, който ще преименуваме на styles.cssи дефинирайте следното съдържание в него:
H2( цвят: син; ) div (ширина: 100px; височина: 100px; цвят на фона: червен; )
Това са същите стилове, които бяха вътре в стиловия елемент. И също така променете кода на html страницата:
Стилове
Вече няма елемент стил, но има елемент връзка, който включва създадения по-горе файл styles.css:
По този начин, дефинирайки стилове във външен файл, ние правим html кода по-чист, структурата на страницата е отделена от нейния стил. Когато са дефинирани по този начин, стиловете са много по-лесни за модифициране, отколкото ако са дефинирани вътре в елементи или върху стиловия елемент и това е предпочитаният начин в HTML5.
Използването на стилове във външни файлове ви позволява да намалите натоварването на уеб сървъра с помощта на механизма за кеширане. Тъй като уеб браузърът може да кешира css файла и да извлече желания css файл от кеша при следващия достъп до уеб страницата.
Възможно е също всички тези подходи да бъдат комбинирани и за един елемент някои css свойства да са дефинирани вътре в самия елемент, други css свойства да са дефинирани вътре в стиловия елемент, а трети да са във външен включен файл. Например:
И във файла style.cssдефиниран е следният стил:
Div(ширина:50px; височина:50px; цвят на фона:червен; )
В този случай елементът div има свойство width, дефинирано на три места, с различен смисъл. Каква стойност ще бъде приложена към елемента в крайна сметка? Тук имаме следната приоритетна система:
Ако елементът има дефинирани вградени стилове, те имат най-висок приоритет, т.е. в горния пример общата ширина ще бъде 120 пиксела
Стиловете с най-малък приоритет са тези, дефинирани във външния файл.
html атрибути и css стилове
много html елементиви позволяват да задавате стилове на показване с помощта на атрибути. Например, на редица елементи можем да използваме атрибутите за ширина и височина, за да зададем съответно ширината и височината на елемента. Този подход обаче трябва да се избягва и трябва да се използват CSS стилове вместо вградени атрибути. Важно е ясно да се разбере, че HTML маркирането трябва да предоставя само структурата на html документа, а целият му външен вид, стил трябва да се определят от CSS стилове.
Валидиране на CSS код
В процеса на писане на CSS стилове може да възникнат въпроси дали е правилно да се дефинират стилове по този начин, дали са правилни. И в този случай можем да използваме css валидатора, който е достъпен на
технология cssизползвани предимно от дизайнери, защото те създават дизайна на сайта. Въпреки това е грешка да се предполага, че уеб администраторите cssне е необходимо да се знае. Достатъчно е да си припомним поне един пример от описанието на раздела. В допълнение към преносимостта на вашия сайт, стиловите таблици ви позволяват да създавате различни класически дизайнерски решения (например падащо меню). И заедно с ви позволяват да създавате динамични HTML страници (DHTML), красотата и удобството на които понякога са просто невероятни.
Разбира се, за да създадете такива неща, трябва да се запознаете с Основи на CSS. И тази категория на сайта ще ви помогне да го направите възможно най-бързо и ефективно.
Пълен курс по HTML, CSS и оформление на уебсайт:
След като прочетете статии за основите на CSS, ще научите:
1) Синтаксис css.
2) Методи и техните работни приоритети css стил.
3) Селекторът въвежда css.
4) cssхакване на браузъра.
5) Правила за писане css.
6) Как да създадете подсказка за css.
7) Как да промените външния вид на първата буква чрез css.
8) Как да зададете типа на курсора чрез css.
9) Как да промените външния вид на курсора, когато задържате мишката с css.
10) Как да направите подменю на css.
11) За замяна на имущество мин. ширинав IE6.
12) Относно валидността css.
13) Как да зададете цвета на посетените линкове.
14) Как да зададете отстъп на абзац с помощта на css.
15) Как да направите заоблени ъгли css.
16) Как да поставите вашето изображение вместо маркер за списък css.
17) Как да направите фон картина.
18) Как да затъмните фона css.
19) Какво представляват дъщерните селектори css.
20) В какви мерни единици са налични css.
21) Как да направите затъмняващ изскачащ прозорец.
22) Как да направите анимиран фон.
23) Как да направите красиво текстово поле.
24) Как да промените изображението, когато го задържите с курсора на мишката.
25) Какво представляват псевдо елементите css.
26) Какво е CSS спрайтове.
27) Как да натиснете долния колонтитул (мазето) до дъното css.
28) Как да предотвратите преоразмеряване текстово полепрез css.
29) Как да нарисувате триъгълник през css.
30) Как да се справим със събитието щракнетепрез css.
31) Как да настроите курсора чрез css.
32) Как да направите хоризонтално падащо меню на css.
33) Как да използвам нестандартен шрифт в сайта.
34) Как да промените фона на радио бутона чрез css.
35) Мога ли да използвам CSS3.
36) Как да направите сянка върху css.
37) Как да зададете атрибути клетъчна подложкаи разстояние между клеткитена css.
38) Как да div със 100% височина.
39) Относно съвместимостта z-индекси играч Youtube.
40) Защо е лошо да се използва -моз, -Госпожица, -webkitи други имоти.
41) Трябва ли да използвам Нулиране на CSS.
42) Как да подравните вертикално маркера на списъка.
43) Как да направите версия за печат.
44) Как да включите прозрачност между различни браузъри css.
45) Какво е clearfix.
46) Как да отмените частично плавам.
47) Как да направите оформление с две колони с еднаква височина на колоните.
48) Какво е адаптивно оформление.
49) Какво представляват медийните заявки css.
50) Какво е по-малко.
51) Как да css ефект на извит ъгъл.
52) Как да отзивчив „залепващ“ долен колонтитул на сайта.
53) Как да използвате API на Google Fonts.
54) Как да използвате услугата Livetools.
55) Как да активирате или деактивирате избора на текстна css.
56) Как да промените външния вид на елемент по подразбиране с помощта на свойство външен видв css.
57) Защо имате нужда page-break-inside свойствов css.
58) Как централно подравнено поле с променлива ширинана css.
59) Как да чисти CSS триъгълници.
60) Обслужване от генериране на CSS триъгълници.
61) Как да избутате долния колонтитул в долната част на страницата(позициониране).
62) Как да избутате долния колонтитул в долната част на страницата(метод на таблицата).
63) учене дързък. Инсталация и настройка.
64) Как да скриете елемент на страницана css.
65) учене дързък. Основи.
66) Кога да се използва reset.cssи normalize.css.
67) Услуга за изображенияс мощен API.
68) Как да css ефект на мащабиране.
69) Коала- бърза компилация дързъкфайлове.
70) Как се добавя CSS фото филтри.
71) учене дързък. Миксини.
72) учене дързък. Математически операции.
73) Анимиран икона на менюто в Sass.
74) учене дързък. Функции.
75) Какво е PostCSS.
76) Как да инсталирате и конфигурирате PostCSS.
77) Как да постъпя способността за оценка на CSS.
78) учене дързък. Стил на писане на код.
79) учене дързък. Разширение за родителски селектор.
80) 10 полезни SASS Миксини.
81) Как да постъпя Въведение в стил Star Wars с CSS.
82) Bootstrap 4. Въведение.
83) Bootstrap 4. Инсталация.
84) Bootstrap 4. Рестартирайте.
85) Bootstrap 4. Контейнери и ключови точки.
86) Bootstrap 4. Мрежова система.
87) Bootstrap 4. Свойства на огъване на мрежата.
88) В какви 5 иновации ще се появят CSS4.
89) Bootstrap 4. Какво е Jumbotrons.
90) Bootstrap 4. Помощни програми и типография.
91) Bootstrap 4. Компонентът Карти.
92) Разликата между класи документ за самоличностпример за етикет див.
93) Лоши елементи уеб дизайнкоито не трябва да се използват.
94) Bootstrap 4. модални прозорци.
95) О приоритети наследствов cssна практика
96) Как да набирам PSD оформлениеНа Bootstrap решетка. Част 1.
97) Как да създадете PSD оформление от Bootstrap решетка. Част 2.
98) Как да използваме псевдоелементи след и преди в CSS.
99) Относно характеристиките ширина и височина на блок в css.
100) Псевдоелементи след и псевдо-клас последно дете.
101) Как да показвате сайта на различни устройства.
102) Оформление на мрежата Bootstrap(част 1)
103) Оформление на мрежата Bootstrap(част 2)
104) Оформление на мрежата Bootstrap(част 3)
105) Оформление на мрежата Bootstrap(част 4)
Поздрави скъпи приятели! В този урок ще научите какво е cssза какво служи и как да го използваме правилно. Това е основен урок от поредицата "За най-малките", в който ще се опитам да обясня най-много обикновен езикосновите на стилизирането на документи с CSS - Cascading Style Sheets ( ° Свъзходящ Сстил Сшапки).
готино
Закачете го
Част 1: Основи на CSS
Този урок е логично продължение на урока "Основи на HTML за начинаещи", в който обясних подробно какво представлява езикът за маркиране на HTML, как работи и работи, основните тагове и правилата за оформление. В този урок ще се докоснем до стила на документ, създаден с помощта на език за маркиране, т.е. придаване на определена форма, определен цвят, последователност, размер различни елементии текст на страницата, нека да разгледаме най-добрите практики за работа с каскадни стилови таблици. След като разберете основите, ще можете сами да стилизирате HTML документи правилно и ефективно.
Обръщам внимание на факта, че това ръководствоние ще разглеждаме CSS само в контекста на използване с HTML документи в уеб браузър. ОТ използвайки CSSможете да стилизирате други документи, които използват различни езици за маркиране. Например стил XML в Приложения за Android, SVG или различни десктоп среди на Unix-подобни операционни системи.
Като цяло, CSS е доста елементарен формален език, който е измислен, за да описва външен виддокументи. Това предполага, че е доста проста и се състои от оригинални примитивни структури, които не са толкова трудни за научаване. Най-трудното нещо не е синтаксисът, не правилата за писане на конструкции, а голяма сума CSS свойстваза запаметяване, които изпълняват различни задачи. За щастие всички правила са на английски със съответното семантично натоварване. Простият превод на нашия език дава представа какво прави това правило и обратното - когато превеждаме какво искаме да постигнем определено свойствона английски език, има голяма вероятност да получим правилния имот. Това значително опростява запомнянето на CSS правила на интуитивно ниво. Например, ако трябва да зададете Цвят на фонадостатъчно е да се преведе на английски, в резултат на което получаваме Цвят на фона(Отделните думи в CSS се пишат с тире).
1.1 Използване на CSS в HTML документи
CSS е доста лесен за използване в HTML документи. Не може да бъде:
Както казах по-рано, CSS има доста прост синтаксис. Нека го разбием.
Рекламните правила са толкова прости, че могат да бъдат описани с едно изречение. Първо спелувано селектор, който избира конкретен елемент на страницата, след фигурни скоби са написани Имотико стойностислед двоеточие, а самите свойства са отделени един от друг точка и запетая. Всичко е.
Просто, нали?
Най-трудното нещо при една CSS декларация е селектора. Можете да научите повече за това как се формират и използват селекторите в урока Всички CSS селектори в един урок - това е много важна тема, тъй като тук се разкрива цялата магия на избирането на елементи на страницата, препоръчвам да гледате този урок непременно за всички начинаещи.
Накратко CSS селектор- (от думата изберете- select) е конструкция, с която започва всеки рекламен блок и която служи за избиране на елемент или елементи от същия тип на страницата за по-нататъшно стилизиране. Най-често определен се използва като селектор. Класетикет, например:
//HTML:
//CSS: .my-class (фонов цвят: #999; )Тук селекторът е класът my-class на тага div, който получава необходимия стил в CSS файла. В този случай цветът на фона е сив. Съответно, ако страницата има няколко тагове (не само divs) с класа Моят клас, всички тези елементи ще получат същия вид - сив фонцветове #999.
1.3 Каскадиране, наследяване и приоритет
Разбирането на принципа на каскадата е лесно. Нека да разгледаме един пример:
//HTML
От примера виждаме, че в CSS е написана каскада, в която класът .родителстои на първо място, след него с интервал се посочва дъщерен клас .деца, който отговаря за стилизирането само на дъщерния елемент. Дъщерният таг трябва да бъде вложен в тага с класа .родител. Ако в HTML документ премахнем етикета .децаот div таг с клас .родител, ще загуби своя дизайн, тъй като каскадата вече няма да работи, структурата е счупена.
Какво ще получим в резултат на нашия пример. Тагът .children ще получи цвят на текста #666, защото има по-дълга каскада, а тагът .parent ще бъде оцветен в #999. Родителският клас ще има 10px padding, докато дъщерният клас няма, тъй като свойството padding не се прилага към дъщерни елементи. Въпреки това, ако премахнем цвят: #666;при селектора .родител .деца, тогава текстът му ще бъде оцветен в цвета на родителя цвят: #999;
Каскадирането и наследяването ви позволяват да стилизирате конкретни елементи на страница и да приоритизирате кои стилове да се прилагат. Нека да разгледаме йерархията на приоритетите.
- С най-висок приоритет са имотите, чието строителство е посочено в края на декларацията им. !важно. Няма значение колко е вложен селекторът, как се използват стиловете - вградени или чрез включване на външен файл, те ще имат най-висок приоритет. Силно препоръчвам да не използвате !важнопри стилизиране, защото в процеса на поддръжка или дори в процеса на разработка, неизбежно ще възникне объркване в бъдеще, което само рефакторингът на стиловете ще спести. Както показва практиката, винаги има начин да не използвате !important.
Пример за използване!important: .my-class ( background-color: #999!important; ) - Следващият по важност приоритет са вградените стилове, които се записват в самия таг чрез атрибута стилкоито разгледахме преди:
- Стиловете, зададени в тага за стил в самия документ, имат предимство;
- Стиловете, прикачени към документа като външен CSS файл чрез тага, имат още по-нисък приоритет.
- С най-нисък приоритет, освен стандартните стилове на браузъра, са стиловете на родителския селектор пред дъщерните, например:
//HTML//CSS .my-class ( margin: 10px; ) ще има по-нисък приоритет при дъщерен стротколкото: .my-class p ( margin: 15px; ) Полученият етикетДалеч, далеч отвъд словесните планини.
.my-class в маркера class ще получи стойността на свойството margin: 15px.
Също така си струва да се отбележи, че броят на класовете или идентификаторите, както и наличието на допълнителни псевдо-класове и конструкции в селектора, повишават приоритета за стилизиране:
My-class.class-2 ( margin: 10px; ) ще има предимство пред: .my-class ( margin: 15px; )
и т.н. по логическа верига.
И накрая, относно приоритетите, важно е да се отбележи, че стиловете, които се появяват в следващите декларации по-надолу в документа, също имат най-висок приоритет. Например:
My-class ( margin: 10px; ) ще има предимство пред абсолютно същия селектор след него: .my-class ( margin: 15px; )
В резултат на това последният селектор в документния поток ще получи стойността на свойството margin: 15px, тъй като има най-висок приоритет. Въпреки това, ако селекторът на първата декларация беше по-дълъг, стойностите на свойствата му със сигурност щяха да имат предимство.
Що се отнася до наследството, тук всичко е просто. Всички дъщерни елементи наследяват някои свойства на родителя. Какви свойства се наследяват, трябва да разберете в процеса на изучаване различни свойстваи приложението им в практиката. Например цветът на текста винаги се наследява от потомци, докато подложката не е.
Част 2. CSS свойства
Мисля, че няма смисъл да се изброяват всички CSS свойства, тъй като има много от тях и е по-практично да се направи препратка към всички CSS свойства. Препоръчвам да изучавате свойствата на CSS в справочника на HTMLBook.
Нека обаче да разгледаме 10-те най-използвани CSS свойства в оформлението. Взех 10 голям CSSфайлове от моите проекти и сортира свойствата по честота на използване.
CSS собственост | Честота на употреба | Описание |
| цвят | 960 пъти | Цвят на текста на елемента:  |
| Цвят на фона | 755 пъти | Цвят на фона на елемента:  |
| размер на шрифта | 524 пъти | Размер на шрифта:  |
| непрозрачност | 435 пъти | Ниво на прозрачност на елемента:  |
| подплата | 372 пъти | Размерът на полетата вътре в елемента:  |
| ширина | 356 пъти | Ширина на елемента на блока, без граници и полета:  |
| марж | 311 пъти | Полета на елемента:  |
| височина | 305 пъти | Височината на блоков елемент, без граници и полета:  |
| тегло на шрифта | 280 пъти | Тегло на шрифта:  |
| подравняване на текст | 245 пъти | Хоризонтално подравняване на текста:  |
Част 3. Медийни заявки
CSS медийни заявкие база за създаване на адаптивно оформление, което ви позволява да стилизирате елементи в зависимост от размера на екрана или устройството, на което се показва уебсайтът. Технически медийно запитванее прост булев израз, който може да бъде верен или неверен. Условията за такъв израз са или параметрите на устройството, на което се показва уеб страницата, или размерът на екрана в пиксели.
В този урок ще разгледаме основните характеристики на медийните заявки, които са необходими за адаптивно оформлениесайтове и са практически полезни.
Медийната заявка се записва в самия стилов файл или в тялото на документа (стилов маркер) и започва с декларация на правило @медия. Структурата на медийната заявка е доста проста:
Условието може да бъде или устройство - всички (всички устройства), екран, печат, телевизия и т.н., или медийни функции, които задават параметри на устройството или разделителна способност на екрана, на който се показва документът.
Най-често използваните медийни функции определят точно максималната и минималната резолюция на екрана на устройството:
Тук устройства с максимална разделителна способност на екрана от 480px илиминимална разделителна способност от 320px ще изобрази текста на етикета с клас .my-class в сиво. Това състояниеДадох пример, практически е безполезен. Най-често трябва да посочите или само максималната резолюция, или само минималната, в рамките на която ще се прилага свойството.
Освен всичко друго, както виждаме от примера, функциите могат да съдържат условия и (и), не (НЕ)и само (за по-стари браузъри, които не поддържат медийни заявки). Не логически оператор или (ИЛИ), неговата роля се изпълнява от запетая. Медийните функции, както виждаме, са затворени в обикновени скоби.
Поставянето на свойства в медийна заявка не дава никакъв приоритет, така че е по-разумно медийните заявки да се поставят в край на cssдокумент или качване чрез етикет връзкавъншен CSS файл с медийни заявки след зареждане на основните стилове на сайта, за да замени правилно последните на различни резолюции или на различни устройства.
- Опитайте се да използвате само външни включени CSS файлове. Използвайте вътрешен стил само ако това е необходимо за правилното функциониране на уебсайта;
- Опитайте се да стилизирате само класове. Не стилизирайте идентификатори (зададени с id="hash" и написани с #hash). Опитайте се да стилизирате етикети без класове по-малко. Например, ако стилизирате h3 таг и след това по-късно SEO специалистреши, че дадено заглавие е неподходящо тук, обикновен div трябва да има същите свойства като заглавен клас и също да бъде изобразен. Като алтернатива можете да дублирате HTML таговев класове, например, .h1, .h2, .h3, .footer, .header, .aside и ги стилизирайте съответно;
- Опитайте се да стилизирате елементите възможно най-автономно, намалете каскадната верига до един блок, така че да има по-малко зависимости от родителските елементи. Това е необходимо за най-ефективното повторно използване на блокове на страницата и тяхната промяна на други места от оформлението. Но без фанатизъм. Не трябва да давате отделни класове на всеки таг в блок, ако не се предполага. офлайн употреба. Ако преместите блока на друго място на страницата, той също трябва да се показва и да не зависи от родителя. Това ще ви помогне да използвате някаква методология за именуване на класове. Няма значение дали е BEM, методология или разработена въз основа на вашата личен опитили прости правила, предложен от мен, е по-добър от произволното именуване на класове и изграждане на нелогични и дълги вериги от класове;
- Опитайте се да наименувате класове тагове въз основа на функцията на блока, а не на това какво ще бъде съдържанието в него. Например, ако имате секция с въртележка за преглед, не наименувайте селекторите си с думите прегледи, otzivyи т.н. по-добро име въртележка-веднъж, ако се планира да се показва един елемент от въртележката на страница. В бъдеще може би ще използвате тази въртележка не само за създаване на рецензии, но ще използвате този код например за показване на списък с колеги от компанията. В този случай името на класа прегледиби било донякъде неподходящо;
- Използвайте CSS препроцесори, не е толкова трудно. Изборът ми падна върху препроцесора Sass от доста време и го препоръчвам за използване. Имаме хубав урок, в който ви казвам колко лесно е да използвате препроцесора и как той улеснява живота: ;
- Използвайте нулиране на стиловете на браузъра по подразбиране или нормализиране, което привежда стиловете по подразбиране до общ знаменател във всички браузъри. Използвам в проектите си normalize.css, който е част от Bootstrap CSS framework;
- Когато почувствате, че извършвате твърде много повтаряща се работа в процеса на оформление - преминете към използването на някаква CSS рамка или разработете своя собствена с най-често използваните елементи, това ще ускори работата ви. Използвам само на работа Bootstrap решеткабез стилистичен дизайн на бутони, панели и други елементи. Това е напълно достатъчно за ефективна работа. Добрата отзивчивост на мрежата по подразбиране Bootstrap също е приятна;
- Експериментирайте сами със свойствата. Отворете CSS препратка и опитайте. Това е единственият начин да придобиете опит, да запомните кое свойство какво прави и да автоматизирате писането на стилове на документи.