Статьи

CSS это просто!

Февраль 10, 2019

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

Проблема с HTML

CSS — это язык для определения форматирования, используемого на веб-сайте. Это включает в себя такие вещи, как цвета, фоновые изображения, гарнитуры (шрифты), поля и отступы. «Но я делаю все это сейчас с помощью HTML-тегов», — подумаете вы. «Зачем мне нужен CSS?» Правильный вопрос, и лучший способ ответить на него — показать, что неправильно при определении таких стилей с помощью HTML.

В настоящее время распространенным выбором дизайна является использование шрифта без засечек (например, Arial, Verdana, Tahoma и т. Д.) Для основного текста сайта. Поскольку большинство веб-браузеров по умолчанию используют шрифт с засечками, например Times New Roman, при создании сложного макета веб-страницы с использованием шрифта без засечек часто используется множество тегов <font> . С вложенными макетами таблиц, которые стали обычным явлением в Интернете, нередко можно увидеть десять или двадцать тегов <font> просто предназначенных для применения одного и того же шрифта ко всему тексту на странице. Умножьте это на 5 страниц для скромного сайта, и мы окажемся рядом с сотней тегов. Более мощный сайт может иметь 50 страниц или более, и в этом случае вы просматриваете тысячу тегов <font> , все из которых посвящены применению этого основного, согласованного стиля к тексту вашего документа.

А вот и кикер: что если ваш клиент позвонит вам поздно вечером в пятницу и скажет: «Вердана хороша, но все используют это. Давайте вместо этого воспользуемся Tahoma ». Помимо необычных инструментов поиска и замены, теперь перед вами стоит задача настроить сто, тысячу или даже больше тегов <font> чтобы сделать то, что с точки зрения вашего клиента может показаться очень простое изменение. Ты можешь поцеловать те лыжные выходные, которые ты запланировал на прощание Старайтесь не стонать вслух — это не подходит большинству клиентов.

Если вы знаете свой HTML, вы можете подумать, что <basefont> , который позволяет вам установить шрифт по умолчанию, который будет использоваться на странице, является хорошим решением этой проблемы. Даже тогда вам придется настроить один тег для каждой страницы вашего сайта. Добавьте другой стиль шрифта к уравнению (скажем, вы хотите использовать другой шрифт для этой вашей необычной панели навигации), и проблема вернется полностью.

Для этой и других проблем каскадные таблицы стилей являются решением.

Определение стилей с помощью CSS

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

Рассмотрим следующую схему документа HTML: 

 <HTML>  <HEAD>  <TITLE> A simple page </TITLE>  </HEAD>  <BODY>   <H1><FONT FACE="sans-serif" COLOR="#3366CC">First Title</FONT></H1>  <P>...</P>   <H1><FONT FACE="sans-serif" COLOR="#3366CC">Second Title</FONT></H1>  <P>...</P>   <H1><FONT FACE="sans-serif" COLOR="#3366CC">Third Title</FONT></H1>  <P>...</P>   </BODY>  </HTML>

Этот документ содержит три заголовка, созданных с использованием тегов <H1> . Чтобы сделать эти заголовки более <FONT> , я использовал теги <FONT> чтобы сделать их светло-голубыми шрифтом без засечек (например, браузеры Windows будут отображать их в Arial). Обратите внимание на повторение, даже на этом базовом уровне. Я должен был указать детали шрифта, который хотел три раза. Разве не имеет смысла определить шрифт только один раз, а затем применить его к моим заголовкам? Вот версия CSS: 

 <HTML>  <HEAD>  <TITLE> A simple page </TITLE>  <STYLE TYPE="text/css">  <!--   H1 {  font-family: sans-serif;  color: #3366CC;  }   -->  </STYLE>  </HEAD>  <BODY>   <H1>First Title</H1>  <P>...</P>   <H1>Second Title</H1>  <P>...</P>   <H1>Third Title</H1>  <P>...</P>   </BODY>  </HTML>

Вся магия заключается в тегах <STYLE> в <HEAD> документа, где мы определяем наш голубой шрифт без засечек и применяем его к тегам <H1> в документе. Не беспокойтесь о синтаксисе; Я объясню это подробно через минуту. Между тем, теги <FONT> полностью исчезли из <BODY> , в результате чего наш документ выглядит намного менее загроможденным. Изменения в определении стиля в верхней части страницы влияют на все три заголовка, и любые другие заголовки, добавленные на страницу, также примут стиль.

Теперь, когда у вас есть представление о том, что делает CSS, позвольте мне объяснить различные способы использования стилей CSS в ваших документах HTML.

Добавление стилей CSS в документы HTML

Самый простой способ размещения стилей CSS на ваших веб-страницах — использовать <STYLE> , как я это делал в примере выше. Это позволяет объявлять любое количество стилей CSS, помещая их между открывающим <STYLE> и закрывающим </STYLE> следующим образом: 

 <STYLE TYPE="text/css">  CSS Styles here  </STYLE>

Атрибут TYPE указывает язык, который вы используете для определения своих стилей. CSS является единственным широко используемым языком на момент написания этой статьи и обозначается значением text/css . Другой язык, который поддерживается только в Netscape 4.x, называется таблицами стилей JavaScript (JSS) и определяется text/javascript . Однако из-за очень ограниченной совместимости JSS он редко используется.

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

 <STYLE TYPE="text/css">  <!--  CSS Styles here  -->  </STYLE>

Хотя тег <STYLE> приятен и прост, у него есть один существенный недостаток. В частности, если вы хотите использовать определенный набор стилей на своем сайте, вам придется повторять эти определения стилей в <STYLE> в верхней части каждой страницы вашего сайта.

Более разумная альтернатива — поместить эти определения в простой текстовый файл (обычно с именем файла .css ), а затем связать ваши документы с этим одним файлом. Любые изменения в определениях стиля в этом одном файле будут влиять на все страницы, ссылающиеся на него. Это обеспечивает нашу идеальную цель определения стилей для всего сайта, как мы упоминали ранее.

Чтобы связать документ с текстовым файлом CSS (скажем, styles.css ), поместите <LINK> в заголовок документа: 

 <LINK REL="STYLESHEET" TYPE="text/css" HREF="styles.css">

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

 <HTML>  <HEAD>  <TITLE> A simple page </TITLE>  <LINK REL="STYLESHEET" TYPE="text/css" HREF="styles.css">  </HEAD>  <BODY>   <H1>First Title</H1>  <P>...</P>   <H1>Second Title</H1>  <P>...</P>   <H1>Third Title</H1>  <P>...</P>   </BODY>  </HTML>

И файл styles.css будет содержать определение стиля: 

 H1 {  font-family: sans-serif;  color: #3366CC;  }

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

CSS селекторы

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

Селектор тегов

Самая основная форма селектора — это то, что мы уже видели. Присваивая имя определенному тегу HTML, вы можете применять определение стиля к каждому вхождению этого тега в документ. Это часто используется для установки основных стилей, которые будут появляться на всем сайте. Например, следующее может быть использовано для установки шрифта по умолчанию для веб-сайта: 

 BODY, P, TD, TH, DIV, BLOCKQUOTE, DL, UL, OL {  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;  font-size: 10pt;  color: #000000;  }

Этот довольно длинный селектор представляет собой список тегов, каждый из которых будет иметь определение стиля (шрифт, размер и цвет). Теоретически, тег BODY это все, что нужно (так как все остальные теги появляются внутри тега BODY и, таким образом, наследуют свойства), но многие браузеры неправильно переносят свойства стиля в таблицы и другие элементы, поэтому Я указал другие элементы ради полноты.

Селекторы псевдокласса

Форматирование тега <A> в HTML более универсально, чем для большинства других тегов. Указав VLINK LINK , VLINK и ALINK в теге BODY , вы можете установить цвета для различных состояний ссылок на вашей странице (не посещенных, посещенных и по которым щелкают соответственно). CSS предоставляет свой собственный способ сделать это и добавляет четвертое состояние, когда мышь находится над ссылкой. Рассмотрим следующий пример: 

 A:link { color: #0000FF; }  A:visited { color: #FF00FF; }  A:hover { color: #00CCFF; }  A:active { color: #FF0000; }

Этот код содержит четыре определения стиля CSS. Каждый из селекторов использует то, что называется псевдоклассом тега <A> . Первая относится ко всем ссылкам и указывает, что они должны быть синего цвета. Второе относится к посещаемым ссылкам и переопределяет первое определение, делая их пурпурными. Третье определение стиля переопределяет первые две, делая ссылки светло-голубыми, когда мышь над ними (обратите внимание на имя псевдокласса: hover ), независимо от того, были они посещены или нет. Окончательное определение стиля делает ссылки красными при нажатии. Так как он появляется последним, он переопределяет первые три, так что он вступит в силу независимо от того, были ли ссылки посещены или нет, и будет ли указатель мыши над ними или нет. Обратите внимание, что псевдокласс hover не поддерживается в Netscape 4.x (однако, Netscape 6 поддерживает его). 

  <A> - это единственный тег, имеющий псевдоклассы в соответствии с исходной спецификацией CSS1, и все четыре демонстрируются в приведенном выше примере.  Более новая спецификация CSS2, которая начинает видеть поддержку в последних браузерах, определяет несколько других псевдоклассов, большинство из которых связано с тем, как выглядят элементы при печати.


  Селекторы классов 





  Присвоение стилей тегам - это хорошо, но что произойдет, если вы захотите назначить разные стили одинаковым тегам в разных местах документа?  Вот где приходят классы CSS. Рассмотрим следующий стиль, который делает весь текст абзаца на странице синим: 



 P { color:#0000FF; } 


  А что если у вас на странице есть боковая панель с синим фоном?  Вы не хотели бы, чтобы текст на боковой панели также был синим, потому что он был бы невидимым!  Что вам нужно сделать, это определить класс для текста на боковой панели, а затем назначить стиль CSS для этого класса: 


 P { color: #0000FF; }  .sidebar { color: #FFFFFF; } 


  Это второе правило использует селектор класса, который указывает, что стиль должен применяться к любому тегу класса sidebar .  Точка указывает на то, что класс назван вместо тега.  Чтобы создать текстовый абзац класса sidebar , добавьте к тегу атрибут CLASS : 


 <P CLASS="sidebar">This text will be white, as specified by the CSS style definitions above.</P> 


  А что если в боковой панели есть ссылки?  По умолчанию они будут отображаться так же, как и любые другие ссылки на вашей странице;  однако добавьте к тегу атрибут CLASS="sidebar" , и они также станут белыми: 


 <P CLASS="sidebar">This text will be white, <A CLASS="sidebar" HREF="link.html">and so will this link</A>.</P> 


  Это довольно изящно, но что, если вы хотите, чтобы ссылки выделялись немного больше, отображая их жирным шрифтом?  Добавление атрибута полужирного текста к классу sidebar сделает всю вашу боковую панель жирным шрифтом.  Вам нужен CSS-селектор, который выбирает ссылки только класса боковой панели.  Комбинируя селектор тега с селектором класса, вы можете сделать именно это: 


 P { color: #0000FF; }  .sidebar { color: #FFFFFF; }  A.sidebar:link { font-weight: bold; } 


  Обратите внимание, что мы также использовали псевдокласс для указания тегов <A> которые являются ссылками (в отличие от тегов <A NAME> , которые не являются таковыми). 


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


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


  Наконец, вы можете обнаружить, что ссылка не отображается жирным шрифтом в Netscape 4.x из-за ошибки в этом браузере.  Альтернативный подход, который достигает того же самого эффекта, продемонстрирован в следующем разделе. 


  Контекстные селекторы 


  Если ваша боковая панель содержит много ссылок, становится утомительно присваивать класс sidebar каждому тегу <A> .  Вместо этого было бы неплохо использовать селектор, который выбрал любую ссылку, появляющуюся внутри абзаца класса sidebar ?  Вот для чего нужны контекстные селекторы: выбор тега на основе его контекста ;  то есть на основе тега (ов), которые его содержат. 


  Вот новый CSS: 


 P { color: #0000FF; }  .sidebar { color: #FFFFFF; }  P.sidebar A:link {  font-weight: bold;  color: #FFFFFF;  } 


  И вот обновленный HTML: 





            






 <P CLASS="sidebar">This text will be white, <A HREF="link.html">and so will this link</A>.</P> 


  Как вы можете видеть, контекстный селектор предоставляет список селекторов, разделенных пробелами, которые должны соответствовать тегам «извне».  В этом случае, поскольку ссылка (сопоставляемая селектором A:link P.sidebar находится внутри абзаца боковой панели (сопоставляемого селектором P.sidebar ), стиль применяется к ссылке. 


  Обратите внимание, что для сохранения ссылки белым, мы должны были добавить этот цвет в атрибуты CSS для ссылок, поскольку стиль для класса sidebar больше не применяется к ссылкам. 


  Селекторы ID 


  Подобно селекторам классов, селекторы идентификаторов используются для выбора одного конкретного тега, а не группы тегов.  Выбранный вами тег ID атрибутом ID следующим образом: 


 <P ID="sidebar1">This paragraph is uniquely identified by the ID "sidebar1".</P> 


  Селектор идентификатора - это просто идентификатор, которому предшествует хеш ( # ).  Таким образом, следующий стиль сделает вышеуказанный абзац белым: 


 #sidebar1 { color: #FFFFFF; } 


  Селекторы ID могут использоваться в сочетании с другими типами селекторов.  Например, следующий стиль применяется к ссылкам, появляющимся в абзаце sidebar1 : 


 #sidebar1 A:link {  font-weight: bold;  color: #FFFFFF;  } 


  Существуют и другие типы селекторов, но они не используются широко, и их поддержка в некоторых браузерах (особенно в Netscape 4.x) в лучшем случае ошибочна. 






  Атрибуты CSS 


  В примерах, использованных до сих пор в этом документе, я использовал несколько атрибутов CSS, таких как color , font-family , font-size и font-weight .  В этом разделе я сосредоточу ваше внимание на наиболее распространенных атрибутах CSS, поддерживаемых современными браузерами.  Если не указано иное, эти атрибуты должны работать в Netscape 4 или более поздней версии и MSIE 4 или более поздней версии. 


  Интересным аспектом CSS является то, что он позволяет достигать многих эффектов, которые невозможно воспроизвести с помощью обычного HTML.  Полный список атрибутов CSS1 (большинство из которых поддерживаются текущими браузерами) см. В главе 5 спецификации CSS1 .  Полный список атрибутов CSS2 (многие из которых поддерживаются текущими браузерами) см. В спецификации CSS2 . 


 border-color 


  Устанавливает цвет границы, окружающей выбранные элементы.  Цвета для каждой стороны могут быть установлены индивидуально в IE4 и NS6 или более поздних версиях, используя border-top-color , border-right-color , border-bottom-color и border-left-color . 


  Пример: .errormessage { border-color: #FF0000; } .errormessage { border-color: #FF0000; } 


 border-style 


  Устанавливает стиль рамки, окружающей выбранные элементы.  Стили, поддерживаемые браузерами 4.x, следующие: double , groove , inset , none , outset , ridge , solid .  Стиль для каждой стороны может быть установлен индивидуально в IE4 и NS6 или более поздних версиях с использованием border-top-style , border-right-style , border-bottom-style и border-left-style . 


  Пример: .framed { border-style: ridge; } .framed { border-style: ridge; } 





            






 border-width 


  Устанавливает ширину границы, окружающей выбранные элементы.  Стиль для каждой стороны может быть установлен индивидуально, используя border-top-width , border-right-width , border-bottom-width и border-left-width . 


  Пример: .thickborder { border-width: 3px; } .thickborder { border-width: 3px; } 


 margin 


  Устанавливает размер поля между внешней границей элемента (если есть) и окружающими элементами страницы.  Поля для каждой стороны могут быть установлены индивидуально с помощью margin-top , margin-right , margin-bottom и margin-left . 


  Пример: .spacedout { margin: 10px; } .spacedout { margin: 10px; } 


 padding 


  Устанавливает размер отступа между внутренней границей элемента (если есть) и самим элементом.  Заполнение для каждой стороны может быть установлено индивидуально, используя padding-top , padding-right , padding-bottom и padding-left . 


  Пример: .roomyborder { padding: 10px; } .roomyborder { padding: 10px; } 


 background-attachment 


  Указывает, прокручивается ли фоновое изображение элемента (в частности, тега BODY ) с этим элементом или остается фиксированным, когда содержимое элемента прокручивается по нему.  Этот атрибут может быть установлен на fixed или scroll .  Это не поддерживается в NS4. 


  Пример: BODY { background-attachment: fixed; } BODY { background-attachment: fixed; } 


 background-color 


  Устанавливает цвет фона выбранного элемента (ов).  Может быть установлен любой код цвета HTML или имя или transparent . 


  Пример: .highlighted { background-color: yellow; } .highlighted { background-color: yellow; } 


 background-image 


  Устанавливает фоновое изображение для выбранного элемента (ов).  Может быть установлен на URL (обратите внимание на синтаксис в приведенном ниже примере) или none . 


  Пример: .flowery { background-image: url(flowers.gif); } .flowery { background-image: url(flowers.gif); } 


 background-position 


  Не поддерживается в NS4, этот атрибут позволяет вам установить, где расположен фон элемента.  Для плиточных фонов это указывает верхний левый угол первой плитки.  Для фонов без мозаики (см. background-repeat ниже), это определяет положение верхнего левого угла фонового изображения.  Вы можете указать один или два процента, длины или позиции ( left , в center или right ), где первое указывает горизонтальное положение, а второе - вертикальное положение.  Если вертикальное положение не указано, оно принимается равным 50% . 





            






  Пример: 
 .flowermiddle {  background-image: url(flowers.gif);  background-position: center center;  background-repeat: no-repeat;  }   .watermark {  background-image: url(fadedlogo.gif);  background-position: 50px 50px;  background-repeat: no-repeat;  } 


 background-repeat 


  Устанавливает метод мозаики для фонового изображения выбранного элемента (ов).  Вы можете выбрать мозаику фона по горизонтали ( repeat-x ), по вертикали ( repeat-y ), в обе стороны ( repeat ) или вообще не делать ( repeat-x no-repeat ).  Этот атрибут не поддерживается NS4. 


  Пример: 
 TD.sidebar {  background-image: url(bar.gif);  background-repeat: repeat-y;  } 


 color 


  Устанавливает основной цвет выбранного элемента (ов).  Обычно это цвет текста внутри элемента. 


  Пример: 
 P.inverse {  color: white;  background-color: black;  } 


 list-style-type 


  Устанавливает тип списка для использования в <UL> или <OL> .  Для тегов <UL> доступны следующие типы: circle , disc и square .  Для тегов <OL> доступны следующие типы: decimal (1), lower-alpha (а), lower-roman (i), upper-alpha (A) и upper-roman (I). 


  Пример: UL { list-style-type: square; } UL { list-style-type: square; } 


 list-style-image 


  Позволяет указать URL-адрес изображения, которое будет использоваться в качестве маркеров в списке ( <DL> , <OL> , <UL> ) или для определенного элемента списка ( <DT> , <LI> ).  Параметр none для определенного элемента списка указывает, что вместо изображения должен использоваться маркер по умолчанию, и может переопределять изображение, указанное для списка в целом.  Этот атрибут не поддерживается NS4. 


  Пример: #listItem1 { list-style-image: url(fileicon.gif); } #listItem1 { list-style-image: url(fileicon.gif); } 


 list-style-position 


  Устанавливает, будет ли маркер списка (маркер или номер) помещаться inside или outside поля, обведенного текстом элемента списка.  Другой способ взглянуть на этот атрибут состоит в том, что установка параметра inside приводит к переносу текста в начало строки, тогда как настройка outside приводит к переносу текста на первый символ после маркера списка в первой строке.  Этот атрибут не поддерживается NS4. 


  Пример: OL { list-style-position: inside; } OL { list-style-position: inside; } 


 font-family 


  Устанавливает шрифт / шрифт, который будет использоваться в выбранных элементах.  Выполняет ту же функцию, что и атрибут FACE тега <FONT> .  Значение должно быть разделенным запятыми списком имен шрифтов в порядке предпочтения, с именами шрифтов, содержащими пробелы с кавычками вокруг них.  Как и в <FONT> , последним элементом в списке шрифтов обычно должно быть «общее» имя шрифта, выбранное из следующего: serif , sans-serif , cursive , fantasy или monospace . 


  Пример: P { font-family: "Times New Roman", Times, serif; } P { font-family: "Times New Roman", Times, serif; } 





            






 font-size 


  Определяет размер шрифта, который будет использоваться в выбранных элементах.  Вы можете указать размер шрифта, используя один из доступных пресетов: xx-small , x-small , small , medium , large , x-large , xx-large .  Предустановки larger и smaller также могут использоваться для установки размера шрифта относительно размера, унаследованного от родительского элемента, или по умолчанию в браузере.  Кроме того, вы можете указать размер шрифта в пикселях ( px ), точках ( pt ), ems ( em ) или в процентах от размера шрифта родительского элемента ( % ). 


  Пример: .navbar { font-size: 8px; } .navbar { font-size: 8px; } 


 font-style 


  Указывает, должен ли шрифт отображаться как обычно ( normal ) или курсивом ( italic ) в выбранных элементах. 


  Пример: EM { font-style: italic } 


 font-variant 


  Может использоваться для отображения всего текста заглавными буквами, причем строчные буквы исходного кода отображаются меньшим шрифтом.  Параметр small-caps включает этот эффект, в то время как normal отключает его.  NS4 не поддерживает этот атрибут. 


  Пример: H1 { font-variant: small-caps; } H1 { font-variant: small-caps; } 


 font-weight 


  Устанавливает жирность шрифта в выбранных элементах.  Большинство браузеров действительно поддерживают только normal и bold , но спецификация CSS определяет следующие значения: bold , bolder , lighter , normal , 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 , где normal - то же самое, что и 400 , а bold - то же, что 700 . 


  Пример: B { font-weight: bolder; } B { font-weight: bolder; } 


 letter-spacing 


  Определяет интервал между символами в выбранных элементах.  Значение normal использует интервал по умолчанию, в то время как положительные и отрицательные измерения ( pt , em , px ) могут использоваться для уменьшения или уменьшения расстояния соответственно.  Этот атрибут не поддерживается NS4. 


  Пример: .tight { letter-spacing: -0.1em } 


 text-align 


  Устанавливает горизонтальное выравнивание текста в выбранных элементах по left , right краю, center или justify .  Параметр justify отображается как left в NS4 для Windows и IE4 для Macintosh. 


  Пример: .newscolumn { text-align: justify; } .newscolumn { text-align: justify; } 


 text-decoration 


  Устанавливает визуализацию текста в выбранных элементах с одним из нескольких эффектов, включая underline , overline , line-through или none .  NS4 игнорирует настройку overline . 





            






  Пример: A:link { text-decoration: none; } A:link { text-decoration: none; } 


 line-height 


  Определяет межстрочный интервал для текста внутри выделенных элементов.  Допустимые значения включают normal (по умолчанию в браузере), число (где 1 - один интервал, 2 - двойной интервал, а 1.5 - посередине между двумя), измерение ( px , pt , em ) или процент (где 100% это одинарный интервал).  Тщательно проверяйте этот атрибут, когда используете его в своих проектах, так как он содержит ошибки в браузерах версии 4. 


  Пример: .doublespace { line-height: 2; } .doublespace { line-height: 2; } 


 text-indent 


  Устанавливает отступ (или отступ, в случае отрицательного значения) первой строки текста в выбранных элементах.  Значением может быть измерение ( px , pt , em ) или процент от ширины родительского элемента. 


  Пример: P.story { text-indent: 3em; } P.story { text-indent: 3em; } 


 text-transform 


  Устанавливает заглавные буквы текста в выбранных элементах.  Значение none указывает, что текст должен начинаться с заглавной буквы, как в исходном коде.  прописная буква устанавливает первую букву каждого слова в верхний регистр.  lowercase и uppercase преобразуют все буквы в указанный регистр. 


  Пример: H1 { text-transform: capitalize; } H1 { text-transform: capitalize; } 


 vertical-align 


  Устанавливает вертикальное выравнивание текста в выбранных элементах ( bottom или top ) или выбранных элементах в отношении окружающего текста ( baseline , middle , sub , super , text-bottom или text-top ). 


  Пример: .superscript { vertical-align: super; text-size: smaller } .superscript { vertical-align: super; text-size: smaller } 






  Резюме и дальнейшее чтение 


  Видеть?  Разве CSS не легок?  В этой статье я представил очень подробное введение в CSS;  однако для краткости я упустил многие из более продвинутых функций селектора и атрибутов стиля этого мощного языка форматирования.  Хотя вы могли бы отсортировать спецификации CSS1 и CSS2 по адресу http://www.w3.org , многие из расширенных функций, описанных в этих спецификациях, в текущих браузерах не поддерживаются.  В частности, спецификация CSS2 реализована лишь наполовину даже в самых современных браузерах.  Функции, связанные с презентацией и печатью на слух, просто не были приоритетом для производителей браузеров, даже если они были в официальной спецификации в течение многих лет. 


  Лучше было бы выбрать хорошую книгу на эту тему.  Я рекомендую Dynamic HTML: The Definitive Reference от O'Reilly, но есть множество других вариантов, все отлично.  Просто убедитесь, что ваш выбор включает информацию о совместимости браузера для каждой обсуждаемой функции.  Это избавит вас от долгих часов, почесывая голову, когда что-то не работает, как ожидалось.

36
Share: