dir.by  
Праздники ...
Праздники ...
День Святого Валентина (14 Февраля)
Концерты, выставки, цирки ...
Концерты, выставки, цирки ...
Спектакль "Утиная охота" г. Гомель 23 января, 11 февраля, 15 февраля 2026
Афишу
Спорт занятия ...
Спорт занятия ...
Бокс, тайский бокс, фитнес : total body, стретчинг, кикбоксинг
Спорт занятие
Компьютеры, игры, программирование
Компьютеры, игры, программирование
Объявления ...
Объявления ...
Ремонт швейных машин и оверлоков
Объявление
Форум (ваши вопросы, обсуждение)
Форум (ваши вопросы, обсуждение)
Программирование, разработка, тестирование
→
Html & CSS
→
CSS описание
  Посмотрели 5779 раз(а)    
 Что такое CSS ? 
последнее обновление: 5 февраля 2020
CSS - это стили (название шрифта, размер шрифта, выравнивание текста по горизонтали, толщина линии, ...)
CSS (Cascading Style Sheets) Каскадные Стили Документа
Размещение стилей CSS
CSS шрифты, размеры и т.д. могут размещаться:
• внутри HTML файла
• в отдельном css файле
CSS стили внутри HTML файла
CSS стили объявляется внутри секции <style>
<style>
    название1 {стиль1}
    название2 {стиль2}
    название3 {стиль3}
    ...
</style>

Пример!
  Html     CSS стили внутри HTML файла
<html>

     <head>
          <!-- заголовок -->
          <meta charset="utf-8">
          <title>Example</title>

          <!-- CSS стили -->
          <style>
               .my {color:green; font-weight:600;}
          </style>
     </head>

     <!-- страница -->
     <body>
          <!-- используем стиль my -->
          <font class="my">Hello!</font>
     </body>

</html>
Результат примера
CSS стили в файле .css
CSS стили описываются так:
название1 {стиль1}
название2 {стиль2}
название3 {стиль3}
...
подключаем файл css в файл html
<link rel="stylesheet" href="Имя CSS файла.css">
Пример
  CSS     Файл 1.css
/* CSS стили */
.my { color:green; font-weight:600; }
  Html     файл 1.html
<html>

     <!-- заголовок страницы -->
     <head>
          <meta charset="utf-8">
          <title>Example</title>
     </head>

     <!-- подключаем файл css -->
     <link rel="stylesheet" href="1.css">

     <!-- страница -->
     <body>
          <font class="my">Hello!</font>
     </body>

</html>
Результат примера
Как подключается CSS стиль в HTML элемент?
1. через атрибут class
2. через атрибут id
3. по имени элемента
1. Подключение через атрибут class
HTML элемент
<... class="Имя Стиля" ...>
CSS
.Имя Стиля {Стили}
  Html     Пример
<style>
     .my1 {color:red;}
</style>

<div class='my1'>
     Hello
</div>
2. Подключение через атрибут id
HTML элемент
<... id="Имя Стиля" ...>
CSS
#Имя Стиля {Стили}
  Html     Пример
<style>
     #my2 {color:green;}
</style>

<div id='my2'>
     Good Morning
</div>
3. Подключение по имени элемента
HTML элемент
<Имя Элемента ...>
CSS
Имя Элемента {Стили}
  Html     Пример
<style>
     a {color: orange}
</style>

<a href='https://dir.by'>
     Super
</a>
 
← Предыдущая тема
HTML <canvas> рисуем змею линиями moveTo, lineTo
 
Следующая тема →
После изменения файла css , в браузере раз за разом отображаются старые стили. Почему?
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)
Экскурсии по Москве Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
  Объявления  
  Объявления  
 
HTML элементы
• HTML тег <a> ссылка для перехода на другую страницу
• HTML тег <abbr> показывает сокращенное название, если подвести мышку будет всплывающая надпись
• HTML теги fieldset и legend. Это рамка с заголовком
• HTML тег <!-- --> комментарий
• style="border" В HTML

HTML поиск элемента, элементов
• document.querySelector(...) это JavaScript метод для поиска элемента из document (то есть во всем HTML)
• yourElement.querySelectorAll(...) это JavaScript метод для поиска элементов внутри другого HTML элемента

HTML svg (векторная графика для рисования линий, прямоугольников, эллипсов, ...)
• <svg> векторная графика, рисуем линию<line>, прямоугольник <rect>, круг<circle>, текст<text>

HTML canvas (рисование картинок, текста, фигур)
• HTML <canvas> рисуем прямоугольник
• HTML <canvas> рисуем линии по нажатию мышкой на Canvas
• HTML <canvas> рисуем картинки
• HTML <canvas> рисуем картинку с поворотом
• HTML <canvas> рисуем картинку с горизонтальным отражением
• HTML <canvas> рисуем картинку и текст
• HTML <canvas> рисуем картинку много раз в прямоугольнике (шаблон)
• HTML <canvas> как получить координаты мыши ? Определяем позицию мыши.
• HTML <canvas> рисуем змею линиями moveTo, lineTo
CSS
• CSS описание
• После изменения файла css , в браузере раз за разом отображаются старые стили. Почему?
• Книги для изучения CSS
CSS flex (элемент может растягиваться или сжиматься и таким образом заполнять свободное пространство)
• Что такое CSS flex
Freeze
• Шапка в таблице всегда видна при скролинге | freeze header in table | HTML
• Div всегда виден при скролинге (position:fixed, position:sticky) | freeze div | HTML
Делаем Popup используя HTML и Javascript
• Как сделать Popup окно в HTML странице | Javascript, HTML, CSS
Движение и анимация картинок
• Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
• Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
• Рисуем картинку с движением. Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
• Рисуем картинку с движением и анимацией (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
Web страница на телефоне
• Открываю web страницу на телефоне в Google Chrome. Почему при двойном нажатии размер страницы увеличивается?
Верстка, дизайн страницы
• Что такое Front-end разработка?
• Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML
• Как сделать чтобы ваш сайт работал на телефоне, планшете, компьютере используем css media и max-device-width и min-device-width | HTML | CSS
• Как сделать чтобы ваш сайт соответствовал по размерам на телефоне, планшете ? (HTML meta с атрибутом name='viewport')
• Правильная верстка HTML. Плохо использовать table. Нужно использовать div
• Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?
• Меняем цвет scrollbar (полосы прокрутки) для HTML страницы. Используем CSS
WWW сайты для изучения
• Сайты для изучения HTML
  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика