Учебное пособие по CSS для начинающих - добавление CSS в HTML - httpdoc.ru

Учебное пособие по CSS для начинающих - интеграция CSS с HTML

Вы когда-нибудь задумывались, насколько эти привлекательные HTML веб-сайты создаются даже тогда, когда сам HTML не имеет никаких свойств стиля? Ответ: используйте CSS с HTML. Мы встраиваем код CSS в HTML, который придает стиль элементам HTML. Поэтому мы создали это руководство по CSS, которое охватывает все основы для продвижения концепций CSS. Это руководство подходит для начинающих, поскольку язык очень простой, с конкретными примерами CSS для каждой концепции. Давайте начнем!


Что означает CSS?

CSS означает Cascading Style Sheets . В полной форме CSS «каскадирование» - очень важное слово. Если вы не понимаете концепцию каскадирования, может случиться так, что CSS, примененный к элементу, не работает. В соответствии с developer.mozilla.org , «Каскадирование» - это механизм выбора правила CSS для применения к элементу. Предположим, вы определили два правила для одного и того же элемента. Теперь каскадный алгоритм выберет только один и применит его к элементу. Например:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Basic Example </title>  
  <meta charset="UTF-8">  
<style>  
h1{color:red;}
h1{color:blue;}
</style>  
</head>  

<body>  
<h1> Hello World.. </h1>  
</body>  
</html>

Обратите внимание, что в приведенном выше примере мы применили два разных цвета к одному и тому же заголовку. Однако синий цвет выбирается алгоритмом CSS Cascade. Это означает, что порядок стилей CSS важен в случае конфликта. В этом случае свойство, которое было записано позже или которое идет последним, побеждает в гонке и применяется.

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

«Таблицы стилей» довольно просты для понимания, мы создаем разные таблицы со свойствами стилей и используем их на веб-сайте. Вы можете создать несколько таблиц стилей, ограничений нет.

Теперь, когда мы поняли значение CSS, давайте рассмотрим несколько примеров свойств CSS.


CSS Образец дизайна: что делать с CSS

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

давайте посмотрим несколько примеров дизайна CSS:

CSS тени

Эффект CSS Shadow придает элементу HTML плавающий вид. Если все сделано правильно, эта небольшая функция может сделать веб-сайты очень привлекательными.

Пример CSS-теней:


CSS градиент

Градиент - это сочетание двух или более цветов. В градиентах один цвет плавно переходит в другой и так далее.

Пример CSS-градиента:

Градиент - сверху вниз


CSS-кнопка при наведении курсора

Свойство CSS Button hover очень популярно. С помощью свойства CSS hover мы можем изменить стиль любого элемента HTML при наведении курсора на него.

Пример наведения кнопки CSS:

CSS Hover Buttons

CSS анимация

CSS-анимация - это способ добавления анимированных эффектов к HTML-элементам.

Пример CSS-анимации:


Зачем использовать CSS?

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

  • CSS экономит время: он экономит много времени, так как одну таблицу стилей можно использовать на нескольких страницах. Нет необходимости писать одну и ту же таблицу стилей CSS на всех страницах. Один файл можно использовать на всех тех страницах, где требуется одинаковый стиль веб-страниц. Это также уменьшает время загрузки страницы, поскольку размер передаваемых файлов уменьшается из-за расширения reusing of code .
  • Совместимость с несколькими устройствами: CSS может оптимизировать одну и ту же веб-страницу для адаптации различных окон просмотра (экранов). Он создает веб-страницу compatible и readable на всех устройствах, таких как ноутбуки, планшеты, мобильные телефоны и т. Д., С экранами разных размеров.
  • Улучшает функциональность HTML: CSS имеет большое количество атрибутов по сравнению с HTML, который предоставляет только ограниченное количество атрибутов стиля.
  • Страницы загружаются быстрее: когда мы используем одну и ту же таблицу стилей на нескольких веб-страницах, загрузка страниц ускоряется из-за повторного использования кода.
  • Адаптивный макет: он может очень легко оптимизировать веб-страницу для соответствия разным размерам экрана. Разные устройства имеют разные размеры экрана, а функции CSS позволяют программисту адаптировать свой веб-сайт к этим устройствам. Адаптивный характер CSS делает веб-страницу совместимой и удобной для чтения на экранах разных размеров.
  • Глобальные веб-стандарты. В настоящее время веб-стандарты не одобряют использование основных атрибутов стиля HTML, и рекомендуется использовать CSS.

Интегрируйте CSS с HTML

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

В HTML есть тег под названием <style> tag. Это парный тег , то есть один открывающий и один закрывающий теги, например. <style> Код CSS </style> . Этот тег встраивает CSS в HTML, это специальный тег для добавления CSS. Итак, мы пишем весь CSS внутри <style> тега. С другой стороны, код CSS, написанный вне <style> тега, представляет собой простой текст для браузера.

Есть разные способы встраивать CSS с HTML по типу CSS. Да, в CSS тоже есть типы. Но не беспокойтесь, это очень простые концепции, мы вернемся к ним позже в уроке. Давайте посмотрим на наш первый пример CSS:

Первый пример CSS:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Basic Example </title>	
  <meta charset="UTF-8">	
<style>  
 h1{    
  color: white;    
  background-color: green;    
  padding: 5px;    
 }    
 p{    
 color: blue;    
 }    
</style>  
</head>  

<body>  
<h1> Hello World.. </h1>  
<p> Welcome to CSS </p>  
</body>  
</html>

Выход

CSS Basic Example

Привет, мир..

Добро пожаловать в CSS


Объяснение

В приведенном выше примере <style> тег используется для встраивания CSS в HTML. Весь CSS должен быть внутри <style> тега. Селекторы для определенного тега используются для придания ему стиля. Например, h1 { } и p { } селекторы используются для заголовка и пункта соответственно. Давайте посмотрим, какие свойства CSS используются:

  • color: определяет цвет текста заголовка и абзаца.
  • background-color: определяет цвет фона заголовка.
  • padding: указывает заполнение внутри элемента. Заполнение - это пространство между границей HTML-элемента и его содержимым.

Вы можете попробовать наши Онлайн редактор и может вносить соответствующие изменения.

До сих пор в этом руководстве мы давали вам краткое введение в CSS. В следующем уроке CSS мы узнаем о CSS синтаксис .


Указатель учебного пособия по HTML

Sr.No. Темы Учиться
1 Что такое CSS Учиться
2 Учебник CSS Учиться
3 CSS синтаксис Учиться
5 Селектор CSS Учиться
6 Фон CSS Учиться
7 CSS Display Учиться
8 CSS Float Учиться
9 CSS шрифт Учиться
10 Значок CSS Учиться
11 Ссылка CSS Учиться
12 Таблица CSS Учиться
13 CSS Line Hight Учиться
14 CSS непрозрачность Учиться
15 Высота и ширина CSS Учиться
16 CSS переполнение Учиться
17 Позиция CSS Учиться
18 Пустое пространство CSS Учиться
19 CSS Word Wrap Учиться
20 Модель коробки CSS Учиться
21 CSS Padding Учиться
22 CSS свойство margin Учиться
23 Граница CSS Учиться
24 CSS-формы Учиться
25 HTML полужирный тег Учиться
26 Панель навигации CSS Учиться
27 Подсказка CSS Учиться
28 Кнопки CSS Учиться
29 CSS-пагинация Учиться
30 Селекторы атрибутов CSS Учиться
31 CSS3 падающие тени Учиться
32 CSS3 2D-преобразования Учиться
33 CSS3 3D-преобразования Учиться
34 CSS3 переход Учиться
35 CSS3 Анимация Учиться
36 Макет CSS3 Учиться
37 CSS3 фильтр Учиться
38 HTML-тег видео учиться