Пользователь
-
Автор темы
- #1
CSS расшифровывается как Каскадные таблицы стилей
CSS описывает, как элементы HTML должны быть представлены на экране
CSS может управлять макетом нескольких веб-страниц одновременно
Включает добавление визуальных элементов, таких как цвет, шрифты, макеты и т.д.
Синтаксис CSS таков:
Каждое свойство заканчивается точкой с запятой.
Каждое свойство содержит имя свойства CSS и значение, разделенные двоеточием.
Ниже приведен пример, чтобы увидеть, как CSS изменяет HTML - код:
Теперь, добавив CSS к приведенному выше HTML-коду
CSS описывает, как элементы HTML должны быть представлены на экране
CSS может управлять макетом нескольких веб-страниц одновременно
Включает добавление визуальных элементов, таких как цвет, шрифты, макеты и т.д.
Синтаксис CSS таков:
CSS:
selector {
properties ;
}Каждое свойство содержит имя свойства CSS и значение, разделенные двоеточием.
Ниже приведен пример, чтобы увидеть, как CSS изменяет HTML - код:
CSS:
<h1>Welcome to Yougame </h1>
<h2>Where coding is a way of life.. </h2>
CSS:
h1 { font-family : monospace ; }
h2 { color : blue ; }Как и HTML, CSS также содержит комментарии и может использоваться для определения различных разделов стилей элементов HTML, которые могут легко помочь в изменениях на более позднем этапе. Вы также можете описать, где можно использовать определенные общие стили.
Комментарий CSS начинается /* и заканчивается */. Комментарии также могут занимать несколько строк.
Комментарий CSS начинается /* и заканчивается */. Комментарии также могут занимать несколько строк.
Браузер форматирует HTML-документ на основе информации в таблице стилей. Браузер получает доступ к таблицам стилей из самого HTML-документа. Существует 3 способа добавления стилей CSS в ваш документ. Каждый из них может содержать несколько свойств:
Встроенные стили
Внутренние стили
Внешние стили
Порядок каскадирования определяет, какой стиль будет применен к элементу при использовании нескольких стилей.
Приоритет каскадного порядка: Встроенный > ( внутренний ≅ внешний ) > браузер по умолчанию.
Внутренний и внешний CSS обрабатываются браузером одинаково. Но порядок их определения решает, какому имуществу будет отдано предпочтение.
Если ссылка на внешний CSS определена перед внутренним CSS, то свойства внутреннего CSS получат предпочтение, т. е. внутренний CSS > внешний CSS.
Если ссылка на внешний CSS определена после внутреннего CSS, свойства внешнего CSS получат предпочтение перед внутренним CSS, т. е. внешний CSS > внутренний CSS.
3.1. Встроенные стили
Встроенная таблица стилей применяется непосредственно к нашему HTML-коду с помощью атрибута style. Синтаксис встроенной таблицы стилей содержит свойства, записанные внутри атрибута стиля. Одновременно можно определить несколько свойств. Встроенный стиль используется для применения уникального стиля к одному элементу.
Вы можете использовать встроенные стили, подобные этому:
3.2. Внутренние стили
Внутренняя или внутристраничная таблица стилей содержит код CSS для веб-страницы. Внутренняя таблица стилей содержит стили только для этого HTML-документа. Они не могут быть использованы повторно. Внутренний CSS может быть применен с помощью тега <style> внутри тега <head>.
3.3. Внешние стили
С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив всего один файл. Синтаксис аналогичен внутренним таблицам стилей, но применяется с использованием совершенно другого CSS-файла. Он сохраняется с расширением.css. Например, "styles.css".
Для использования внешней таблицы стилей предоставляется ссылка на файл внутри элемента <link> :
rel определяет связь со связанным документом(здесь, favicon).
Href определяет расположение выровненного документа(здесь, favicon).
type определяет тип носителя связанного документа(здесь, favicon).
ПРИМЕЧАНИЕ: Элемент <link> находится внутри раздела <head>. Файл "styles.css" содержит только синтаксический код CSS.
Встроенные стили
Внутренние стили
Внешние стили
Порядок каскадирования определяет, какой стиль будет применен к элементу при использовании нескольких стилей.
Приоритет каскадного порядка: Встроенный > ( внутренний ≅ внешний ) > браузер по умолчанию.
Внутренний и внешний CSS обрабатываются браузером одинаково. Но порядок их определения решает, какому имуществу будет отдано предпочтение.
Если ссылка на внешний CSS определена перед внутренним CSS, то свойства внутреннего CSS получат предпочтение, т. е. внутренний CSS > внешний CSS.
Если ссылка на внешний CSS определена после внутреннего CSS, свойства внешнего CSS получат предпочтение перед внутренним CSS, т. е. внешний CSS > внутренний CSS.
3.1. Встроенные стили
Встроенная таблица стилей применяется непосредственно к нашему HTML-коду с помощью атрибута style. Синтаксис встроенной таблицы стилей содержит свойства, записанные внутри атрибута стиля. Одновременно можно определить несколько свойств. Встроенный стиль используется для применения уникального стиля к одному элементу.
Вы можете использовать встроенные стили, подобные этому:
CSS:
<p style ="color:blue;font-size:40px" >Встроенный CSS </p>Внутренняя или внутристраничная таблица стилей содержит код CSS для веб-страницы. Внутренняя таблица стилей содержит стили только для этого HTML-документа. Они не могут быть использованы повторно. Внутренний CSS может быть применен с помощью тега <style> внутри тега <head>.
CSS:
<style>
h1 { color:blue ; }
h2 { color:red ; }
p { color:green ; }
</style>С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив всего один файл. Синтаксис аналогичен внутренним таблицам стилей, но применяется с использованием совершенно другого CSS-файла. Он сохраняется с расширением.css. Например, "styles.css".
Для использования внешней таблицы стилей предоставляется ссылка на файл внутри элемента <link> :
CSS:
<link rel ="stylesheet" type ="text/css" href ="styles.css" >Href определяет расположение выровненного документа(здесь, favicon).
type определяет тип носителя связанного документа(здесь, favicon).
ПРИМЕЧАНИЕ: Элемент <link> находится внутри раздела <head>. Файл "styles.css" содержит только синтаксический код CSS.
Селекторы указывают на HTML-элемент, который мы хотим стилизовать. Мы используем селекторы во внутренних и внешних таблицах стилей. Существует в основном 3 типа селекторов, которые используются для применения стилей:
Селектор элементов
Селектор классов
Селектор идентификаторов
Специфика здесь определяет, какой стиль будет применен, когда к элементу применяются одни и те же несколько стилей. Если специфика одинакова, то применяется последнее правило.
Порядок конкретизации:inline > id selector > class selector > tag selector > browser default.
ПРИМЕЧАНИЕ: Если какое-либо свойство определено внутри селектора того же типа, то свойство, определенное последним, будет использоваться браузером.
4.1. Селектор элементов
Селектор элементов выбирает все элементы с указанным именем элемента. При этом будут выбраны все элементы в HTML-документе. Но в большинстве случаев мы этого не хотим. Итак, чтобы применить стили только к некоторым элементам, нам нужно использовать некоторые ограничения. Мы рассмотрим это позже только в этом разделе.
Синтаксис: element { css declarations ; }
Например, применяя стиль к тегу h2 следующим образом:
<h1> Blue color </h1>
И применяя css, как это:
h1 { color : blue ; }
4.2. Выбор класса
Селектор классов выбирает несколько элементов с определенным атрибутом класса. Чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует название класса.
Syntax: .class-name { css declarations ; }
Чтобы использовать селектор классов, атрибут class используется в открывающем теге элемента.
Значение атрибута class содержит имя класса. В тег может быть добавлено несколько классов, если между ними указать пробел.
Например, определение классов в HTML-файле следующим образом:
И применяя css, как это:
4.3. Селектор идентификаторов
Селектор идентификаторов выбирает только один элемент с определенным атрибутом идентификатора. Чтобы выбрать элемент с определенным идентификатором, введите символ хэша (#), за которым следует имя идентификатора
Чтобы использовать селектор идентификаторов, атрибут id используется в открывающем теге элемента. Значение атрибута id содержит имя идентификатора. В теге может быть только один идентификатор. Идентификатор уникален на HTML-странице. Если другому элементу присвоен тот же идентификатор, стили не будут применены браузером.
И применяя css, как это:
4.4. Селекторы группирования
В большинстве случаев мы используем один и тот же css для нескольких элементов, и мы не можем использовать слишком много классов. Это привело бы к занятиям, не имеющим никакого смысла в сценарии, и стало бы трудно управлять ими.
Таким образом, CSS предоставляет функцию группировки, в которой вы можете применять правила CSS к нескольким элементам с использованием комбинации тега, класса или идентификатора. Для группировки мы используем запятую между различными селекторами.
4.5. Селекторы Вложенности
Бывают случаи, когда мы хотим настроить таргетинг на элементы внутри определенного раздела HTML-страницы. Таким образом, вместо использования классов мы можем использовать вложенность, которая работает как иерархия и проста для понимания.
Чтобы использовать вложенность, используйте пробел между селекторами таким образом, чтобы последовательность представляла иерархию, начиная сверху.
Вот несколько примеров:
4.6. Селекторы Цепочек
Бывают случаи, когда у нас есть(или мы хотим иметь) один и тот же класс для нескольких элементов, и мы хотим применить стиль/стили к одному/некоторым из них. Затем мы можем использовать селекторы цепочек.
Для использования цепочки мы используем комбинацию селекторов без какого-либо пространства между ними.
Например, у нас есть класс "стиль заголовка", применяемый к каждому заголовку. Мы можем применить к ним разные стили, например, так:
Селектор элементов
Селектор классов
Селектор идентификаторов
Специфика здесь определяет, какой стиль будет применен, когда к элементу применяются одни и те же несколько стилей. Если специфика одинакова, то применяется последнее правило.
Порядок конкретизации:inline > id selector > class selector > tag selector > browser default.
ПРИМЕЧАНИЕ: Если какое-либо свойство определено внутри селектора того же типа, то свойство, определенное последним, будет использоваться браузером.
4.1. Селектор элементов
Селектор элементов выбирает все элементы с указанным именем элемента. При этом будут выбраны все элементы в HTML-документе. Но в большинстве случаев мы этого не хотим. Итак, чтобы применить стили только к некоторым элементам, нам нужно использовать некоторые ограничения. Мы рассмотрим это позже только в этом разделе.
Синтаксис: element { css declarations ; }
Например, применяя стиль к тегу h2 следующим образом:
<h1> Blue color </h1>
И применяя css, как это:
h1 { color : blue ; }
4.2. Выбор класса
Селектор классов выбирает несколько элементов с определенным атрибутом класса. Чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует название класса.
Syntax: .class-name { css declarations ; }
Чтобы использовать селектор классов, атрибут class используется в открывающем теге элемента.
Значение атрибута class содержит имя класса. В тег может быть добавлено несколько классов, если между ними указать пробел.
Например, определение классов в HTML-файле следующим образом:
CSS:
<p class ="red" >I am red1 </p>
<p class ="blue right" >I am blue1 </p>
<p class="red" >I am red2 </p>
<p class ="blue right" >I am blue2 </p>
CSS:
.red { color :red; }
.blue { color :blue; }
.right { text-align :right; }Селектор идентификаторов выбирает только один элемент с определенным атрибутом идентификатора. Чтобы выбрать элемент с определенным идентификатором, введите символ хэша (#), за которым следует имя идентификатора
Чтобы использовать селектор идентификаторов, атрибут id используется в открывающем теге элемента. Значение атрибута id содержит имя идентификатора. В теге может быть только один идентификатор. Идентификатор уникален на HTML-странице. Если другому элементу присвоен тот же идентификатор, стили не будут применены браузером.
CSS:
<p id="one" >This is id one! </p>
<p id="two" >This is id two! </p>
<p id="three" >This is id three! </p>
<p id="four" >This is id four! </p>
CSS:
#one {color : blue ; }
#two {background-color : teal ; }
#three {color : green ; }
#four {background-color : lightgrey ; }В большинстве случаев мы используем один и тот же css для нескольких элементов, и мы не можем использовать слишком много классов. Это привело бы к занятиям, не имеющим никакого смысла в сценарии, и стало бы трудно управлять ими.
Таким образом, CSS предоставляет функцию группировки, в которой вы можете применять правила CSS к нескольким элементам с использованием комбинации тега, класса или идентификатора. Для группировки мы используем запятую между различными селекторами.
CSS:
p, .class-name { CSS properties } примените стили к "para" и элементу с классом как "class-name"
#id1, #id2, span { CSS properties } примените стили к "span" и элементам с идентификаторами "id1" и "id2"
.class-name , #id1 , div{ CSS properties } примените стили к "div" и элементам с классом "class-name" и идентификатором "id1"Бывают случаи, когда мы хотим настроить таргетинг на элементы внутри определенного раздела HTML-страницы. Таким образом, вместо использования классов мы можем использовать вложенность, которая работает как иерархия и проста для понимания.
Чтобы использовать вложенность, используйте пробел между селекторами таким образом, чтобы последовательность представляла иерархию, начиная сверху.
Вот несколько примеров:
CSS:
.class-name span { CSS declarations } применяйте стили только к тем областям', которые находятся внутри элемента с классом "class-name"
#id1 .class-name span { CSS declarations } применяйте стили только к тем "span", которые находятся внутри элемента с классом "class-name", а "class-name" находится внутри элемента с идентификатором "id1"Бывают случаи, когда у нас есть(или мы хотим иметь) один и тот же класс для нескольких элементов, и мы хотим применить стиль/стили к одному/некоторым из них. Затем мы можем использовать селекторы цепочек.
Для использования цепочки мы используем комбинацию селекторов без какого-либо пространства между ними.
Например, у нас есть класс "стиль заголовка", применяемый к каждому заголовку. Мы можем применить к ним разные стили, например, так:
CSS:
h1.header-style { CSS declarations }
h2.header-style { CSS declarations }
