SlideShare a Scribd company logo
1 of 11
Download to read offline
Что такое CSS
3.1 BASICS
Каскадные таблицы стилей
(Cascading Style Sheets = CSS)
это язык, который отвечает за визуальное
представление документов пользователю
Подключение CSS отдельным внешним файлом с
расширением .css. Самый удобный способ. Он
гарантирует максимально лёгкое и удобное
редактирование стилей и не нагружает страницу.
Способы подключения стилей к
странице
<head>
<link href="style.css" rel="stylesheet">
</head>
● stylesheet - определяет, что подключаемый файл
таблицу стилей (CSS)
Добавим стиль
body {
font-size: 10px;
color: white;
background-color: blue;
}
Разберём поближе
селектор {
свойство: значение;
}
Селектор — это некоторое имя стиля, для которого
добавляются параметры форматирования.
Свойство — это сам стиль
index.html style.css
ПРАКТИКА….
«Мүмкүнчүлүктөрү чектелген адамдарга карата IT окутуу» проекти Европалык Союзу тарыбынан
финансылоо болгон.
Бул документин мазмуну толугу менен IT Академиянын жоопкерчилиги жана эч кандай жолунда
Европалык Комиссиянын көз карашын көргөзбөйт.
Проект «IT тренинг для людей с ограниченными возможностями» финансирован Европейским Союзом.
Содержание этого документа полностью является ответственностью IT Academy и никак не отражает
взгляды Европейской Комиссии.
The project “Promotion of IT training for people with disabilities” is financed by the European Union.
The content of this document is the sole responsibility of IT Academy and can in no way be taken to reflect the views of
the European Commission.
#programmingwithoutbarriers
#cheksizprogramming

More Related Content

Similar to 3.1 BASICS CSS

Внедрение CSS в HTML документ
Внедрение CSS в HTML документВнедрение CSS в HTML документ
Внедрение CSS в HTML документVasya Petrov
 
Презентация на тему "WEB-программирование"
Презентация на тему "WEB-программирование"Презентация на тему "WEB-программирование"
Презентация на тему "WEB-программирование"Gotti Vartanyan
 
Создание веб-сайта. Курс молодого бойца
Создание веб-сайта. Курс молодого бойцаСоздание веб-сайта. Курс молодого бойца
Создание веб-сайта. Курс молодого бойцаAnton Cherepov
 
Андрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass frameworkАндрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass frameworkAlbina Tiupa
 
Отполифиль свой CSS - MinskCSS 2
Отполифиль свой CSS - MinskCSS 2Отполифиль свой CSS - MinskCSS 2
Отполифиль свой CSS - MinskCSS 2Vasiliy Vanchuck
 
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
 Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И... Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...Тарасов Константин
 

Similar to 3.1 BASICS CSS (7)

Внедрение CSS в HTML документ
Внедрение CSS в HTML документВнедрение CSS в HTML документ
Внедрение CSS в HTML документ
 
Презентация на тему "WEB-программирование"
Презентация на тему "WEB-программирование"Презентация на тему "WEB-программирование"
Презентация на тему "WEB-программирование"
 
Препроцессор SASS
Препроцессор SASSПрепроцессор SASS
Препроцессор SASS
 
Создание веб-сайта. Курс молодого бойца
Создание веб-сайта. Курс молодого бойцаСоздание веб-сайта. Курс молодого бойца
Создание веб-сайта. Курс молодого бойца
 
Андрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass frameworkАндрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass framework
 
Отполифиль свой CSS - MinskCSS 2
Отполифиль свой CSS - MinskCSS 2Отполифиль свой CSS - MinskCSS 2
Отполифиль свой CSS - MinskCSS 2
 
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
 Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И... Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
 

More from IT Academy Project EU

JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)IT Academy Project EU
 
Использование Google Fonts
Использование Google FontsИспользование Google Fonts
Использование Google FontsIT Academy Project EU
 
Создаем границы для элементов в CSS
Создаем границы для элементов в CSSСоздаем границы для элементов в CSS
Создаем границы для элементов в CSSIT Academy Project EU
 
Работа с графикой (GIMP)
Работа с графикой (GIMP)Работа с графикой (GIMP)
Работа с графикой (GIMP)IT Academy Project EU
 
3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSS3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSSIT Academy Project EU
 
3.1.5 Основные селекторы
3.1.5 Основные селекторы3.1.5 Основные селекторы
3.1.5 Основные селекторыIT Academy Project EU
 
3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифта3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифтаIT Academy Project EU
 
CSS - Basic properties and attributes
CSS - Basic properties and attributesCSS - Basic properties and attributes
CSS - Basic properties and attributesIT Academy Project EU
 

More from IT Academy Project EU (20)

Переменные PHP.pdf
Переменные PHP.pdfПеременные PHP.pdf
Переменные PHP.pdf
 
Js. alert, prompt, confirm
Js. alert, prompt, confirmJs. alert, prompt, confirm
Js. alert, prompt, confirm
 
Введение в DOM
Введение в DOMВведение в DOM
Введение в DOM
 
JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Что такое framework?
Что такое framework?Что такое framework?
Что такое framework?
 
1.1.1 Text Alternatives
1.1.1 Text Alternatives1.1.1 Text Alternatives
1.1.1 Text Alternatives
 
Использование Google Fonts
Использование Google FontsИспользование Google Fonts
Использование Google Fonts
 
Создаем границы для элементов в CSS
Создаем границы для элементов в CSSСоздаем границы для элементов в CSS
Создаем границы для элементов в CSS
 
Работа с графикой (GIMP)
Работа с графикой (GIMP)Работа с графикой (GIMP)
Работа с графикой (GIMP)
 
4.5 Веб-дизайн
4.5 Веб-дизайн4.5 Веб-дизайн
4.5 Веб-дизайн
 
3.5.5 Свойства Margin
3.5.5 Свойства Margin3.5.5 Свойства Margin
3.5.5 Свойства Margin
 
3.5.4 Свойства Padding
3.5.4 Свойства Padding3.5.4 Свойства Padding
3.5.4 Свойства Padding
 
3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSS3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSS
 
CSS - Цвета
CSS - ЦветаCSS - Цвета
CSS - Цвета
 
3.1.5 Основные селекторы
3.1.5 Основные селекторы3.1.5 Основные селекторы
3.1.5 Основные селекторы
 
3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифта3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифта
 
2.4.7 HTML - Формы
2.4.7 HTML - Формы2.4.7 HTML - Формы
2.4.7 HTML - Формы
 
CSS - Basic properties and attributes
CSS - Basic properties and attributesCSS - Basic properties and attributes
CSS - Basic properties and attributes
 
HTML - Гиперссылки
HTML - ГиперссылкиHTML - Гиперссылки
HTML - Гиперссылки
 

3.1 BASICS CSS

  • 2. Каскадные таблицы стилей (Cascading Style Sheets = CSS) это язык, который отвечает за визуальное представление документов пользователю
  • 3.
  • 4. Подключение CSS отдельным внешним файлом с расширением .css. Самый удобный способ. Он гарантирует максимально лёгкое и удобное редактирование стилей и не нагружает страницу. Способы подключения стилей к странице
  • 5. <head> <link href="style.css" rel="stylesheet"> </head> ● stylesheet - определяет, что подключаемый файл таблицу стилей (CSS)
  • 6. Добавим стиль body { font-size: 10px; color: white; background-color: blue; }
  • 7. Разберём поближе селектор { свойство: значение; } Селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. Свойство — это сам стиль
  • 8.
  • 11. «Мүмкүнчүлүктөрү чектелген адамдарга карата IT окутуу» проекти Европалык Союзу тарыбынан финансылоо болгон. Бул документин мазмуну толугу менен IT Академиянын жоопкерчилиги жана эч кандай жолунда Европалык Комиссиянын көз карашын көргөзбөйт. Проект «IT тренинг для людей с ограниченными возможностями» финансирован Европейским Союзом. Содержание этого документа полностью является ответственностью IT Academy и никак не отражает взгляды Европейской Комиссии. The project “Promotion of IT training for people with disabilities” is financed by the European Union. The content of this document is the sole responsibility of IT Academy and can in no way be taken to reflect the views of the European Commission. #programmingwithoutbarriers #cheksizprogramming