Основы CSS

Что такое CSS на самом деле?
Анатомия правила CSS
Выбор многих элементов одновременно
Различные типы селекторов
Шрифты и текст
Блоки, блоки, и еще раз о блоках
Изменение цвета страницы
Задание стилей для body
Позиционирование и стиль заголовка главной страницы
центрирования изображения
вывод

Cascading Stylesheets (CSS, каскадные таблицы стилей) - это код, используемый для стилизации сайта. В основах CSS предоставляется информация о стилизации для начинающих. Мы ответим на такие вопросы, как: каким образом сделать текст черным или красным? Как разместить контент именно в том месте, где мы хотим его видеть на странице? Как задавать фоновые цвета и изображения?

Что такое CSS на самом деле?

Как и HTML, CSS не является настоящим языком программирования. Это только язык таблиц стилей, которая позволяет задавать стиле выбранным элементам в HTML документах. Например, для того, чтобы выбрать все параграфы на HTML странице и сделать цвет их текста красным, нужно написать такой CSS:

p {color: red; }

Давайте попробуем: вставьте эти три срока CSS в новый файл в вашем редакторе кода, и сохраните файл как style.css в вашей папке styles.

Кроме того, нам необходимо присоединить CSS к вашему HTML документа, иначе стили CSS не повлияют на то, как браузер отобразит HTML документ. (Если вы только присоединились к нашему проекту, прочитайте Работу с файлами и основы HTML чтобы узнать, что необходимо сделать в начале.) Откройте ваш файл index.html и вставьте следующую ленту куда head, между тегами <head> и </ head>:

<Link href = "styles / style.css" rel = "stylesheet" type = "text / css">
Сохраните index.html и откройте его в вашем браузере. Вы увидите что-то вроде приведенного изображения:

Если текст ваших параграфов стал красным, поздравляем! Вы только написали ваш первый CSS!

Анатомия правила CSS

Посмотрим на предыдущий CSS более подробно:

Вся структура называется "rule set" - "набор правил" (чаще, сокращенно, «правило»). Его части также имеют свои названия:

Selector - Селектор Название элемента HTML в начале правила. Селектор выбирает элемент или элементы, которые будут стилизованы (в нашем случае, элементы p). Для стилизации других элементов просто измените селектор. Declaration - определение (декларация) Одно правило вроде color: red; указывает, из свойств элемента вы хотите стилизовать. Properties - Свойства Соединение можно стилизовать данный HTML элемент. (В этом случае, color - это свойство элементов p). В CSS е выбираете свойства, которые хотите изменить в вашем правиле. Property value - значение свойства Справа от качества, после двоеточия, мы указываем значение свойства, выбирая из многих возможных значений для предоставленной свойства (есть многие другие значений свойства color кроме red).

Обратите внимание на другие важные части синтаксиса:

Каждый набор правил (кроме селектора) должен быть окружен фигурными скобками ({}).
В каждом определении используется двоеточие для разделения свойств от их значения.
В каждом наборе правил используется точка с запятой для отделения деклараций от последующих.

Итак, для того, чтобы изменить несколько значений свойств одновременно, их достаточно записать, разделяя точкой с запятой, например:

p {color: red; width: 500px; border: 1px solid black; }

Выбор многих элементов одновременно

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

p, li, h1 {color: red; }

Различные типы селекторов

Есть большое количество различных типов селекторов. Выше мы рассмотрели лишь селекторы элементов, которые выбирают все элементы заданного типа в предоставленных HTML документах. Но мы можем применять более специфические селекторы. Посмотрите на наиболее распространенные типы селекторов:

Название селектору Что он выбирает Пример Селектор элемента (иногда называют селектором тегу) Все HTML элементы данного типа p
Выбирает <p> Селектор по ID Элемент на странице, который имеет заданный ID (в HTML странице не может быть элементов с одинаковыми ID). # My-id
Выбирает <p id = "my-id"> или <a id="my-id"> Селектор по классу Элементы на странице, которые имеют заданные классы (на странице могут быть элементы с одинаковыми классами). .my-class
Выбирает <p class = "my-class"> и <a class="my-class"> Селектор по атрибуту Элементы на странице с указанным атрибутом img [src]
Выбирает <img src = "myimage.png"> но не «img> Селекторы псевдоклассов Указанные элементы, но только тогда, когда они находятся в указанном состоянии, например, когда на них наводят курсор мыши. a: hover
Выбирает <a>, но только когда курсор мыши указывает на ссылку.

Другие селекторы вы можете увидеть на странице Selectors guide .

Шрифты и текст

Исследовав некоторые основы CSS, давайте добавим больше правил и информации в файл style.css, чтобы сделать наш пример более привлекательным. Для начала улучшим вид наших шрифтов и текста.

В первую очередь, найдите сохраненный вами вывод с сайта Google Fonts , Который вы сохранили ранее. Добавьте элемент <link ...> в head файла index.html (куда между тегами <head> и </ head>). Элемент будет выглядеть примерно так: <link href = 'http: //fonts.googleapis.com/css? Family = Open + Sans' rel = 'stylesheet' type = 'text / css'>
Удалите правило, сейчас находится в вашем файле style.css. Это был хороший пример, но красный текст выглядит не очень прекрасно.
Добавьте следующие сроки до вашего файла стилей, заменив placeholder на сроке font-family, что вы получили с сайта Google Fonts. (Font-family означает шрифты, которые вы примените для вашего текста). Это правило установит глобальный базовый шрифт и его размер для всей страницы (так как <html> - это родительский элемент всей страницы, все элементы в нем унаследуют одинаковый font-size и font-family): html {font-size: 10px; / * Px означает «пиксели": базовый размер шрифта устанавливается равным 10 пикселей в высоту * / font-family: placeholder: замените этот плейсхолдер на сроке с сайта Google fonts}
Примечание: Я добавил комментарий с объяснением, что означает "px". Все в CSS документе, находится между / * и * / - это комментарий CSS, который игнорируется браузером. Комментарии применяют для примечаний и пояснений, которые помогут вам в работе.
Установим размеры шрифта для элементов, содержащих в себе текст внутри HTML body ( <H1> , <Li> и <P> ). Также центру, текст нашего заголовке и установим высоту сроки и промежуток между буквами нашего контента, чтобы сделать его более удобным для чтения. h1 {font-size: 60px; text-align: center; } P, li {font-size: 16px; line-height: 2; letter-spacing: 1px; }

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

Блоки, блоки, и еще раз о блоках

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

Неудивительно, что макет CSS основан преимущественно на блочной модели (box model). Каждый из блоков, занимает пространство на вашей странице, обладает следующими свойствами:

padding, пространство только вокруг контента (например, вокруг параграфа текста)
border, сплошная линия (предел), которая расположена снаружи от padding
margin, пространство вокруг внешнего элемента

padding, пространство только вокруг контента (например, вокруг параграфа текста) border, сплошная линия (предел), которая расположена снаружи от padding margin, пространство вокруг внешнего элемента

В этом разделе мы также используем:

width (ширина элемента)
background-color, цвет по контенту и padding элемента
color, цвет содержания элемента (обычно текста)
text-shadow: устанавливает тень на тексте в середине элемента
display: устанавливает режим отображения элемента (не волнуйтесь об этом пока)

Итак, давайте начнем и добавим еще несколько CSS на нашу страницу! Добавьте эти новые правила в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.

Изменение цвета страницы

html {background-color: # 00539F; }

Это правило устанавливает фоновый цвет для всей страницы. Измените код цвета на любой другой, что вы выбрали при планировании своего сайта .

Задание стилей для body

body {width: 600px; margin: 0 auto; background-color: # FF9500; padding: 0 20px 20px 20px; border: 5px solid black; }

Теперь стиле для элемента body. Здесь много параметров, поэтому давайте рассмотрим по одному:

width: 600px; - этот параметр делает body шириной всегда 600 пикселей.
margin: 0 auto; - Когда вы устанавливаете два значения в свойствах margin или padding, первое значение влияет на верхнюю и нижнюю стороны элемента (сделано 0 в данном случае), и второе значение левой и правой стороны (здесь auto - это специальное значение, которое равномерно распределяет доступен горизонтальное пространство между левой и правой стороной). Вы можете также использовать один, три или четыре значения, как задокументировано здесь .
background-color: # FF9500; - по-прежнему, это устанавливает фоновый цвет элемента. Мы использовали какой-то красно-оранжевый для body, а не синий для элемента <Html> , Но не бойтесь экспериментировать, подставляя другие цвета.
padding: 0 20px 20px 20px; - мы имеем четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашу продукцию. На этот раз мы не устанавливаем padding сверху от body (значение 0px), а устанавливаем 20 пикселей слева, снизу и справа. Значение установлено в следующем порядке: вверху, справа, внизу и слева.
border: 5px solid black; - устанавливает непрерывную черную рамку border толщиной 5 пиксель со всех сторон body.

Позиционирование и стиль заголовка главной страницы

h1 {margin: 0; padding: 20px 0; color: # 00539F; text-shadow: 3px 3px 1px black; }

Вы, наверное, заметили, что в верхней части body есть немалый разрыв. Это происходит потому, что браузеры используют некоторый стиль по умолчанию к элементу <H1> (Среди прочих), даже если вы не применили ни CSS! Это может показаться плохой идеей, но мы хотим также заготовка веб-страница должна базовую читальный способность. Чтобы избавиться разрыва, мы перекрываем стандартный стиль по умолчанию, устанавливая margin: 0 ;.

Далее мы установили верхний и нижний отступ (padding) заголовка до 20 пикселей и сделали заголовок текстом того же цвета, что и цвет фона (background) всей страницы html.

Одна довольно интересное свойство, которое мы использовали здесь, это - text-shadow, которая применяет текстовую тень к текстового содержимого элемента. Ее четыре значения означают следующее:

Первое значение пикселя устанавливает горизонтальное смещение тени от текста - как далеко она движется: отрицательное значение имеет переместить тень влево.
Второе значение пикселя устанавливает вертикальное смещение тени от текста - как далеко она движется в таком случае; отрицательное значение должно двигать тень вверх.
Третье значение пикселя устанавливает радиус размывания тени - большая величина будет означать более размытую тень.
Четвертое значение устанавливает базовый цвет тени.

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

центрирования изображения

img {display: block; margin: 0 auto; }

Наконец, мы будем центрировать изображение, чтобы оно выглядело лучше. Мы могли бы использовать margin: 0 auto-прежнему для body, но мы также нуждаемся сделать нечто иное. Элемент body является блочным уровнем, то есть он занимает место на странице, и к нему могут быть добавлены поля и другие значения отступов. Изображения, с другой стороны, являются встроенными элементами (inline), то есть они не могут иметь отступлений. Таким образом, чтобы применить поля к изображению, мы должны предоставить поведение блочного уровня изображению с помощью display: block ;.

Примечание: Не волнуйтесь, если еще не поняли display: block; и отличие между блочным уровнем / встроенным (inline) элементом. Далее в и будете изучать CSS более глубоко. Вы можете узнать больше о различных доступные значения отображения на нашем сайте display reference page .

вывод

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

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

Здесь мы, действительно, только затронули поверхность CSS. Чтобы узнать больше, перейдите к Изучение темы CSS .

Что делает «Force stop» и что такое кеш?
Что делает «Force stop» и что такое кеш? Позволь мне объяснить. Force Stop В основе Android лежит ядро Linux, компонент, отвечающий за управление памятью и процессами, а также целый ряд других ресурсов. Каждый раз, когда вы запускаете приложение, вы фактически запускаете процесс Linux. Процесс - это логический контейнер для программы (приложения). Он запускается ядром и используется для совместного использования системных ресурсов (включая память и процессорное

Что работает, что не работает и что вы можете сделать, чтобы сделать его лучше?
Что работает, что не работает и что вы можете сделать, чтобы сделать его лучше? Поэкспериментируйте с различными методами улучшения своего имиджа, и со временем ваши навыки естественно улучшатся. Загрузите ваши изображения на компьютер, чтобы лучше понять, как они выглядят. Задняя часть вашей камеры никогда не бывает очень точной. Я предлагаю использовать Adobe Lightroom для организации всех ваших изображений. Его также можно использовать для выполнения почти всех ваших операций

Не знаете, что такое Центр сетевых операций (NOC), что он делает или как он связан со службами удаленного мониторинга и управления?
Не знаете, что такое Центр сетевых операций (NOC), что он делает или как он связан со службами удаленного мониторинга и управления? Хорошие новости! Вы пришли в нужное место ... NOC (произносится как слово «стук») означает «центр управления сетью», который является центральным местом в организации, где администраторы контролируют, контролируют и поддерживают телекоммуникационную сеть компании 24 часа в сутки, 7 дней в неделю, 365 дней. год. Вообще говоря, роли мониторинга

Чтобы сохранить принтер в другой комнате, возможно, даже в шкафу или навесе (если он шумный), безопасно знать, что задание на печать будет ждать вас, когда вы пойдете за ним?
Чтобы сохранить принтер в другой комнате, возможно, даже в шкафу или навесе (если он шумный), безопасно знать, что задание на печать будет ждать вас, когда вы пойдете за ним? С Raspberry Pi вы можете. Сначала подготовьте сервер печати Raspberry Pi Раньше случалось так, что единственный способ превратить не-беспроводной принтер старого стиля в современный беспроводной принтер состоял в том, чтобы купить потенциально дорогую беспроводную карту для устройства (если

Что такое криптовалютные экскаваторы?
Что такое криптовалютные экскаваторы? Начнем с того, что экскаваторы ничего не «ломают», а только вычисляют хэши (функции быстрого доступа), которые должны соответствовать конкретному условию, которое ставит биткойн-сеть в данный момент. Это условие (также называемое криптографической загадкой) является переменным во времени, и его сложность зависит от вычислительной мощности всей сети биткойнов. И именно тогда мы говорим о биткойн-экскаваторах, потому что криптовалют много,

Вы когда-нибудь замечали, как Netflix регулярно меняет изображения на обложках телевизионных шоу и фильмов?
Вы когда-нибудь замечали, как Netflix регулярно меняет изображения на обложках телевизионных шоу и фильмов? Есть причина для этого. Официальный Netflix Tech отмечает в блоге : Фактически, каждое изменение, которое рассматривает Netflix, проходит строгий A / B-тестирование, прежде чем становится пользовательским интерфейсом по умолчанию. Значительные

Что вы не можете подключиться?
Что вы не можете подключиться? И как вы можете получить максимальную отдачу от порта Lightning? Что вы можете подключить Переезд в USB-C должен открыть кучу возможностей того, что вы теперь можете подключить к своему iPad Pro. С точки зрения поддержки производителя все еще рано, но вот что мы знаем, что вы можете подключиться, либо попробовав это сами, либо получив официальные отзывы от производителей

Что такое IRC?
Что такое IRC? Проще говоря, IRC - это сеть чатов, где каждый отдельный чат называется каналом . Каналы размещаются на серверах , и каждый сервер поддерживает свою собственную сеть каналов. Используя IRC-клиент, вы можете подключиться к серверу и присоединиться к каналам на этом сервере. Таким образом вы сможете общаться с другими пользователями, которые подключены к тем же каналам на тех же серверах. IRC впервые появилась на сцене в 1988 году и достигла

На самом деле, на рынке есть множество программ для синхронизации, правильно ли вы работали?
На самом деле, на рынке есть множество программ для синхронизации, правильно ли вы работали? Здесь я хотел бы рекомендовать вам это Coolmuster HTC PC Suite , который широко считается лучшим помощником по резервному копированию и программному обеспечению для управления. Эта программа очень проста в использовании, и я расскажу вам больше об этом. Во-первых, он позволяет просматривать все файлы вашего телефона HTC на компьютере, включая

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

Произойдет ли такое обслуживание клиентов с банком?
Произойдет ли такое обслуживание клиентов с банком? Вы знаете, что плата за это придет, вероятно, только для звонка - это если вы можете найти номер телефона на сайте, чтобы позвонить. Скажи мне, иногда это тоже занимает у тебя полчаса! С PayPal? Их обслуживание клиентов стало немного лучше. Я обычно отвечаю в течение 24 часов, но вам нужно подождать до тех пор, пока вы не сможете позвонить. С Payoneer? Они худшие на данный момент

Что такое CSS на самом деле?
Мы ответим на такие вопросы, как: каким образом сделать текст черным или красным?
Как разместить контент именно в том месте, где мы хотим его видеть на странице?
Как задавать фоновые цвета и изображения?
Что такое CSS на самом деле?
Com/css?
Новый модели iPad Pro (2018) каждый из них имеет порт USB-C в первый раз, но что это значит?
Что можно подключить к новым iPad?
Что вы не можете подключиться?
И как вы можете получить максимальную отдачу от порта Lightning?

Написание дипломных работ на заказ недорого