Инструменты пользователя

Инструменты сайта


Боковая панель

Связь

css

CSS

  • CSS Color Module Level 3 стандарт предоставляет новые способы определения цветов и прозрачности для текста, рамок и фона.
  • The Network Information API черновой вариант спецификации, позволяющей web- приложениям получить доступ к информации о состоянии сети, такой как тип соединения текущего устройства, а также позволяет отследить события потери и возобновления сетевого соединения.

Единицы измерения CSS

Относительные размеры:

  • em - ems, высота используемого элементом шрифта. 1em равен размеру шрифта родителя(то же, что и 100%)
  • ex - x-height, высота строчной буквы "х" используемого элементом шрифта. x-height называется так, потому что она часто равна высоте "x" нижнего регистра. Однако ‘ex’ определены даже для тех шрифтов, которые не содержат "x".
  • % - относительные значения(например +15%)

Абсолютные размеры:

  • px - pixels, пикселы
  • in - inches, дюймы
  • cm - centimeters, сантиметры
  • mm - millimeters, миллиметры
  • pt - points, пункты(1pt = 1/72in = 0,35mm)
  • pc - picas, пики(1pc = 12pt)

Основным назначением стилей CSS является отделение структуры документа от его представления и расширение возможностей визуального оформления элементов HTML 5.

CSS - вывод на печать

Если в файле css не задан тип media, то его смогут прочитать все средства, предназначенные для вывода информации. Если же есть необходимость указания отдельного устройства, для которого предназначена страница, то нужно явно задать атрибут media. Он может иметь следующие значения: print (принтер), handheld(Handheld PC(H/PC)), screen(монитор) и другие. Ниже пример, который при печати на принтер дополнительно в скобках печатает непосредственно ссылку на ресурс (href), а не только название ссылки.

@media print{
    *{
        color: #000 !important;
        background: transparent !important;
    }
    html{
        font: 10pt sans-serif;
    }
    a[href]:after{
        /*вывести скрытое содержимое, то есть саму ссылку*/
        content: " ("attr(href) ")";
    }
}

Оформление текста: шрифт, стиль, размер шрифта

CSS дают дизайнеру большие возможности по форматированию шрифтов:

  • Свойство font-family: название шрифта;
  • Свойство font-size: размер;
  • Свойство font-weight: normal | bold; - жирность начертания
  • Свойство font-style: normal | italic; - курсив
  • Свойство color: цвет символов;
  • Свойство font-variant: small-caps; - делает все буквы заглавными, работает только small-caps
  • Свойство text-decoration: underline; - перечеркивает, подчеркивает, надчеркивает текст
  • Свойство text-transform: capitalize; - позволяет, например первую букву у всех слов сделать заглавной
Свойства font-weight и font-style заменяют элементы b и i соответственно.

Свойство font-family Это свойство применяется для указания используемого шрифта или семейства шрифтов. Например, присвоим шрифт "Comic Sans MS" элементу абзаца. Текст абзаца будет выведен шрифтом "Comic Sans MS".

<p style="font-family: Comic Sans MS;">test</p>

Однако, нет никаких гарантий, что используемый вами шрифт будет на компьютере остальных пользователей, ведь на каждом из них может быть установлен свой набор шрифтов, и есть лишь несколько шрифтов, которые присутствуют на большинстве (но не на всех!) компьютерах. Как же поступить в этом случае? Можно указать не один шрифт, а несколько, перечисляя их через ",":

p {
    font-family: "Century Gothic", Tahoma, Arial;
}

Тогда браузер попытается отобразить текст первым шрифтом из списка. Если указанный шрифт на компьютере отсутствует, будет сделана попытка воспользоваться вторым из списка. Если и второй будет недоступен, браузер попробует использовать следующий — третий. Потом — четвёртый, пятый и так далее.

Но и в этом случае остается вероятность (пусть и небольшая) отсутствия всех перечисленных шрифтов на компьютере пользователя! Что же делать тогда? Необходимо завершать список указанием имени семейства, к которому относятся перечисленные шрифты. Ниже приводятся названия семейств и несколько относящихся к ним шрифтов:

  1. serif - антиква, шрифты с "засечками". Наиболее распространенный пример - Times New Roman. К этому семейству относятся так же Bookman Old Style, Garamond, Georgia, Minion Web.
  2. sans-serif - гельветика, шрифты "рубленные" или без "засечек". Наиболее распространенные шрифты этого семейства Arial, Tahoma, Verdana, Century Gothic, Franklin Gothic, Impact.
  3. monospace - моноширный, с одинаковой шириной знакоместа для каждого символа. Наиболее известные шрифты данного семейства - Courier, Courier New, Lucida Console, Monotype.com.
Для того, чтобы избежать неприятной ситуации и нежелательной смены стилистики оформления шрифта ваших страниц на компьютерах других пользователей, список шрифтов завершаем указанием имени соответствующего семейства.
<p style="font-family: Century Gothic, Tahoma, Arial, sans-serif;"></p>
  • Свойство font-size. C помощью данного свойства можно указать размер шрифта. Размер шрифта принято указывать в специальных единицах - пунктах(pt, 1pt = 1/72 дюйма). Однако, нет препятствий для использования других единиц измерения, таких как дюйм (in), сантиметр (cm), миллиметр (mm) и, наконец, пиксель (px). Название единицы измерения должно следовать сразу за величиной размера.
  • Свойство color

Цвет символов текста можно указать, используя свойство color. При этом цвет вожет быть задан как названием, так и с помощью палитры web цветов:

<p style="color: red;"> ... 
<p style="color: #FF0000;"> ...

В обоих случаях цвет текста будет красным.

Размер шрифта

Когда размер шрифта задается абсолютными значениями, т.е. указывается конкретное значение шрифта в пунктах или пикселах, то изменить эту величину с помощью опции браузера Вид | Размер шрифта невозможно. Если шрифт установлен слишком мелким, то исправить этот недостаток читателю простыми средствами не представляется возможным. Поэтому лучше задавать размер шрифта в процентах.
font-size: normal
font-size: 12pt
font-size: 12px
font-size: 120% 

CSS цвет: RGB, RGBA полупрозрачность

CSS3 позволяет задавать цвет, используя функции RGB и RGBA. При этом мы должны указать долю каждой цветовой составляющей, под которую отводится один байт (от 0 до 255). Синтаксис RGB

background: rgb( 0, 255, 0);  /* чистый зеленый цвет */

Для RGBA добавляется четвертый параметр — альфапрозрачность (от 0 до 1).

background: rgba( 255, 0, 0, 0.5);  /* чистый красный с прозрачностью 50% */

Пример:

<p>It is html code.</p>
<div id="tst">Transparent</div>
p { color: #0099FF; }
#tst {
  background-color:rgba(100,100,100,.8);
  color: blue;
  width:300px;
  height:400px;
  position:absolute;
  top:0;
}

background - управление фоном элемента

Фоновый цвет или рисунок можно назначить любому элементу страницы. Эта задача решается путем добавления стиля CSS нужному элементу. Возникает вопрос: а как назначить фоновый цвет или рисунок всей странице? Правильно - использовать стиль для элемента body.

Ниже приводится перечень стилей CSS для управления фоном:

  • background-color: цвет; - фоновый цвет элемента
  • background-image: url(адрес); - фоновое изображение элемента
  • background-attachment: fixed | scroll; - закрепление фонового изображения
  • background-repeat: repeat | repeat-x | repeat-y | no-repeat; - способ повторения фонового изображения
  • background-position: x y; - позиционирование фонового изображения.
  • Пример 1. Использование фонового изображения страницы.

Следующий пример демонстрирует использование фонового изображения и цвета страницы:

<body style="background-image: url(bg_01.gif); background-color: #ffffff;
font-style: italic; font-size: 14pt;">
 
<h1 style="text-align: center;">Фоновый рисунок страницы</h1>
<p>Итак, фоновый цвет или рисунок можно назначить любому элементу страницы. 
Эта задача решается путем добавления стиля CSS нужному элементу. Возникает вопрос: 
а как назначить фоновый цвет или рисунок <b>всей</b> странице? Правильно - использовать 
стиль для элемента <b>body</b>.
</p>

В качестве фонового изображения используется рисунок размерами 25x25 пикселей. Браузер автоматически повторяет рисунок, заполняя им все пространство элемента (страницы).

Пример 2. Управление повторением и позицией.

По умолчанию, браузер автоматически повторяет рисунок, заполняя им все пространство элемента. Этим процессом можно управлять с помощью свойства стиля background-repeat: Можно прекратить повторение фонового рисунка, например, присвоив элементу стиль background-repeat: no-repeat:

<body style="background-repeat: no-repeat; background-image: url(bg_02.jpg);
background-color: #ffffff; font-style: italic; font-size: 14pt;">

Пример 3. Позиционирование фонового изображения.

Если после отмены повторения фонового рисунка у вас появилось желание расположить его по центру страницы, воспользуйтесь свойством стиля background-position:

<body style="background-position: 50% 0%; background-repeat: no-repeat;
background-image: url(bg_02-1.jpg); background-color: #ffffff; 
font-style: italic; font-size: 14pt;">

Указать положение фонового рисунка можно, задав его координаты по горизонтали и вертикали, разделив их пробелом. Можно использовать проценты. Так, координаты 0% 0% означают размещение изображения в верхнем левом углу, 50% 50% - по центру страницы и т.д.

Пример 4. Привязка фонового изображения.

Если в теле документа, снабженного фоновым изображением, разместить настолько большой фрагмент текста, что появится полоса прокрутки, то прокручиваться будет не только текст, но и фон страницы. Прокрутку фонового изображения можно отменить, если задать стилевое правило background-attachment: fixed.

<body style="background-attachment: fixed; background-position: 20 20; 
background-repeat: no-repeat; background-image: url(bg_02-1.jpg); 
background-color: #ffffff; font-style: italic; font-size: 14pt;">

border-radius - лимон, круг средствами CCS

Пример рисует лимон средствами CCS3

<div class="lemon"></div>
<style>
    .lemon {
        width: 200px; height: 200px;
        background: #F5F240;
        border: 1px solid #F0D900;
        border-radius: 10px 150px 30px 150px;
    }
</style>
<div class="circle"></div>
<style>
    .circle {
        width: 200px; height: 200px;
        background: #F5F240;
        border: 10px solid #F0D900;
        border-radius: 50%;
    }
</style>



css.txt · Последние изменения: 2015/11/02 08:27 (внешнее изменение)