Css основные свойства: Основные CSS-свойства — Как создать сайт

Чрезвычайно полезные свойства, такие как max-width, min-width, max-height и min-height, также играют роль при создании адаптивных веб-сайтов. Вот один из примеров того, как можно использовать auto и max-width, чтобы изображения плотно и аккуратно помещались в доступном пространстве:

 изображение {
    максимальная ширина: 100%;
    высота: авто;
}
 

3: поля и отступы

Поля — это отступы, которые обязательно появятся. Знание того, как эти вещи работают, будет чрезвычайно полезно при написании CSS.

Поля и отступы определяют пространство между элементами на вашем веб-сайте. Они очень похожи и имеют те же единицы измерения, что и ширина и высота, упомянутые выше.

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

Обычно поля записываются следующим образом:

 дел {
    поле сверху: 20 пикселей;
    нижняя граница: 20px;
    поле справа: 10px;
    поле слева: 10px
}
 

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

 дел {
   поля: 20px 10px 20px 10px;
   /* Это сокращение относится к ВЕРХУ, Справа, Снизу, Слева. Легче представить часы на 12, 3, 6 и 9.соответственно */
   поля: 20px 10px 20px;
   /* Это относится к верху, левому и правому краю, низу */
   поля: 20px 10px;
   /* Это относится к верху и низу, левому и правому краю */
   поле: 20 пикселей;
   /* Это относится к полю в 20 пикселей со всех 4 сторон */
}
 

Дополнительный совет: полей с авто слева и справа используются для центрирования элемента с отображаемым значением блока. Записывается просто как:

 раздел {
   поле: 0 авто;
}
 

4: Граница

Границы есть… границы. Я почти уверен, что вам не нужно объяснять, что такое границы.

Границы имеют 3 различных свойства, о которых вам нужно позаботиться:

• border-width – ширина границы. В тех же единицах, что и ширина и высота
• стиль границы – стиль границы. Обычные значения сплошные и пунктирные. Полный список см. на веб-сайте W3 Schools
.
• border-color – цвет границы. Можно использовать значения Hex и rgb.

Вместо того, чтобы писать более длинную версию, вы можете объявить стенографию границы следующим образом:

 дел {
    граница: 1px сплошной черный;
    /* ширина, стиль и цвет границы */
}
 

Аналогично полям и отступам, границы относятся ко всем 4 сторонам. Если вас интересует только применение границ к 1 или 2 сторонам, я обычно предпочитаю использовать границу сверху, границу снизу, границу слева или границу справа.

5: поплавки

Поплавки — один из основных элементов современного веб-сайта. Если вы видите два столбца текста рядом, конфигурацию боковой панели/контента, подобную той, что вы видите в моем блоге, если окно вашего браузера превышает 800 пикселей, вы заметили плавающие элементы в действии. Другой часто используемой областью для плавающих элементов являются элементы навигации.

В двух словах, float просто позиционирует край целевого содержимого HTML на краю одной стороны родительского контейнера. Последующие плавающие элементы будут размещены на краю вашего первого плавающего контента. (в зависимости от того, перемещаете ли вы его влево или вправо)

Поплавки имеют 3 основных свойства, которые вы можете часто использовать:

• слева
• справа
• нет — удаляет поплавок

Вы также можете прочитать этот пост о теории поплавков

6: Очистка поплавков

Несмотря на то, что поплавки чрезвычайно полезны, иногда они вызывают головную боль, если их не очистить должным образом. В общем, может возникнуть 2 вида проблем:

Существует 3 основных метода очистки поплавков:

• очистить : Свойство Clear принимает 3 значения. левый, правый или оба. Как вы могли догадаться, clear:left; просто очищает все поплавки слева, clear:right; очищает поплавки с правой стороны, а ясно: оба; гарантирует, что все элементы с плавающей запятой очищены.

• overflow:hidden : Этот метод отлично подходит для предотвращения разрушения родительского элемента, как в задаче 2. overflow:hidden; устанавливается на родительский элемент для решения проблемы.

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

В этом посте Криса Койера есть отличные фрагменты кода для взлома clearfix. Узнайте больше о взломе clearfix на страницах, на которые он ссылается, или просто перейдите в нижний раздел, чтобы получить последнюю версию.

7: Цвет

Цвет здесь относится к цвету текста. Он принимает значение #hex или значение rgb, как в случае с цветами границ.

8: Фон

Фон относится к фону элемента HTML. Как и многие свойства CSS, 9Фон 0019 также имеет сокращение.

 тело {
    background:transparent image-url('image.png') слева вверху без повтора;
    /* Все определения фона являются необязательными, но хотя бы одно из них должно быть указано. Вышеуказанные значения являются значениями по умолчанию для фона, если вы оставили что-либо неопределенным */
}
 

Вот пояснения к свойствам фона в порядке слева направо:

• background-color: цвет фона. Принимает значение #hex или значение rgb

• фоновое изображение: URL-адрес (URI). Встает на путь к твоему образу. Используйте приведенный выше пример, если изображение находится в той же папке.

  Чтобы спуститься на одну папку, просто введите имя файла перед изображением.png. Пример: css/image.png.

  Чтобы перейти на одну папку вверх, введите имя файла с «…/». Пример: …/css/image.png

• background-repeat: укажите, хотите ли вы, чтобы фон повторялся, если ширина превышает размер фона. Другими значениями являются повтор, повтор-x и повтор-y.

• background-position: позиция фона относительно элемента HTML. Здесь необходимы два значения, X и Y, где X — величина смещения слева, а Y — величина смещения сверху. Принимает либо единичные значения (как ширина и высота), либо левое, центральное, правое и верхнее, центральное, нижнее для левого и правого соответственно.

9: Шрифт

Шрифты в целом относятся к внешнему виду текста на вашем веб-сайте. Есть несколько вещей, на которые стоит обратить внимание. Как и у других свойств, у шрифта есть сокращение. Обратите внимание, что условное обозначение шрифта можно увидеть только один раз во всем файле CSS. В другое время обычно используются разные свойства:

 тело {
    шрифт: курсив прописные полужирный 20px/1.5 "Proxima Nova", Helvetica, arial, без засечек;
    /* сокращение шрифта */
}
 

Вот пояснения к свойствам шрифта в порядке слева направо:

• стиль шрифта : Стиль шрифта. допустимые значения выделены курсивом или обычным шрифтом. По умолчанию нормальный. Необязательное свойство в сокращении шрифта

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

• вес шрифта: вес шрифта. определяет, выделен ли текст жирным шрифтом. допустимые значения: нормальный, полужирный, более жирный или 100–900. Необязательное свойство в сокращении шрифта

• размер шрифта: размер шрифта. Принимает значение, совпадающее с шириной и высотой

  .

• line-height: определяет расстояние над и под текстом. Очень важно обеспечить хорошую читаемость. Принимает те же значения, что и шрифт, а также безразмерное значение. Если используется безразмерное значение, это означает, что высота строки кратна предоставленному значению.

• font-family: область для объявления шрифтов и набора шрифтов, которые вы хотели бы использовать.

Заключение

Вот и все. Выше перечислены 9 свойств CSS, которые вам обязательно нужно знать. Что вам осталось сделать сейчас, так это сохранить эту страницу где-нибудь в качестве резервной копии, если вы не уверены в важных свойствах CSS, которые вам нужно запомнить. Если вы нашли этот пост полезным, пожалуйста, сделайте мне одолжение и поделитесь им с другими через Twitter или Facebook.

Теперь код прочь!

Если вам понравилась эта статья, поддержите меня, поделившись этой статьей в Твиттере или купив мне кофе 😉. Если вы заметили опечатку, я был бы признателен, если бы вы могли исправить ее на GitHub. Благодарю вас!

Основные свойства CSS — Учебное пособие по CSS

Основные свойства CSS!

Приступим к добавлению стиля.

Введение

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

Прежде чем мы погрузимся в

Я не думаю, что для нас было бы продуктивно просматривать каждую собственность, доступную вам. Вместо этого я собираюсь познакомить вас с некоторыми наиболее часто используемыми свойствами, чтобы дать вам представление о том, как они работают. Как только вы освоитесь с ними, подобрать новые не так уж и сложно. Мы начнем со свойств CSS на уровне CSS 1. Уровни CSS 2 и 3 в основном просто вводят новые свойства (некоторые из них немного сложны для понимания тонкостей, но по мере роста ваших навыков работы с CSS они не будут такими страшными) .

Официальный стандарт CSS уровня 1 можно найти здесь:

• W3C CSS уровня 1

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

• Значения — какие значения принимает свойство.
• Описание — описание того, что он делает, и любых интересных аспектов его поведения.
• Пример кода — чтобы дать вам представление о том, как это реализовано.

Будут перечислены и другие вещи, но эти будут наиболее полезными для вас.

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

Пример HTML

В оставшейся части этого раздела мы продемонстрируем свойства CSS. Мы применим их все к следующему HTML.

our_page.html

3. <голова>
7. <ссылка href="style.css" rel="stylesheet">
10. <тело>

11. Хобби

13. В выходные я собрал все свои часы и привязал их к ремню.

15. Время оказалось талией.

Свойства текста

Вот небольшой пример того, что вы можете изменить с помощью текста.

Font Family

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

• Times New Roman
• Ариал
• Вердана

Можно указать и включить нестандартные шрифты, но это немного сложнее. Мы рассмотрим это позже.

стиль.css

1. h2 {
2. семейство шрифтов: Times New Roman;
3. }
5. р {
6. семейство шрифтов: Verdana;
7. }

Наша забавная HTML-страница

Хобби

На выходных я собрал все свои часы и прикрепил их к ремню.

Время оказалось талией.

Размер шрифта

Размер шрифта может быть указан с использованием нескольких различных типов, но проще всего работать с пикселями (px).

стиль.css

1. h2 {
2. размер шрифта: 30 пикселей;
3. }
5. р {
6. размер шрифта: 16px;
7. }

Наша забавная HTML-страница

Хобби

На выходных я собрал все свои часы и прикрепил их к ремню.

Время оказалось талией.

Толщина шрифта

Свойство css font-weight позволяет указать толщину линий символов. Это может быть одно из следующих значений:

• зажигалка
• обычный
• полужирный
• смелее

Некоторые семейства шрифтов имеют только обычный и полужирный начертания. В этом случае, если вы укажете светлее, по умолчанию он вернется к нормальному, а если вы укажете жирнее, он по умолчанию вернется к полужирному.

style.css

1. h2 {
2. вес шрифта: нормальный;
3. }
5. р {
6. вес шрифта: полужирный;
7. }

Наша забавная HTML-страница

Хобби

На выходных я собрал все свои часы и прикрепил их к ремню.

Время оказалось талией.

Свойства цвета

Цвет довольно сложно определить. Есть несколько способов, которыми мы можем это сделать. Мы рассмотрим цвет более подробно в следующем разделе. Здесь мы просто будем работать с ним в его простейшей форме, то есть с шестнадцатеричными числами. Цвет определяется решеткой ( # ), за которой следуют 6 шестнадцатеричных чисел. Первые 2 — количество красного, вторые 2 — количество зеленого и последние 2 — количество синего.

Обратите внимание, что в CSS мы используем американское написание для цвета, поэтому мы опускаем u , например, цвет. Если вы американец, то это не будет проблемой, но другим следует помнить об этом.

Color

Свойство color позволяет указать цвет текста.

style.css

1. h2 {
2. цвет: #9ACA42;
3. }
5. р {
6. цвет: #357180;
7. }

Наша забавная HTML-страница

Хобби

На выходных я собрал все свои часы и прикрепил их к ремню.

Время оказалось талией.

Цвет фона

Свойство background-color позволяет указать цвет фона для элемента.

style.css

1. h2 {
2. цвет фона: #9ACA42;
3. }
5. р {
6. цвет фона: #A0D2DC;
7. }

Наша забавная HTML-страница

Хобби

На выходных я собрал все свои часы и прикрепил их к ремню.

Время оказалось талией.

Правильный выбор цветов для контента может оказать огромное влияние на его внешний вид.

Если вы хотите узнать больше о выборе хороших цветовых схем, ознакомьтесь с нашим разделом «Учебник по графическому дизайну», посвященным цвету.

Свойства промежутков

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

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

Заполнение

Заполнение относится к пространству вокруг содержимого. Мы также включили сюда свойство background-color просто для того, чтобы было немного проще увидеть, что происходит.

Мы можем задать заполнение тремя способами:

• Одно значение — в этом случае оно будет применено ко всем сторонам.
• В виде двух значений — в этом случае первая единица определяет верхнее и нижнее заполнение, а вторая единица — левое и правое заполнение.
• В виде четырех значений — в этом случае первое относится к верхнему краю, второе — к правому, третье — к нижнему и четвертое — к левому.

style.css

1. h2 {
2. отступ: 5px;
3. цвет фона: #9ACA42;
4. }
6. р {
7. заполнение: 5px 10px 8px 30px;
8. цвет фона: #A0D2DC;
9. }

Наша веселая HTML-страница

Хобби

На выходных я собрал все свои часы и привязал их к ремню.

Время оказалось талией.

Поля

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

Подобно заполнению, вы можете указать одно значение, два или четыре.

стиль.css

1. h2 {
поле
2. : 10 пикселей;
3. цвет фона: #9ACA42;
4. }
6. р {
поле
7. : 5px 10px 8px 30px;
8. цвет фона: #A0D2DC;
9. }

Наша забавная HTML-страница

Хобби

На выходных я собрал все свои часы и прикрепил их к ремню.

Время оказалось талией.

Граница

Граница находится между отступом и полем. Здесь я опишу основное использование, но существуют различные свойства, позволяющие более детально управлять внешним видом границы, поэтому я бы рекомендовал взглянуть на свойства границы в спецификации CSS.

Различные параметры границы, которыми вы можете управлять:

• Ширина.
• Это цвет.
• Это стиль (нет, пунктирный, пунктирный, сплошной, двойной, канавка, ребро, вставка, начало).

style.css

1. h2 {
граница
2. : 2 пикселя сплошная #E9B82B;
3. }
5. р {
6. граница: 1 пиксель пунктир #4D8353;
7. }

Наша забавная HTML-страница

Хобби

На выходных я собрал все свои часы и прикрепил их к ремню.

Время оказалось талией.

Готовый продукт

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

стиль.css

1. h2 {
2. семейство шрифтов: Arial;
3. размер шрифта: 24px;
4. вес шрифта: нормальный;
5. цвет: #efeffef;
6. цвет фона: #9ACA42;
поле
7. : 2px 0px 20px 0px;
8. отступ: 5px;
9. нижняя граница: 2px сплошная #4D8353;
10. }
12. р {
поле
13. : 10 пикселей 0 пикселей 10 пикселей 30 пикселей;
14. цвет: #357180;
15. размер шрифта: 16px;
16. }

Наша забавная HTML-страница

Хобби

На выходных я собрал все свои часы и прикрепил их к ремню.

Время оказалось талией.

Сводка

семейство шрифтов

Установить шрифт для данного элемента.

размер шрифта

Установить шрифт для данного элемента.

вес шрифта

Задайте толщину шрифта (например, полужирный или обычный).

цвет

Установить цвет шрифта для данного элемента.

цвет фона

Установить цвет фона для данного элемента.

прокладка

Установите отступ вокруг данного элемента.

поля

Установите поле вокруг данного элемента.

граница

Установите рамку вокруг данного элемента.

Полный список свойств

Глупо пытаться запомнить все доступные вам свойства. Insteach использует спецификацию в качестве ссылки. (http://www.w3.org/TR/2008/REC-CSS1-20080411/)

Действия

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