SaaS / SaaS: 2.3 - HTML and CSS

фактически предлагаете одну страницу или одну услугу, но если вы предлагаете ее

valeriya_z 27.02.12 в 16:46

различным клиентам, то они могут захотеть визуально изменить ее для того, чтобы она больше подходила

valeriya_z 27.02.12 в 16:46

к их бренду. А также, если вы

valeriya_z 27.02.12 в 16:48

работаете в команде, где задачи по дизайну и разработке выполняются не одними и теми же людьми, то

valeriya_z 27.02.12 в 16:48

CSS предоставляют достаточно легкий способ отделить их заботы и позволить им работать

valeriya_z 27.02.12 в 16:50

автономно. Итак, действительно простой пример выше сказанного. У меня открыто несколько других

valeriya_z 27.02.12 в 16:51

вкладок в браузере, на которые мы можем посмотреть. Эта - сайт, который я фактически администрирую.

valeriya_z 27.02.12 в 16:52

Эта - если если вы когда-либо захотите посмотреть представления общественного театра Аламеды, дайте мне знать.

valeriya_z 27.02.12 в 16:53

Эта - приложение для покупки билетов и поддержки покупателей, которое я написал. Это

valeriya_z 27.02.12 в 16:54

было что-то вроде моего подарка им. Эта вкладка. То же приложение, которым пользуется

valeriya_z 27.02.12 в 16:55

другой театр в Сан Франциско, мне он тоже очень нравится. И у них начинается

valeriya_z 27.02.12 в 16:58

показ классного представления на этой неделе, спросите меня о нем. Но что интересного у этих двух это то, что

valeriya_z 27.02.12 в 16:59

они находятся на одном и том же сайте. Единственная разница между ними - это

valeriya_z 27.02.12 в 17:00

стилизация, CSS код разный. Вернемся к нашему другу -

valeriya_z 27.02.12 в 17:00

панели разработчика. Если мы включим Display Element
Information(отобразить информацию об элементах), то мы можем увидеть

valeriya_z 27.02.12 в 17:01

по наведению мыши на различные элементы, вы видите красную выноску. А вот на этой

valeriya_z 27.02.12 в 17:05

белой панели, вы видите всю иерархию страницы, касательно

valeriya_z 27.02.12 в 21:17

данного элемента. Итак сейчас в красном прямоугодьнике находится Специально-Созданная Театральная Компания,

valeriya_z 27.02.12 в 21:18

и вы можете видеть, что прямоугольник - это h1 элемент. Он находится внутри div элемента, находящегося внутри

valeriya_z 27.02.12 в 21:23

другого div элемента, и так далее, вплоть до открывающего html тэга. Совершенно

valeriya_z 27.02.12 в 21:24

бесполезные для отладки знания. Так все-таки, как именно это работает? Как и многое

valeriya_z 27.02.12 в 21:25

в данном уроке, на начальном уровне, это очень, очень просто. И, к тому же,

valeriya_z 27.02.12 в 21:26

лучший способ, и я покажу вам пограничный пример, это ваша HTML верстка, которая

valeriya_z 27.02.12 в 21:27

выходит из вашего приложения, не должна содержать ничего связанного, со стилями. Вся стилизация

valeriya_z 27.02.12 в 21:28

должна производиться отдельно, с помощью CSS. Если вы думаете, что это вносит какие-то ограничения, через минуту я

valeriya_z 27.02.12 в 21:29

докажу вам, почему это не так. Так как именно это работает? Итак, первую вещь, котрую вы должны сделать - это

valeriya_z 27.02.12 в 21:30

связать страницу с информацией о стиле и вы увидите вверху

valeriya_z 28.02.12 в 11:52

каждой страницы, которая использует CSS, будет link элемент, содержащий ссылку на

valeriya_z 28.02.12 в 11:53

таблицу стилей. Таким образом, таблица стилей - это еще одна ссылка, еще одна вещь,

valeriya_z 28.02.12 в 11:54

которую запросит ваш браузер. И внутри самой страницы есть множество различных

valeriya_z 28.02.12 в 11:55

способов, с помощью которых вы можете выбрать кусок страницы и сказать, вот как можно его

valeriya_z 28.02.12 в 11:56

визуально изменить. Книга говорит о нескольких способах. Но, один особенно важный,

valeriya_z 28.02.12 в 11:58

который вы встретите практически повсеместно, - это ID в аттрибутах класса, который вы можете назначить для

valeriya_z 28.02.12 в 11:59

html элементов. Правильно. ID - это аттрибут, и если он присутствует, то он должен быть уникальным

valeriya_z 28.02.12 в 12:01

на странице. Итак у меня здесь есть div элемент, ID у которого "string right". Здесь

valeriya_z 28.02.12 в 12:02

не можеть быть ничего другого с таким ID, будь то div или

valeriya_z 28.02.12 в 12:03

другой элемент. Класс может быть задан множеству разных видов

valeriya_z 28.02.12 в 12:03

элементов, даже для разных типов на разных страницах и один из наиболее

valeriya_z 28.02.12 в 12:04

простых способов подготовки элементов к стилизации - это присвоение им идентификаторов

valeriya_z 28.02.12 в 12:06

и классов, а затем обращения к ним в CSS файле.

valeriya_z 28.02.12 в 12:06

Итак, например. Возьмем этот маленький кусочек HTML кода сверху, есть разные способы,

valeriya_z 28.02.12 в 12:12

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

valeriya_z 28.02.12 в 12:12

К примеру, я могу применить стили ко всем тегам H1. Это, конечно, перебор,

Igorrr 28.02.12 в 14:36

но могу это сделать. Я могу сказать, любой элемент с классом «page frame», и точка это

Igorrr 28.02.12 в 15:06

для этого в CSS используется знак точки. И тогда, например,
верхний блок класса "page frame"

Eest 29.02.12 в 09:35

будет связан с соответствующим селектором CSS.
Я также могу это сделать, используя атрибут "ID", который

Eest 29.02.12 в 09:36

должен быть уникальным на странице. В CSS для этого
используется символ решетки "#". Похоже, что

Eest 29.02.12 в 09:36

оба этих селектора работают одинаково. Но, к слову,

Eest 29.02.12 в 09:58

не следует использовать их одновременно.

Eest 29.02.12 в 09:59

что вы можете запросто написать имена селекторов, которые... Которые могут срабатывать

maxwell44 05.03.12 в 21:24