Авторизация:

Вы здесь: Главная  >  CSS  >  CSS Основы  >  CSS (Каскадные таблицы стилей) первые шаги

CSS (Каскадные таблицы стилей) первые шаги

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;}

Псевдо элементы {}

Пример:

a:link, a:visited { outline:none; text-decoration: underline; font-weight: normal; color: #fff; }

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):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.