-
Атрибут тега
-
CSS
-
Зачем используется CSS
-
Как подключить CSS
-
Селектор и блок объявлений
-
class
-
id
-
DevTools. Панель Elements
-
Справочник HTML CSS webref.ru
Атрибуты тега
Атрибут в HTML- это дополнительная запись внутри открывающего тега вида ключ – значения. С помощью атрибутов можно придать тегу совершенно новый функционал, изменить существующий и т.д. Некоторые атрибуты указывать просто необходимо, иначе без них тег теряет свою сущность.
Наиболее яркий пример — тег <a> для создания ссылок. Для него обязательно нужно указывать атрибут href, он задаёт адрес документа, на который следует перейти. В одном теге может быть множество непротиворечащих друг другу атрибутов.
В общем случае тег записывается следующим образом:
<имя_тега атрибут1=»значение1″ атрибут2=»значение2″ и т.д.>
На практике это выглядит так:
Обратите внимание, как записаны атрибуты href, class, id. Они записаны внутри угловых скобок (< >), через пробел от самого тега. Идет название атрибута, далее без пробела знак равно(=) и также без пробела кавычки («»). Таким образом записываются почти все атрибуты. К тому же, не имеет значения расположения атрибутов внутри тега, от перестановки их местами ничего не изменится.
CSS
CSS – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML). Название происходит от английского Cascading Style Sheets, что означает «каскадные таблицы стилей».
Зачем используется CSS
Назначение CSS – отделять то, что задает внешний вид страницы, от ее содержания. Если документ создан только с использованием HTML, то в нем определяется не только каждый элемент, но и способ его отображения (цвет, шрифт, положение блока и т. д.). Если же подключены каскадные таблицы стилей, то HTML описывает только очередность
объектов. А за все их свойства отвечает CSS. В HTML достаточно прописывать класс, не перечисляя все стили каждый раз.
Как подключить CSS
Создаем обычную html-страницу, с таким кодом:
<!DOCTYPE html>
<html lang=«en»>
<head>
<title>Подключение CSS к HTML</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок первого уровня</h2>
</body>
</html>
Теперь в Visual Studio Code создаем пустой документ style.css и сохраняем его в ту же папку, где находится html-страница.
Это наша страница стилей.
Давайте подключим стили (style.css) к html-странице.
В html существует тег link, который отвечает за подключение внешних файлов, добавляем link в html-страницу с прописанным путем к файлу style.css :
<link rel=«stylesheet» href=«style.css»>
<!DOCTYPE html>
<html lang=«en»>
<head>
<title>Подключение CSS к HTML</title>
<link rel=«stylesheet» href=«style.css»>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок первого уровня</h2>
</body>
</html>
Далее мы будем подключения CSS именно этим способом, так как он самый удобный. Есть и другие способы, давайте их рассмотрим.
Внутренние таблицы стилей
Мы можем написать стили прямо в тег:
<h1 style=«color:red;»>Заголовок первого уровня</h1>
Мы можем в head указать тег style:
<head>
<title>Подключение CSS к HTML</title>
<style>
h1{
color: red;
}
</style>
</head>
Селектор и блок объявлений
Каждое правило состоит из 2 частей:
Селектор CSS – строка, которая идентифицирует элементы (один или несколько) на странице в соответствии со специальным синтаксисом, о котором мы скоро поговорим.
Блок объявлений содержит одно или несколько объявлений, которые состоят из свойства и значения.
Больше в CSS ничего нет.
Напишем код, посмотрим как работает CSS
<span>Понедельник</span>
<span>Вторник</span>
<span>Среда</span>
<span>Четверг</span>
<span>Пятница</span>
<span>Суббота</span>
<span>Воскресенье</span>
Некоторые свойства:
CSS-свойства влияющие на шрифт
- font-style стиль шрифта
- font-variant малые заглавные
- font-weight жирность шрифта
- font-size размер шрифта
- font-family шрифт элемента
CSS-свойства влияющие на цвет и фон
- color: green; цвет текста
- background-color: red; фон
CSS-свойства влияющие на границу(обводку)
- border: 1px solid red рамка
- border-radius: 50px; скругление рамки
CSS-свойства влияющие на текст
- text-align: center; поставит текст по центру
text-indent: 20px;— отступ первой строки равен 20 пикселям,- line-height задает расстояние между строками
CSS-свойства влияющие на размеры объекта
- width: 100px; ширина
- height: 100px; высота
Классы
Классы используются для классификации элементов по общим группам, поэтому в отличие от атрибута id, множеству элементов может быть присвоено общее имя класса. Присваивая элементам имя одного класса, вы можете применить стили ко всем таким элементам одновременно с помощью единственного правила стилей. Чтобы сделать это, следует
воспользоваться атрибутом class. Его значение должно описывать, к какому классу принадлежит элемент. Класс похож на идентификатор, но вместо символа (#) перед именем класса указывается точка (.):
Задаем класс в HTML и цвет текста в CSS
HTML
CSS
Идентификаторы
Каждый НТМL-элемент может иметь атрибут id. Он предназначен для идентификации какого-либо конкретного тега. В пределах всей HTML-страницы должен существовать только один тег с определенным значением атрибута id. Наличие нескольких элементов с одинаковым значением id не допускается и может привести к ошибке. Значение атрибута id может состоять из букв латинского алфавита, цифр, знака подчеркивания и дефиса. Причем значение атрибута может начинаться с латинской буквы или со знака подчеркивания (но не с цифры или другого символа). Кроме того, значения атрибута id чувствительны к регистру. Атрибут id называют глобальным, поскольку он может быть использован с любыми НТМL-элементами.
В CSS id-селектор содержит символ (#), непосредственно за которым следует значение атрибута id.
.name{
color : red ;
}
#id {
color : yellow ;
}
h1 {
color : green ;
}
Как работает devTools
Справочник HTML CSS
Задание
Обязательно:
1) Создать сайт, выполните одно из заданий(постарайтесь сложный уровень):
Простой уровень КЛИК
Средний уровень КЛИК
Сложный уровень КЛИК
2) Весь дизайн делать в css (не использовать <br>, <i>, <b>)
3) Залить сайт на хост и скинуть в дискорде ссылку