| Kosten | Суббота, 16 Февраля 2019 | Сообщение 1 |
| Вашему вниманию небольшой справочник на свойство CSS, которое пригодится при создание или оформление сайта. Где на этой странице приведен основной список наиболее распространенных свойств CSS. Существуют разные способы или методы позиционирования элементов.
Позиционирование элементов в веб-разработке не так просто, как кажется. Вещи могут усложняться, когда на страницу попадает больше элементов. Поэтому важно знать, как использовать CSS для выравнивания элементов.
1. Имя элемента также называется селектором, а элемент изменения называется свойством.
2. Свойства разделяются: двоеточие, укажите значение и заканчиваются; точка с запятой.
3. Чтобы использовать класс в качестве селектора, используйте «.»
4. Чтобы использовать идентификатор в качестве селектора, используйте «#»
Свойство цвета:
CSS
Свойство непрозрачности и RGBA
Элемент прозрачности это чем ближе к нулю 0, тем прозрачнее.
Код .top-wrapper h1{
opacity: 0.7;
}
Однако, поскольку нужна непрозрачность для всего элемента, вам нужно использовать rgba, например если вы хотите только прозрачный фон. Далее используется rgba для указания цвета фона, где идем с лева направо укажите красный, зеленый, синий.
Код div {
background-color: rgba(84,190,238,0.5)
}
Укажите размер пробела между символами
Код .top-wrapper h1{
letter-spacing: 5px;
}
Свойство line-height
Если вы указываете тот же размер, что и элемент, то символы отображаются в центре в вертикальном направлении, поэтому вы можете использовать этот способ.
Код dev {
line-height: 30px;
}
Свойство font-wight
Укажите толщину символа, это нормальный или жирный, где тег hx выделен жирным шрифтом с самого начала.
Код h2 {
font-weight: normal;
}
Укажите шрифт для использования
Код h1 {
font-family: serif;
}
Свойство фонового изображения
Укажите фоновое изображение, поскольку он многократно отображается, пока не заполнится по умолчанию, он будет увеличен с использованием фона.
Код div {
background-image: url(top.png)
background-size: cover;
}
Свойства высоты и ширины
Можно указать либо пиксели, либо его можно указать как отношение (%) к родительскому элементу.
Код h1 {
width: 500px;
height: 80px;
}
Свойство float
Используется при расположении элементов рядом, это когда в качестве значения указано значение left, оно располагается слева.
Код li {
list-style: none;
float: left;
}
Свойство padding является полем внутри элемента. Свойство margin - это поле вне элемента.
Код .header-logo {
/ * 20 пикселей вверх и вниз, отступы 40 пикселей влево и вправо * /
padding: 20px 40px;
}
О центрировании
Чтобы отобразить элемент в центре экрана, укажите auto с левой и правой частями в свойстве margin. При использовании авто также укажите ширину.
Код div {
margin: 0 auto;
width: 300px;
}
Hover указывает стиль, когда курсор мыши включен, active указывает стиль, который будет применяться только при нажатии кнопки.
Код div:hover {
background-color:red;
}
Свойство border-radius
Сделайте закругление угла границы.
Код div {
background-color: red;
border-radius: 10px;
}
Переход
Укажите свойство, которое нужно изменить и время для необходимого изменения. Если для свойства установлено значение all, его можно применить ко всему, который часто используется в сочетании с парением.
Код div {
transition: all 1s;
}
div:hover {
background-color:red;
}
Свойство выравнивания текста
Укажите размещение встроенных элементов и элементов встроенного блока. Значения выровнены по левому краю, выровнены по правому краю, выровнены по центру.
Код p {
text-align: center;
}
Свойство позиции
Используйте свойство position: absolute, чтобы указать расстояние от верхнего левого края экрана. Чтобы указать расстояние, используйте верхнюю или левую.
Код div1 {
position: absolute;
top: 50px;
left: 70px;
}
div2 {
position: absolute;
top: 120px;
left: 140px;
}
Кроме того, если в родительском элементе указано positon: относительное, маленький элемент будет основан на левом верхнем углу родительского элемента.
Код .parent {
position: relative;
}
.child {
position: absolute;
top: 25px;
left: 40px;
}
Кроме того при указании позиции, это относительно просто по элементу, если вы укажете вместе верхнюю и левую части, вы можете сместить контрольную точку самого элемента
Код div {
position: relative;
top: 20px;
left: 30px;
}
Положение: исправлено, что позволяет вам всегда отображать заголовки и для верхней части экрана.
Код div {
position: fixed;
top: 20px;
left: 30px;
}
Свойство z-index
Элемент, который определяет, какой элемент работает, когда элементы перекрываются.
Код header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
position: fixed;
top: 0;
z-index: 10;
}
Свойство box-shadow
Укажите тень от коробки и ее цвет, где идет горизонтальное направление, вертикальное направление, цвет задаются слева.
Код div {
box-shadow: 10px 10px #FFFFFF;
}
Свойство курсора
Укажите отображение курсора мыши, когда указана точка. Чтобы сделать отпечатки пальцев или что-то. указатель, текст может быть указан.
Код div {
cursor: pointer;
}
Размер коробки или рамка
Включите рамку и отступ в ширину элемента.
Код * {
box-sizing: border-box
} | | Страна: (RU) |
| |
| Kosten | Суббота, 16 Февраля 2019 | Сообщение 2 |
|
| Базовая структура HTML
Что нужно при написании HTML
Код <!DOCTYPE html> <html> <head> <! - код символа -> <meta charset="utf-8"> <!-- viewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <! - код символа -> <title>Do not live to eat!</title> <! - Читать CSS -> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <h1>Заголовок</h1> <p> Я очень стараюсь и изучаю HTML / CSS </ p> </body> </html>
Комментарий
Используйте это как памятку, потому что это отличается в каждом языке.
HTML выглядит так
Код <! - Это комментарий ->
CSS выглядит примерно так
Код / * Это комментарий * /
Класс
Указание класса для тегов HTML позволяет CSS применять стиль к классу. Для указания в качестве селектора в CSS используйте.
HTML
Код <! - Укажите только класс «выбранный» для списка 2 -> <ul> <li> Листинг 1 </ li> <li class = "selected"> Листинг 2 </li> <li> Список 3 </li> </ul>
CSS
Код .selected {
color: red;
}
Несколько классов также могут быть указаны следующим образом.
HTML
Код <div class="btn blue"> </div> <div class="btn red"> </div>
CSS
Код .btn {
font-size: 20px;
}
.blue {
color: blue;
}
.red {
color: red;
}
HTML-элементы и встроенные элементы
Как и в случае тегов div, спереди и позади есть перевод строки, а элемент block распространяется на всю ширину родительского элемента. Встроенные элементы не ломаются как теги span. Кроме того, есть также встроенные блочные элементы, имеющие обе функции. Даже для тега вы можете указать block, inline, inline-block, используя свойство display в CSS.
Анимация при нажатии на кнопку
Чтобы добавить анимацию, как будто вы действительно нажали кнопку, когда нажимаете кнопку, то можно удалить тень и уменьшите ее.
Код .box {
background-color: #5dca88;
cursor: pointer;
box-shadow: 0 7px #1a7940;
}
.box:active {
box-shadow: none;
position: relative;
top: 7px;
}
Медиа-запросы
1. Как установить стиль для применения в соответствии с размером экрана для медиа-запросов.
2. Вы можете определить стили, которые будут применяться только для определенных условий.
3. Часто используемые условия заключаются в следующем, кажется, вызывает такую точку останова.
В ходе курса 1000 пикселей или меньше использовались для планшетов, а 670 пикселей или меньше - для смартфонов.
max-width: максимальная ширина
min-width: минимальная ширина
Код @media (max-width:1000px) {
/ * Определение стиля здесь применимо, если ширина меньше 1000px * /
}
Чтобы правильно применять медиа-запросы, установите область просмотра для головной части.
Код <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Do not live to eat!</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css">
</head>
Укажите ширину div как 25% и попробуйте расположить четыре. В это время, если применяется дополнение, так как оно превысит 100%, оно разрушится. В таких случаях рекомендуется использовать box-sizing: border-box, который рассчитывает%, включая границы и отступы. Рекомендуется использовать * как селектор и применять его ко всему. Это становится легко управлять.
Если ширина указана с помощью px, она будет свернута с шириной экрана, поэтому вы можете указать ее в %. Однако, поскольку может быть трудно увидеть, является ли это большим экраном, максимальная ширина также должна быть указана вместе.
Если все маленькие элементы являются плавающими, высота родительского элемента равна 0. Следовательно, высота родительского элемента превышена, и отображение сворачивается. Чтобы избежать этого, добавление пустого тега div в подэлемент и установка clear: left для css в нем приведет к освобождению float, а родительский элемент будет включать подэлементы.
| | Страна: (RU) |
| |
