HTML Css

1) html:5 - создает скульптуру сайта
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> - тег кодировки(писать обезательно)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> - заголовок старницы
</head>
<body>
<h1>Привет мир</h1> - h1-h6 разный размер и это типо заголовок(h1 большой,
h6-маленький)
<h2>Привет мир</h2>
<p>текст</p> - текст
<a href="https://www.youtube.com/">Ютуб</a> - href означает ссылку которую ты
хочешь вставить а "Ютуб" значит текст на которой надо будет нажимать чтоб перейти
по ссылке
<img src="Slimerancherart.jpg" alt=""> - Slimerancherart.png это название
картинки а alt="" это чтоб если картинка не загрузилась, то был текст
</body>
</html>
2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Блочные элементы и таблицы</title>
</head>
<body>
<div>Привет мир</div> - div это блочный элемент чтоб текст был в столбик
<div>Привет мир</div>
<span>Привет мир</span> - span это когда слова идут друг за другом, еще он
полезен если вы хотите выделить текст или букву либо изменить вообще другой шрифт
или цвет
<span>Привет мир</span>
<table> - table это таблица
<tr> - тег для столбца
<th>№</th> - <th> это тег для шапки таблицы, Ыотличается шрифтом
<th>Имя</th>
<th>Фамилия</th>
</tr>
<tr>
<td>1</td> - <td> это тег для тела таблицы, стандартный шрифт
<td>Никита</td>
<td>Ткаченко</td>
</tr>
</table>
</body>
</html>
3)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css"> - Строка <link rel="stylesheet">
указывает на CSS-правила, которые хранятся в отдельном файле. а href это путь к
файлу
<title>Основы CSS</title>
</head>
<body>
<h1 class="title">Привет</h1> - после <h1> надо написать <h1 class="title">

чтоб дать класс и обращаться к заголовку в css файле(можно назвать "title" как
хочешь).
<p class="text1">Длинный текст</p>
</body>
</html>
style.css
.title { - название класса

font-family: Arial, sans-serif; - шрифты и лучше поставить sans-serif в конце
чтоб если первый шрифт не прогрузиться то все было б нормально
font-size: 45px ; - принимает размеры в пикслелях, размер текста
color: #d852297e; - цвет, но лучше написать через хекс код нужно написать #000
font-weight: 500; - толщина букв
font-style: italic; - делает текст наклонным
text-align: center; - можно выровнять текст по центру, справа и слева

}
.text1 {
line-height: 25px; - можно менять расстояние между строками
}
4)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Селектроры CSS</title>
</head>
<body>
<h1 class="text">Привет, мир</h1>
<p class="block">Длинный текст</p>
</body>
</html>
style.css
.text {
letter-spacing: 4px; - меняет растояние между буквами
text-decoration: underline; - подчеркнутый текст снизу но есть еще
overline(подчеркивание сверху), line-throught(подчеркнутый текст)
border: 3px #ff0000 dotted; - он принимает 3 значение; 1 это толщина, 2 это
цвет а третее это тип границы есть, solid(граница линией), dashed(пунктирной),
dotted(точечной)
}
.block {
text-indent: 25px; - отступ для каждого нового абзаца
text-transform: capitalize; - можно сделать чтоб все слова начинались с
заглавной буквы есть еще lowercase(все буквы маленькие), uppercase(все буквы
большие)
}
5)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Padding</title>
</head>
<body>
<div class="block">Hello</div>
</body>
</html>
style.css
.block {
width: 100px; - ширина рамки
height: 100px; - высота рамки
border: 4px red solid;
padding: 50px; - отодвигает текст на равное количество пикселей в рамке
padding-right: 50 px; - отодвигает текст справа на любое количество пикселей
padding-left: 50px; - отодвигает текст слева на любое количество пикселей
padding-bottom: 50px;- отодвигает текст сверху на любое количество пикселей
padding-top: 50px; - отодвигает текст снизу на любое количество пикселей
}
6)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Margin</title>
</head>
<body>
<div class="block"></div>
</body>
</html>
style.css
.block {
width: 100px;
height: 100px;
background-color: #ff0000; - меняет фон блока
margin: 40px auto; слева и справа будет одинакого перенесены

margin: 40px; - селектор который определяет одного блока относительно другово,
тоесть какое расстояние должно быть между блоками
margin-right: 40px; - отодвигает блок вправо
margin-left: 40px; - отодвигает блок влево
margin-bottom: 40px; - отодвигает блок наверх
margin-top: 40px; - отодвигает блок вниз
7)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Border</title>
</head>
<body>
</body>
</html>
style.css
.block {
width: 100px;
height: 100px;
border: 10px #e63434 solid; - делает рамку, он принимает 3 значение; 1 это

толщина, 2 это цвет а третее это тип границы есть, solid(граница линией),
dashed(пунктирной), dotted(точечной)
border-bottom: 10px #000 solid; - делает нижнею сторону рамки
border-right: 10px #ffee00 solid; - делает правую сторону рамки
border-left: 10px #00ff73 solid; - делает левую сторону рамки
border-top: 10px #0051ff solid; - делает верхнею сторону рамки
border-top: 0; - если хотите чтоб не было 1 стороны рамки(на любую сторону)
border-width: 20px; - толщина
border-color: red; - цвет
border-style: dotted; - тип
border-left-color: red; - цвет левой рамки(может быть любая другая сторона)
border-left-width: 10px; - толщтна левой рамки(может быть любая другая сторона)
border-left-style: solid; - тип левой рамки(может быть любая другая сторона)
}
8)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Span</title>
</head>
<body>
<h1>Привет <span class="block">мир</span></h1> - span выделяет текст/слово с
котором можно делает все что захочешь
</body>
</html>
style.css
.block {
color: blue;
font-size: 40px;
margin: 20px 50px;
width: 100px;
height: 100px;
padding: 20px;
border: 3px red solid;
display: block; - делает блочным

display: inline; - делает строчным
display: inline-block; - делает строчно-блочным
}
9)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>background</title>
</head>
<body>
</body>
</html>
style.css
body{
background-color: black; - меняет цвет всей страницы(если body)
}
.block {
width: 3500px;
height: 2000px;
background-image: url(Slimerancherart.jpg); - меняет фон на картинку
background-repeat: no-repeat; - делает так чтоб не повторялась фотка(чтоб
повторялась то repeat)
background-size: cover; - делает картинку на весь блок
background-color: green; - меняет цвет фона
}
10)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>background</title>
</head>
<body>
</body>
</html>
style.css
.block {
width: 1300px;
height: 1300px;
background-image:linear-gradient(blue,yellow); - делает градиент из сколько
угодно цветов(сверху вниз)
background-image:radial-gradient(blue,yellow); - делает круговой градиент и
первый цвет это центральный цвет
background-image:linear-gradient(to top,blue,yellow); - делает градиент снизу
веврх. Еще есть to bottom - сверху вниз, to right - слева направо, to left справа
налево
background-image:linear-gradient(45deg,blue,yellow); - делает градусный
градиент
11)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms</title>
</head>
<body>
<form action="" method="post"> - пригодится, чтоб отправлять данные с форм
прямиком к нам или на сервер для обработки
<label for="name">Введите ваше имя</label> - появляеться текст впереди поля
ввода, label связанный с input из-за id
<input id="name" type="text" placeholder="Введите ваш емаил"> - делает
окно для ввода, type="text" это текстовой тип формы ввода, placeholder там можно
написать текст, который делает подсказку на то, что там надо написать, и исчезает
когда пользователь поставит курсор в форму, id это специальный индификатор который
похож с классами в css
<label for="info">О себе</label> -
<textarea class="text" id="info"></textarea> - textarea - текстовое
поле(делает рамку для текста больше и благодоря class="text" можно поменять размеры
</form>
</body>
</html>
style.css
.text {
width: 100px;
height: 100px;
resize: none; - делает фиксированое окно(нельзя будет растягивать)
}
12)index.html
<title>Forms 2</title>
</head>
<body>
<form action="" method="post">
<label for="food">Выберете еду</label> - текст для того чтоб было понятно
что надо делать атрибут name может использоваться для ссылки на данные формы после
отправки, а атрибут id может использоваться сценариями JavaScript и CSS для
управления определенными элементами на странице либо чтоб можно было выбрать 1
вариант ответа
<select name="food"> - тип формы, если пользователю надо будет сделать 1
вариант из всех на сайте
<option>Fish</option> - вариант для выбора
<option>Apple</option> - вариант для выбора
<option>Banana</option> - вариант для выбора
</select>
<label for="male">Муж</label>
<input name="radio" id="male" type="radio"> - чтоб был 1 вариант
ответа, указывая name одинаковым для обоих инпутов, мы учитываем, что выбор пола
будет один из двух. Если бы мы не писали одинаковый name, тогда можно было бы
выбрать оба варианта сразу
<label for="female">Жен</label>
<input name="radio" id="female" type="radio"> - чтоб был 1 вариант
ответа, указывая name одинаковым для обоих инпутов, мы учитываем, что выбор пола
будет один из двух. Если бы мы не писали одинаковый name, тогда можно было бы
выбрать оба варианта сразу
<label for="agree">Согласен на обработку персональных
данных</label>
<input id="agree" type="checkbox"> - для того чтоб поставить
галочку
<button type="submit">Отправить</button> - кнопка, submit
означает отправить
</form>
</body>
</html>
13)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Псевдоклассы</title>
</head>
<body>
<a href="" class="button">Кнопка</a> - создает кнопку
<form action="" method="post">
<input type="text" class="input" placeholder="Введите имя">
</form>
</body>
</html>
style.css
.button {
background-color: green;
color: white;
text-decoration: none;
padding: 20px;
}
.button:hover { - после двоеточее идет псевдокласс, их много но hover который

срабатывает если пользователь будет наводить курсор мушки на кнопку
background-color: red;
}
.button:active { - active срабатывает когда нажимаешь на кнопку

background-color: purple;
}
.input:focus { - focus срабатывает когда наводишь курсор на поле ввода
background-color: blue;
}
14)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Позиционирование</title>
</head>
<body>
<div class="block">
<div class="block2"></div> - если что второй блок находиться внутри первого
блока
</div>
</body>
</html>
style.css
.block {
width: 100px;
height: 100px;
position: relative; - стал родителем для второго блока и если будет смещаться
второй блок то будет смещаться относительно главного блока
top: 100px; - задает отступ с верхей части экрана
left: 100px; - задает отступ с левой части экрана
}
.block2 {
width: 30px;
height: 30px;
position: absolute; - блок позиционируется и вести себя на странице так, будто
на ней нету никаких других элементов, будет игнорировать их в потоке
top: 50px; - задает отступ с верхей части экрана
left: 50px; - задает отступ с левой части экрана
}
14.2)index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="block2"></div> - тут отдельно блоки
</body>
</html>
style.css
.block {
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
z-index: 1; - чем выше будет элемент у z-index, тем выше элемент будет
распологаться поверх других
}
.block2 {
width: 30px;
height: 30px;
position: absolute;
top: 150px;
left: 150px;
z-index: 2; - чем выше будет элемент у z-index, тем выше элемент будет
распологаться поверх других
}
14.3)
index.htnl
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="block2"></div>
<div class="fixed"></div>
</body>
</html>
style.css
.block {
width: 100px;
height: 100px;
position: fixed; - при скроле страницы, блок не будет никуда смещаться
top: 100px;
left: 100px;
z-index: 1;
}
.block2 {
width: 30px;
height: 30px;
position: absolute;
top: 150px;
left: 150px;
z-index: 2;
}
.fixed {
height: 2000px;
}
15)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Свойства</title>
</head>
<body>
<h1 class="title">Lorem ipsum dolor sit amet consectetur adipisicing elit.

Magni nobis sint, a necessitatibus fugiat, quis voluptate nesciunt, autem excepturi
aliquam eum quibusdam recusandae animi fuga consequuntur laudantium impedit itaque
eos.</h1>
</body>
</html>
style.css
.block {
width: 200px;
height: 100px;
border-radius: 20px; - делает края более круглыми со всех сторон
border-top-left-radius: 30px; - делает края более круглым с 1 стороны(можно
написать любую сторону)
box-shadow: 10px 10px 20px #ff0000; - создает тень, певрое значенее это сдвиг
по оси х, второе сдвиг по оси у, третье это цвет
padding: 30px;
box-sizing: border-box; - делает обьект тех размеров которые указали(padding
просто делает размер больше)
opacity: 0.8; - делает блок менее прозрачным
transition: background-color 0.5s linear; - делает плавный переход
}
.block:hover{
}
.title {
text-shadow: 10px 10px 20px red; - делает тень тексту
}
16)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex</title>
</head>
<body>
<div class="block">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
</html>
style.css
.red {
width: 100px;
height: 100px;
margin: 20px;
}
.blue{
width: 140px;
height: 140px;
margin: 20px;
}
.green{
width: 180px;
height: 180px;
margin: 20px;
}
.block {
display: flex; - делает блоки горизонтально
align-items: center; - делает блоки ровными
justify-content: space-between; - отделяет блоки друг от друга(есть еще space-
around, center, right)
}
17)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Psevdo</title>
</head>
<body>
<div class="box">первый</div>
<div class="box">второй</div>
<div class="box">третий</div>
<div class="box">четвертый</div>
<div class="box">пятый</div>
<div class="box">шестой</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam ad
veritatis, eveniet reprehenderit esse mollitia quia, deleniti, quaerat tenetur
officia molestiae ratione accusamus consequuntur voluptatibus rem. Quasi ipsam
ipsum quaerat!</p>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis labore
provident molestias laudantium ducimus cumque fugit neque perferendis deserunt
placeat illum, corporis vel, commodi, hic distinctio mollitia. Voluptates, esse
quidem?</h1>
ipsum quaerat!</p>
quidem?</h1>
ipsum quaerat!</p>
quidem?</h1>
</body>
</html>
style.css
.box:first-child { - меняет 1 элемент

color: red;
}
.box:nth-child(3){ - меняет 3 элемент(можно менять на любой элемент просто поменяв
число в скобках)
color: blue;
}
.box:nth-child(6){
color: #00ff15;
}
.box:nth-child(odd){ - для нечётных элементов
color: aqua;
}
.box:nth-child(even){ - для чётных элементов
color: red;
}
p:nth-of-type(3){ - меняет 3 абзац(можно любой)
color: #00ff15;
}
h1:nth-of-type(2){ - меняет 2 текст(можно любой)
color: yellow;
}
18)index.html

HTML Css

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML Css

Загружено:

Авторское право:

Доступные форматы

1) html:5 - создает скульптуру сайта

<h1 class="title">Привет</h1> - после <h1> надо написать <h1 class="title">

<p class="text1">Длинный текст</p>

.title { - название класса

font-size: 45px ; - принимает размеры в пикслелях, размер текста

font-weight: 500; - толщина букв

font-style: italic; - делает текст наклонным

text-align: center; - можно выровнять текст по центру, справа и слева

<p class="block">Длинный текст</p>

background-color: #ff0000; - меняет фон блока

margin: 40px auto; слева и справа будет одинакого перенесены

border: 10px #e63434 solid; - делает рамку, он принимает 3 значение; 1 это

display: block; - делает блочным

.button:hover { - после двоеточее идет псевдокласс, их много но hover который

.button:active { - active срабатывает когда нажимаешь на кнопку

<h1 class="title">Lorem ipsum dolor sit amet consectetur adipisicing elit.

.box:first-child { - меняет 1 элемент

Вам также может понравиться