Введение в CSS

Опубликовано: 1 Марта, 2022

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

ПОЧЕМУ CSS?

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

Синтаксис CSS:
CSS содержит правила стиля, которые интерпретируются браузером и затем применяются к соответствующим элементам в вашем документе.
Набор правил стиля состоит из блока выбора и объявления.

Selector -- h1
Declaration -- {color:blue;font size:12px;}

Селектор указывает на HTML-элемент, который нужно стилизовать.
Блок объявлений содержит одно или несколько объявлений, разделенных точкой с запятой.
Каждое объявление включает имя свойства CSS и значение, разделенные двоеточием.
Например:
-; цвет - свойство, а синий - значение.
-; размер шрифта - свойство, а 12 пикселей - значение.
Объявление CSS всегда заканчивается точкой с запятой, а блоки объявлений заключаются в фигурные скобки.

Example :
In the following example all p elements will be center-aligned, with a blue text color:

CSS

p {
    color: blue;
    text-align: center;
}

Селекторы CSS
Селекторы CSS используются для «поиска» (или выбора) элементов HTML на основе их имени элемента, идентификатора, класса, атрибута и т. Д.

1.THE UNIVERSAL SELECTORS : Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type

CSS

* { 
   color: #000000; 
}

Это правило отображает содержимое каждого элемента в нашем документе черным цветом.

2.THE ELEMENT SELECTOR : The element selector selects elements based on the element name. You can select all p elements on a page like this (in this case, all p elements will be center-aligned, with a red text color) :

CSS

p {
    text-align: center;
    color: red;
}

3. THE DESCENDANT SELECTOR : Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, the style rule will apply to the em element only when it lies inside the ul tag.

CSS

ul em {
   color: #000000; 
}

4. ВЫБОР ID:

Селектор id использует атрибут id элемента HTML для выбора определенного элемента.
Идентификатор элемента должен быть уникальным на странице, поэтому селектор идентификатора используется для выбора одного уникального элемента!
Чтобы выбрать элемент с определенным идентификатором, напишите символ решетки (#), за которым следует идентификатор элемента.
Правило стиля ниже будет применено к элементу HTML с id = ”para1 ″:

5. ИЗБИРАТЕЛЯ КЛАССА:

Селектор класса выбирает элементы с определенным атрибутом класса.
Чтобы выбрать элементы с определенным классом, напишите символ точки (.), За которым следует имя класса.
В приведенном ниже примере все элементы HTML с class = "center" будут красными и выровнены по центру:

You can apply more than one class selector to a given element. Consider the following example:

html

<p class="center large">This paragraph refers to two classes.</p>

6. СЕЛЕКТОРЫ ГРУППИРОВКИ

If you have elements with the same style definitions, like this:

CSS

h1 {
    text-align: center;
    color: blue;
}
  
h2 {
    text-align: center;
    color: blue;
}
  
p {
    text-align: center;
    color: blue;
}

It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma. In the example below we have grouped the selectors from the code above:

CSS

h1, h2, p {
    text-align: center;
    color: red;
}

Before CSS:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <main>
      <h1>HTML Page</h1>
      <p>This is a basic web page.</p>
  
    </main>
  </body>
</html>

После CSS

In this example, we add some CSS.

html

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <style>
      main {
        width: 200px;
        height: 200px;
        padding: 10px;
        background: beige;
      }
      h1 {
        font-family: fantasy, cursive, serif;
        color: olivedrab;
        border-bottom: 1px dotted darkgreen;
      }
      p {
        font-family: sans-serif;
        color: orange;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>HTML Page</h1>
      <p>This is a basic web page.</p>
  
    </main>
  </body>
</html>

All we did was add the following code to the example:

CSS

<style>
  main {
    width: 200px;
    height: 200px;
    padding: 10px;
    background: beige;
  }
  h1 {
    font-family: cursive;
    color: olivedrab;
    border-bottom: 1px dotted darkgreen;
  }
  p {
    font-family: sans-serif;
    color: orange;
  }
</style>

Версии CSS

CSS1
CSS2
CSS3
CSS4
Версия 4 включает: -
- CSS-Pro
- CSS-Mobile

HTML CSS

Введение в CSS

CSS

CSS

CSS

CSS

html

CSS

CSS

html

html

CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ