[ На главную ] -- [ Список участников ] -- [ Правила форума ] -- [ Зарегистрироваться ]

CSS

On-line:

Страницы: 1

Автор	Сообщение
Proekter Dark Jack Группа: кардинал Сообщений: 596	Добавлено: 10-12-2022 15:04
	CSS подключение CSS к HTML этот тег внедряется в файл HTML <link href="stylе.css" rel="stylеsheet" type="text/css"/> CSS Состоит из двух вещей, секторы и свойства (сами селекторы можно прописать как динамически так и статически то бишь динамически обобщать или статически все элементы разделять) теги.селекторы {свойства} / описание/ СЕЛЕКТОРЫ для основных тегов HTML A __B__ C {свойства} пробелы селектор выбирает не зависимо от уровня вложенности (глубина вложения роли не играет) потомков С где угодно перед B - B где угодно перед A A > B > C {свойства} скобками селектор выбирает сразу следом идущие элементы вложенные друг в друга вложенный С внутри B - B внутри A A + B + C {свойства} плюсами селектор выбирает сразу следом идущие элементы если между ними нет "чужих" закрывающих тэгов сестринский С сразу перед B - B сразу перед A ( и между ними нет других тегов ) A ~ B ~ C {свойства} тильдами селектор выбирает сразу следом идущие элементы если между ними нет "чужих" закрывающих тэгов, выбирая все обобщённый С сразу перед B - B сразу перед A ( и между ними нет других, выбирает одинаковые стоящие ) Цитировать
Proekter Dark Jack Группа: кардинал Сообщений: 596	Добавлено: 10-12-2022 15:05
	СЕЛЕКТОРЫ для атрибутных тегов HTML * {свойства} вообще любые элементы div {свойства} элементы с таким тегом div #id {свойства} элемент с данным id .class {свойства} элементы с таким классом [name="value"] {свойства} селекторы на атрибуты p[align] {свойства} применить ко всем тегам p, у которых есть атрибут align, как пример p[align="center"] {свойства} где значение атрибута align равно center, как пример p[align^="center"] {свойства} где значение атрибута align начинается на center, как пример p[align="center"] {свойства} где значение атрибута align содержит center, как пример [rel="external"] {свойства} Атрибут точно соответствует заданному значению external, как пример [rel="external"] {свойства} Атрибут содержит заданное значение external, как пример [rel^="external"] {свойства} Атрибут начинается с заданного значения external, как пример [rel$="external"] {свойства} Атрибут заканчивается на заданное значение external, как пример [rel~="external"] {свойства} Атрибут находится в списке с пробелами заданного значения external как пример [rel\|="external"] {свойства} Атрибут находится в списке с дефисами заданного значения external как пример ___________________________________________ Цитировать
Proekter Dark Jack Группа: кардинал Сообщений: 596	Добавлено: 10-12-2022 15:05
	СЕЛЕКТОРЫ для действий мыши :active { ... } определяет стиль для активной ссылки при нажатии, применяется к ссылкам <a> :visited { ... } определяет стиль к уже посещённой ссылке, применяется к ссылкам <a> :hover { ... } определяет стиль при наведении курсора, применяется ко всем элементам :focus { ... } определяет стиль фокуса, фокусировать можно теги <a> <input> <select> <textarea> ___________________________________________ Цитировать
Proekter Dark Jack Группа: кардинал Сообщений: 596	Добавлено: 10-12-2022 15:05
	селекторные { СВОЙСТВА } комментарии opacity: 0.5; прозрачность display: изменение технологии отображений -webkit-user-select: auto, none, text; / * запретить пользователю выделять элемент для сhrome, safari, ios / -moz-transform-user-select: auto, none, text; / запретить пользователю выделять элемент для firefox ////////////////////// / -ms-transform-user-select: auto, none, text; / запретить пользователю выделять элемент для ie ////////////////////////// / -o-transform-user-select: auto, none, text; / запретить пользователю выделять элемент для opera //////////////////// / _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ тексты _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Font-Family: verdana, georgia, arial, helvetica trebuchet MS, segoe ui, book antiqua, palatino, palatino linotype, pristina, magneto; / шрифтами / font-stylе: italic; / курсивом / text-transform: lowercase; uppercase; / строчные или заглавные / _ _ _ _ _ _ _ _ _ _ _ _ _ _ размещение _ _ _ _ _ _ _ _ _ _ _ _ _ _ min-width: 100px; / минимальная ширина максимально / max-width: 100px; height: 100px; / высота/ _ _ _ _ _ _ _ _ _ _ _ _ позиционирование _ _ _ _ _ _ _ _ _ _ _ _ margin: 10px 10px 10px 10px; / смещение/ float: left, right; / перебрасывание/ position: absolute, relative, fixed, top; / позиция на экране // добавить для смещения / top: 10px; left: 10px; right: 10px; bottom: 10px; transform: translateX(10px); transform: translateY(10px); / значением - + лево и право/ / значением - + вверх и вниз/ _ _ _ _ _ _ _ _ _ _ _ _ _ _ искажения _ _ _ _ _ _ _ _ _ _ _ _ _ _ transform: scale(0.1); / масштаб / -webkit-transform: scaleX(1.3); / растягивает по горизонтали / -webkit-transform: scaleY(1.3); / растягивает по вертикали // / transform: skew(10deg, 10deg); / перекосы / -webkit-transform: rotate(10deg); / поворот для сhrome, safari, ios / -moz-transform: rotate(10deg); / поворот для firefox /////////// / -ms-transform: rotate(10deg); / поворот для ie /////////////// / -o-transform: rotate(10deg); / поворот для opera ///////// / -webkit-transform: rotate3d(1, 1, 1, 10deg); / ось для сhrome, safari, ios ///////////////// / -moz-transform: rotate3d(1, 1, 1, 10deg); / ось для firefox //////////////////////////// / -ms-transform: rotate3d(1, 1, 1, 10deg); / ось для ie //////////////////////////////// / -o-transform: rotate3d(1, 1, 1, 10deg); / ось для opera ////////////////////////// / -webkit-transform: matrix(1, 2, 3, 4, 5, 6); / матрица для safari 3.1, chrome 2.0 //// / -moz-transform: matrix(1, 2, 3, 4, 5, 6); / матрица для firefox 3.5 ////////////// / -ms-transform: matrix(1, 2, 3, 4, 5, 6); / матрица для ie 9.0 /////////////////// / -o-transform: matrix(1, 2, 3, 4, 5, 6); / матрица для opera 10.5 /////////// / filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=2, M21=3, M22=4, Dx=5, Dy=6); / IE 5.5 */ Цитировать
Proekter Dark Jack Группа: кардинал Сообщений: 596	Добавлено: 10-12-2022 15:06
	Анимация animation: rotating 4s linear infinite; animation: skewing 10s steps(1) 0s infinite; animation: zooming 5s alternate; -webkit-transition: 1s; -webkit-transition: transform 1s ease-out 10s, opacity 0.2s ease-out 0s; Цитировать
Proekter Dark Jack Группа: кардинал Сообщений: 596	Добавлено: 10-12-2022 15:06
	CSS Калькулятор цветов А что бы изучить CSS надо понять - как это всё не работает - следом понять как заработает Валидность это когда сайт выглядит одинаково во всех браузерах а кроссбраузерность это когда почти одинаково, ошибки допустимы Если разработчики браузеров не смогли договориться ... логично сделать сайты под их конкретные браузеры, либо разработчики браузеров сами станут делать сайты под свои же браузеры и только их сайты отображались бы в них а другие нет но такого нету, всё ложиться на опытного CSS программиста. Цитировать