Logo GenDocs.ru

Поиск по сайту:  

Загрузка...

Лекции - Основы работы с CSS - файл 1.docx


Лекции - Основы работы с CSS
скачать (250 kb.)

Доступные файлы (1):

1.docx251kb.13.12.2011 06:49скачать

содержание

1.docx

  1   2   3   4   5   6   7   8   9   10   11

Основы работы с CSS


1. Лекция: Общая информация: Дается общая информация о каскадных таблицах стилей, рассматривается их предназначение и область применения.

Технология CSS: общий взгляд

Название "Каскадные таблицы стилей" происходит от английского Cascading Style Sheets, аббревиатурой которого является CSS. Впервые стили появляются в HTML 4.0 для определения представления элементов HTML и решения проблем представления документов. Стили обычно хранятся в таблицах стилей: могут быть определены как внутри HTML-документа, так и в специальном файле с расширением css. Используя отдельные файлы для хранения таблиц стилей, можно существенно сократить объем работы. Также можно определить несколько стилей, которые, подчиняясь существующим правилам, будут каскадно задавать один определенный стиль.

^ Пример использования CSS

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

Пример. Возьмем несколько таблиц стилей:

Style1

p

{

color: blue; font-style: italic;

margin-left: 20pt;

}
ol,ul,li

{

list-style: circle;

font-family: arial;

}
a:link {color:black}

a:visited {color:black}
body

{

background-image: url("http://www.intuit.ru/departament/picture.gif")

}

Style2

h1,h3,h6

{

margin: 20pt;

}
h1,h2,h3,h4,h5,h6,p,ol,li

{

font-family: arial, "sans serif";

}
p,table,td,ol,ul

{

font-style: oblique;

}
:link {COLOR: blue;}

:visited {COLOR: blue;}

a:active {COLOR: black;}

a:hover {COLOR: black;}
a.myln:link {COLOR: olive;}

a.myln:visited {COLOR: olive;}

a.myln:active {COLOR: teal;}

a.myln:hover {COLOR: teal;}

Style3

p,ol,ul

{

font-style: italic;

margin-right: 20pt;

}
p,h1,h6

{

font-family: "comic sans ms", arial, "sans serif";

}
p,th

{

font-size: 20%

}
table {background-color: blue}
body {background-color:#FFF000}
p,ol,ul

{

color:green;

}
:link {color:blue}

:visited {color:blue}

:active {color:green}

:hover {color:green}

Style4

:link { color:red }

:visited { color:red }

:active { color:yellow }

:hover { color:yellow }
body

{

background-color: #FAD123;

}
h1,h2,h6

{

margin-left: 20pt;

color: blue;

}


h3,h4,h5

{

margin-left: 10pt;

color: green;

}
p,h1,h3

{

font-size: 150%;

}
p,h1,h2,h3,h4,h5,h6,table

{

font-family: arial;

}
p

{

margin-left: 30pt;

}

Style5

p,h1,h2,h3

{

font-size: 75%;

}
table,h4,h5,h6,li

{

font-family: arial, "sans serif";

margin-left: 20pt;

}
body

{

background-color: #F2FF2F;

}
ol,ul {color: 12a45d;}
:link {color:brown}

:visited {color:brown}

:active {color:blue}

:hover {color:blue}

При последовательном применении этих стилей к одному и тому же документу можно менять его представление.

^ Предназначение стилей

Язык HTML был создан для описания содержимого документа. Его теги были предназначены для определения "заголовка", "параграфа", "таблицы" (<h1>, <p>, <table> и т.д.). Первоначально для представления документов не было предусмотрено каких-либо тегов форматирования, т.е. предполагалось, что о представлении документа позаботится браузер.

Но это породило процесс создания своих тегов и атрибутов к исходной спецификации HTML-браузерами Netscape и Internet Explorer (такие, например, как тег <font> и атрибут color), что затруднило создание Web-сайтов, на которых содержимое документов HTML было четко отделено 

от уровня представления документа.

В этой ситуации консорциум W3C (World Wide Web Consortium) — некоммерческая организация, ответственная за стандартизацию HTML — создала при разработке стандарта HTML 4.0 каскадные таблицы стилей.

Таким образом, необходимость разделения содержимого документа и его представления привела к созданию технологии CSS.

Сегодня эту технологию поддерживают все основные браузеры (Internet Explorer, Mozilla Firefox, Opera и др.).

^ Таблицы стилей могут существенно сократить объем работы

Таблицы стилей определяют вывод элементов HTML (как, например, тег font и атрибут color в HTML 3.2). Как уже говорилось, каскадные таблицы стилей обычно хранятся во внешних файлах с расширением .css. Этот способ удобен тем, что позволяет изменить внешний вид и компоновку всех необходимых страниц в Web, редактируя только один, единственный документ CSS.

Еще раз заострим внимание: CSS стали прорывом в Web-дизайне. Основой для него послужило то, что технология позволяет разработчикам одновременно управлять стилем и компоновкой множества Web-страниц, определять стиль для каждого элемента HTML и применять его к любому количеству Web-страниц. Также CSS дает возможность из одного документа ссылаться на несколько внешних таблиц стилей. Таким образом, чтобы сделать глобальное изменение, надо просто изменить стиль, и все элементы в Web будут автоматически изменены.

Разработчик может определять стили следующими способами:

  • внутри единственного элемента HTML;

  • внутри элемента <head> страницы HTML;

  • во внешнем файле CSS.

Приоритет использования стилей

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

  1. стили, используемые по умолчанию браузером;

  2. стили, хранящиеся во внешней таблице;

  3. стили, хранящиеся во внутренней таблице стилей (внутри тега <head>);

  4. встроенный стиль (внутри элемента HTML).

Эти правила определяют порядок увеличения приоритета стилей.

Таким образом, встроенный стиль (внутри элемента HTML) имеет наивысший приоритет, т.е. будет переопределять стиль, который объявлен в теге <head>, во внешней таблице стилей или в браузере (значение по умолчанию).






2. Лекция: Синтаксис CSS и примеры использования: Рассматривается грамматика CSS, способы 

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



Синтаксис


Синтаксис CSS состоит из трех частей: селектора, свойства и значения:

селектор {свойство: значение}

Селектор — элемент/тег HTML, который необходимо определить. Свойство — атрибут, который желательно изменить. Каждое свойство может принимать значение. Существует ряд правил и рекомендаций, которые необходимо запомнить.

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

p {font-size: 75%}

  1. Если значение состоит из нескольких слов, то необходимо поместить значение в кавычки:

h1 {font-family: "lucida calligraphy"}

  1. Если требуется определить более одного свойства, то необходимо разделить свойства точкой с запятой:

table { font-family: arial, "sans serif"; border-style: dotted}

  1. Чтобы определения стилей было удобно читать, можно каждое свойство писать на отдельной строке:

h2

{

font-family: arial;

margin-right: 20pt;

color:#ffffff }

  1. При определении правил допускается группировка селекторов, при этом в качестве разделителя селекторов используется запятая. В следующем примере в группу были объединены все элементы абзацев, таблиц и списков. Все эти элементы будут выведены шрифтом sans serif:

p,table,li

{

font-family: "sans serif";

}
^

Селектор класса (class)


При Web-разработке часто возникает необходимость в задании различных стилей для одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса.

Предположим, что в документе требуется два типа заголовков: более крупный заголовок должен иметь внешний отступ 10 пунктов, а второй — 20 пунктов. Вот как это можно сделать с помощью стилей:

h1.stepleft {margin-left: 10pt}

h2.stepright {margin-left: 20pt}



Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс:

<h1 class="stepleft">

Заголовок с внешним отступом 10 пунктов.

</h1>

<h2 class="stepright">

Заголовок с внешним отступом 20 пунктов.

</h2>

В то же время не допускается следующее определение атрибута class:

< h1 class="stepleft" h2 class="stepright">,

т.е. можно определить только один атрибут class

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

.left {margin-left: 40pt}

В следующем примере все элементы HTML, имеющие class="left", будут иметь внешний отступ, равный 40 пунктам.

В следующем коде элементы table и p имеют class="left". Это означает, что оба элемента будут следовать правилам в селекторе ".left":

<table class="left">

Эта таблица будет иметь внешний отступ, равный 40 пунктам.

</table>

<p class="left">

Этот параграф будет иметь внешний отступ, равный 40 пунктам.

</p>

Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, т.к. это не будет работать в Mozilla/Firefox.
^

Селектор идентификатора (id)


Стили элементов HTML можно определить также с помощью селектора идентификатора, который определяется символом #.

Следующее правило стиля будет применимо к элементу, который имеет атрибут id со значением "fontsz":

#fontsz{font-size: 50%}

Следующее правило стиля будет применимо к элементу ul, который имеет атрибут id со значением "first":

ul#first

{

list-style: disc;

color: #ffffff



}

Для корректности обработки кода браузерами не рекомендуется начинать имя ID с числа, т.к. это не будет работать в Mozilla/Firefox.
^

Комментарии CSS


Для пояснения кода и для последующего его редактирования используются комментарии, которые игнорируются браузерами. Комментарий CSS начинается символом "/*" и заканчивается символом "*/", как в примере ниже:

/* Первый комментарий. */

table

{

/* Второй комментарий. */

margin-left: 10pt;

font-family: "sans serif"

/* Третий комментарий. */

border-style:outset;

}
^

Примеры использования CSS


Рассмотрим несколько примеров использования CSS:

  1. Технология CSS позволяет связываться с внешней таблицей стилей. Для этого в файле HTML применяют тег <link>:

<html>

<head>

<link rel="stylesheet" type="text/css"

href="http://www.intuit.ru/image/style.css">

</head>

<body>

<ol><!—Список имеет внешний отступ в 10 пунктов -->

<li>для этого элемента списка будет задан шрифт "arial"</li>

<li>для этого элемента списка будет задан шрифт "arial"</li>

</ol>

<ul><!—Список имеет внешний отступ в 20 пунктов -->

<li>для этого элемента списка будет задан шрифт "arial"</li>

<li>для этого элемента списка будет задан шрифт "arial"</li>

</ul>

</body>

</html>

Внешний файл содержит следующее описание стилей (style.css):

ol {margin-left: 10pt}

ul {margin-right: 20pt}

li {font-family: arial}

Следующий файл HTML связывается с внешней таблицей стилей с помощью тега <link>:

<html>

<head>



<link rel="stylesheet" type="text/css"

href="http://www.intuit.ru/image/style2.css">:

</head>

<body>

<table>

<tr>

<td>Ячейка 1</td>

<td>Ячейка 2</td>

</tr>

</table>

<a href="http://www.intuit.ru">Здесь размещена ссылка</a>

</body>

</html>

Внешний файл содержит следующее описание стилей (style2.css):

body {background-color: #FFFFFF}

table {margin-left: 10pt;}

td {font-size:10pt; color: blue}

a:link {color:blue}

a:visited {color:brown}

a:hover {color:lime}

a:active {color:gray}.
^

Подключение таблицы стилей


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

  1. Подключение внешней таблицы стилей

Этот способ обычно применяется в ситуациях, когда один стиль определяется для множества страниц. Если необходимо быстро поменять дизайн Web-сайта этот способ идеально подходит – редактируется только один файл с таблицей стилей. Для подключения внешней таблицы стилей предназначен тег <link>, который размещается в разделе заголовка:

<head>

<link rel="stylesheet" type="text/css"

href="first.css" />

</head>

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

Некоторые замечания:

    1. внешнюю таблицу стилей можно создать в любом текстовом редакторе;

    2. файл с внешней таблицей стилей не должен содержать никаких тегов html;

    3. файл с внешней таблицей стилей необходимо сохранить с расширением .css.

Пример:

ul {margin-left: 10pt}



li {font-family: arial}

body {background-color: blue}

Для корректности отображения браузерами таблиц стилей необходимо исключить пробелы между значением свойства и единицами измерения, т.к. это будет работать правильно только в IE6, но не в Mozilla/Firefox или Netscape.

Пример с пробелом — "margin-left: 20 px";

пример без пробела — "margin-left:20px".

  1. Подключение внутренней таблицы стилей

Данный способ применяется тогда, когда один документ имеет уникальный стиль. Для определения внутренних стилей используют тег <style>, который размещается в разделе заголовка:

<head>

<style type="text/css">

li {font-family: arial}

p {font-size: 25%}

h1 {margin-right: 10pt}

</style>

</head>

В соответствии с определениями стиля браузер форматирует документ. Однако если он встретит незнакомые теги, то проигнорирует их. Например, старый браузер, который не поддерживает стили, проигнорирует тег <style>, но содержимое последнего будет выведено на странице. Чтобы этого не произошло, необходимо скрыть описание стиля в элементе комментария HTML:

<head>

<style type="text/css">

<!--

body {background-color: green}

table {border-style: dotted}

-->

</style>

</head>

  1. Встроенные стили

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

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

Пример:

<body style="background-color: blue" >

<h1 style="color: yellow" >Заголовок H1</h1>

</body>

В примере показано, как задать цвет фона документа и цвет заголовка h1.
^

Несколько таблиц стилей

В случае объединения или использования нескольких таблиц стилей могут возникнуть ситуации, когда некоторые свойства заданы для одного и того же селектора в разных таблицах стилей; тогда будут использованы значения из более конкретной таблицы стилей.

Например, внешняя таблица стилей имеет следующие свойства для селектора p:

p

{

font-family: "sans serif";

margin-left: 10pt;

font-style: italic;

font-weight: bold

}

А внутренняя таблица стилей имеет для селектора p следующие свойства:

p

{

margin-left: 20pt;

font-style: normal;

font-weight: bolder

}

Итак, при соединении внешней таблицы стилей с внутренней для селектора p будут определены следующие свойства:

font-family: "sans serif";

margin-left: 20pt;

font-style: normal;

font-weight: bolder

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





3. Лекция: Параметры CSS для фона: На примерах подробно рассматривается синтаксис, методы и свойства задания фона.

Параметры CSS для фона определяют фоновые эффекты элемента.

Примеры


  1. Данный пример показывает, как задать фоновый цвет элемента.

<html>

<head>

<style type="text/css">

ul {background-color: rgb(200,10,200)}

ol {background-color: #00FFFF}



li {background-color: transparent}

p {background-color: blue}

</style>

</head>

<body>

<ul>

<li>this is ul</li>

</ul>

<ol>

<li>this is ol</li>

</ol>

<p>This is a paragraph</p>

</body>

</html>

  1. Данный пример показывает, как задать в качестве фона изображение.

<html>

<head>

<style type="text/css">

body

{

background-image:

url(http://www.intuit.ru/departament/picture.jpg)

}

</style>

</head>

<body>

В документе в качестве фона использовано изображение

</body>

</html>

  1. Данный пример показывает, как использовать повторяющееся фоновое изображение.

<html>

<head>

<style type="text/css">

body

{

background-image:

url(http://www.intuit.ru/departament/picture.jpg);

background-repeat: repeat

}

</style>

</head>

<body>

В документе в качестве фона использовано повторяющееся изображение

</body>

</html>

  1. Данный пример показывает, как использовать повторяющееся только по вертикали 

  2. фоновое изображение.

<html>

<head>

<style type="text/css">

body

{

background-image:

url(http://www.intuit.ru/departament/picture.jpg);

background-repeat: repeat-y

}

</style>

</head>

<body>

В документе в качестве фона использовано повторяющееся изображение,

которое размножается только вертикально

</body>

</html>

  1. Данный пример показывает, как использовать повторяющееся только по горизонтали фоновое изображение.

<html>

<head>

<style type="text/css">

body

{

background-image:

url(http://www.intuit.ru/departament/picture.jpg);

background-repeat: repeat-x

}

</style>

</head>

<body>

В документе в качестве фона использовано повторяющееся изображение,

которое размножается только горизонтально.

</body>

</html>

  1. Данный пример показывает, как разместить на странице фоновое изображение.

<html>

<head>

<style type="text/css">

body

{

background-image:

url(http://www.intuit.ru/departament/picture.jpg);

background-repeat:

repeat;

background-position:

bottom;

}

</style>

</head>

<body>

</body>



</html>

  1. Данный пример показывает, как задать фиксированное фоновое изображение, т.е. изображение, которое не будет перемещаться вместе со всей остальной страницей.

<html>

<head>

<style type="text/css">

body

{

background-image:

url(http://www.intuit.ru/departament/picture.jpg);

background-repeat:

no-repeat;

background-attachment:

fixed

}

</style>

</head>

<body>

Определено фиксированное фоновое изображение<br>

Определено фиксированное фоновое изображение<br>

Определено фиксированное фоновое изображение<br>

</body>

</html>

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

<html>

<head>

<style type="text/css">

body

{

background-image:

url(http://www.intuit.ru/departament/picture.jpg);

background-repeat:

no-repeat;

background-attachment:

scroll

}

</style>

</head>

<body>

Определено прокручивающееся фоновое изображение<br>

Определено прокручивающееся фоновое изображение<br>

Определено прокручивающееся фоновое изображение<br>

</body>

</html>

  1. Данный пример показывает, как использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.

<html>

<head>

<style type="text/css">

body

{

background: blue url(http://www.intuit.ru/departament/picture.jpg) repeat scroll center;

}



</style>

</head>

<body>

Это документ, для которого свойства фона заданы в одном объявлении<br>

Это документ, для которого свойства фона заданы в одном объявлении<br>

Это документ, для которого свойства фона заданы в одном объявлении<br>

</body>

</html>

Итак, можно определить фоновый цвет элемента, а также в качестве фона — изображение, повторяющееся изображение, повторяющееся изображение (только вертикально или только горизонтально), фиксированное или прокручивающееся изображение. Кроме того, можно использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.
^

Параметры фона в CSS: подробное рассмотрение


Как было показано ранее, параметры фона в CSS позволяют управлять цветом фона элемента, задавать в качестве фона изображение, повторять циклически фоновое изображение вертикально или горизонтально и позиционировать изображение на странице.

Данные свойства поддерживаются следующими браузерами (в скобках сокращенный вариант, который применяется далее в таблицах параметров и значений): Internet Explorer (IE), Firefox (F), Netscape(N).

Параметр

Описание

Значения

IE

F

N

W3C

background

Служит для задания всех параметров фона в одном объявлении

background-color

background-image

background-repeat

background-attachment

background-position

4

1

6

1*

background-attachment

Задает для изображения фиксированное расположение или перемещающееся вместе с остальной страницей

scroll

fixed

4

1

6

1

background-color

Задает цвет фона элемента

color-rgb

color-hex

color-name

transparent

4

1

4

1



background-image

Задает в качестве фона изображение

url

none

4

1

4

1

background-position

Задает начальное положение фонового изображения

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

x-% y-%

x-pos y-pos

4

1

6

1

background-repeat

Определяет, будет ли и каким образом будет повторяться фоновое изображение

repeat

repeat-x

repeat-y

no-repeat

4

1

4

1

(* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).
^

Параметр 'background'


Этот параметр предназначен для задания всех свойств фона в одном объявлении.

Наследование: нет.

Примеры:

body

{

background: url(picture.gif)

}

body

{

background: url(http://www.intuit.ru/speciality/image.gif) repeat scroll

}

body

{

background: yellow url(http://www.intuit.ru/speciality/image.gif) repeat-x 

bottom

}

^ Может принимать следующие значения:

Значение

Описание

background-color

background-image

background-repeat

background-attachment

background-position

В этом объявлении можно задать от одного до пяти свойств фона

Рассмотрим их подробнее.
^
Параметр 'background-attachment'

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

Наследование: нет.

Может принимать следующие значения:

Значение

Описание

Scroll

Фоновое изображение перемещается, когда перемещается страница

Fixed

Фоновое изображение не перемещается, когда перемещается страница

Пример:

body

{

background-attachment: fixed;

background-repeat: repeat

}
^
Параметр 'background-color'

Этот параметр задает фоновый цвет элемента.

Наследование: нет.

Может принимать следующие значения:

Значение

Описание



color

Значение color может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#ff0000)

transparent

Фоновый цвет является прозрачным

Пример:

h1

{

background-color: gray;

font-family: arial

}
^
Параметр 'background-image'

Данный параметр задает изображение в качестве фона.

Наследование: нет.

Может принимать следующие значения:

Значение

Описание

url

Путь доступа к изображению

none

Фонового изображения нет

Пример:

body

{

background-image: url(http://www.intuit.ru/speciality/image.gif);

background-repeat: repeat;

background-attachment: fixed

}

В тех случаях, когда изображение недоступно, необходимо задать цвет background-color, который будет использован.
^
Параметр 'background-position'

Этот параметр задает начальное положение фонового изображения.

Наследование: нет.

Может принимать следующие значения:

Значение

Описание

top left

top center

top right



center left

center center

center right

bottom left

bottom center

bottom right



Если определить только одно ключевое слово, то вторым значением подразумевается "center"



x-% y-%

Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0% 0%. Правый нижний угол — 100% 100%. Если определено только одно значение, то вторым значением подразумевается 50%.

x-pos y-pos

Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0 0. Единицами измерения могут быть пиксели (0px 0px) или любые другие единицы измерения CSS. Если определено только одно значение, то вторым значением подразумевается 50%. Можно смешивать % и эти координаты.

Пример:

body

{

background-image: url(http://www.intuit.ru/speciality/image.gif);

background-position: right top;

background-attachment: fixed

}

body

{

background-image: url(http://www.intuit.ru/speciality/image.gif);

background-repeat: no-repeat;

background-position: 100% 100%;

background-attachment: fixed

}
^
Параметр 'background-repeat'

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

Наследование: нет.

Может принимать следующие значения:

Значение

Описание

repeat

Фоновое изображение будет повторяться по вертикали и по горизонтали

repeat-x

Фоновое изображение будет повторяться по горизонтали



repeat-y

Фоновое изображение будет повторяться по вертикали

no-repeat

Фоновое изображение будет выведено только один раз

Пример:

body

{

background-image: url(http://www.intuit.ru/departament/image.gif);

background-repeat: repeat;

background-attachment: fixed

}





4. Лекция: Параметры текста в CSS: версия для печати и PDA
Описываются механизмы представления текстовой информации: оформление, выравнивание, отступы и др.

Параметры текста CSS позволяют управлять внешним видом текста. Можно изменять цвет текста, увеличивать или уменьшать интервал между символами, выравнивать текст, оформлять текст, делать отступ для первой строки текста и т.д.

^ Поддержка браузеров: Internet Explorer, Firefox, Netscape.

Параметр

Описание

Значения

IE

F

N

W3C

color

Задает цвет текста

Color

3

1

4

1

direction

Задает направление текста

ltr

6

1

6

2

rtl

letter-spacing

Увеличивает или уменьшает интервал между символами

normal

4

1

6

1

length

text-align

Выравнивает текст в элементе

Left

4

1

4

1

right

center

justify

text-decoration

Дополнительное оформление текста

none

4

1

4

1

underline

overline

line-through

blink

text-indent

Делает отступ для первой строки текста элемента

length

4

1

4

1

%

text-shadow




none













color

length

text-transform

Управляет символами элемента

none

4

1

4

1

capitalize

uppercase

lowercase

unicode-bidi




unicode-bidi

5







2

normal

embed

bidi-override

white-space

Задает способ обращения с пробелами внутри элемента

normal

5

1

4

1

pre

nowrap

word-spacing

Увеличивает или уменьшает пробел между словами

normal

6

1

6

1

length

Примеры


  1. Этот пример показывает, как задать цвет текста.

<html>

<head>

<style type="text/css">

p {color: green}

ul {color: #dda0dd}



ol {color: rgb(0,0,255)}

</style>

</head>

<body>

<ul>

<li>список ul</li>

</ul>

<ol>

<li>список ol</li>

</ol>

<p>это параграф</p>

</body>

</html>

  1. Этот пример показывает, как задать фоновый цвет части текста.

<html>

<head>

<style type="text/css">

span.back

{

background-color: gray

}

</style>

</head>

<body>

<p>

Данный текст содержит определение, фон которого выделен. <span class="back">Это

определение.</span>

</p>

</body>

</html>

  1. Данный пример показывает, как увеличить или уменьшить интервал между символами.

<html>

<head>

<style type="text/css">

p {letter-spacing: 1cm}

li {letter-spacing: 5px}

</style>

</head>

<body>

<p>параграф</p>

<ol>

<li>элемент списка</li>

</ol>

</body>

</html>

  1. Данный пример показывает, как выравнивать текст.

<html>

<head>

<style type="text/css">

ol {text-align: center}



ul {text-align: left}

dl {text-align: right}

</style>

</head>

<body>

<ol>

<li>список ol</li>

<li> список ol</li>

<li> список ol</li>

</ol>

<ul>

<li> список ul</li>

<li> список ul</li>

<li> список ul</li>

</ul>

<dl>

<dt> список <dd>dl dl dl</dd></dt>

<dt> список <dd>dl dl dl</dd></dt>

<dt> список <dd>dl dl dl</dd></dt>

</dl>

</body>

</html>

  1. Этот пример показывает, как можно оформить текст.

<html>

<head>

<style type="text/css">

a {text-decoration: underline}

ul {text-decoration: overline}

ol {text-decoration: line-through}

</style>

</head>

<body>

<ol>

<li>первое</li>

<li>второе</li>

<li>третье</li>

</ol>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<p><a href="http://www.intuit.ru/">www.intuit.ru</a></p>

</body>

</html>

  1. Этот пример показывает, как сделать отступ для первой строки параграфа.

<html>

<head>

</head>

<body>

<p>

параграф<br>

<p style="cm;">

параграф<br>

<p style="cm;">



параграф<br>

</p>

</body>

</html>

  1. Данный пример показывает, как управлять регистром символов в тексте.

<html>

<head>

</head>

<body>

<pre style="text-transform: uppercase;">Верхний регистр</pre>

<p style="text-transform: lowercase;">Нижний регистр</p>

<pre style="text-transform: capitalize;">первые буквы в словах заглавные</pre>

</body>

</html>
^

Параметры текста в CSS: подробное рассмотрение

Параметр 'color'

Этот параметр задает цвет текста.

Наследование: да.

Может принимать следующие значения:

Значение

Описание

color

Значением color может быть название цвета (red), значение rgb (rgb(255,0,0)) или шестнадцатеричное значение (#ff0000).

Пример:

h1

{

color: green

}
^
Параметр 'direction'

Параметр задает направление текста.

Наследование: да.

Может принимать следующие значения:

Значение

Описание



ltr

Направление текста слева направо

rtl

Направление текста справа налево

Пример:

p

{

direction: rtl

}
^
Параметр 'letter-spacing'

Данный параметр увеличивает или уменьшает интервал между символами.

Наследование: да.

Примечание: допускаются отрицательные значения.

^ Может принимать следующие значения:

Значение

Описание

normal

Определяет обычный пробел между символами

Length

Определяет фиксированный пробел между символами

Примеры:

pre

{

letter-spacing: -2px

}

pre

{

letter-spacing: 20px

}
^
Параметр 'text-align'

Этот параметр задает выравнивaние текста в элементе.

Наследование: да.

Может принимать следующие значения:

Значение

Описание

left

Выравнивает текст слева



right

Выравнивает текст справа

center

Центрирует текст

justify

Пример:

h1

{

text-align: right

}
^
Параметр 'text-decoration'

Данный параметр задает дополнительное оформление текста.

Наследование: нет.

Примечание: цвет оформления должен быть задан свойством "color".

^ Может принимать следующие значения:

Значение

Описание

None

Определяет обычный текст

Underline

Определяет линию под текстом

Overline

Определяет линию над текстом

line-through

Определяет линию через текст

Blink

Определяет мигающий текст

Пример:

h1

{

text-decoration: overline

}
^
Параметр 'text-indent'

Данный параметр создает отступ для первой строки текста элемента.

Наследование: да.

Примечание: допускаются отрицательные значения, для которых первая строка будет сдвинута влево.

^ Может принимать следующие значения:



Значение

Описание

Length

Определяет фиксированный отступ

%

Определяет отступ в % от ширины родительского элемента

Примеры:

pre

{

px

}

p

{

px

}
^
Параметр 'text-transform'

Этот параметр управляет регистром символов в элементе.

Наследование: да.

Может принимать следующие значения:

Значение

Описание

None

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

Capitalize

Каждое слово в тексте начинается с заглавной буквы

Uppercase

Определяет только заглавные буквы

Lowercase

Определяет только символы нижнего регистра

Примеры:

h1

{

text-transform: capitalize

}

pre

{

text-transform: lowercase

}
^
Параметр 'white-space'

Параметр задает способ обработки пробелов внутри элемента.



Наследование: да.

Может принимать следующие значения:

Значение

Описание

normal

Браузер игнорирует пробел

pre

Браузер сохраняет пробел. Действует как тег <pre> в HTML

nowrap

Текст не будет переноситься на другую строку, пока не встретится тег <br>

Пример:

pre

{

white-space: pre

}
^
Параметр 'word-spacing'

Данный параметр увеличивает или уменьшает пробел между словами.

Наследование: да.

Примечание: допускаются отрицательные значения.

^ Может принимать следующие значения:

Значение

Описание

normal

Определяет обычный пробел между словами

length

Определяет фиксированный пробел между словами
  1   2   3   4   5   6   7   8   9   10   11



Скачать файл (250 kb.)

Поиск по сайту:  

© gendocs.ru
При копировании укажите ссылку.
обратиться к администрации