Оформление страниц сайта. Как изменить параметры текста сайта с помощью CSS

Одним из важнейших элементов web-дизайна является правильное оформление страниц сайта.

Одним из частных случаев оформления это возможность изменить параметры текста сайта.
Способы с помощью которых можно изменить параметры текста сайта:

1. Использование возможностей HTML. Согласно спецификации W3C для HTML 4.01 от 24 декабря 1999 года использование элементов и атрибутов HTML для установки цвета не рекомендуется.
2. Использование средств CSS.

Оформление страниц сайта заключается в возможности задать такие параметры текста сайта как шрифт, размер, цвет и т.д. Изменить параметры текста сайта можно с помощью каскадной таблицы стилей CSS. Для этого в CSS имеются следующие свойства:

1. background-color – позволяет изменить параметры текста сайта такой как цвет фона; Значением этого свойства является цвет фона. Форма записи <span style="background-color: red">оформление текста</span>. В результате фон текста будет красным (red): оформление текста.


2. color – позволяет изменить параметры текста сайта, а конкретно цвет текста. Значением этого свойства является цвет текста. Форма записи <span style="color: blue">оформление текста</span>. В результате цвет текста будет синим (blue): оформление текста.


3. letter-spacing – позволяет изменить параметры текста сайта, а именно увеличивает или уменьшает интервал между символами. Значением этого свойства является интервал между символами, указанный в пикселях. Форма записи <span style="letter-spacing: 5px">оформление текста</span>. В результате в тексте растояние между символами будет 5 пикселей: оформление текста.


4. text-decoration – позволяет изменить параметры текста сайта, такие как:
   • none - определяет обычный текст. Форма записи: <span style="text-decoration: none">оформление текста</span>. Результат: оформление текста
   • underline - задаёт линию под текстом. Форма записи: <span style="text-decoration: underline">оформление текста</span>. Результат: оформление текста
   • overline - задаёт линию над текстом. Форма записи: <span style="text-decoration: overline">оформление текста</span>. Результат: оформление текста
   • line-through - задаёт линию через текст. Форма записи: <span style="text-decoration: line-through">оформление текста</span>. Результат: оформление текста
   • blink - делает текст мигающим. Форма записи: <span style="text-decoration: blink">оформление текста</span>. Результат: оформление текста


5. word-spacing – позволяет изменить параметры текста сайта, а именно увеличивает или уменьшает пробел между словами. Значением этого свойства является интервал между словами, указанный в пикселях. Форма записи <span style="word-spacing: 15px">оформление текста</span>. В результате в тексте расстояние между словами будет 15 пикселей: оформление текста.


6. font-family – позволяет изменить параметры текста сайта, а именно его шрифт. Значениями этого свойства являются шрифты. Они могут быть: times, courier, arial и т.д. Форма записи: <span style="font-family: courier">оформление текста</span>. Результат: оформление текста


7. font-size – позволяет изменить параметры текста сайта и задать его размер. Значения этого свойста следующие: xx-small, x-small, small, medium, large, x-large, xx-large, length (задаётся размер в пикселях), % (задаётся размер в процентах от порождающего элемента). Пример:
   • Форма записи: <span style="font-size: xx-small">оформление текста</span>.
     Результат: оформление текста
   • Форма записи: <span style="font-size: x-small">оформление текста</span>.
     Результат: оформление текста
   • Форма записи: <span style="font-size: small">оформление текста</span>.
     Результат: оформление текста
   • Форма записи: <span style="font-size: medium">оформление текста</span>.
     Результат: оформление текста
   • Форма записи: <span style="font-size: large">оформление текста</span>.
     Результат: оформление текста
   • Форма записи: <span style="font-size: x-large">оформление текста</span>.
     Результат: оформление текста
   • Форма записи: <span style="font-size: xx-large">оформление текста</span>.
     Результат: оформление текста
   • Форма записи: <span style="font-size: 40px">оформление текста</span>.
     Результат: оформление текста
   • Форма записи: <span style="font-size: 150%">оформление текста</span>.
     Результат: оформление текста


8. font-weight – позволяет изменить параметры текста сайта - определяет степень жирности текста. Может принимать значения:
   • normal - обычные символы. Форма записи: <span style="font-weight: normal">оформление текста</span>. Результат: оформление текста
   • bold - жирные символы. Форма записи: <span style="font-weight: bold">оформление текста</span>. Результат: оформление текста


9. border – определяет стиль и цвет рамки вокруг текста. Форма которая позволяет изменить параметры текста сайта следующая <span style="border: стиль_границы толщина цвет">оформление текста</span>. Толщина может быть следующей: thin - тонкая граница, medium - средняя толщина, thick - толстая граница, lenght - толщина задаётся в пикселях. Стили границы:
   
   
   • Dotted – Пунктирная граница. Форма записи: <span style="border: Dotted 5px red">оформление текста</span>.
     Результат: оформление текста
   
   
   • Dashed – Штрих-пунктирная граница. Форма записи: <span style="border: Dashed 5px red">оформление текста</span>.
     Результат: оформление текста
   
   
   • Solid – Сплошная граница. Форма записи: <span style="border: Solid 5px red">оформление текста</span>.
     Результат: оформление текста
   
   
   • Double – Двойная граница. Форма записи: <span style="border: Double 5px red">оформление текста</span>.
     Результат: оформление текста
   
   
   • Groove – 3D-граница. Форма записи: <span style="border: Groove 5px red">оформление текста</span>.
     Результат: оформление текста
   
   
   • Ridge – 3D-граница. Форма записи: <span style="border: Ridge 5px red">оформление текста</span>.
     Результат: оформление текста
   
   
   • Inset – 3D-граница. Форма записи: <span style="border: Inset 5px red">оформление текста</span>.
     Результат: оформление текста
   
   
   • Outset – 3D-граница. Форма записи: <span style="border: Outset 5px red">оформление текста</span>.
     Результат: оформление текста
   
   


10. visibility – определяет будет ли текст виден или нет. Значения свойства могут быть:
    • visible - текст виден. Форма записи: <span style="visibility: visible">оформление текста</span>. Результат: оформление текста
    • hidden - текст невиден. Форма записи: <span style="visibility: hidden">оформление текста</span>. Результат: оформление текста


11. vertical-align – задаёт выравнивание текста по вертикали. Может принимать значения:
    • baseline – текст размещается на базовой строке родительского элемента. Форма записи: <span style="vertical-align: baseline">оформление текста</span>. Результат: оформление текста
    
    
    • sub – текст размещается как нижний индекс. Форма записи: <span style="vertical-align: sub">форматирование текста</span>. Результат: форматирование текста
    
    
    • super – текст размещается как верхний индекс. Форма записи: <span style="vertical-align: super">оформление текста</span>. Результат: оформление текста
    
    
    • lenght – текст размещается как нижний либо верхний индекс на указанное количество пикселей (при смещении вниз задаётся отрицательное значение). Форма записи: <span style="vertical-align: 30px">оформление текста</span>. Результат: оформление текста
    
    
    • % – текст размещается как нижний либо верхний индекс на проценты (при смещении вниз задаётся отрицательное значение). Форма записи: <span style="vertical-align: 30%">оформление текста</span>. Результат: оформление текста


12. text-shadow - используется для того, чтобы создать размытую тень за текстом. Форма записи: <span style="text-shadow: 1px 1px 1px red">оформление текста</span>. Первый параметр — смещение по оси X; Второй — смещение по оси Y; Третий — радиус размытия; Четвертый — цвет тени. Результат: оформление текста

Для форматирования текста можно применять сразу несколько свойств. Пример: <span style="color: maroon; background-color: #32CD32; border: 5px outset #32CD32; text-shadow: 2px 2px 2px #000000; font-size: bold">оформление текста</span>

Результат: оформление текста

В начало