Css учебник для начинающих: Учебник CSS для начинающих

Содержание

CSS Иконки

При помощи специальной библиотеки графических иконок можно легко добавлять CSS иконки на вашу HTML страницу.

Как добавить CSS иконки

Самый простой способ добавить иконки на сайт это воспользоваться какой-нибудь библиотекой иконок, например, Font Awesome, Bootrap или Google.

После этого к любому строчному элементу HTML (например, <i> или <span>) добавляется специальный класс иконки, который можно узнать на сайте библиотеки иконок.

Все иконки в описанных далее библиотеках иконок являются масштабируемыми векторными изображениями, которые можно настраивать при помощи CSS (изменять размер и цвет, добавлять тени и т.п.).

Иконки Font Awesome

Чтобы добавить иконки Font Awesome, перейдите на сайт fontawesome.com, зарегистрируйтесь и получите код, который затем нужно добавить в секцию <head> вашей HTML страницы:

<script src="https://kit.fontawesome.com/вашкод. js" crossorigin="anonymous"></script>

При этом никакой загрузки или установки не требуется!

Пример:

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</body>
</html>

Результат:

Иконки Bootstrap

Чтобы использовать «глификонки» Bootstrap, добавьте следующий код в секцию <head> вашей HTML страницы:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

При этом никакой загрузки или установки не требуется!

Пример:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</body>
</html>

Результат:

Иконки Google

Чтобы использовать иконки Google, добавьте следующий код в секцию <head> вашей HTML страницы:

<link rel="stylesheet" href="https://fonts. googleapis.com/icon?family=Material+Icons">

При этом никакой загрузки или установки не требуется!

Пример:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i>cloud</i>
<i>favorite</i>
<i>attachment</i>
<i>computer</i>
<i>traffic</i>
</body>
</html>

Результат:

cloud favorite attachment computer traffic

CSS спрайты изображений

Спрайт изображений — это набор разных изображений, которые объединены в одном общем файле изображения.

Для загрузки веб-страницы с большим количеством изображений может потребоваться много времени. При этом, такая веб-страница генерирует множество запросов к серверу, занимая канал связи.

Использование спрайтов изображений позволяет сократить количество запросов к серверу и сэкономить потребляемые ресурсы.

Спрайты изображений — Простой пример

Вместо того, чтобы использовать три разных изображения, мы используем одно изображение («img_navsprites.gif») такого вида:

При помощи CSS мы может показать только ту часть, которая нужна именно в данный момент.

В следующем примере определяется, какая часть изображения «img_navsprites.gif» будет отображаться:

<style>
#home {
  width: 46px;
  height: 44px;
  background: url('img_navsprites.gif') 0 0;
}
</style>
<img src="img_trans.gif">

Результат:

Объяснение примера:

<img src="img_trans.gif"> — Определяет небольшое прозрачное изображение, так как атрибут src не может быть пустым. Основное изображение будет фоновым, его мы определяем при помощи CSS.
width: 46px; height: 44px; — Определяет используемую нами часть изображения
background: url(img_navsprites.gif) 0 0; — Определяет фоновое изображение и его местонахождение (слева 0px, сверху 0px)

Это самый простой способ использования спрайтов изображений. Теперь рассмотрим, как можно использовать их в ссылках и для оформления эффекта наведения мыши.

Спрайты изображений — Создаем список ссылок навигации

Для создания списка ссылок навигации мы будем использовать спрайт изображений («img_navsprites.gif») и HTML список.

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

<style>
#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}
</style>
<ul>
  <li><a href="default.asp"></a></li>
  <li><a href="css_intro.asp"></a></li>
  <li><a href="css_syntax. asp"></a></li>
</ul>

Результат:

Объяснение примера:

#navlist {position:relative;} — устанавливаем относительное позиционирование, чтобы потом внутри этого элемента можно было использовать абсолютное позиционирование
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} — отступы (margin) и поля (padding) устанавливаем в 0, стиль списка (list-style) удаляем, а все элементы списка делаем абсолютно позиционируемыми
#navlist li, #navlist a {height:44px;display:block;} — задаем высоту всех изображений 44px

Теперь определяем позицию и стиль для каждой конкретной части:

#home {left:0px;width:46px;} — элемент расположен полностью слева и его ширина 46px
#home {background:url(img_navsprites.gif) 0 0;} — определяем фоновое изображение и его местонахождение (слева 0px, сверху 0px)
#prev {left:63px;width:43px;} — элемент сдвинут на 63px вправо (46px ширины #home + дополнительное место между элементами списка), его ширина 43px

#prev {background:url('img_navsprites. gif') -47px 0;} — определяем фоновое изображение в 47px справа (46px от изображения для #home + 1px от разделителя)
#next {left:129px;width:43px;} — элемент сдвинут на 129px вправо (#prev начинается на 63px + 43px от #prev + дополнительное место), и его ширина 43px
#next {background:url('img_navsprites.gif') -91px 0;} — определяем фоновое изображение в 91px справа (46px от изображения для #home + 1px от разделителя + 43px от изображения для #prev + 1px от разделителя)

Спрайты изображений — Эффект при наведении мыши

Теперь к нашему списку ссылок навигации добавим эффект при наведении мыши.

Стоит сказать, что псевдокласс :hover можно использовать с любыми элементами, а не только с ссылками.

Наше новое спрайтовое изображение («img_navsprites_hover.gif») содержит три изображения для навигации и три изображения для создания нужного эффекта:

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

Чтобы создать нужный эффект, достаточно к коду предыдущего примера добавить всего три строчки, а также заменить img_navsprites.gif на img_navsprites_hover.gif:

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

Результат:

Объяснение примера:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} — для всех трех изображений для эффекта, мы определяем те же самые фоновые позиции, только смещенные на 45px вниз.

Учебники по CSS для начинающих и профессионалов

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

Это руководство Для кого?

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

Что такое CSS?

CSS означает каскадные таблицы стилей. Основная идея CSS заключается в том, что он делает вашу веб-страницу красивой. Ваша веб-страница обычно состоит из HTML. Нет веб-страниц без HTML.

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

История CSS

Впервые CSS был представлен в 1996 году, мы называем его версией CSS 1. Спустя 2 года мы получили версию CSS. И последняя версия CSS — это CSS версии 3.9.0003

Есть ли у нас CSS версии 4?

Нет, мы никогда не получим CSS версии 4, потому что с CSS версии 3 изменилась концепция или подход к CSS, к разработке CSS. Вместо того, чтобы сосредотачиваться на разных версиях, они теперь разделили CSS на пару модулей, которые организованы по функциям, которые они охватывают.

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

Краткое содержание курса CSS

Предварительные требования к курсу

Вы должны иметь хотя бы базовые знания HTML. Это важно, потому что CSS создает HTML.

Чего мы ждем от вас?

Мы сделаем все возможное, чтобы охватить все CSS и связанные с ним концепции, но в то же время, если у вас есть какая-то конкретная тема, которую вы хотите, чтобы мы осветили, оставьте ее в поле для комментариев, и мы обязательно обсудим эту тему (темы) в этом учебном курсе CSS.

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

CSS — основы

CSS — погружение глубже

Дополнительные сведения о селекторах и функциях CSS

Изучение CSS — Лучшие учебные пособия по CSS (2023)

Главная
/ Учебники по кодированию
/ CSS

Генератор резюме разработчика

Высококачественное резюме за 5 минут — автоматически создается из вашего профиля gitconnected

90 067
Learn.shayhowe.com
Learn to Code Advanced HTML & CSS — Shay Howe
FreeAdvanced
View Tutorial
901 29
internetingishard.com
HTML и CSS — это сложно, но не обязательно Учебный курс CSS 3
FreeVideo
Посмотреть руководство
9012 9
bootstrapcreative.com
Управление CSS Flexbox
BeginnerFreeFlexbox
Просмотреть руководство
900 67
udemy. com
Руководство по CSS Flexbox: создание 5 настоящих гибких макетов
BeginnerVideoPaid
View Tutorial

Штирлиц — Сеть печатных салонов в Перми

Css учебник для начинающих: Учебник CSS для начинающих

CSS Иконки

Как добавить CSS иконки

Иконки Font Awesome

Иконки Bootstrap

Иконки Google

CSS спрайты изображений

Спрайты изображений — Простой пример

Спрайты изображений — Создаем список ссылок навигации

Спрайты изображений — Эффект при наведении мыши

Учебники по CSS для начинающих и профессионалов

CSS — основы

CSS — погружение глубже

Дополнительные сведения о селекторах и функциях CSS

Изучение CSS — Лучшие учебные пособия по CSS (2023)

Генератор резюме разработчика

Learn to Code Advanced HTML & CSS — Shay Howe

HTML и CSS — это сложно, но не обязательно Учебный курс CSS 3

Управление CSS Flexbox

Руководство по CSS Flexbox: создание 5 настоящих гибких макетов

Tutorial for Beginners 9 0059

Добавить комментарий Отменить ответ

Css учебник для начинающих: Учебник CSS для начинающих

CSS Иконки

Как добавить CSS иконки

Иконки Font Awesome

Иконки Bootstrap

Иконки Google

CSS спрайты изображений

Спрайты изображений — Простой пример

Спрайты изображений — Создаем список ссылок навигации

Спрайты изображений — Эффект при наведении мыши

Учебники по CSS для начинающих и профессионалов

CSS — основы

CSS — погружение глубже

Дополнительные сведения о селекторах и функциях CSS

Изучение CSS — Лучшие учебные пособия по CSS (2023)

Генератор резюме разработчика

Learn to Code HTML & CSS