Изучение таблиц стилей CSS

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

Справочная статья: Повтор фонового изображения CSS (w3schools.com)

1. Введение в CSS

• CSS расшифровывается как каскадные таблицы стилей.
• CSS описывает, как элементы HTML отображаются на экране, бумаге или другом носителе.
• CSS экономит много работы. Он может управлять макетом нескольких веб-страниц одновременно.
• Внешние таблицы стилей хранятся в файлах CSS.

2. Синтаксис CSS и его основы

Базовая структура: синтаксис, селекторы, методы использования, методы аннотации.

Правила CSS состоят из селекторов и блоков объявлений.

грамматика:

 Анализ:

Существует пять типов селекторов CSS, некоторые из которых также описаны в HTML.

1. Селектор элементов CSS   (некоторые основные элементы HTML)

  Например: p{ } h1{ } div{ }

2. Селектор идентификатора CSS (пользовательский элемент HTML)

Например: #дада{ }

3. Селектор класса CSS      (элементы настраиваются с помощью класса)

Например: .dada{ } или: p.dada{ }      //В этом случае вы можете указать атрибут дада элемента p!

4. Универсальный селектор CSS

  Используйте *{} для прямого применения ко всем элементам css.

5 групповых селекторов     (то есть для объединения некоторых элементов с одинаковым стилем css для уменьшения объема кода)

   р，h1，дел{}   

Три способа использования CSS:

1. Внешний CSS (то есть пользовательскую таблицу стилей, а затем указать таблицу стилей. <link rel="stylesheet" href="mystyle.css"> )

Примечание. Некоторые атрибуты в стиле css не содержат пробелов! ! ! Например: witdh:300px Здесь не должно быть пробелов.

2. Внутренний CSS (то есть стиль CSS, размещенный в голове)

3. Встроенный CSS (объявлен с использованием стиля style внутри!)

Примечание. В случае, когда используются три вышеуказанных метода, приоритет встроенного стиля выше, чем у двух предыдущих!

Метод аннотации:

В html метод аннотации: <!-- -->

В CSS метод комментариев: /* */

Цвета и фон CSS

Введение цвета CSS и HTML такое же, здесь дополнительная память для элемента прозрачности.

          В цветах CSS вы можете использовать непрозрачность для представления прозрачности:

                div {                        цвет фона: зеленый; непрозрачность: 0,3;                       }

                       

           Вы также можете использовать RGBA для добавления прозрачности:

                   div {                background: rgba(0, 128, 0, 0.3 ) /* Зеленый фон с непрозрачностью 30% */                         }

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background(сокращенное свойство)

цвет фона: цвет фона

Фоновое изображение: background-image:url("");

Повторение фонового изображения: Установите без повторения: background-repeat: no-repeat, Repeat-x, Repeat-y.

background-image-position: background-position: слева вверху

Прикрепление фонового изображения: background-attachment: исправлено, прокрутка. (одно фиксированное положение)

Сокращенные свойства фонового изображения:

Например:    эквивалентно включению всех вышеперечисленных атрибутов

body {   background: #ffffff url("img_tree.png") без повторов right top; } 

CSS границы, поля, отступы

Свойства границы:

стиль границы: установите стиль границы , например: сплошной. Обозначает жирным шрифтом.

                      сплошной, пунктирный (пунктирная граница), нет, двойной

border-width: Ширина границы . (Это ширина черной линии.)

        У него четыре границы: верхняя, правая, нижняя, левая. (По часовой стрелке.)

border-color: цвет границы , также имеет четыре границы.

border-radius: Установите закругленную границу .

Вышеупомянутые четыре границы также можно написать так: border-top-color (Какая граница пишется первой.) Либо не пишите границу, а сразу пишите 2px, она будет автоматически заполнена по порядку.

Атрибут маржи: маржа

      Он также имеет четыре атрибута. Кроме того, узнать наследственное свойство наследовать. (Атрибут наследования интересен. Если вы используете наследование, оно имеет некоторое сходство со страницей отображения заполнения.)

Например: <div> — это родительский класс, который определяет границу в 1 пиксель. Пустое пространство правой границы составляет 100 пикселей.

           <p.ex1> также является блочным элементом, который принадлежит кадру div после добавления атрибутов наследования. Это будет 100px от границы div.

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>


<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

Примечание. При наследовании может быть унаследовано только поле, а стиль не может быть унаследован. Например, в приведенном выше примере наследуется только поле, а свойство границы 1px не наследуется.

Два поля сворачиваются в одно поле:

свернуть, например, определите нижнее поле верхнего элемента как 100px. Верхнее поле следующего элемента составляет 20 пикселей, логически это 100 пикселей + 20 пикселей. Однако общее расстояние 120 пикселей на самом деле составляет всего 100 пикселей. Это складывание.

Обивка: обивка

Также существует четыре пограничных свойства. На самом деле это расстояние между внутренним элементом блока и внешней границей. Он существует двумя способами. Во-первых, ширина всей границы остается неизменной после добавления атрибута padding, а во-вторых, она меняется.

Он часто используется со свойством box. Сначала посмотрите, что изменится: напрямую добавьте атрибут padding, он изменит размер всей границы с размером отступа.

Чтобы не изменять ширину всей границы, добавьте атрибут box-sizing.

Например:

div {   width: 300px;   padding: 25px; // Как бы вы ни меняли это значение, вся ширина не изменится. box-sizing: рамка-бокс; }


  

CSS высота/ширина, блочная модель, контур

Ширина и высота CSS отличаются от ширины границы, изученной ранее! ! ! Один относится к границе, ширине линии, а другой относится к ширине определенного атрибута.

• auto- Это значение по умолчанию. Браузер вычисляет высоту и ширину
• length- Определить высоту/ширину в пикселях, см и т. д.
• %- Определить процент высоты/ширины содержащего блока
• initial- установить высоту/ширину на значения по умолчанию
• inherit- высота/ширина будут унаследованы от родительского значения

максимальная ширина: максимальная ширина:

Модель коробки:

• Содержимое  — содержимое поля, в котором отображается текст и изображения.
• Padding  — очищает область вокруг содержимого. заливка прозрачная
• border  - граница вокруг отступов и содержимого
• Margin  — очищает область за границей. поля прозрачны

Контур:

На самом деле его сущность — это часть за границей, обратите внимание, что она отличается от границы, а также отличается от поля. Существуют контуры, которые могут перекрываться с другими частями.

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

 Стиль контура: стиль контура Его атрибуты такие же, как и у стиля границы.

Смещение контура: смещение контура Будет смещено некоторое пустое пространство за границей. Немного похоже на маржу.

Но это немного другое.Изменение контура не повлияет на общее изменение, в отличие от ранее изученного изменения границы, которое приведет к изменению всего размера блока, если только не будет добавлен box-sizing:border-box.

(До смещения контура он эквивалентен границе. После добавления смещения у него будет некоторое пространство от границы)

Простое использование: (Заполните по порядку, так же, как и простой способ написания фрейма)

• outline-width
• outline-style(необходимый)
• outline-color

css-текст

Цвет текста: цвет // В отличие от других, ему нужен только один цветной элемент.

Выравнивание текста:

• text-align
• text-align-last
• direction
• unicode-bidi
• vertical-align

выравнивание текста: по центру, по левому краю, по правому краю, по ширине. //Выравнивание по левому или правому краю, выравнивание по центру или выравнивание по обоим концам

text-align-last: Формат последней строки текста.

направление: указывает направление текста.

Например: p {   direction: rtl;   unicode-bidi: bidi-override; } // Указывает обратное направление.

вертикальное выравнивание: базовая линия, текст вверху, текст внизу. Способ выравнивания по вертикали. baseline — это способ по умолчанию.

Оформление текста (подчеркивание text-decoration):

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration

text-decoration-line: Линия украшения. overline, underline, line-through (overline, underline, middle line)

text-decoration-style: стиль линии оформления, обратите внимание, что вы должны сначала указать атрибут строки оформления, прежде чем вы сможете написать это.

text-decoration-thickness: Толщина декоративной линии.

Простота использования: (Заполните по порядку.)

• text-decoration-line(необходимый)
• text-decoration-color(необязательный)
• text-decoration-style(необязательный)
• text-decoration-thickness(необязательный)

Например: p {                text-decoration: underline red double 5px;             }

Примечание: оформление текста: нет. Указывает на отсутствие подчеркивания.

Преобразование текста (преобразование текста): преобразование текста: верхний регистр; (верхний регистр), нижний регистр; заглавная; (заглавная первая буква)

Расстояние между текстом:

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

text-indent: отступ текста (то есть отступ первой строки). отступ текста: 50px;

межбуквенный интервал: межбуквенный интервал. межбуквенный интервал: 5px;

интервал между словами: интервал между словами.

высота строки: высота строки. line-height: 0,8 (Обратите внимание, что только значение его свойства равно 0,8. Без пикселей)

пробел: Пусто, разрывы строк запрещены. пробел: nowrap;

Текстовая тень (text-shadow):  

    Его порядок: горизонтальный, вертикальный, размытие (необязательно), цвет.   

 Например:       h1 {                      text-shadow: 0 0 3px #ff0000;                 }

CSS-шрифты, иконки, ссылки

Существует множество видов шрифтов, из английских шрифтов запомните два наиболее часто используемых: с засечками и без засечек.

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

семейство шрифтов : стиль шрифта.

стиль шрифта: Форма шрифта. обычный (обычный), курсив (курсив). Здесь я чувствую себя немного смущенным. При проработке передней границы имеется бордюр-начертание: сплошная (чёрная сплошная линия)! ! ! О, о, это другое.

вес шрифта: вес шрифта.    (У него есть атрибут жирного шрифта, что означает жирный шрифт. Он отличается от предыдущего стиля стиля. Он не может указывать размер шрифта, только толщину.)

вариант шрифта: вариант шрифта.  (это редко используется)

размер шрифта: размер шрифта. Здесь следует отметить, что размер шрифта является размером шрифта, и размер шрифта не может использоваться для представления такой информации, как заголовки h1~h6. Существует в трех формах: vw, px, em.

vw изменяется по мере изменения вида (страницы браузера) (1vw = 1% ширины области просмотра. Если ширина области просмотра составляет 50 см, 1vw составляет 0,5 см). px это пиксели. em эквивалентно 16px.

Сокращенный шрифт:

• font-style  （样式只有斜体和正常）
• font-variant  （变体，不常用，可选）
• font-weight  
• font-size/line-height （必选）
• font-family  （必选，字体选择）

Например:

pa { шрифт:  20px Arial, без засечек; (с последующим выбором шрифта.) }
 

икона:

Это введение меньше, рекомендуется прочитать информацию в Интернете и добавить ее самостоятельно. Его тег <icon>. Также можно использовать ссылки.

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<i class="glyphicon glyphicon-cloud"></i>    //Проверить информацию.

Ссылка на CSS:

Тег ссылки <a href="">

Его стиль имеет четыре атрибута и четыре состояния ссылки:

• a:link- обычная, непосещаемая ссылка
• a:visited- Ссылки, которые посетил пользователь
• a:hover- ссылка, когда пользователь наводит на нее курсор
• a:active- момент перехода по ссылке

Также часто используется с модификаторами текста: text-decoration: none; // Без этого предложения ссылка будет подчеркнута.

Есть цвета фона, кнопки.

Пример:  Это ссылка-кнопка.

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

<a href="default.asp" target="_blank">This is a link</a>

CSS списки, таблицы

В предыдущем HTML мы узнали о неупорядоченных (ul) и упорядоченных (ol) списках.

тип-стиля-списка: стиль списка. круг, квадрат.

list-style-image: изображение списка. URL("")

list-style-position: позиция в списке. Два вида: снаружи (порядковый номер списка ставится за пределами div), внутри

лист:

HTML выучил <table>, <tr>, <th>, <td>.

Их атрибуты в основном <border> (граница таблицы).

border-collapse: Свернуть таблицу . border-collapse: Collapse;   //Указывает, что используется одна граница. Потому что они по умолчанию являются двойными границами.

td——text-align: Выровнять текст в таблице.

          Например: td{text-align:center;} //Выравнивание по центру.

   Примечание. Элемент th по умолчанию выравнивается по центру, а элемент td по умолчанию выравнивается по левому краю.

td - vertical-align: выравнивание по вертикали. Текст будет внизу слева.

Иногда также используется заполнение формы: padding.

th, td - border-bottom: Горизонтальный разделитель. Эквивалентен только горизонтальной линии.

tr - tr:hover{фоновый цвет:} . Таблица наведения мыши. Цвет появится в строке при наведении курсора мыши.

tr:nth-child(even){background-color: } Разбивает таблицу полосами.

Отзывчивый стол: (Интересная щепотка.)

По сути, то есть у него есть дополнительная выдвижная планка, которая может скользить.

Свойства отображения CSS, максимальная ширина, позиция (позиционирование)

Изучая эти три пункта знаний, сначала вводите блочные элементы и встроенные элементы. Это было немного введено в HTML. Это очень важно. Например: блочный элемент, его характеристика в том, что он всегда начинается с новой строки, и его площадь всегда максимально расширяется в обе стороны.

          Строчные элементы, которые характеризуются заполнением по запросу, не начинаются с новой строки.

Дисплей: на самом деле это атрибут отображения и атрибут видимости.

display:none (скроет все определенные им атрибуты и не будет отображать его в интерфейсе)

дисплей: встроенный. Превратите блочные элементы во встроенные элементы.

Например:   li изначально представляет собой список, являющийся блочным элементом. После использования встроенного элемента он становится одной строкой.

li {
  display: inline;
}
<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

отображение: блок. Преобразование встроенных элементов в блочные элементы.

Например: a – это встроенный элемент. Изначально он отображался в одной строке. После преобразования в блочный элемент он будет занимать по одному элементу в каждой строке.

a {
  display: block;
}

<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

видимость: скрытая . //Скрыть вид элемента, останется свободное место.

Установите ширину и максимальную ширину:

Цель состоит в том, чтобы, подобно блочному элементу, он не расширялся в обе стороны настолько, насколько это возможно. Установите ширину или максимальную ширину. Вы можете решить эту проблему.

В то же время установите margin:auto. Вы можете сделать этот блочный элемент в центральном положении.

Должность или должность:

Существует пять различных значений положения:

• static
• relative
• fixed
• absolute
• sticky

position: static;   //Статическое положение, не будет изменено стилями css других свойств. Например, добавьте слева: 20 пикселей. Этот исходный атрибут не будет исключен.

position:relative; //Относительное положение изменено стилем css других атрибутов, но размер блочного элемента всего элемента остается прежним, он только сдвигается.

position: fixed;   // Фиксированная позиция, это позиция просмотра. Это не хорошо. Потому что он будет охватывать представление исходного css. Это позиция похожа на встроенное свойство.

position: absolute; // абсолютная позиция. Это относительно родительского элемента. Обычно он помещается внутри рамки родительского элемента. Пользовательские стили css в родительском элементе.

position: sticky;   // закрепленное положение. Он эквивалентен блочному элементу. Он будет меняться при перемещении ползунка. И это не будет перезаписывать исходный вид. ( Это интересно.) (Следует отметить, что этот атрибут не поддерживается в некоторых браузерах, и некоторые компоненты необходимо добавить. Например: браузер Safari, вам нужно добавить позицию : -webkit-sticky; а затем использовать этот атрибут. )

Индекс CSS, переполнение, плавание и очистка

Z-индекс:

Этот элемент позволяет ему перекрывать другие виды. Обычно с позицией: относительной, абсолютной. Используйте вместе. Его основная функция состоит в том, чтобы определить среди нескольких изображений, какое изображение будет помещено сверху.

Например: z-index:3 лучше, чем z-index:1. ставиться поверх 1.

Примечание. Если этот элемент индекса не добавлен. При наложении нескольких изображений по умолчанию последний элемент помещается сверху.

перелив перелив:

Он имеет четыре свойства: видимый, автоматический, скрытый, прокрутка.

overflow:visible; Он сохраняет текст как есть, он будет отображаться, даже если текст выходит за пределы рамки.

overflow:hidden; текст, выходящий за пределы рамки, будет отформатирован.

overflow:auto; Он автоматически регулирует размер рамки в соответствии с размером текста.

overflow:scroll; Обычно размер рамки устанавливается заранее, и если текст превышает этот диапазон, появляется скользящая полоса. Обратите внимание, что это свойство имеет два значения. переполнение-х. переполнение-y.

Плавать и очищать (плавать, очищать):

Для свойств float существует четыре значения:

• left- Элемент плавает слева от своего контейнера
• right- Элемент плавает справа от своего контейнера
• none- Элементы не будут всплывать (будут появляться там, где встречаются в тексте). Это значение по умолчанию
• inherit- Элемент наследует значение с плавающей запятой своего родительского элемента

Свойство float чем-то похоже на свойство position. Но это совсем не другое. Атрибут position обычно перекрывается, но плавающий атрибут не перекрывается. Например:

div1, div2 и div3 — три блочных элемента соответственно. Почти каждый занимает одну строку.

Когда установлено значение float:left, оно становится встроенным элементом. вывод только в одну строку.

div {
  float: left;
  padding: 15px; 
}

<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>

Очистить элемент очистить:

Он имеет следующие значения свойств:

• none- Элементы не помещаются ниже плавающих слева или справа элементов. Это значение по умолчанию
• left- элемент перемещается в нижний левый угол плавающего элемента
• right- элемент помещается ниже правого плавающего элемента
• both- элемент помещается ниже левого и правого плавающих элементов
• inherit- Элемент наследует значение очистки от своего родителя

Четкие элементы весело щипать.

Он объясняет природу плавающих элементов, которые обычно используются вместе с плавающими элементами. Например, в следующем примере перед добавлением элемента clear он будет использоваться как встроенный элемент и помещен в левую часть текста.

После добавления атрибута clear он меняется со встроенного элемента на правильный элемент блочного уровня, начиная с новой строки, без перекрытия. (Это блочный элемент автоматического типа.)

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}

Встроенный блок CSS, выравнивание CSS

Встроенный блок:

Представляет элемент уровня блока, действующий внутри встроенного элемента.

Как правило, макет на уровне блоков занимает одну строку и расширяется настолько, насколько это возможно. Элементы уровня блока занимают только заданный размер ширины.

Здесь макет встроенного блочного элемента должен занимать одну строку в заданном встроенном элементе. (Настройте панель навигации.)

Например:

Используйте встроенные блоки для создания навигационных ссылок:

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

//nav是块级元素。在<li>设置内联块元素。
<ul class="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#clients">Our Clients</a></li>  
  <li><a href="#contact">Contact Us</a></li>
</ul>

CSS горизонтальное и вертикальное выравнивание:

margin:auto      устанавливает центр блочных элементов. (не по центру текста)

text-align: center;    текст выравнивается по центру.

Иногда элемент может иметь изображение вне рамки блочного уровня. В это время вам нужно использовать Clear для восстановления элемента. взломать клирфикс 

Очистить элемент исправления:

элемент кода:

.clearfix::after {   содержимое: "";   ясно: оба;   дисплей: таблица; }

высота строки: по центру по вертикали.

transform: translate(%, %) Использовать позиционное преобразование.

флебокс: гибкий бокс.

Комбинаторы CSS, псевдоклассы, псевдоэлементы

Комбинатор:

В CSS есть четыре разных комбинатора:

• селектор потомков (пробел)
• дочерний селектор (>)
• Селектор соседнего брата (+)
• Обычный родственный селектор (~)

Селектор потомков: он выбирает все элементы p, которые являются потомками.

div p {          
  цвет фона: желтый;
}

Дочерний селектор:> Он будет выбирать только элементы тега p внутри элементов div

div > p {  
  цвет фона: желтый;
}

Селектор смежного элемента (+): следует за следующим элементом p элемента div. Если это не следующий элемент, он не будет работать.Обратите внимание, что это не элемент p, вложенный в элемент div.

div + p {   цвет фона: желтый; }

Обычный одноуровневый селектор (~): выбирает все элементы p, следующие за элементом div.

div ~ p {   цвет фона: желтый; }

Псевдоклассы: элементы, используемые для определения специального синтаксиса. Синтаксис: двоеточие: форма.

Мы узнали раньше: a:hover, a:link, a:visited, a:active.

Простой метод наведения инструмента:    // Поместите метод наведения перед элементом p.

div: hover p {   display: block; }

p:first-child    //Соответствует метке первого элемента p.

:Первый ребенок

pi:first-child      // Соответствует первому элементу i тега p. Последующие элементы i не будут иметь такого эффекта.

pi:first-child {   цвет: синий; } 

<p>Я <i>сильный</i> человек. Я <i>сильный</i> человек.</p>

p:first-child i      // Соответствует всем элементам i после тега p. Все последующие элементы i будут иметь этот стиль.

Псевдоэлементы: синтаксис представлен ::.

::first-line // Стиль первой строки текста

::first-letter // Стиль начальной буквы первой строки текста

::before // Картинка помещается перед текстом.

  Например: h1::before {                          content: url(smiley.gif);                         }

::after //Изображение, размещенное после текста.

::marker //Текст маркера. Например, такие элементы, как li и ul.