CSS стиловата таблица, ако вземем самата дефиниция, е език за описание на външния вид на документ. Тоест HTML отговаря за структурата на страницата, а CSS стиловите таблици са отговорни за целия дизайн. Тук събрах информация, която ще ви позволи да използвате свободно стиловата таблица. Няма да пиша как трябва да го знаете, защото вече е ясно – без него няма да можете да приведете сайта в повече или по-малко нормален вид. Ако някой току-що започва да учи CSS стилове, тогава тези материали ще са достатъчни, за да започне да изучава CSS.
1. Основни неща
Ще започна със самите основи. Когато стартирах този сайт, написах малък урок за изучаване на CSS стилове. Уроците са подходящи както за тези, които тепърва започват, така и за тези, които вече знаят нещо, за да опреснят знанията си. Всичко там е проектирано в снимки и реални примери.
Малко отклонение:когато започнах сам да изучавам темата за изграждане на сайтове, научих почти всички HTML тагове и те не ме вдъхновяваха много. Но след като започнах да уча таблицата със стилове на CSS и да се опитвам да приложа всяко от свойствата, много ми хареса (не бих го направил, ако не ми хареса). Видях, че можете да правите невероятни неща само с CSS. Това не е език за програмиране, който отнема месеци, за да се научи. Стиловата таблица може да бъде усвоена за една (максимум две) седмици.
Разбира се, няма да изучавате абсолютно всички свойства и техните значения и това не е необходимо! Трябва само да знаете основите, за да можете да започнете да прилагате и използвате във вашите проекти. Един важен нюанс е, че трябва ВЕДНАГА да приложите свойството, което току-що научихте, като използвате реален пример. Независимо дали е ваш собствен сайт или обикновен HTML сайт, няма разлика. Важно е да се опитате да пишете със собствените си ръце и да видите резултата.
Имам много примери на моя сайт, които използват CSS. Само и заедно те съдържат повече от 100 урока! Когато знаете поне основите, тогава можете спокойно да промените и приложите всички примери от уроците.
Моите уроци за основите на CSS каскадирането
2. CSS и CSS3 Cheat Sheet
Е, вие сте научили основите и след няколко дни сте забравили всичко с "успех" и вероятно смятате, че това не е ваше и всичко е сложно. Искам да ви насърча малко - аз самият не познавам всички свойства на CSS. Но какво ми пречи да ги гледам в интернет?
Вярно е, докато отидете в Yandex или Google, след това въведете заявката, от която се нуждаете. И ако все още не дава това, от което се нуждаете в търсенето. Така че можете да прекарате много време, но все още да не намерите това, което наистина търсите.
За щастие, добрите хора събраха много полезни мами, които са ми помагали повече от веднъж. Достатъчно е да разберете къде е всичко и тогава търсенето на желаните имоти не представлява никакви затруднения.
CSS и CSS3 Cheat Sheets
Това са просто незаменими материали за оформление и разработка на уеб сайт. Времето за разсейване и търсене в интернет за описания на имоти е намалено многократно.
Вярно е, както разбирате, колкото повече набирате сайтове или правите дизайн, толкова по-малко трябва да разглеждате този намек, тъй като всички необходими свойства остават в паметта през цялото време. Но все пак да имате под ръка този набор от измамници няма да е излишно.
Все едно е в училище:дори и да не използвате измамник, но с него пак е някак по-спокойно в душата ви 😆.
За какво са таблиците със стилове?
Създадохте предишните страници, както сте ги създали преди появата на каскадни стилови таблици или CSS.
Основните проблеми, с които се сблъскаха разработчиците на сайтове преди появата на CSS:
Проблем с позиционирането (оформление на страницата). Въпреки че започнаха да използват таблици за това (първоначално не бяха предназначени за това), те не решиха всички проблеми. Не е възможно да се направи следното:
- Не може да се зададат фиксирани размери на нито един блок. Например, текстов блок ще се разшири при препълване (дори ако е в таблица).
- Не може да се зададат фиксирани координати за позицията на блока на страницата.
- Не можете да наслагвате един блок върху друг. Например, опитайте да плъзнете картина върху маса или друга картина.
Вторият проблем беше, че всеки път трябваше да задавам размера и цвета на шрифта, свойствата на клетките на таблицата и т.н. на страниците. Това значително увеличи размера на страницата, което означава, че тя се зарежда по-бавно. В случай, че искате да промените цвета или размера на шрифта, ще трябва да редактирате всички страници.
Третият проблем беше, че всички браузъри имат индивидуални настройки. Например в браузър можете да увеличите шрифта, което ще изкриви цялата страница.
CSS може да реши тези проблеми.
Начини за прилагане на CSS
Има три начина за прилагане на стилови таблици:
Вътрешни стилови таблици(Inline Style Sheets) - поставят се директно в HTML тагове с помощта на специален атрибут.
Примерен HTML:
Пример за CSS:
Както можете да видите, кодът за Inline Style Sheet е по-голям от HTML. Следователно ISS трябва да се използва само ако е необходимо да се зададе собствен индивидуален стил за определен елемент.
С помощта на допълнителния атрибут style можем да дефинираме параметрите на стила, от които се нуждаем, във всеки таг. Това е най-лесният метод и работи само в рамките на един таг. Но представете си колко ще нарасне размерът на файла и колко неудобно ще бъде да го поправите, ако посочим стила за всеки маркер.
Глобални стилови таблици(Глобални стилови таблици) - дефинирайте стила на елементите в целия документ.
За да направите това, използвайте етикета
…