Какво представлява HTML стиловите таблици?
HTML Cascading Style Sheet е лист с набор от правила и свойства, който казва на браузъра как да изобрази HTML, като използва всички посочени стилове.
CSS е начинът, по който оформяме всякакви уеб страници. CSS има всички свойства като фон, цветове, шрифтове, интервал, граници и др., Които можем да определим за всеки елемент на страниците.
HTML стиловите таблици се използват и за задаване на оформлението на страницата, като мястото, където трябва да се поставят заглавката, долните колонтитули или други елементи на страницата. CSS винаги се говори заедно с HTML, тъй като страниците без каквато и да е стилистика са много бледи, без подчертаване на заглавия и т.н. и еднакъв размер на шрифта по цялата страница, което не дава добър поглед на потребителите.
Как да използвате стиловите стилове HTML?
В миналото стилове, скриптове, HTML всичко беше написано навсякъде на една и съща страница. Това направи страниците изключително дълги и изключително трудно за четене и редактиране. След това дойде начинът за разделяне на HTML, стилове и Javascript.
Начини за включване на таблици за HTML стил в уеб страница:
Има 3 начина, по които можем да включим стиловете:
-
Inline Styling
Това е начин за писане на стилове за всеки елемент в самия HTML в атрибут, наречен стил.
Този начин на стайлинг изобщо не се препоръчва, тъй като HTML изглежда претрупан и не можем да следваме подхода „Пиши веднъж, използвай на много места“
Eg: Hello World!
-
Вътрешен стайлинг
Това е със стилове, включени в таг за стил и поставянето му в уеб страница върху HTML. Този начин на стайлинг все още е по-добър от вградения стилистика, тъй като можем да имаме общи стилове, закрепени заедно, в случай че трябва да се използва за множество елементи наведнъж.
На етапа на разработка е по-лесно да редактираме HTML файла и не е необходимо всеки път да отваряме съответния CSS файл и да го редактираме всеки път.
Eg:
container-block(
font-size: 10px;
margin-top: 10px;
)
Hello World!
-
Външен стайлинг
Това е най-често срещаният и най-добрият начин за създаване на стилове за уеб страница. Това е подобно на вътрешния стил, но разликата е, че стиловете се записват в отделен файл с разширение .css и препратка към него се поставя в главния маркер на уеб страницата.
Синтаксисът за свързване на CSS файл на уеб страницата е:
Стиловете трябва да бъдат включени в основния маркер, който е над body tag (т.е. действително съдържание) на HTML
Какъв е приоритетът между вътрешния, вътрешния, външния стил?
Вградените стилове имат по-голям приоритет от вътрешните и след това идва последният приоритет за външния стил.
Inline> Вътрешен> Външно
Най-добри практики при използване на CSS:
- CSS може да бъде разделен на няколко файла вместо само един.
- Отделни CSS файлове могат или да бъдат включени един по един в заглавен маркер, използвайки тагове за връзки.
- Или един CSS файл може да има множество извлечения за импортиране, за да импортира останалата част от CSS файловете. Това логично ще раздели CSS, но в крайна сметка всички стилове се получават от един и същ файл.
Използване: @import './process.css';
- Стилове могат да бъдат дефинирани за всички елементи на уеб страницата с селектори като самия HTML тагове, имена на класове, идентификатори, всякакви имена на атрибути.
- Налични са някои псевдо селектори като:
- преди
- след
- тото-дете
- първо дете
- последно дете
- мътя
- посетена
Това са основно състояния на избраните елементи, а всъщност не са точните елементи.
- Когато умножените CSS файлове са включени в страницата, последният има най-висок приоритет и отменя съществуващите стилове на предишни файлове със същия селектор.
- Таблиците на стилове трябва да се използват преди самия HTML, така че стиловете да се прилагат, докато страницата се зарежда. Ако е включен в края, HTML първо ще се зареди и след това бавно се прилагат стилове, което дава много лошо изживяване на потребителя.
Различни характеристики на HTML каскадни таблици за стилове:
- CSS предоставя анимации : Преди това javascript се използва само за анимации. Но най-новият CSS, т.е. CSS3 предоставя анимации, използвайки самите свойства.
- Префикси за доставчици: Преди браузърите да пуснат стандартна версия / име на собственост за всякакви нови функции, браузърите ни предоставят някои префикси на доставчика за известно време за определен период от време като експеримент. Разработчиците трябва да изчакат, докато браузърът пусне стандартните му версии и междувременно експерименталните функции могат да се използват с префикси на доставчици.
- CSS Transforms: Преходът се използва за прогресивно преминаване към една стойност от друга на свойство в рамките на дадена продължителност.
Eg: -webkit-transition: width 2s, height 4s;
- CSS Transforms: Трансформите в CSS ви позволяват да превеждате, завъртате, мащабирате и изкривявате елементи.
Медийни заявки:
Мобилни компютри, настолни компютри и iPad се държат различно, но не можем да стилизираме страниците по същия начин. Предишните уеб стандарти са проектирани по такъв начин, че имахме различни CSS за всеки тип устройство.
С напредването на уеб стандартите и начина, по който се изгражда мрежата, браузърите са разработени, за да имат един CSS, който може да се използва за всеки тип устройства. За да промените стиловете на устройства въз основа на ширина и височина, се използват медийни заявки, с които можем да определим минималната или максималната ширина на устройството и да напишем стилове в него.
Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)
Стиловете определено са благодат за мрежата. И тъй като в последно време уеб разработката се увеличава експоненциално, CSS3 определено спечели много търсене, за да направи страниците изключително интерактивни и интуитивни.
Препоръчителни статии
Това е ръководство за стиловите таблици на HTML. Тук обсъждаме как да използвате таблици за HTML стил, различни функции и начините за включване на CSS на уеб страница. Можете също да разгледате следните статии, за да научите повече -
- Въведение в CSS
- Предимства на CSS в уеб дизайна
- Какво е CSS? | Как да използвам?
- Чувствителен ли е случаят на CSS?
- Различни стилове на HTML списъци