CSS (Каскадные таблицы стилей) первые шаги
CSS служит для того чтобы из вашего сайта сделать конфетку, в html со стилями все очень туго, те инструменты которые имеются у html, не могут раскрыть полный потенциал сайта и что же тогда делать? Тогда к нам на помощь приходит CSS. Схема синтаксиса такова:
Селектр {свойство:значение;}
Селектр – это указатель обрещения к элементу, он может быть тегом, идентификаторм, классом и т.д.
Свойство - это как атрибут, мы задаём, что мы хотим сделать с данным селектром.
Значение - это как вы могли уже понять, как мы будем менять данный селектор.
Существует несколько способов использования css, первый это написать в нужном нам теге атрибут style.
Пример: Тут мы задаем размер шрифта в пунктах.
<font style="font-size: 12 pt">Text</font>
Второй вариант использовать теги <style></style>
<style> <Селектор> { <Атрибут 1>: <Значение 1>; ..., <Атрибут N>: <Значение N> } <Селектор> { <Атрибут 1>: <Значение 1>; ..., <Атрибут N>: <Значение N> } </style>
Тут вы можете указывать столько селекторов со свойствами и значениями, сколько вам нужно.
В параметре <Селектор> могут быть указаны следующие селекторы:
* - все теги. Уберем все внешние и внутренние отступы:
*{margin:0; padding:0}
Тег - все теги, имеющие указанное имя:
font { font-size: 12pt; color:green; font-family: "Arial" } ... <font>Текст2</font><!-- Зеленный текст -->
.Класс - все теги, имеющие указанный класс:
.text1 { font-size:12pt; color:red; font-family: "Arial" } ... <font class="text1">Текст1</font> <!-- Красный текст --> <p class="text1">Текст2</p> <!-- Красный текст -->
И "Текст1" и "Текст2" будут красного цвета, хотя они находятся в разных тегах;
Тег.Класс - все теги, имеющие указанный класс:
font.text2 { font-size: 12pt; color: blue } ... <font class="text2">Текст1</font> <!-- Синий текст -->
Обратите внимание, что если имя класса указать в другом теге, то он будет не определен:
<p class="text2">Текст2</p>
В данном случае фрагмент текста "Текст2" не будет отображен синим цветом, так как имя класса text2 применяется только к тегу <font>;
#индентификатор - тег с указанным идентификатором:
#txt1 { color:red} ... <p id="txt1">Текст</p>
Тег#Индентификатор - индентификатор, указанный в определенном теге:
p#txt1 { color: red; } ... <p id="txt1">Текст</p>
Если идентификатор находится в другом теге, то элемент будет проигнорирован.
Стилевой класс можно привязать сразу к нескольким тегам. В этом случае селекторы указываются через запятую:
h1, h2 { font-family:"Arial" }
Привязаться к другим элементам можно следующим способами:
Селектор1 Селектор2 - все элементы, соответствующие параметру Селектор2, которые располагаются внутри контейнера, соответствующего параметру Селектор1:
div a {color: red}
Цвет текста ссылки станет красным, если тег <a> находится внутри тега <div>:
<div><a href="link.html">Ссылка</a></div>
Селектор1 > Селектор2 - все элементы, соответствующие параметру Селектор2, которые являются дочерними для контейнера, соответствующего параметру Селектор1:
div > a {color:red}
Цвет текста ссылки станет красным, если тег <a> находится внутри тега <div> и не вложен в другой тег:
<div> <a href="link1.html">Ссылка 1</a> <br> <span><a href="link2.html">Ссылка 2</a></span> </div>
В этом примере только первая ссылка станет красного цвета, так как вторая ссылка расположена внутри тега <span>;
Web-браузер Internet Explorer поддерживает селектор, начиная с версии 7.0
Селектор1 + Селектор2 - элемент, соответствующий параметру Селектор2, который является соседним для контейнера, соответствующего параметру Селектор1, и следует сразу после него:
div + a {color:red}
Цвет текста ссылки станет красным, если тег <a> следует сразу после элемента div:
<div>Текст</div><a href="link.html">Ссылка</a>
Web-браузер Internet Explorer поддерживает селектор, начиная с версии 8.0.
При необходимости можно составлять выражения из нескольких селекторов:
div span a {color: red}
Цвет текста ссылки станет красным, если тег <a> расположен внутри тега <span>, а тот в свою очередь вложен в тег <div>:
Для привязки к параметрам тегов применяются следующие селекторы:
[Параметр] - элементы с указанным параметром:
a[id] {color:red}
Цвет текста ссылки станет красным, если тег <a> имеет параметр id:
<a id="link1" href="link1.html">Ссылка 1</a>
[Параметр="Значение"] - элементы, у которых параметр точно равен значению:
a[href="link1.html"] {color: red}
Цвет текста ссылки станет красным, если параметр href тега <a> имеет значение "link1.html";
[Параметр^='Значение'] - элементы, у которых параметр начинается с указанного значения:
a[href^='li'] {color: red}
Цвет текста сслыки сттанет красным, если значение параметра href тега <a> начинается с "li";
[Параметр$='Значение'] - элементы, у которых параметр оканчивается указанным значением:
a[href$=".html"]{color:red}
[Параметр*="Значение"] - Элементы, у которых параметр содержит указанный фрагмент значения:
a[href*="link"]{color:red}
В качестве селектора могут быть также указаны следующие псевдоэлементы:
:first-letter - задает стиль для первой буквы.
:first-line - задает стиль для первой строки.
:before и :after - позволяет добавить текст в начало и конец элемента соотвественно. Добавляемый текст должен быть указан в атрибуте content:
p:before{content:"before"} p:after{content:"after"}
Результат: before Текст after
Web-браузер Internet Explorer поддерживает псевдоэлементы :before и :after начиная с версии 8.0.
Применение стилей позволяет задавать точные характеристики практически всех элементов Web-страницы, а это значит, что можно точно контролировать внешний вид Web-страницы в окне Web-браузера.
Значение параметра style (font-size:12 pt) называется определением стиля или стилем. Элемент определения стиля (font-size) называется атрибутом. Каждый атрибут имеет зачение (12pt), указываемое после двоеточия. Совокупность определений стилей, вынесенных в заголовок HTML-документа или в отдельный файл, называют таблицей стилей.
Пример:
body { background: #f29f1f; font-family: Tahoma; Arial, sans-serif; line-height: 1.3em; margin: 0; padding: 0; font-size: 12px; color: #444444; }
Body – это тег к которому мы присваеваем стили, получается, что тег body у нас будет являться родителем, а те теги которые будут находится внутри него дочерними и стили родителя будут передаваться и дочерним тегам.
Класс {}
Пример:
body.contentpane{background: #f8f8f8;}
Псевдо элементы {}
Пример:
Link – посещенная ссылка;
Visited – не посещенная;
Active – активные ссылки.
Селектор id {}
Пример:
#modlgn remember { border:0; } div #wrapper { padding: 2px 0px; width: 900px; margin: 0 auto; }
Селектор параметров {}
Пример:
input[type=”checkbox”], input[type=”radio”] { background: transparent; border: none; }
Дочерний селектор {}
Пример:
p>strong{…}
Background – фон страницы;
Color – цвет текста;
Font-size – размер шрифта;
Font-family – тип шрифта;
Font-weight – жирный;
Text-align – выравнивание элементов;
Дорогие друзья, сегодня я вам поведал конечно не все про CSS, это только малая часть, вы могли прочитав эту статью многое не понять, но поверьте чем вы больше будете ознакамливаться с новыми материалами по этой теме тем больше вам будет раскрываться эта дверь, дерзайте. Спасибо за внимание. :)
Дата создания: 28.01.2016 13:04:47
Автор: Максим Фёдоров
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.