FinanceTube.ru

Стили CSS оформления онлайн-учета | Урок 23

Кол-во просмотров с 06.02.24г. :: 35

Так, доброго времени суток. Продолжаем наш курс. И то занятие, которое хотели провести на прошлой неделе, но сегодня проводим. Я немного поболел, но вроде сейчас более-менее нормально. там немножко подождем я уточнение некоторые сделаю по поводу этого программы предложение которое говорил по возврату денег у нас все определилась сроки когда когда отсечка и так далее вот ну а ну просто вас сейчас трое вот я думаю надо подождать может это еще подойдет чтобы сразу объявление сделать так у нас сегодня название занятия настройка css css да это система стилей каскады стилей ну то есть оформление нашей онлайн системы Чем у нас больше становится различных табличек, разделов, кнопочек и так далее, тем, когда у нас чистый монохром, белый экран и черным шрифтом на нем что-то написано, Ну, действительно, так немножко сложновато сразу же ориентироваться, где мы находимся, что. Поэтому, ну, пожалуй, имеет смысл одно занятие посвятить все-таки тому, чтобы чуть-чуть разукрасить, так скажем, нашу систему, вот онлайн-систему. Вот. Ну, мы, как обычно, туда заходим. Вводим пароль. Наш, как бы, такой тестовый аккаунт. Ну, то есть вот так вот, как бы сказали программисты или веб-дизайнеры, убогенькая выглядит наша схема с точки зрения дизайна. Ну, понятно. Поэтому чуть-чуть мы немножко это все дело разнообразим. С учетом как бы некоторого расслабона, который произошел после праздников, да и того, что я как бы здесь поболел, Буду надеяться, что там люди подсоберутся, потому что с завтрашнего дня мы уже так все-таки перейдем к более серьезным вещам. Ну а сегодня еще чуть-чуть как бы, так сказать, поразвлекаем. Да, еще хотел сказать вот какую вещь. Значит, про вопрос распределения прав доступа. Вот для вот этих вот самых менеджеров, пользователей этой системы, я не забываю. Просто мы это сделаем, ну почти в конце это будет делаться. Дело в том, что мы сначала в рамках одного вот такого аккаунта создадим возможность пользоваться тем, чем угодно. Вот тому менеджеру, который заходит в аккаунт. И когда мы максимально наполним нашу систему различными возможностями, которыми хотим наполнить нашу систему, то после этого уже, называется, напишем список того, какие функции доступны, и потом произведем распределение прав доступа. поскольку если мы будем сразу же это делать, то каждый раз придется дополнительно что-то прописывать, и, возможно, не очень системно это будет работать. Заходим в нашу программку «Текстовый редактор», где мы прописываем программные коды, прописываем коды наших стилей, Вот. И что нам нужно сделать? Значит, давайте вот так, я немножко вниз спущусь. Зайдем, значит, в индекс. И вот первый, первый тег, который именно связан с нашей страничкой, это вот это вот все, оно помещено в тег Body. ну и для него, конечно же, можно в целом прописать, ну, например, там фон, допустим, белый вот здесь использовать. можно, ну, например, фон поставить какой-нибудь. ну, давайте это сделаем. просто попробуем. я вот такую вот штучку как бы возьму. тоже вот такая программка, которая позволяет вот эти вот создавать коды цветов. то есть если у нас вот есть tag body, то мы для самого вот этого body мы можем написать так body и соответственно в фигурных скобочках мы можем прописать допустим вот там тот же самый background color. общую залив например можно сделать. давайте вот посмотрим серую и зеленую. слишком темная будет. вот такой вот если взять ну вот так вот допустим если взять background color вот теперь я вот куда-нибудь здесь возьму также возьмем шрифт у нас вот шрифты задаются целым семейством можно написать вот так font-family, семейство шрифтов, и можно вот так вот поставить. То есть тот шрифт, который здесь первым указан, если он поддерживается браузером, то будет он. Если он не поддерживается браузером, то будет следующий брат со шрифтом. Если он не поддерживается, то следующий. Ну и так далее. ну здесь как бы там смотрите это можно просто почитать какие шрифты да какие наиболее часто используемые как бы практически это вот семейство таких шрифтов без всяких этих закорючек как бы вот без вот такого вот оформления да вот буква ч идет у нее сверху такая шапочка снизу шапочка ну какие-то вот эти если мы вот такой вот шрифт например берем я вот сохраняю теперь таблицу стилей и давайте мы ее туда будем закидывать такие заменить все за заходим вот и мы видим что ничего не произошло я вот обновил и у нас ничего не произошло здесь есть такой момент Связан он вот с чем. Дело в том, что когда мы с каким-то сайтом начинаем работать, то вот эти вот самые стилевые файлы, они погружаются в кэши вашего компьютера, браузера и так далее. И для того, чтобы по каналам связи между вашим компьютером и сервером, с которого приходит информация, постоянно, так скажем, весь объем файлов не гонять, то в Cache кое-что остается, и оно берется из Cache. И из-за этого бывает очень неудобно, так скажем, работать. То есть мы вот сейчас что сделали? Мы взяли, обновили таблицу стилей, а у нас ничего не поменялось. Давайте так, чтобы более наглядно это было, я вот сюда вот пишу, вот так вот поставлю red, красный. То есть заливку сделаем красным. И если у нас все будет залито красным, то значит мы поймем, что у нас начало меняться. То есть я вот еще раз сохраняю заходим в 0.8.20, я его еще раз закидываю, заменяю, перейдем сюда, обновляем. Видите, красной заливки не получилось. Связано это тем, что именно вот этот вот файлик style, он уже сидит в кэше браузера, и браузер, так скажем, он не напрягается для того, чтобы запросить. Он не знает, что там на самом деле произошло на сервере обновление. Вот для того, чтобы эти обновления можно было делать, есть такой приемчик небольшой. Я сейчас покажу. Мы этот файл, вот он, стайл.css, мы его подключаем, мы его линкуем в хэде шапки, ну, так скажем, нашей HTML разбит, шапки нашего сайта. И можно сделать небольшую манипуляцию сейчас. Я покажу просто, как это делать. Я скачаю, ну, не скачаю, а просто копирую то место, где это, мы это делаем. значит давайте вот я возьму. возьмем следующие. секундочку. нам нужна вот такая запись. я вот это вот скопирую. вот это мы скопируем и ставим вот сюда наш индекс. смотрите что нам нужно сделать. здесь, конечно, вот не очень удобный наверх. плохо, наверное, видно, но давайте я вот что сделаю. я вот эту вот строчку, которая здесь вот внутри. так, секундочку. Давайте вот так сделаем. Вот здесь вот добавим PHP код и создадим такую вот переменную. Сделаем $style. Переменную $style. В эту переменную запишем ссылку, вот такую вот ссылку, на наш файл style. на наш, да, вот наш файл ставил, вот так мы его сюда вот запишем. то есть возьмем полный путь, полный путь на нашем сервере от корня через наш хостинг, потом, соответственно, домен, потом docs, потом вот он наш файлик style. Единственное, что у нас здесь вот так вот CSS, папка CSS идет, и потом файл style. И просто вот этот весь путь, мы его запишем в переменную dollar style. а вот здесь вот где мы подключаем файл

Рекомендации

Предшествующее видео

Следующие видео

FinanceTube.ru
С НАМИ ЭФФЕКТИВНЕЕ!
ООО «П++»
ОГРН:1187746086054
ИНН:7728395910
КПП 772801001
Юридический, фактический и почтовый адрес:
117246, г. Москва, Научный пр-д, д.8, стр.7, оф.14
Адрес эл. почты: i@mngmnt.ru
Звоните: +7(985)201-6607
© 2012 - 2024 ООО "П++" (ИНН 7728395910)
Наверх