Рубрика: Css

Отцентрировать блок по горизонтали и вертикали Горизонтальное и вертикальное выравнивание блока распространенная задача. Опишу наиболее простые и частоипользуемые способы. Отцентировать по горизонтали Способ 1Через margin: auto;, задав ширину < ширины родителя. .center { margin: auto; width: 50%; } Способ 2Через margin: auto; display: table;. Преимущество второго способа — ширина таблицы может быть динамической. .center { […]

Псевдокласс :first-child | htmlbook.ru Internet Explorer Chrome Opera Safari Firefox Android iOS 7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+ Краткая информация Версии CSS CSS 1 CSS 2 CSS 2.1 CSS 3 Описание Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя. Синтаксис элемент:first-child { … } Значения Нет. Пример 1 XHTML 1.0CSS2.1IECrOpSaFx <!DOCTYPE

Первый дочерний элемент css: Селекторы дочерних элементов CSS. Дополнительные псевдоклассы — учебник CSS – Как для CSS выбрать все дочерние элементы родителя? — Хабр Q&ARead More »

Красивые информационные блоки на CSS3.info_box {  margin:10px 0px 10px;  font-size:13px;  line-height:18px;  position:relative;  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.1);  -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);  box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);  }  .info_box_content {  text-shadow:1px 1px 1px white;  padding:18px 43px 17px 66px;  min-height:35px;  }   .warning {  border:1px solid #E0B1B1;  }  .warning .info_box_content {  color:#AD7676;  background:#FFD9D5;  border:1px solid #FCEEEC;  -moz-box-shadow:inset 0 0 45px #f0bfba;  -webkit-box-shadow:inset 0 0 45px #F0BFBA;  box-shadow:inset 0 0 45px #F0BFBA;  }  .warning::before {  width:17px;  height:17px;  background:url(/img/sprite_ico_box.png) no-repeat;  }  .note {  border:1px solid #B9DBB6;  }  .note .info_box_content

Красивый div блок css: Красивое оформление блоков на сайте – Как сделать красивую тень для блока с помощью CSS. (8 примеров)Read More »

Печатаем web-документ правильно с помощью CSS — Aimweb.name Кого-то это может удивить, но распечатывают web-страницы довольно часто.В данной заметке показаны полезные приемы на CSS для подготовки страницы к печати. Предварительные изменения в стилях Желательно разбивать CSS-стили на отдельные файлы в зависимости от микроформатов: <link rel=»stylesheet» href=»css/style.css» type=»text/css» media=»screen,projection»> <!— основной файл —><link rel=»stylesheet» href=»css/print.css» type=»text/css»

Страницы для печати css: CSS-стили для печати, о которых я забыл / RUVDS.com corporate blog / Habr – CSS печатной версии страницы / HabrRead More »

CSS: авто высота блока div, 100% высоты на фоне div внутри блока div В 2018 году многие браузеры поддерживают Flexbox и Grid , которые являются очень мощными режимами отображения CSS, которые затмевают классические методы, такие как искусственные столбцы или табличные дисплеи (которые рассматриваются позже в этом ответе). Чтобы реализовать это с помощью сетки, достаточно указать

Css div высота по содержимому – высота авто по содержанию div, высота 100% на фоне div внутри, содержащая div (css, height)Read More »

Анимация загрузки страницы на CSS Время чтения: 2 мин. Всем привет! Сегодня мы рассмотрим еще один классный пример анимации загрузки страницы. У некоторых Web сайтов загрузка страницы длится долго и посетитель не дожидаясь долгожданного контента покидает сайт. Хорошим отвлекающим эффектом является анимация, она же и придает некую красоту для сайта. Смотреть примерСкачать Похожие статьи на

Css эффект загрузки страницы: Эффекты предзагрузки страниц на html и css (30 штук) – Анимация загрузки страницы на CSSRead More »

Свойство display | CSS справочник CSS свойства Определение и применение CSS свойство display определяет как должен отображаться определенный элемент HTML. Поддержка браузерами Браузер Internet Explorer 8 требует наличия декларации !DOCTYPE в документе.CSS синтаксис: display:»inline | block | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | table | table-caption |

Свойства css div – DiV верстка — Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSSRead More »

css — Как зафиксировать заголовок таблицы при прокрутке? Есть таблица в контейнере с жёстко заданной высотой. При большом количестве строк в таблице у окружающего блока появляется полоса прокрутки. Однако имеется проблема — заголовок таблицы уезжает наверх, и его не видно. Как зафиксировать его, чтобы он всегда был виден наверху блока? Я пытался назначить ему вот

Css зафиксировать шапку таблицы – Подскажите как зафиксировать шапку таблицы, чтобы при прокрутке зафиксировано было только тело. как это реализовать на CSS HTMLRead More »

Правильная шпаргалка по CSS-каскаду — CSS-LIVE Написать эту статью меня подтолкнула относительно недавняя статья на CSS-tricks (скорее всего, вы ее уже видели, ссылку не дам из вредности:). Ее автор проделал большую и замечательную работу — нарисовал красивую наглядную схему-«шпаргалку», написал объяснение простым языком, привел кучу примеров, не забыл даже про презентационные атрибуты, тоже влияющие на стили

Шпаргалка css на русском – селекторы, атрибуты CSS, манипуляции с DOM, события и другие способы использования библиотекиRead More »

position — Уеб технология за разработчици Свойството position (положение) в CSS  служи за задаване на различни правила за разполагане на елементи. То е създадено да се ползва за програмно осъществени анимационни ефекти. /* Ключови думи за стойностите */ position: static; position: relative; position: absolute; position: fixed; position: sticky; /* Глобални стойности */ position: inherit; position:

Position в css – Position (absolute, relative и fixed) — способы позиционирования Html элементов в CSS (правила left, right, top и bottom)Read More »