Краткое изложение основ HTML и CSS
HTMLРоль: объявление располагается в самом начале документа перед тегом . Этот тег сообщает браузеру, какую спецификацию HTML или XHTML использует документ.
2. Язык страницы
<html lang="en"> 指定html 语言种类
2 самых распространенных:
-
enОпределите язык как английский -
zh-CNОпределить язык как китайский
3. Набор символов
<meta charset="UTF-8" />
utf-8В настоящее время это наиболее часто используемый метод кодирования набора символов, а наиболее часто используемые методы кодирования набора символов:gbkа такжеgb2312.
- gb2312 Простой китайский, включая 6763 китайских символа GUO BIAO
- BIG5 Традиционный китайский для Гонконга, Макао, Тайваня и т. д.
- GBK содержит все китайские символы. Это расширение GB2312, добавляющее поддержку традиционных символов, совместимое с GB2312.
- UTF-8 в основном содержит символы, которые должны использовать все страны мира.
- Этот код очень важен и должен быть написан, иначе он может привести к искажению символов.
Функция: Это предложение предназначено для сохранения html-файла в кодировке UTF-8, и браузер декодирует соответствующий html-контент в соответствии с кодировкой.
4. Семантика тегов
- Требование может быть выполнено с разными тегами, так в чем же разница?
- Во-первых, ярлык имеет сильную семантику и играет подчеркивающую роль. Во-первых, нет семантики и акцента. Веб-страницы с хорошей семантикой больше нравятся SEO и занимают более высокие позиции в поисковых системах.
Оптимизация SEO ===> При вводе ключевого слова поисковая система будет перечислять много-много веб-страниц, и основная привычка пользователя — щелкнуть предыдущую веб-страницу и не щелкнуть последнюю страницу, поэтому, если веб-страница находится в поисковой системе Чем выше рейтинг, тем больше пользователей будут переходить в гости.
Как оптимизировать (понять):
1.花钱买关键字 见效快，花钱多
2.让页面更加规范，语义更加明确（在合适的地方使用合适的标签）
Функция: В соответствии с семантикой метки дайте наиболее разумную метку в нужном месте, чтобы сделать структуру более понятной.
5. Позиционирование точки привязки
Создавая якорные ссылки, пользователи могут быстро найти целевой контент.
Создание якорной ссылки — это двухэтапный процесс:
<!--1.使用<a href="#id名">链接文本</a>点击,锚点到对应的位置 -->
<a href="#two"> 点击进行锚点跳转 </a>
<!-- 2.使用相应的id名标注跳转目标的位置 -->
<h3 id="two">锚点目标</h3>
6. базовый тег
<base target="_blank" />
**Суммировать: **
- base может установить открытое состояние общей ссылки
- база записывается между
- Добавить target="_blank" ко всем соединениям по умолчанию
7. Специальные символы
Некоторые специальные символы сложно или неудобно использовать непосредственно в html, в настоящее время мы можем использовать следующий альтернативный код.
| Показать результаты | описывать | имя сущности |
|---|---|---|
| пространство | | |
| < | Знак меньше | < |
| > | знак больше | > |
| × | Знак умножения | × |
| ¥ | юань (иена) | ¥ |
| © | Авторские права | © |
| ™ | товарный знак | ™ |
| ® | Товарный знак | ® |
3. Селекторы CSS
1. Резюме трех таблиц стилей
| таблица стилей | преимущество | недостаток | Применение | Диапазон регулирования |
|---|---|---|---|---|
| Встроенная таблица стилей | Легко писать, большой вес | Нет разделения стиля и структуры | меньше | управлять одной вкладкой (меньше) |
| Внутренняя таблица стилей | Частичная структура и стиль разделены | не полностью разделен | более | Управление страницей (посередине) |
| внешняя таблица стилей | Полное разделение структуры и стиля | нужно представить | Большинство, настоятельно рекомендуется | Управление всем сайтом (несколько) |
2. Базовые селекторы CSS
①Селектор тегов
②Селектор класса
③селектор идентификаторов
④ Селектор подстановочных знаков
Основные сведения о селекторе
| Селектор | эффект | недостаток | Применение | Применение |
|---|---|---|---|---|
| Селектор тегов | Все те же теги могут быть выбраны, например, p | Не могу отличить | более | р {цвет: красный;} |
| селектор класса | Можно выбрать один или несколько тегов | Может быть выбран в соответствии с потребностями | Много | .nav { color: red; } |
| селектор идентификатора | Одновременно можно выбрать только 1 вкладку | можно использовать только один раз | Не рекомендуется | #nav {color: red;} |
| Селектор подстановочных знаков | выбрать все теги | Слишком много вариантов, некоторые не нужны | Не рекомендуется | * {color: red;} |
3.шрифт шрифт
| Атрибуты | выражать | будь осторожен |
|---|---|---|
| font-size | размер шрифта | Единицей, которую мы обычно используем, является пиксель пикселей, обязательно следите за единицей измерения. |
| font-family | шрифт | В реальной работе пишите шрифты согласно командному соглашению |
| font-weight | вес шрифта | Помните, что жирным шрифтом является 700 или жирным шрифтом не является жирным шрифтом или 400. Помните, что числа не следуют за единицами измерения. |
| font-style | стиль шрифта | Помните, что наклон выделен курсивом, а не наклоном, это нормально, мы чаще всего используем в работе normal |
| font | лигатура шрифта | 1. Шрифтовые лигатуры в порядке и не могут быть изменены по желанию 2. Размер шрифта и шрифт должны отображаться одновременно |
4. Сводка свойств внешнего вида CSS
| Атрибуты | выражать | будь осторожен |
|---|---|---|
| color | цвет | Обычно мы используем шестнадцатеричный формат, например, и сокращенную форму #fff. |
| line-height | высота строки | Контролируйте расстояние между рядами |
| text-align | Горизонтальное выравнивание | Вы можете установить горизонтальное выравнивание текста |
| text-indent | Отступ первой строки | Обычно мы используем расстояние в 2 слова для отступа первой строки абзаца text-indent: 2em; |
| text-decoration | украшение текста | не забудьте добавить подчеркивание подчеркивание снять подчеркивание нет |
5. Цепочка селекторов псевдоклассов
- a:link /* непросмотренная ссылка */
- a:visited /* Посещенная ссылка */
- a:hover /* наведите указатель мыши на ссылку */
- a:active /* выбранная ссылка */
6. Резюме составного селектора
①Селектор потомка
②Селектор подэлементов
③Селектор пересечения
④ Селектор союза
Сводка составного селектора
| Селектор | эффект | характерная черта | Применение | Символы разделения и их использование |
|---|---|---|---|---|
| селектор потомков | Используется для выбора потомков элемента | это выбрать всех потомков | более | символпространство .nav a |
| дочерний селектор | Выберите ближайший элемент | выбери только сына | меньше | Обозначение **>> .nav>p |
| селектор пересечения | Выберите часть, где две метки пересекаются | Не только это | меньше | без символа p.one |
| селектор объединения | выберите несколько селекторов одного стиля | Может использоваться для коллективной декларации | более | символзапятая .nav, .header |
| селектор смежных элементов | выберитесоседский братэлементальСледующийэлемент | соседский братназадизСледующийэлемент | меньше | ul+h2 |
| Селектор родственных элементов | выберитесоседский братизвсе элементы | соседский братизвсе элементы | меньше | prev~sibings |
| Селектор псевдокласса ссылки | Изменить состояние ссылки | более | Важно помнить, как на самом деле разрабатываются {} и a:hover. |
7. Сводная информация
| Атрибуты | эффект | стоимость |
|---|---|---|
| background-color | фоновый цвет | Предопределенные цветовые значения/шестнадцатеричные/RGB-коды |
| background-image | Фоновое изображение | URL-адрес (путь к изображению) |
| background-repeat | Укладывать ли плитку | repeat/no-repeat/repeat-x/repeat-y |
| background-position | фоновое положение | координаты х и у |
| background-attachment | фон прилагается | исправлено (фон исправлен) |
| фоновая стенография | Писать проще | цвет фона, адрес фонового изображения, фоновая плитка, прокрутка фона, позиция фона |
| цвет фона полупрозрачный | цвет фона полупрозрачный | background:rgba-(0,0,0,0.3); должно следовать 4 значения |
4. Три характеристики CSS
CSS имеет три очень важные три характеристики: каскадирование, наследование, приоритет
1. Каскадное
Один и тот же селектор устанавливает один и тот же стиль, затем один стиль перезаписывает (каскадирует) другой конфликтующий стиль, а каскадная строка в основном решает проблему конфликта.
- Каскадный принцип:
- Конфликт стилей, принцип, которому нужно следовать, - принцип близости, какой стиль далек от структуры, а какой стиль выполнен
- Стили не конфликтуют и не каскадируются
2. Наследование
Наследование в CSS: дочерние теги наследуют определенные стили от своих родительских тегов, такие как цвет текста и размер шрифта.
Простое понимание таково: сын наследует дело отца.
- Правильное использование наследования может упростить код и уменьшить сложность стилей CSS.
- Дочерние элементы могут наследовать стили от родительских элементов ( text- , font- , line- в начале этих элементов могут наследоваться, как и свойство color )
Наследование высоты строки
body {
font:12px/1.5 Microsoft YaHei;
}
- Если для дочернего элемента не задана высота строки, он унаследует высоту строки родительского элемента, равную 1,5.
- На данный момент высота строки дочернего элемента составляет: текущий размер текста элемента * 1,5
- Самым большим преимуществом права тела 1.5 является то, что внутренние элементы могут автоматически регулироваться в соответствии с их собственным текстом.
3. Приоритет
| Селектор | вес селектора |
|---|---|
| наследовать или * | 0, 0, 0, 0 |
| селектор элементов | 0, 0, 0, 1 |
| селектор класса, селектор псевдокласса | 0, 0, 1, 0 |
| Селектор идентификатора | 0, 1, 0, 0 |
| Стиль встроенного стиля = "" | 1, 0, 0, 0 |
| !важно важно | гигантский |
Если изображение в поле больше, чем ширина и высота поля, установите ширину изображения на 100%
5. Проблемы с компоновкой CSS и стили границы-тени
1. Маржинальное слияние
1.1 Слияние вертикальных полей соседних элементов
- Когда два смежных блочных элемента (родственные отношения) встречаются вверх и вниз, если указанный выше элемент имеет нижнее поле margin-bottom
- Элементы ниже имеют маржинальную вершину, поэтому их вертикальное расстояние не является суммой маржинального дна и маржа.
- Возьмите большее из двух ценностей. Это явление известно как слияние вертикальных полей соседних блочных элементов (также известных как крах по краю)
- Решение: попробуйте добавить маржинальные значения только в одно поле.
1.2 Слияние (схлопывание) вертикальных полей вложенных блочных элементов
- Для двух блочных элементов во вложенных отношениях (родительско-дочерние отношения) родительский элемент имеет верхнее поле, а дочерний элемент также имеет верхнее поле.
- Сумма верхнего поля родительского и дочернего элементов сливается
- Комбинированные поля: Возьмите большее поле из двух
решение:
①, вы можете определить верхнюю границу для родительского элемента ②, вы можете определить верхний отступ для внешнего родительского элемента 3. Вы можете добавить overflow:hidden к родительскому элементу
2. Закругленная граница
В CSS3 был добавлен закругленный стиль границы, так что наши поля можно округлить.
Свойство border-radius используется для установки внешней границы элемента со скругленными углами.
грамматика:
border-radius:length;
- Аргументы могут быть числовыми или процентными.
- Если это квадрат, если вы хотите установить его как круг, измените значение на половину высоты или ширины или напишите 50% напрямую.
- Если это прямоугольник, установка высоты, как правило, может быть выполнена
- Это свойство является сокращенным свойством, за которым могут следовать четыре значения, а именно верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
- Отдельно написано: граница-верхний-левый-радиус, граница-верхний-правый-радиус...
3. Тень блока и тень текста
①. Тень коробки
В CSS3 были добавлены тени блоков, чтобы можно было затенять наши блоки.
грамматика:
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 14px rgba(0,0,0,.3)
| стоимость | описывать |
|---|---|
| h-shadow | Необходимый. Положение горизонтальной тени. Допускаются отрицательные значения |
| v-shadow | Необходимый. Положение вертикальной тени. Допускаются отрицательные значения |
| blur | Необязательный. размер тени |
| color | Необязательный. цвет тени |
| inset | Необязательный. Измените внешнюю тень на внутреннюю тень, обычно не используемую! |
Уведомление:
- По умолчанию используется внешняя тень (начало), но это слово не может быть записано, иначе тень будет недействительной.
- Тени блоков не занимают места и не влияют на расположение других блоков.
② тень текста
В CSS3 мы можем использовать свойство text-shadow для применения к тексту.
грамматика:
text-shadow: h-shadow v-shadow blur color;
| стоимость | описывать |
|---|---|
| h-shadow | Необходимый. Положение горизонтальной тени. Допускаются отрицательные значения |
| v-shadow | Необходимый. Положение вертикальной тени. Допускаются отрицательные значения |
| blur | Необязательный. Размытое расстояние. |
| color | Необязательный. цвет тени |