Верстка, CSS, HTML, SVG

Вопрос к тем, кто программирует сайты через HTML и CSS или знает, что это такое. Объясните пожалуйста (вопрос в описании

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

Объясните пожалуйста, можно ли в одном документе расписывать весь сайт сразу на обоих языках? Или нужно обязательно сохранять отдельные документы? Есть ли разница? Иногда я видела, что фрагменты CSS стилей пишут прямо в HTML документе. Всегда ли это работает?

И может быть, кто-то из своего опыта подскажет, на каких сайтах можно обучиться языку CSS? Или кто-то знает книгу по этой теме, которую можно скачать бесплатно? Я знаю только сайт https://www.w3schools.com/ , где точно могу самостоятельно чему-то научиться. Для практики я, конечно же, буду использовать готовый шаблон сайта, но нужно понимать, как оно работает, чтобы хоть что-то поменять в дизайне.

Буду очень благодарна за вашу отзывчивость и помощь.
Алексей Глебов
Алексей Глебов
9 459
По правильным описанием языков все CSS стили идут в отдельном css файле. Ни один нормальный программист не будет вклинивать css стили внутри html кода.
Dima Sidorin
Dima Sidorin
83 838
Лучший ответ
Алексей Глебов Да, во всех шаблонах так и видела, что сохранено отдельно. Но из-за некоторых мне начало казаться, что первый вариант - это тоже нормально. В частности, на w3schools почему-то показывается именно так, и это меня немного путает.
Михаил Попович OBJECTION!
Для ускорения сайтов весь css иногда впихивают прямо в тело документа. Делается это, разумеется, не руками, а в разработке css-файлы находятся отдельно.
Антон Громов Зависит от задачи.
Например промо сайт фильма или игры состоящей всего из одной страницы.
Для уменьшения запросов к серверу разумнее разместить css внутри html
И еще можете погуглить critical css. В таком варианте часть css тоже размещается в html
http://htmlbook.ru/ - вот вам библия веб разработки. Не помните )))
Сергей
Сергей
73 074
Алексей Глебов Большое спасибо! Так как я живу не в России, нам бы даже не давали хороших русских источников просто потому что мы - гордая Латвия. Только латышское, западное, восточное, но ни в коем случае не русское. Самому доставать информацию можно откуда угодно, но официально видно, что государство плохо принимает в свою программу то, что может предложить Россия. Хотя, вряд ли это касается газа или других жизненно необходимых ресурсов. Извините, это уже не в тему, но что-то меня вдруг бомбануло.
Стили CSS можно подключать в HTML файл 3 разными способами. Они все равнозначны, имеют равные права и разрабочик выбирает какой ему удобно по ситуации. Чаще всего выбирается вариант внешнего файла при помощи тега link вверху страницы . Можно свои стили писать прямо в шапке сайта при помощи тега style. Так же стили можно писаьь внутри любого тега внутри документа тоже использунтся тэег style
Лучше видеокурсы посмотри какие нибудь по основаим html
ВВ
Виталий Васильев
74 418
Дмитрий Васильченко Как раз таки не равнозначны
Внутри элемента наивысший приоритет, затем те которые прямо в странице, затем во внешнем файле
HTML и CSS — не относится к программированию.
Первое язык разметки документов, второе язык стилевого оформления.

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

HTML и CSS используют в одном документе если:
1. Это быстрый прототип.
2. Если сайт состоит только из одной страницы (или это специфические стили только для одной страницы).
3. Внедрение стилей для «первого экрана» (что бы визуально ускорить «загрузку» страницы).

Для изучения верстки.

Интерактивное обучение
• ru.learnlayout.com
• htmlacademy.ru/program

В игровой форме
• flukeout.github.io (изучение селекторов в CSS)
• flexboxfroggy.com/#ru (изучение flexbox в CSS)
• flexboxdefense.com (изучение flexbox в CSS)
• dmitrylavrik.ru/training/process/flexbox-grid (создание сетки на flexbox)
• cssgridgarden.com/#ru (изучение gridbox в CSS)

Видеокурсы

• htmlacademy «Базовый HTML и CSS»
coursehunters.net/course/bazovyy-html-i-css-18-2017
• htmlacademy «Продвинутый HTML и CSS»
coursehunters.net/course/prodvinutyy-html-i-css-potok-2017
• htmlacademy «Профессиональный HTML и CSS Уровень 1»
coursehunters.net/course/professionalnyy-html-i-css-uroven-1-potok-26-fevralya-4-aprelya-2018
• htmlacademy «Профессиональный HTML и CSS Уровень 2»
coursehunters.net/course/professionalnyy-html-i-css-uroven-2-potok-15-yanvarya-21-fevralya-2018

Задачи для практики:
htmlbook.ru/practical

Но лучше изучив основы верстки заняться графическим дизайном основательно. А для верстки использовать партнерство с хорошим верстальщиком.

Для начала (дизайн):
• Графический Дизайн
medium.com/основы-визуального-дизайна/основы-дизайна-a327d0d3ef98
• «Элементы и принципы дизайна»
medium.com/основы-визуального-дизайна/элементы-и-принципы-дизайна-c6d47be46b2c
• Понимание композиции
youtube.com/watch?v=KCJGeZHgm6o
• Построение композиции
youtube.com/watch?v=izKlGmEZHAM
• Понимание цвета
youtube.com/watch?v=wuCEHnw2N4g
• Источник вдохновения — поиск референсного материала
youtube.com/watch?v=9srRb-jF9uM
• Александра Королькова «Живая типографика»
• «Всё (или почти всё) о пробеле»
habrahabr.ru/post/23250/
• «Чёрточки: только ли тире, минус и дефис?»
habrahabr.ru/post/20588/
• «Рецепты хорошей типографики»
habrahabr.ru/post/57351/
• «Особенности национальной типографики»
habrahabr.ru/post/68293/
• Эллен Люптон «Графический дизайн от идеи до воплощения»
• Сьюзан Уэйншенк «100 главных принципов дизайна. Как удержать внимание»
• Сьюзан Уэйншенк «100 НОВЫХ главных принципов дизайна.»
• «Adobe Photoshop CC. Официальный учебный курс»
• «Adobe Illustrator CC. Официальный учебный курс»
СА
Сергей Антипов
72 568
Алексей Глебов Благодарю за очень содержательный ответ. То, что HTML и CSS — не относится к программированию - это для меня стало открытием сегодня)), настолько я в этом не разбираюсь. У нас был предмет, который назывался программирование, но он ограничивался тем, что мы создавали простенькие HTML-странички с вычислениями по сути задач школьников-первоклассников про количество бутылок лимонада у Пети и Васи. Как-то так. Затем мы приступили к скачиванию готовых бесплатных шаблонов сайтов, пытаясь изменять в них код, добавлять другие элементы, удалять лишние и таким образом добиться желаемого. Прописывать командные строки нас немного учили, но настолько бегло, что я не успевала всего осознать, быстро забывала сказанное, а самой копаться в интернете, когда толком не знаешь, что нужно, тоже было трудно.
Встроенные стили используют только на стадии прототипирования.
В продакшн HTML и CSS идут отдельно, чтобы их можно было подключать ко всем страницам. В этом весь смысл.
ВК
Властелин Колец
26 548
Для начала HTML/CSS не языки программирования, а языки разметки и каскадных стилей. Теоретически можно использовать css в файле html (частенько используют для ускорения загрузки страницы), но на практике это редкость, все стили выносят в отдельный файл, как минимум для удобства редактирования.
Z М
Z М
6 549
Алексей Глебов Спасибо за уточнение. Понятно...
Александр Шереметьев иногда без "тела" просто не обойтись! и вот отличить 1 случай от 2го - и есть профессионализм!
htmlacademy.ru - Настоятельно рекомендую. Там познаете все тонкости вёрстки страниц.
Байсангур Беноевский
Байсангур Беноевский
1 229
Алексей Глебов Спасибо, посмотрю обязательно.

Похожие вопросы