Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты

CSS + Программист

С этим тегом используют

HTML Программирование Верстка Javascript IT Web Frontend IT юмор Юмор Картинка с текстом Работа Разработка Все
70 постов сначала свежее
1330

Когда поплыл CSS:⁠⁠

CSS Юмор IT Программист Код ВКонтакте Видео
25
5

Функции в SASS / SCSS⁠⁠

Привет, в этом уроке мы научимся использовать функции в SASS / SCSS, рассмотри примеры их работы, а также разберемся с новым, для нас, циклом @for. Напишем несколько функций и посмотрим для чего они вообще нужны. Приятного просмотра. Больше уроков у меня на канале.

[моё] Программирование Программист Разработка IT Баг Интернет Собеседование HTML CSS Javascript Верстка Создание сайта Видео YouTube Scss Sass
2
2

Подключение шрифтов на сайт⁠⁠

Пример #1 — Подключаем шрифт PT Sans через Google Fonts

- Заходим на сайт fonts.google.com и находим шрифт PT Sans;

- Нажимаем кнопку Select this font;

- Нажимаем на Family Selected;

- Во вкладке Customized выбираем начертания и Cyrillic;

- Копируем строку с подключением шрифта во вкладках EMBED → @IMPORT.


Вставляем строку с подключением в начало CSS файла:

@IMPORT url('https://fonts.googleapis.com/css?family=PT%20Sans%3A400i%2C7...);

Копируем свойство font-family:

Подключение шрифтов на сайт Программирование, IT, Разработка, Программист, Обучение, Урок, Frontend, Font, CSS, Css3, Верстка, Pt, Sans, Drupal, Google, Шрифт, Web, Web-программирование, Образование, Учеба, Длиннопост

Пример #2 — Подключаем шрифты PT Sans и PT Serif в Drupal 8 через файл темы .libraries.yml

Аналогично примеру #1 получаем URL подключения шрифтов из строки @import:

fonts.googleapis.com/css?family=PT%20Sans%3A400%2C400...

В файле темы .libraries.yml подключаем шрифты по образцу:

fonts.googleapis.com/css?family=PT%20Sans%3A400%2C400...,
Подключение шрифтов на сайт Программирование, IT, Разработка, Программист, Обучение, Урок, Frontend, Font, CSS, Css3, Верстка, Pt, Sans, Drupal, Google, Шрифт, Web, Web-программирование, Образование, Учеба, Длиннопост

Сохраняем и сбрасываем кэш.

Пример #3 — Подключаем шрифт PT Sans локально

- Заходим на сайт Google Webfonts Helper;

- В поиске находим шрифт PT Sans;

- Выбираем начертания и Cyrillic;

- Пролистываем вниз и пишем где будут находится шрифты относительно .css файла;

- Копируем CSS код и вставляем его в .css файл;

- Скачиваем архив с шрифтами, разархивируем его и размещаем шрифты в нужном месте.


Вот так выглядит скопированный CSS:

/* pt-sans-regular - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('PT Sans'), local('PTSans-Regular'),
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.eot?#iefix') format('embedded-opentype'), /*   IE6-IE8 */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.woff2') format('woff2'), /* Super Modern   Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-italic - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Italic'), local('PTSans-Italic'),
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.eot?#iefix') format('embedded-opentype'), /*   IE6-IE8 */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.woff2') format('woff2'), /* Super Modern   Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700 - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Bold'), local('PTSans-Bold'),
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.eot?#iefix') format('embedded-opentype'), /*   IE6-IE8 */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.woff2') format('woff2'), /* Super Modern   Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700italic - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'),
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.svg#PTSans') format('svg'); /* Legacy iOS */
}

А так список файлов с шрифтами:

Подключение шрифтов на сайт Программирование, IT, Разработка, Программист, Обучение, Урок, Frontend, Font, CSS, Css3, Верстка, Pt, Sans, Drupal, Google, Шрифт, Web, Web-программирование, Образование, Учеба, Длиннопост

Команда ls в терминале

Если все сделано правильно, то шрифты будут подключены локально.

Показать полностью 3
[моё] Программирование IT Разработка Программист Обучение Урок Frontend Font CSS Css3 Верстка Pt Sans Drupal Google Шрифт Web Web-программирование Образование Учеба Длиннопост
4
8

Тег input в HTML⁠⁠

Привет, в рамках этого урока мы познакомимся с тегом input, разберем типы input-ов, рассмотрим атрибуты этого тега, а также познакомимся с тегом label. Больше уроков у меня на канале.

Этот видео-урок является дополнением к посту о input - ссылка на пост
Показать полностью
[моё] Баг Программист Программирование Разработка IT HTML Html 5 Основы HTML CSS Css3 Javascript Верстка Создание сайта Собеседование Интернет Видео YouTube
0
5

Как работает тег <form> в HTML⁠⁠

Привет, в рамках этого урока мы познакомимся с тегом form и его атрибутами, разберемся что нужно в него вкладывать и как использовать. Больше уроков у меня на канале

<form> - Обычно этот тег оборачивает элементы с которыми пользователь может взаимодействовать. Это могут быть поля для ввода текста, выпадающие списки, заголовки полей. Всех их мы разберем далее. <form> имеет достаточно много атрибутов, мы разберем самые распространенные. Элемент <form> интерактивный, при правильном его описании мы можем отправлять данные которые расположены внутри нее, на сервер.

<form></form>
<form action="https://some-server-url.com/send-email"
method="get"
target="_blank"
></form>
action - определяет ссылку на сервер куда будут отправляться данные из <form>.

method - определяет метод http с помощью которого будут отправляться данные.

target - определяет в каком окне будет производиться отправка, в новом или текущем.


Также есть еще много атрибутов у тега <form>, о них читайте в документации.


P.S. Больше уроков у меня на канале
Показать полностью
[моё] Программирование Программист Разработка Баг IT HTML Основы HTML CSS Css3 Верстка Создание сайта Веб-разработка Собеседование Интернет Видео YouTube
64
6

Виды селекторов в CSS - часть 2⁠⁠

Селекторы - это достаточно мощный инструмент который позволяет нам выбирать элементы не только по тегу но и по различным атрибутам, будь то id, class или любой атрибут, а также выбирать элементы по наведению мышки, четные или нечетные и многое другое.

Рассмотрим самые распространенные селекторы:

1. Селектор по тегу - самый простой селектор который помогает нам выбрать элементы по названию их тега, для этого нам нужно только указать название тега без скобок.


p {
color: red;
}

2. Селектор по классу. Если мы хотим привязывать стили только к определенным элементам мы можем использовать селекторы по классу, для этого нам необходимо задать атрибут class с для тега html с логическим значением. Для того чтобы добраться к элементу по классу нам нужно перед значением атрибута class нужного нам элемента поставить '.' точку.


.block {
text-decoration: underline;
color: blue;
}

3. Селектор по атрибуту. Работает абсолютно аналогично селектору по классу, но имеет другой синтаксис [имя-атрибута="значение атрибута"]


[href="#"] {
color: blue;
font-weight: bold;
font-size: 30px;
}
Аналогично можно использовать селектор только по названию атрибута, без значения.


[href] {
text-transform: uppercase;
}

4. Селектор по идентификатору. Этот селектор похож на селектор выборки элементов по классу но ключевое отличие состоит в том что для использования такого селектора вам необходимо давать html тегам атрибут id, а значение этого атрибута в свою очередь должно быть уникально в рамках всей страницы. Из-за этих ограничений вы не можете создавать одинаковые атрибуты id на всех тегах, так как это будет ошибкой.


Пример выбора элемента по id:


#main-title {
font-weight: bold;
text-decoration: line-through;
}
P.S. - Больше уроков у меня на канале

P.P.S. - Файлы с урока

Показать полностью
[моё] Разработка Программирование Программист IT Баг Интернет Собеседование HTML CSS Frontend Верстка Видео YouTube
0
7

Селекторы CSS - часть 1⁠⁠

Любые стили CSS записываются по одной и той же формуле: название стиля: значение; Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера, изменим цвет шрифта у параграфа который есть у нас в HTML


p {
color: red; /* Изменяем цвет текста */
font-size: 20px; /* Изменяем размер шрифта */
}

p - это селектор, обращаясь к этому селектору мы говорим браузеру чтобы он выбрал все <p> на странице и применил к ним соответствующие стили.


{} - это фигурные скобки, с их помощью мы отделяем селектор от CSS свойств.


Свойства, они находятся всегда внутри фигурных скобок и с их помощью мы описываем внешний вид выбранных по селектору элементов. CSS свойств огромное количество и по мере изучения вы будете узнавать из все больше, но не стоит пытаться выучить их все сразу, это бесполезно, со временем вы их запомните, а также не забывайте обращаться к документации.


P.S. - Больше уроков у меня на канале

P.P.S. - Файлы с урока

Показать полностью
[моё] Разработка Программирование Программист Баг IT HTML CSS Css3 Интернет Собеседование Верстка Верстальщик Видео YouTube
7
13

Циклы в SASS / SCSS ( @each )⁠⁠

Привет, в этом уроке мы разберемся что такое циклы в SASS / SCSS на примерах разберем как перебирать структуры данных List и Map и на примерах разберемся как использовать все эти вещи вместе с интерполяцией для динамической генерации стилей. Приятного просмотра.

P.S. Больше уроков у меня на канале

[моё] HTML Html 5 Основы HTML CSS Css3 Javascript Frontend Верстка Верстальщик Программирование Программист Разработка Разработчики IT Баг Собеседование Видео YouTube
2
Посты не найдены