1. Общие свойства элементов CSS
1.1 Семейство шрифтов и размер шрифта
Установленный шрифт должен быть шрифтом, поставляемым с Windows, и требуется шрифт, установленный в системе.
Используйте css, чтобы установить шрифты Microsoft Yahei и Arial, а размер шрифта — 30 пикселей и 40 пикселей.
font - size устанавливает высоту символьного поля шрифта.
<body>
<style>
.fontfamily .one{
font-family: '微软雅黑';
font-size: 30px;
}
.fontfamily .two{
font-family: '宋体';
font-size: 40px;
}
</style>
<div class="fontfamily">
<div class = "one">
这是微软雅黑字体
</div>
<div class="two">
这是宋体
</div>
</div>
</body>
Эффект настройки следующий
1.2 Установка веса шрифта
При установке значения толщины шрифта есть два стиля настройки:
Используйте настройки слова: нормальный (нормальная толщина 400), полужирный (жирный 700)
Используйте настройку числа: значение от 1 до 1000, нормальный вес 400.
<body>
<style>
/* 使用单词设置 font-weight */
.font-weight .one{
font-weight:normal;
}
.font-weight .two{
font-weight: bold;
}
/* 使用数字设置 font-weight */
.font-weight .three{
font-weight:200;
}
</style>
<div class="font-weight">
<div class="one">
正常粗细
</div>
<div class="two">
加粗
</div>
<div class="three">
变细
</div>
</div>
</body>
Эффект отображения следующий:
1.3 Стиль текста
В нашем фактическом использовании основная функция состоит в том , чтобы восстановить теги и теги, установленные в html, в нормальное состояние с помощью настройки стиля css.
/* 设置字体为倾斜 */
font-style: italic
/* 设置字体为正常格式 */
font-style: normal;
1.4 Цвет текста
Много света, который мы видим каждый день, смешано. Красный, зеленый и синий смешаны. В компьютере R, G и B используются для смешивания и представления цветов, называемого представлением RGB. Благодаря комбинации трех компонентов в разных пропорциях для представления разных цветов.
Назначьте байт для представления трех компонентов RGB, каждый байт находится в диапазоне от 0 до 255.
<style>
.color{
/* 使用预定义的颜色值 */
color: red;
/* 使用十六进制表示 */
color: #ff0000;
/* 使用 R G B 混合表示 */
color: rgb(255, 0,0);
}
</style>
// 通过设置 rgb 的值得控制混合颜色的结果
1.5 Выравнивание текста
Используйте свойство text - align для установки выравнивания текста
<body>
<style>
.text-align .one{
/* 设置文本居中对齐 */
text-align: center;
}
.text-align .two{
/*设置文本为靠左对齐 */
text-align: left;
}
.text-align .three{
/* 设置文本为靠右对齐 */
text-align: right;
}
</style>
<div class="text-align">
<div class="one">文本居中对齐</div>
<div class="two">文本靠左对齐 </div>
<div class="three">文本靠右对齐 </div>
</div>
</body>
Установите выравнивание текста на странице, установив свойство text - align
1.6 Оформление текста
Установите оформление текста, установив текст - оформление
/* 设置文本下划线 */
text-decoration: underline;
/* 清空文本装饰 可以给 a 标签链接去掉下划线*/
text-decoration: none;
/* 设置文本下划线 */
text-decoration: overline;
/* 设置文本的删除线 */
text-decoration: line-through;
1.7 Отступ текста
Отступ текста может управлять отступом двух слов в строке абзаца, другие строки не затрагиваются, используйте text-indent для управления расстоянием отступа, единицей измерения может быть px или em, em задается в зависимости от размера текста , предполагая Размер текста 40 пикселей, тогда 1 em = 40 пикселей.
Размер отступа текста также может быть отрицательным числом, если установить отрицательное число, он будет отступать влево.
1.8 Свойства фона
Свойства фона в основном включают в себя: цвет фона, фоновое изображение, мозаику фона, положение фона, размер фона.
- параметры фонового мозаичного изображения: повторение мозаичного изображения без повторения: без мозаичного изображения повтор-x: горизонтальное мозаичное изображение повторение-y: вертикальное мозаичное изображение
- Фоновое местоположение: существительное ориентации, точная единица, смешанная единица, система координат в компьютере, как правило, левосторонняя система координат,
- Размер фона: это может быть конкретное значение или процент, установленный в соответствии с размером родительского элемента, обложка (фон полностью закрыт) содержит (фон адаптируется к области содержимого)
Случаи использования :
<body>
<style>
.pg{
/* 设背景颜色 */
background-color: transparent;
/* 设置背景链接 */
background-image:url(test.jpg);
/* 设置背景图片不平铺 */
background-repeat: no-repeat;
/* 设置图片方位 */
background-position:center center;
/* 设置背景图片的尺寸 */
height: 500px;
}
</style>
<div class= "pg">
这是一张背景
</div>
</body>
1.9 Настройки границ
Элементы HTML по умолчанию являются прямоугольниками, но в повседневной жизни обычно используются прямоугольники со скругленными углами.В css граница устанавливается как прямоугольник со скругленными углами через границу - радиус.
Многие элементы на страницах leetcode используют прямоугольники со скругленными углами.
Настройте простой прямоугольник со скругленными углами
<body>
<body>
<style>
.one{
width: 200px;
height:100px;
background-color: gray;
color: black;
text-align: center;
line-height: 100px;
border-radius: 20px; // 设置内切圆的半径
}
</style>
<div class="one">设置一个圆角矩形框</div>
</body>
</body>
длина - радиус вписанной окружности, чем больше длина, тем больше граничная дуга прямоугольника со скругленными углами
Когда длина увеличится до 80, левая и правая стороны прямоугольника со скругленными углами полностью примут форму полукруга.
Когда длина и ширина прямоугольника одинаковы, по мере увеличения длины вписанная окружность прямоугольника становится полной окружностью.
2. Режим отображения элемента
В CSS есть много режимов отображения HTML-тегов. Здесь мы сосредоточимся только на двух: элементах блочного уровня и встроенных элементах. Режим отображения любого HTML-тега можно установить.
Разница между блочными элементами и встроенными элементами
Блочные элементы занимают одну строку, а встроенные элементы не занимают ни одной строки.
Можно задать высоту, ширину, а также внутренние и внешние поля блочных элементов. Высота, ширина и высота строки встроенных элементов недействительны. Внутреннее поле допустимо, а внешнее поле иногда допустимо, а иногда недопустимо.
По умолчанию блочные элементы имеют такую же ширину, как и родительский элемент, а встроенные элементы по умолчанию имеют такую же ширину, как содержимое внутри.
Как правило, встроенные элементы при необходимости преобразуются в элементы блочного уровня.
2.1 Элементы блочного уровня
общие элементы блочного уровня
h1 - h6 p div ul ol li
Особенности блочных элементов:
монопольная партия
Высоту, ширину, внутренние и внешние поля, высоту строки можно контролировать.
Ширина по умолчанию равна 100% ширины родительского элемента (ширина родительского элемента)
Является контейнером (коробкой), который может высвобождать внутренние и блочные элементы.
Нам нужно обратить внимание при использовании элементов уровня блока: элементы уровня блока нельзя помещать в текстовые теги, а теги div нельзя помещать в теги p.
2.2 Строчные элементы
общие встроенные элементы
a strong b em i del s ins u span
Особенности встроенных элементов:
Не занимайте одну строку, одна строка может отображать несколько
Установка высоты, ширины, высоты строки недействительна
Левое и правое внешние поля действительны, внутренние поля действительны.
Ширина по умолчанию — это содержимое самого текста.
Строчные элементы могут содержать только текст и другие строчные элементы.
2.3 блочная модель css
Страницу можно рассматривать как состоящую из блоков.Все элементы страницы состоят из блоков, а содержимое элементов содержится в блоках. Изнутри наружу коробки идут содержимое (контент), внутреннее поле (padding), граница (border), внешнее поле (margin).
-
настройки границы
-
граница: установите границу, граница является сокращением для цвета стиля ширины.
-
border-width: Используется для установки ширины границы.
-
border-style: используется для установки стиля границы.Обычно используемые значения атрибута следующие: сплошная линия (сплошная), пунктирная линия (штриховая), точка (пунктирная), двусторонняя (двойная) .
-
border-color: используется для установки цвета границы, который может быть word, rgb или шестнадцатеричным, точно так же, как значение атрибута color.
Ниже мы используем случай, чтобы показать использование границ:
<body>
<style>
.one{
width: 200px;
height:200px;
background-color: gray;
color: black;
text-align: center;
border-radius: 20px;
border-style: solid;
border-color: green;
}
</style>
<div class="one">设置元素的边框</div>
</body>
Отображаемый эффект выглядит следующим образом:
Наблюдая за элементами страницы, вы можете обнаружить:
Длина и ширина, которые мы установили в селекторе классов, равны 200 * 200, но отображаемый размер немного больше установленного размера, поэтому можно обнаружить, что граница по умолчанию расширяет поле.
Благодаря настройке box-sizing мы можем предотвратить растяжение рамы.
box-sizing: border-box;
Конечно, граница также может устанавливать различные стили, такие как цвет и стиль (стиль линии).
-
padding: настройка заполнения, также имеет четыре отдельных атрибута. Left (padding-left); right padding-right); top (padding-top); bottom (padding-bottom), правила сокращения отступов такие же, как и для поля .
Чтобы добавить отступы к текстовым элементам на картинке выше, вы можете установить padding-right
padding-right: 30px;Эффект после настройки следующий:
Конечно, вы также можете установить отступы для всех четырех направлений элемента.
padding: 5px; 表示四个方向都是 5px padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针) -
Допуск
Подобно отступу, внешнее поле устанавливает расстояние между элементами.Когда мы устанавливаем несколько элементов, обычно они вставляются вместе, а внешней границей можно управлять, устанавливая атрибут поля.
-
margin: параметр Margin, есть отдельное свойство для установки одного поля. Слева (поле-слева); Справа (поле-справа); Верхнее (поле-сверху); Нижнее (поле-снизу). Мы можем напрямую написать сокращенный режим через margin: margin: top right bottom left (четыре значения атрибута устанавливаются по часовой стрелке)
Пример:
Когда мы устанавливаем два элемента, они по умолчанию находятся рядом друг с другом.
<body> <style> .one{ width:200px; height: 100px; background-color: gray; border-radius: 20px; border-color: red; box-sizing: border-box; border-style: solid; text-align: center; padding-top: 30px; } </style> <div class="one">这是第一个div</div> <div class="one">这是第二个div</div> </body>
В это время добавьте атрибут поля, чтобы между двумя элементами можно было оставить определенный зазор.
margin-top: 30px;
Здесь один и тот же класс используется для двух элементов, поэтому над двумя элементами есть интервал, или разные классы могут использоваться только для изменения внешнего интервала одного элемента.
Подобно заполнению, его также можно записать следующим образом:
margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
3. Гибкая компоновка
Flex — это аббревиатура от «Flexible Box» , что означает «эластичный макет» или «гибкий блок». Это новый режим макета в CSS3, который может реализовать различные макеты страниц простым, полным и отзывчивым образом. Он очень подходит для экрана. размер и тип устройства, более простой и совершенный, чем плавающий макет.
Давайте посмотрим на пример ниже:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
div{
width: 100%;
height: 150px;
background-color: red;
}
div>span{
background-color: green;
width: 100px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
В приведенном выше коде для тега div установлен красный цвет, а для тега span — зеленый, эффект отображения выглядит следующим образом:
Хотя встроенные элементы span располагаются в горизонтальном направлении, они не подходят для горизонтальной компоновки, поскольку поля и размеры встроенных элементов неконтролируемы, а встроенные элементы и встроенные блочные элементы будут воспринимать новые строки в исходном коде как пробелы, а также будут Излишне влияет на расположение элементов на странице.
3.1 Включить гибкий макет
display : flex;
Добавьте гибкую компоновку к родительскому элементу горизонтально расположенных элементов, установите flex, и элементы внутри гибкого контейнера больше не будут «блочными элементами» и «встроенными элементами», а станут встроенными элементами, а размер и поля могут быть установлены.
3.2 Установите горизонтальное расположение
Установите горизонтальное расположение flex-элементов (слева направо и т. д.), установив атрибут justify-content в родительском элементе.
justify-content:space-around；
justify-content：center；
Общая договоренность:
3.3 Установить горизонтальное расположение элементов
Установите горизонтальное расположение эластичных элементов, установив атрибут align-items в родительском элементе (выравнивание по верху и низу).
align-items: flex-start;
Применение: Установить горизонтальное центрирование и вертикальное центрирование
div{
width: 100%;
height: 150px;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}
div>span{
background-color: green;
width: 100px;
}
2)]
justify-content：center；
Общая договоренность:
[Передача изображения по внешней ссылке...(img-kJTf1KXA-1680343571722)]
3.3 Установить горизонтальное расположение элементов
Установите горизонтальное расположение эластичных элементов, установив атрибут align-items в родительском элементе (выравнивание по верху и низу).
align-items: flex-start;
[Передача изображения по внешней ссылке...(img-GvnR6Fq2-1680343571723)]
[Передача изображения по внешней ссылке...(img-27c3BwsX-1680343571723)]
Применение: Установить горизонтальное центрирование и вертикальное центрирование
div{
width: 100%;
height: 150px;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}
div>span{
background-color: green;
width: 100px;
}
[Передача изображения по внешней ссылке...(img-UQ4PhJd8-1680343571724)]