1. Стиль текста шрифта CSS

1. Настройки шрифта CSS

Настройки шрифта CSS:

• Настройки размера: font-size значение атрибута единица Рекомендуется px Пиксель ,Google Браузерпо умолчаниюхарактерразмер 16 Пиксель ;

font-size:16px;

• Настройки шрифта : Обычно используется Майкрософт Яхей / Династия Сун / черное тело , если Указано несколько шрифтов , Установите приоритет предыдущего шрифта ;

font-family:"Майкрософт Яхей";
font-family:"черное тело",Arial,"Майкрософт Яхей","Microsoft Yahei";

• Настройки толщины: использовать font-weight настраивать Вес шрифта ;
  • normal : По умолчанию нет жирного стиля ;
  • bold : Смелый ;
  • 1000 ~ 900 междуизчислоценить : рекомендовать использовать число Входить ХОРОШОСмелыйнастраивать ;
    • 400 дапо умолчаниюиз normal стиль ,
    • 700 да bold Смелыйстиль ;

font-weight:700;

• Настройки курсива: использовать font-style настраивать шрифт да Без наклона ;
  • normal : по по не установлен по умолчанию курсива ;
  • italic : курсив ;

font-style:italic;

2. Комплексный метод написания настройки шрифта CSS.

Стиль шрифта заказ , нельзя беспокоить , необходимо строго соблюдать ; Стиль шрифта значение атрибута между , Используйте пробелы для разделения ; font-size и font-family Должны быть написаны два стиля , Другие стили можно опустить ;

селектор { шрифт:font-style шрифт-вес размер шрифта/высота строки семейство шрифтов;}

Пример:

body {
	font: italic 400 16px "Династия Сун"
}

3. Стиль текста CSS

Стиль текста CSS:

• Цвет текста: color свойство Может определение цвет текста , Есть три способа выразить значение цвета: :
  • Предопределенные цвета: прямойиспользовать Английское название цвета , blue , red , green ;
  • Шестнадцатеричный цвет: #FF0000 красный , #00FF00 зеленый , #0000FF синий ; Этот способ письма лучший используется ;
  • Цвет кода RGB:
    • Числовая форма: rgb(255, 0, 0) , rgb(0, 255, 0) , rgb(0, 0, 255)
    • Процентная форма: rgb(100%, 0%, 0%) , rgb(0%, 100%, 0%) , rgb(0%, 0%, 100%)

color:black;
color:#FF0000;
color:rgb(0, 0, 255);

• Горизонтальное выравнивание текста: text-align свойство , Можетнастраивать выравнивание текста ,для Этикетканастраивать Должен CSS стиль, Этикетка Внутрииз Внутри容就встречаиспользоватьсоответствующийиз Выравнивание方式 ; text-align свойство ценить :
  • left : выравнивание по левому краю ,Долженценитьдапо умолчаниюценить ;
  • right : Выровнять по правому краю ;
  • center : выравнивание по центру ;

text-align:center;

• Межстрочный интервал текста: line-height свойство , используется для настраивать межстрочный интервал , также известный как высота строки ; line-height свойство ценить :
  • Пиксель пикселей: большинство Обычно используетсяединица , Общая ситуациянастройки высота строки больше размера шрифта 7.8 px ; текст по умолчанию 16 px , высота строки для 24 px Вот и все ;
  • Относительное значение em;
  • процент;

line-height: 24px;

• Центрировать текст по вертикали: настраивать высота строки = высокий стиль ,текст Вот и всесуществовать коробочная модель середина Вертикальносередина ;

дел {
   высота: 200 пикселей; 	   /* определяем высоту контейнера */
   высота строки: 200 пикселей; /* соответствовать высоте контейнера */
}

• Первая строка текста с отступом: text-indent свойство , используется для настраивать Отступ первой строки ; text-indent значение атрибуты следующим образом :
  • значение эм: Ширина символа кратна , еслисуществовать Китайское племя настраивать 2em , Просто да Отступ первой строки 2 Китайские иероглифы ; Рекомендуется ;
  • значение пикселей: обозначение 缩Входить Пиксельценить ,Нет Обычно используется ;
  • Процентное значение: обозначение Относительно БраузерWindowизпроцентценить ,Нет Обычно используется ;

text-indent: 2em;  

• Оформление текста: text-decoration свойство , используется для настраивать оформление текста ; text-decoration значение атрибуты следующим образом :
  • none : по умолчаниюсвойство , без украшения , Отменить подчеркивание ссылки ; ( Обычно используется )
  • underline : Делайте ссылки подчеркнутыми ; ( Обычно используется )
  • overline : Нарисовать линию поверх текста ; ( Принципиально не используется )
  • line-through : Линия через текст ; ( Нет Обычно используется )

text-decoration: underline;

2. Режим отображения CSS-меток

1. Элементы блочного уровня

Режим отображения этикетки : относится к Как отображаются метки , Существует много типов этикеток , В разных ситуациях используются разные типы тегов. ;

• элементы уровня блока : div Этикетка Отображать в одну строку ,переписываться кусок Этикетка ;
• встроенные элементы : span Этикетка Может Поместите несколько в одну строку для отображения ,переписываться ХОРОШОВнутри Этикетка ;

Особенности элементов блочного уровня:

• Эксклюзивная вечеринка: элементы уровня блока встреча эксклюзивный отецконтейнер целевая группа ,ширинапо умолчаниюполный отцаконтейнер ;
• Контролируемый размер: Этикетка из высокий , ширина , прокладка ,поля Можетсопределениенастраивать ;
• Ширина по умолчанию: элементы уровня блока по умолчанию ширина да отецконтейнер из 100% ширина ;
• контейнер Функции : элементы уровня блока как контейнер ,Можно найти в Чтосередина место элементы уровня блока и встроенные элементы ;

2. Встроенные элементы

В одной строке можно одновременно разместить несколько встроенных элементов. Распространенными строчными элементами являются:

• Связь Этикетка : <a>
• ХОРОШОВнутри Этикетка : <span>
• Связанный текст Этикетка : <em> , <i> , <strong> , <b> , <del>

Характеристики встроенных элементов:

• Несколько в одной строке: существовать одна линия середина , Может настройки Показать несколько встроенные элементы ;
• Неверная ширина и высота: встроенные элементы из ширина и высота настраиватьда Неверный , к дочерний контент изразмер для подтверждения ;
• Ширина по умолчанию: встроенные элементы из ширина да сам из ширина ;
• Характеристики контейнера: встроенные элементы как контейнер , может только магазин текст или встроенные элементы ,Нет能магазин элементы уровня блока ;

3. Элементы встроенного блока

встроенный блочный элемент Этикетка да Специальная из Этикетка , Можно найти в Отображать несколько в одной строке , Но да также может быть связано с его настройкой. Свойства ширины и высоты и Свойства выравнивания ;

• картина Этикетка : <img>
• форма Этикетка : <input>
• клетка Этикетка : <td> , лист table серединаиз ХОРОШО tr Этикетка серединаиз клетка <td> Этикетка ;

встроенный блочный элемент Функции :

• Стиль отображения: встроенный блочный элемент по умолчанию Всесуществоватьодна отображение в середине строки , Каждый элемент междувстреча автоматически добавляет интервал. ;
• Настройки ширины и высоты: встроенный блочный элемент из по умолчаниюширина и высота да Сам элемент расширенина и высота ,нодатакже Можетнастраиватьширина и высота ;
• Настройки стиля: встроенный блочный элемент Может настраивать ширина , высокий , прокладка , поля ,высота строки ждатьсвойство ;

4. Преобразование элементов уровня блока/встроенных элементов/встроенных блочных элементов друг в друга.

элементы уровня блока / встроенные элементы / встроенный блочный элемент взаимное преобразование :

• элементы уровня блока -> встроенные элементы : настраиватьзначение атрибута display: block; , Может Воля встроенные элементы Преобразовать в элементы уровня блока ;

	<style>
		span {
			/* встроенные элементы Преобразовать в элементы уровня блока */
			display: block;
		}
	</style>

• встроенные элементы -> элементы уровня блока : существовать CSS стильсерединанастраиватьзначение атрибута display: inline; , Может Воля элементы уровня блока конвертировать в встроенные элементы ;

	<style>
		div{
			/* элементы уровня блока конвертировать в встроенные элементы */
			display: inline;
		}
	</style>

• элементы уровня блока、встроенные элементы -> встроенный блочный элемент : существовать CSS стильсерединанастраиватьзначение атрибута display: inline-block; , Может Воля элементы уровня блока или встроенные элементы Преобразовать в встроенный блочный элемент ;

	<style>
		div {
			/* элементы уровня блока или встроенные элементы Преобразовать в встроенный блочный элемент */
			display: inline-block;
		}
	</style>