Переключать пункты меню

Размеры в css

Для того чтобы задать размеры любого элемента при помощи стилей на языке стилей css мы должны их прописать либо в заголовке каждого веб-документа или вынести их в отдельный файл, например, назвать его style.css.

Сам файл для удобства работы с сайтом помещаем в отдельную папку и назовем его /inc/. Там будут лежать все файлы, которые отвечают за внешний вид и оформление всех страниц сайта. Файлов может быть несколько, либо только один большой, отвечающий за все страницы. Путь к файлу, также прописываем в заголовках каждой страницы, между тегам <head>…</head>, например: 

Для сокращения обревиатуры размеры в css, в дальнейшем для сокращения будем использовать буквы РВС. И к тому же это жесткое требование поисковых систем – не повторять ключевое слово более двух, трех раз. В будущем вы, надеюсь, все поймете, почему именно так, а не иначе.

Итак, для того, чтобы задать РВС используют несколько единиц измерения: пиксели, миллиметры и проценты. В большинстве своем используют пиксели, поскольку этой единицей пользуются для описания всех стандартов экрана всех компьютеров и ноутбуков. Также эта единица измерения используется по умолчанию для описания параметров видеокамеры на телефоне и других мобильных устройств.
 

При помощи РВС можно задать общую ширину столбцов всех таблиц, а также ширину каждой колонки в отдельности.
Например, зададим параметры для таблицы, которая будет общим каркасом для главной страницы сайта. Для этого создадим файл style.css и пропишем в нем все свойства главного каркаса.

Можно создать класс (class) и запишем его в теге <table class=”…”>. Обязательно нужно прописать имя для каждого класса, поскольку элементов на веб-странице будет очень много, то и классов будет столько же. И каждое имя класса будет иметь свой стиль, который будет указан в для каждого элемента.
 

В нашем случае мы можем задать класс table. (class=table). Тогда в файле стилей мы можем задать свойства для нашей таблицы. Допустим нам нужно, чтобы страница была как бы «резиновой» и занимала всю ширину экрана. И все колонки, также менялись в ширине в равной пропорции. Для этого мы будем пользоваться не пикселами, а процентами. Тогда код для «резиновой» страницы будет таким:

.table{ width: 100%; height: 100%; margin: 0; padding: 0; }

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

Для этого нужно задать класс для каждой колонки и прописать свойство width в процентах:

.column1, column2{ width: 20%; height: 100%; }  //ширина для левого и правого столбца
.content { width: 60%; height: 100%; }  //ширина для основного столбца
 

Добавить комментарий


Коллекция скриптов и модулей   © 2017