Вы даже можете использовать min-width и max-width что бы ограничить максимальный и минимальный размер картинки!
Проценты. Значения для правил в CSS — цвета, функционалы и размеры
Здравствуйте, уважаемые читатели блога сайт. Сегодня мы продолжим разговор про таблицы каскадных стилей (материалы на эту тему вы сможете найти в ). Без этой технологии сейчас уже не обходится практически ни один сайт в интернете, поэтому изучение языка стилевой разметки так же обязательно, как и штудирование ).
Без понимания основ этой технологии вы не сможете вносить даже небольшие изменения в шаблон вашего сайта и вынуждены будете либо мириться с этим, либо нанимать сторонних специалистов. Если, например, PHP выучить сложно, то ХТМЛ и CSS освоить на пользовательском уровне не составит труда. Во всяком случае попробовать стоит, а там глядишь и само пойдет.
Значения для правил в CSS — цвета, функционалы и размеры
В прошлой статье мы говорили о том, (Style и Link). Сегодня мы продолжим начатую тему и поговорим про наследование в стилевом оформлении и про задание размеров шрифтов (пиксель, пункт, проценты и т.п.).
В общем-то ничего сложного и объемного сегодня не будет, но вот в следующий статье мы уже начнем рассматривать селекторы — тему довольно объемную и, наверное, сложноватую в освоении.
Итак, давайте посмотрим, а где мы можем почерпнуть информацию о таблицах каскадных стилей? Наверное, логично ее будет поискать все на том же сайте , ну, или сразу же перейти на страницу с текущей спецификации CSS . Для просмотра всех имеющихся в этой спецификации правил достаточно перейти по ссылке из верхнего меню под названием "properties " .
В качестве значений для этих правил могут выступать какие-нибудь слова (например, left, right, center, justify и т.п.), которые заранее известны и оговорены в таблице из этой спецификации (см. рисунок выше — столбец «Values»). В качестве значений могут выступать и просто цифры, не имеющие размерности (например, в ) или обозначения (например, #fff8dc).
Чуток поподробнее остановимся на задании цветов в CSS и как это можно претворять в жизнь:
Возможно использование в качестве значений для правил CSS и так называемых функционалов . Ярким примером функционала является Url и заключенный в круглые скобки — url (images/navtabr.png). Таким образом очень часто задают в стилях фоновое изображение:
Ну, и еще в CSS в качестве значений очень часто используются размеры шрифтов и других вещей. Если вы помните, то в они задавались просто цифрами от 1 до 7. А, например, размеры изображений в атрибутах задавались просто числами без обозначения размерности, хотя эти числа подразумевали пиксели.
Стилевая разметка изначально предназначалась для различных устройств вывода — не только для мониторов, но и, например, для оформления информации предназначенной для печати. Поэтому размеры шрифтов или, например, отступы всегда указываются в CSS с единицами размерности . Причем, синтаксис подразумевает слитное написание цифр и единиц размерности (без добавления между ними пробелов).
При этом могут использовать как относительные, так и абсолютные единицы. Абсолютные связаны с физическим миром и для их указания можно будет использовать следующие единицы:
Абсолютные размеры в CSS могут использоваться все для той же печати. Сантиметры (cm) и миллиметры (mm) являются основополагающими единицами метрической системы, а дюймы (in) являются базовой единицей, от которой образуются очень часто используемые в полиграфии пункты (pt) и пики (pc).
Дюйм (in), соответственно, составляет 25,4 миллиметра (mm), а пункт (pt) образуется делением одного дюйма (in) на 72 части. Т.о. один пункт (pt) будет равен примерно одной трети миллиметра (mm). Ну, а одна пика (pc) имеет размер равный 12 пунктам (pt). Тут, думаю, все и так понятно.
Пиксели, Em, Ex и проценты — относительные размеры в CSS
Итак, все абсолютные единицы используются исключительно для печати. А вот для отображения информации на мониторах нужно использовать размеры в относительных единицах. Все дело в том, что физический размер точек, образующих изображения на мониторе (их еще называют пикселями), может быть разным в зависимости от типа и физического размера этого самого монитора.
Кроме того, на любом мониторе можно установить разрешение отличное от физического (когда пиксель будет настолько мал, что не различим) и возможен вариант, когда при большой диагонали монитора и малом разрешение один пиксель будет различим невооруженным глазом. Т.е. пиксель монитора — это величина сугубо относительная и поэтому следует делать упор на задание размеров именно в относительных величинах.
Относительные размеры в CSS могут задаваться с помощью следующих единиц:
Итак, давайте начнем с пикселов (pixels) , о которых мы уже, собственно, все сказали. Они являются относительной величиной по той простой причине, что нет такой физической меры. Пиксель получается на экране монитора в результате обработки видеокартой каких-то там сигналов, и его размер будет варьироваться в зависимости от используемого монитора и в зависимости от установленных настроек (разрешения экрана).
Далее следуют более хитрые относительные единицы размеров шрифтов, которые используются в CSS — Em и Ex . Первое — это высота шрифта используемого на компьютере пользователя по умолчанию, а Ex — высота прописной буквы «x» в используемом по умолчанию шрифте. Наверное, немного не понятно. Давайте рассмотрим это чуть поподробнее.
Многие браузеры принимают значение Ex равным половине значения Em (например, IE). У любого шрифта есть базовая линия, есть заглавные буквы и некоторые особенные строчные буквы, которые выступают за базовую линию (например, «y»). Есть еще буквы с диакритическими знаками, например, «ё» и «й» в русском языке или какие-нибудь умляуты и т.п. Поэтому размер шрифта (Em) определяется выносными элементами.
Ну, а Ex — это, как я уже говорил — высота прописной (маленькой) буквы «x» (икс) в латинской раскладке. Понятно, что в зависимости от соотношения строчных и прописных букв в шрифте, эти значения Em и Ex могут относиться к друг другу по разному, а не просто как Ex=Em/2.
Единицу относительных размеров Ex используют в CSS довольно редко, в основном применяют Em (не беря в расчет пикселы, которые используют для указания размера еще чаще). Но есть еще один способ задания относительных размеров — проценты , т.е. он должен будет высчитываться относительно чего-либо.
Далеко не все правила CSS могут задаваться с процентами. Даже в списке консорциума W3C это выделено в отдельную колонку:
Если напротив правила в колонке «Percentages» ничего не написано, то значит использование процентов для этого правила не доступно. Для тех же стилевых правил, которым разрешено использовать размеры в процентах, в этой колонке будет приведено объяснение для чего это можно будет использовать.
Наследование в CSS согласно спецификации
Все возможные значения правил и все их допустимые значения описаны в этой спецификации и заранее известны. Но тут есть одно очень большое отличие от Html. Все имеющиеся теги языка гипертекстовой разметки во всех браузерах поддерживают и интерпретируются одинаково, чего нельзя сказать о CSS.
Некоторые стилевые свойства могут поддерживаться и интерпретироваться различными браузерами по разному. Причем, это зависит как от браузера, так и от его версии.
Давайте рассмотрим наследование в CSS на примерах для закрепления, так сказать, материала. Для этого создадим своеобразную матрешку из трех контейнеров Div вложенных друг в друга и посмотрим на этом примере, как осуществляется наследование для одних правил и не осуществляется для других:
Итак, мы помним, что для правила color наследование разрешено, а для правила background — нет. В соответствии с этим мы имеем следующую картину:
В первом элементе (внешнем контейнере) мы задаем с помощью атрибута Style правило «color:red», которое предписывает окрасить текст заключенный в этом контейнере в красный цвет. Т.к. правило «color» поддерживает наследование, то это означает, что и во всех вложенных во внешний контейнер элементах текст тоже должен будет окраситься в красный цвет.
Собственно, так и происходит, за исключением самого внутреннего контейнера Div, для которого прописано свое собственное «color:blue». Естественно, что правило, написанное непосредственно для этого Html тега, будет иметь приоритет над тем, которое было прописано во внешнем элементе. Поэтому текст во внутреннем контейнере получится синего цвета.
Хотя правило «background» по спецификации CSS и не поддерживает наследование, но т.к. третий контейнер Div расположен внутри второго, то получается иллюзия наследования фоновой заливки. Но это не так. Если попробовать гипотетически вынести внутренний контейнер за пределы второго, то фона у него уже не будет.
В следующей статье мы уже приступим к такому базовому понятию в .
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Background в CSS (color, position, image, repeat, attachment) - все для задания цвета фона или фоновой картинки Html элементов
Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили
Padding, Margin и Border - задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right)
Height, width и overflow - CSS правила для описания области контента при блочной верстке
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Процентная запись обычно применяется в тех случаях, когда надо изменить значение относительно родительского элемента или когда размеры зависят от внешних условий. Так, ширина таблицы 100% означает, что она будет подстраиваться под размеры окна браузера и меняться вместе с шириной окна.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
| Содержимое таблицы |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- - свойство полностью поддерживается браузером со всеми допустимыми значениями;
- - свойство браузером не воспринимается и игнорируется;
- - при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Процент это единица измерения элемента относительно содержащего его блока. Это здорово работает для изображений: здесь мы устанавливаем габариты для изображения, ширина которого всегда равна 50% от ширины контейнера. Попробуйте сузить размер окна браузера, чтобы увидеть что происходит!
article img { float : right ; width : 50% ; }percent width layout
Вы можете использовать процент для создания шаблона, однако такой подход потребует больше работы. В этом примере, содержание элемента nav начинает обволакиваться неприятным образом, когда окно браузера слишком узкое. Все зависит от того, что лучше работает с вашим контентом.
nav { float : left ; width : 25% ; } section { margin-left : 25% ; }
Когда макет слишком узкий, элемент nav сплющивается. Хуже того, вы не можете использовать min-width для nav чтобы это исправить, потому как данное свойство не удержит от наступления колонку справа.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
13 / 19Утверждается, что в целом подавляющее число пользователей только просматривает материалы интернета, однако не принимает активного участия в обсуждении (на форумах , в интернет-сообществах и пр.).
Определение
Согласно данному правилу, доля интернет-пользователей, создающих содержимое, составляет не более 1% от людей, просто просматривающих это содержимое. Так, например, на одного человека, публикующего сообщение на форуме, приходится 99 человек, просматривающих этот пост , но не реагирующих на него.
Близкие закономерности
Правило одного процента имеет сходство с законом Парето (о соотношении 80:20), согласно которому 20% участников группы выполняют 80% всей работы.
Напишите отзыв о статье "Правило одного процента"
Примечания
Ссылки
Отрывок, характеризующий Правило одного процента
– Посмотри ка, Анисьюшка, что струны то целы что ль, на гитаре то? Давно уж в руки не брал, – чистое дело марш! забросил.Анисья Федоровна охотно пошла своей легкой поступью исполнить поручение своего господина и принесла гитару.
Дядюшка ни на кого не глядя сдунул пыль, костлявыми пальцами стукнул по крышке гитары, настроил и поправился на кресле. Он взял (несколько театральным жестом, отставив локоть левой руки) гитару повыше шейки и подмигнув Анисье Федоровне, начал не Барыню, а взял один звучный, чистый аккорд, и мерно, спокойно, но твердо начал весьма тихим темпом отделывать известную песню: По у ли и ице мостовой. В раз, в такт с тем степенным весельем (тем самым, которым дышало всё существо Анисьи Федоровны), запел в душе у Николая и Наташи мотив песни. Анисья Федоровна закраснелась и закрывшись платочком, смеясь вышла из комнаты. Дядюшка продолжал чисто, старательно и энергически твердо отделывать песню, изменившимся вдохновенным взглядом глядя на то место, с которого ушла Анисья Федоровна. Чуть чуть что то смеялось в его лице с одной стороны под седым усом, особенно смеялось тогда, когда дальше расходилась песня, ускорялся такт и в местах переборов отрывалось что то.
– Прелесть, прелесть, дядюшка; еще, еще, – закричала Наташа, как только он кончил. Она, вскочивши с места, обняла дядюшку и поцеловала его. – Николенька, Николенька! – говорила она, оглядываясь на брата и как бы спрашивая его: что же это такое?
Николаю тоже очень нравилась игра дядюшки. Дядюшка второй раз заиграл песню. Улыбающееся лицо Анисьи Федоровны явилось опять в дверях и из за ней еще другие лица… «За холодной ключевой, кричит: девица постой!» играл дядюшка, сделал опять ловкий перебор, оторвал и шевельнул плечами.
– Ну, ну, голубчик, дядюшка, – таким умоляющим голосом застонала Наташа, как будто жизнь ее зависела от этого. Дядюшка встал и как будто в нем было два человека, – один из них серьезно улыбнулся над весельчаком, а весельчак сделал наивную и аккуратную выходку перед пляской.
– Ну, племянница! – крикнул дядюшка взмахнув к Наташе рукой, оторвавшей аккорд.
Наташа сбросила с себя платок, который был накинут на ней, забежала вперед дядюшки и, подперши руки в боки, сделала движение плечами и стала.
Где, как, когда всосала в себя из того русского воздуха, которым она дышала – эта графинечка, воспитанная эмигранткой француженкой, этот дух, откуда взяла она эти приемы, которые pas de chale давно бы должны были вытеснить? Но дух и приемы эти были те самые, неподражаемые, не изучаемые, русские, которых и ждал от нее дядюшка. Как только она стала, улыбнулась торжественно, гордо и хитро весело, первый страх, который охватил было Николая и всех присутствующих, страх, что она не то сделает, прошел и они уже любовались ею. находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.
Каждый тег
Как сделать таблицу в html
Приведем пример, html код:
Пример таблицы Столбец 1 Столбец 2
Обратите внимание на ячейку
Теперь рассмотрим подробно все атрибуты тега
| или строкам | ||||||||||
| ... | ... |
...
2. Свойство background="URL" - задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения. Пример
Преобразуется на странице в следующее: В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif . Обратите внимание на то, что в теге мы добавили style="color:white;" . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым. 3. Свойство bgcolor="цвет" - задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов) 4. Свойство border="число" - задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1" , что означает толщина рамки - 1 пиксель. 5. Свойство bordercolor="цвет" - задает цвет рамки. Если border="0" , то рамки не будет и цвет рамки не будет иметь смысла. 6. Свойство cellpadding="число" - отступ от рамки до содержимого ячейки в пикселях. 7. Свойство cellspacing="число" - расстояние между ячейками в пикселях. 8. Свойство cols="число" - число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы. 9. Свойство frame="параметр" - как отображать границы вокруг таблицы. Может принимать следующие значения:
10. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах. 11. Свойство rules="параметр" - где отображать границы между ячейками. Может принимать следующие значения:
|