Какво представляват каскадни стилови таблици и за какво се използва CSS?

Какво представляват каскадни стилови таблици и за какво се използва CSS?

CSS принадлежи към тройка основни уеб технологии заедно с HTML и JavaScript. С внимателно планиране CSS допринася за разделянето на проблемите. Независимите ресурси контролират структурата на съдържанието, представянето му и поведението му.





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



Как изглежда CSS?

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





HTML елементите имат различни свойства, които CSS може да оформя. The цвят свойството задава цвета на предния план (например текст). Размерът на шрифта зависи от размер на шрифта Имот.

Всяко свойство може да бъде зададено на поддържана стойност. Присвояването на стойност на свойство е „декларация“. Като цяло те изглеждат така:



property: value

Например:

най -добрите места за четене на манга онлайн
color: red

Стойностите за различни свойства могат да изглеждат много различни, дори стойности за едно и също свойство. Например, ето още два начина за писане на предишната декларация:



color: #ff0000
color: rgb(255, 0, 0)

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

Можете да комбинирате HTML и CSS по няколко различни начина, всеки със своите предимства.

Вградени стилове за писане

Най -простият метод е да прикачите декларации за стил директно към елемент в HTML файла. Можете да направите това с помощта на стил атрибут така:




Most of this text is red …


… but this isn’t!


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

Вграждане на стилове в главата

Можете да започнете да виждате как изглежда таблица със стилове с втория механизъм, вграждане . Използвайки този подход, ние събираме всички декларации за стил заедно в a стил елемент в глава на нашия документ. Ще изглежда така:





/* style instructions go here */



...

Нашите инструкции за стил обаче се нуждаят от малко повече подробности от преди. Тъй като сме ги преместили в главата, всяко правило вече не е свързано с елемент. Може и да сме декларирали цвят: червен , но какво трябва да има този цвят?

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

можете ли да използвате Apple TV без дистанционно
selector {
declaration1;
declaration2;
/* etc. */
}

Например, за да оформяме текста на абзаците в синьо, можем да посочим следното:

p {
color: blue;
}

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

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

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


Поставете този код вътре в тагове на вашия HTML файл за свързване на външния ви стил.

Силата на CSS

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

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

  • Можете да изключите таблица със стилове, само като промените препратката към файла. Това дори може да се случи динамично. В една стъпка можете да промените целия облик на страницата.
  • Много страници могат да споделят едни и същи стилови таблици според изискванията. Променяйки един единствен файл, можете да актуализирате външния вид на целия уебсайт.
  • Разделянето на страница на „съдържание“ и „стил“ има технически предимства. Прокси сървърите и браузърите могат да кешират отделни файлове отделно. Това означава, че даден сайт може да изпраща стилова информация веднъж, вместо да я включва във всяка отделна страница.
  • Когато си сътрудничат, различните екипи могат да работят по силите си, като създават и редактират отделни файлове, без да се засягат един друг.

Обясняване на каскадата

Научихте много за стиловете и стиловите таблици, но какво ще кажете за каскадната част на CSS?

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

Може би вече сте се чудили за стиловете по подразбиране. Например, как се прави H1 елемент изглеждат големи и смели, дори без никакви стилове на авторски? Това е благодарение на набор от специални правила, които съставят стиловия лист на потребителския агент. Тези правила първоначално се прилагат от вашия уеб браузър към всяка страница, която посещавате.

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

Има друг източник на стилови таблици, който предава известен контрол на читателя. На теория всеки уеб потребител може да поддържа лист с потребителски стил с персонализирани правила. Те се намират по средата: потребителските правила ще отменят настройките на браузъра по подразбиране, но самите те ще бъдат отменени от стиловете на авторите. За съжаление, поддръжката на потребителски стилове никога не е била широко разпространена.

Насочване към различни медии

Можете да използвате таблици със стилове в различни контексти, извън екрана. The половината атрибут на връзка element определя към кои типове носители се отнася стиловият лист. Например, можете да дефинирате a стилова таблица за печат използвайки маркиране, както следва:

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

Свързани: Как да сърфирате в мрежата, ако сте слепи или с увредено зрение

неща, които можете да направите с малиново пи

Сайтове като Уикипедия използват CSS, за да контролират стила си на печат, да скрият нежеланите елементи и да опростят оформлението.

CSS прави HTML да изглежда добре

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

За да видите пълната мощ на CSS и колко може да предложи, разгледайте нашия мамят, обхващащ всички основни свойства на CSS3.

Дял Дял Туит електронна поща Кодът за основни свойства на CSS3

Овладейте съществения CSS синтаксис с нашия лист за мами за свойства на CSS3.

Прочетете Напред Свързани теми
  • Програмиране
  • Уеб разработка
  • CSS
За автора Боби Джак(58 статии са публикувани)

Боби е ентусиаст на технологиите, който работи като софтуерен разработчик в продължение на почти две десетилетия. Той е запален по игрите, работи като редактор на рецензии в Switch Player Magazine и е потопен във всички аспекти на онлайн издателството и уеб разработката.

Още от Боби Джак

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате