Всем привет, 3 серия. Я знаю, что вы с нетерпением ждали этой части, потому что это была захватывающая неделя для меня. В последнее время я немного приболел, но из-за волнения от сериала у меня адская неделя. Если вы готовы, давайте более подробно рассмотрим CSS и посмотрим, что мы можем сделать.
Визуально то, что мы сделали до сих пор, мало что значит. Именно по этой причине нам необходимо познакомиться с CSS. CSS помогает нам форматировать элементы на веб-странице. HTML-код страницы используется для настройки содержимого, а CSS — для более частого появления этого содержимого. Для создания таких конфигураций (таблиц стилей) мы используем листы дизайна.
Таблицы стилей содержат полный список различных правил и наборов правил CSS, используемых для оформления HTML-страниц.
div{
color:red;
margin:20px;
}
p{
font-weight:bold;
}
Это ткань с одним правилом, как в примере выше. 10, 20, 30, может быть, 40 таких правил, и эти правила составляют целую таблицу стилей. Прежде всего, когда я говорю о правилах, я хочу поговорить с вами об общей терминологии синтаксиса CSS. Давайте пройдемся по наглядному материалу, чтобы понять, о чем я говорю.
Прежде всего, у нас есть селекторы. селекторы — это то, на что мы хотим ориентироваться в сети. Например, если бы я собирался придать меткам div стиль, я бы использовал эти селекторы, если бы я хотел изменить метки Li, я бы использовал селекторы. В дальнейшем мы подробно рассмотрим все эти селекторы. Див и Ли здесь селекторы. затем у нас есть эти части, которые выглядят как какой-то блок кода («color:red;margin:20px;»). и у нас есть декларации справа.
Объявления представляют собой список только пар значений ключей и значений свойств. У нас есть недвижимость в Div. Мы можем покрасить что угодно в красный цвет Div и, наконец, получить отступ, который дает всему элементу пространство в 20 пикселей. Каждое утверждение здесь имеет «;» в конце этого. Итак, он говорит здесь, что это конец синтаксиса, и если мы пропустим их, CSS не будет работать. Вот почему мы должны добавить их в конец, и все это здесь одно правило. Вся структура на самом деле выглядит как эта термология.
В Div у нас есть схема стилей со списком правил CSS, так что есть несколько способов добавить HTML в CSS.
1 — добавляет непосредственно на html-страницу внутри некоторых тегов стиля.
2 — использовать внешние таблицы стилей, отдельный файл только для правил CSS.
Мы увидим, что вы используете его в обоих направлениях. Но больше похоже на 2. мы будем использовать вариант.
Теперь вернемся к нашему коду, давайте создадим HTML-страницу с нуля. Мы все видели много вещей, которые произошли здесь вместе в предыдущих эпизодах. Что мы собираемся сделать сейчас, так это сделать его немного красивее с помощью css. Я упомянул несколько способов добавить CSS на страницу, так что давайте попробуем эти пути вместе. Во-первых, нам нужно добавить тег стиля к заголовку.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
color: orange;
}
p {
color: slategray;
}
</style>
<title>Css Learning</title>
</head>
<body>
<h1>Css Learning</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
<div>
<h1>Hakan budak</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus ornare suspendisse sed nisi lacus sed viverra. Ultrices neque ornare aenean euismod elementum nisi quis. Neque viverra justo nec ultrices dui sapien. Scelerisque in dictum non consectetur a. Donec massa sapien faucibus et. Tortor pretium viverra suspendisse potenti nullam. Mauris augue neque gravida in fermentum. Parturient montes nascetur ridiculus mus.
Leo vel fringilla est ullamcorper eget nulla facilisi etiam dignissim.
Enim ut tellus elementum sagittis vitae.</p>
<ul>
<li>Hakan Budak</li>
<li>Html</li>
<li>Vue.js</li>
<li>Css</li>
</ul>
</div>
</body>
</html>
Как видите, мы изменили цвета секций h1 и p в стиле. Вы можете думать об этом как о правиле. Допустим, мы хотим, чтобы этот стиль был таким же на другой странице. По логике мы копируем этот код и вставляем в шапку другой нашей страницы, и получается то же самое. мы получим кадры. Но предположим, что у нас есть 6 или 7 страниц, и если мы хотим изменить некоторые из них, насколько точно будет перейти на 7 страниц и изменить их?
Так что не всегда правильно добавлять стиль. Для этого было бы гораздо более точным вариантом создать внешнюю страницу стилей, а затем разместить все различные правила CSS на странице стилей и дать ссылку на каждую страницу, которая использует эти правила. Поэтому, если мы захотим внести изменения в какой-то момент в будущем, будет проще изменить файл стиля. Так что я собираюсь стереть код, который написал наверху, и открыть новый файл.
Таким образом, мы можем найти наш файл CSS, когда захотим.
Давайте посмотрим, как выглядит наша страница.
Но на этот раз все части вернулись в нормальное состояние, потому что у нас не было подключения к нашему файлу стиля. Теперь давайте посмотрим, как мы можем подключиться.
<head>
<link rel="stylesheet" href="styles.css">
<title>Css Learning</title>
</head>
Мы делаем это, используя связующую этикетку. Итак, мы собираемся использовать ссылку, что означает, что часть REL здесь означает, что у нас будет роман, и мы говорим, что эта таблица стилей связана с href. Хреф ждал, пока мы доберемся до источника. Мы уже видели эту часть. Мы пишем наши файлы styles.css в этот раздел, и теперь мы связаны с нашей индексной страницей из файла стилей.
Теперь, если мы посмотрим, как выглядит наша страница, она выглядит именно так.
Теперь давайте изменим цвет фона нашей страницы.
h1 {
color: orange;
background-color: slategray;
}
p {
color: slategray;
}
Прежде чем мы продолжим, важно помнить, что CSS имеет множество различных свойств и что мы можем запомнить их все. Это очень естественная ситуация, когда не ожидается, что все люди в мире запомнят эту информацию. Так что все, что нам нужно сделать, это хорошо использовать Google.
Я покажу вам другую часть шрифта (размер шрифта)
h1 {
color: orange;
font-size: 20px
}
Размер шрифта и размер шрифта. Теперь давайте посмотрим, как выглядит наша страница.
Давайте удалим еще несколько функций и посмотрим, что произойдет.
h1 {
color: orange;
background-color: slategray;
font-size: 20px;
text-decoration: underline;
font-family: Arial;
}
та часть, о которой я говорю как украшение текста, вы можете представить как украшение текста. underline — это наша команда для подчеркивания текста. Можно узнать по названию
Теперь давайте немного изменим шрифт для h1 и сделаем его Arial. Теперь давайте все посмотрим, что изменилось на нашей странице.
https://www.w3schools.com/cssref/css_websafe_fonts.php
Вы можете проверить более подробно, чем ссылка выше.
давайте добавим еще один стиль для h1 и начнем изменять секцию p.
h1 {
color: orange;
background-color: slategray;
font-size: 20px;
text-decoration: underline;
font-family: Arial;
font-align: center;
}
Раздел font-align позволяет нам выравнивать текст вправо, влево, по центру, вниз, вверх.
Теперь давайте сделаем некоторые дополнения для части p. Начнем с центрирования текста.
p {
color: slategray;
text-align: center;
}
Если мы проверим сейчас. Мы увидим, что вы настроите все поля на части, которые мы редактируем в правиле.
p {
color: slategray;
text-align: center;
line-height: 30px;
letter-spacing: 3px;
column-count: 3;
column-gap: 60px;
}
Line-height регулирует межстрочный интервал по вертикали. Интервал между буквами — это часть, которая регулирует промежуток между строками. Мы не используем его часто, но это выглядит так, как будто это эффект. Вы поймете, когда мы увидим его внизу. Количество столбцов, мы можем назвать это количеством строк. Этот раздел даст нам столбец, и мы можем определить, из скольких строк здесь будет состоять текст.
Таким образом, мы получим абзац из трех столбцов. Это выглядит довольно хорошо. Если вы разрабатываете дизайн газеты, вы можете использовать его, и мы даже можем настроить здесь диапазон столбцов и сделать его 60 пикселей. Это сделает зазор между столбцами немного больше.
Теперь давайте выберем другой предмет и сделаем его немного красивее.
Итак, давайте поменяем детали, которые есть в котлах.
ul {
border-width: 4px;
border-style: solid;
border-color: crimson;
}
border-width на самом деле создает для нас границу, но она ничего не значит, когда мы используем ее отдельно, поэтому мы используем ее вместе с border-style. Мы используем его с Solid, что означает прямую линию, и теперь все понятнее. Как видите, это всего лишь конец ul, потому что это блог уровня. Давайте добавим еще несколько элементов к нашей границе. Мы можем начать с цвета на границе.
Теперь я собираюсь показать вам, что мы можем записать эти три значения вместе, и это сделает нас немного быстрее.
Когда мы выполним вышеуказанную операцию следующим образом, они оба будут работать одинаково.
border: 4px solid crimson;
Приятно, что он может обрабатывать все это для нас в одну линию.
Если бы мы проектировали верх и низ по-другому, мы могли бы изменить это таким образом.
border-bottom: 4px dotted crimson;
border-left: 8px dashed crimson;
Теперь давайте организуем другое место. Основываясь на части Li, мы можем добавить сюда новые функции.
Прежде всего, введите list-style-type. Вы можете сказать мне, какое это имеет отношение к чему угодно. Если бы я использовал Li вместо значения по умолчанию, мы могли бы убедиться, что оно вообще не отображается, если нам нужен квадрат.
li {
list-style-type: none;
}
Давайте пока не будем показывать эту область. Еще одна вещь, которую я собираюсь вам показать, это text-shadow. Text-shadow 3 работает со значением. Во-первых, нам нужно установить смещение под тенью.
Так как это настоящий текст, мы можем задать вам 2 пикселя, затем мы можем указать 2 пикселя для вертикальности, и, наконец, давайте установим цвет тени на серый.
Это выглядит довольно хорошо.
У меня есть много ключевых слов для использования в CSS, и мне будет сложно запомнить их все. Вот почему нам нужно хорошо использовать Google.
Чему мы научились на этой неделе?
** Что такое CSS и как добавить его на веб-страницу **
** Основные селекторы и некоторые другие уведомления/функции**
- * Размеры и свойства шрифта **
Это конец еще одной полной недели, и ждите следующей части, потому что я буду звучать как бомба. Мы с нетерпением ждем большего на следующей неделе, так что будьте осторожны и делайте много повторений.
Как и каждую неделю, вы можете проверить последнюю версию нашего кода по ссылке на github.
Türkçe seçeneği ile birlikte 🙂
