Объект – это неупорядоченная коллекция свойств. Свойство – это часть объекта имитирующая переменную. Свойство состоит из имени и значения.

В JavaScript есть три категории объектов:

• Объекты базового типа – это объекты, определённые в спецификации ECMAScript. Например, объекты типа Array , Function , Date или RegExp являются объектами базового типа.
• Объекты среды выполнения – это объекты, определённые в среде выполнения (такой как браузер). Например, объекты типа HTMLElement , являются объектами среды выполнения.
• Пользовательские объекты – это любой объект, созданный в результате выполнения программного кода JavaScript.

Создание объекта

Объект можно создать с помощью литерала объекта или оператора new с конструктором.

Литерал объекта – это заключённый в фигурные скобки список из нуля или более свойств (пар имя: значение), разделённых запятыми. Именем свойства может быть любой допустимый идентификатор, строковой литерал (допускается использовать пустую строку) или число. Числовые имена свойств автоматически преобразуются в строки. Значением свойства может быть значение любого типа или выражение (значением свойства в этом случае станет результат вычисления выражения):

// Создание пустого объекта var o = {}; // Создание объекта с тремя свойствами var user = { name: "Homer", "age": 45, 1: true };

Создание объекта с помощью оператора new :

Var o = new Object();

Операции с объектом

Основные операции производимые с объектами – это добавление новых свойств, изменение уже существующих свойств, удаление свойств и обращение к свойствам.

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

Обращение к свойству и изменение значения осуществляется точно так же (с помощью операторов доступа):

Var o = {x:5}; alert(o.x); // Обращение к свойству alert(o["x"]); // Обращение к свойству o.x = 10; // Изменяем значение

Удаление свойства осуществляется с помощью оператора delete :

Var o = {x:5}; alert("x" in o); // true delete o.x; alert("x" in o); // false

Для перебора свойств объекта используется цикл for-in :

Var obj = {x: 5, y: 10, str: "Hi!"}; for (var prop in obj) { alert(prop); }

Методы объекта

Свойство, значением которого является функция, называется методом . Вызов метода осуществляется точно также, как и вызов обычной функции – с помощью оператора () (оператор вызова):

Var o = { sayHi: function() { alert("Hello!"); } }; o.sayHi(); // "Hello!"

Для доступа к свойствам объекта внутри метода используется ключевое слово this . Оно содержит ссылку на объект, с помощью которого был вызван метод:

Var o = { name: "Homer", sayName: function() { alert(this.name); } }; o.sayName(); // "Homer"

Вместо ключевого слова this можно использовать непосредственно имя объекта, но это не очень удобно, так как, если изменится имя объекта, в методах придётся также изменять имя:

Var o = { name: "Homer", sayName: function() { alert(o.name); } }; o.sayName(); // "Homer"

JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name (or key ) and a value. A property"s value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.

Objects overview

Objects in JavaScript, just as in many other programming languages, can be compared to objects in real life. The concept of objects in JavaScript can be understood with real life, tangible objects.

In JavaScript, an object is a standalone entity, with properties and type. Compare it with a cup, for example. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc. The same way, JavaScript objects can have properties, which define their characteristics.

Objects and properties

A JavaScript object has properties associated with it. A property of an object can be explained as a variable that is attached to the object. Object properties are basically the same as ordinary JavaScript variables, except for the attachment to objects. The properties of an object define the characteristics of the object. You access the properties of an object with a simple dot-notation:

ObjectName.propertyName

Like all JavaScript variables, both the object name (which could be a normal variable) and property name are case sensitive. You can define a property by assigning it a value. For example, let"s create an object named myCar and give it properties named make , model , and year as follows:

Var myCar = new Object(); myCar.make = "Ford"; myCar.model = "Mustang"; myCar.year = 1969; myCar.color; // undefined

Properties of JavaScript objects can also be accessed or set using a bracket notation (for more details see property accessors). Objects are sometimes called associative arrays , since each property is associated with a string value that can be used to access it. So, for example, you could access the properties of the myCar object as follows:

MyCar["make"] = "Ford"; myCar["model"] = "Mustang"; myCar["year"] = 1969;

An object property name can be any valid JavaScript string, or anything that can be converted to a string, including the empty string. However, any property name that is not a valid JavaScript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation. This notation is also very useful when property names are to be dynamically determined (when the property name is not determined until runtime). Examples are as follows:

// four variables are created and assigned in a single go, // separated by commas var myObj = new Object(), str = "myString", rand = Math.random(), obj = new Object(); myObj.type = "Dot syntax"; myObj["date created"] = "String with space"; myObj = "String value"; myObj = "Random Number"; myObj = "Object"; myObj[""] = "Even an empty string"; console.log(myObj);

Please note that all keys in the square bracket notation are converted to string unless they"re Symbols, since JavaScript object property names (keys) can only be strings or Symbols (at some point, private names will also be added as the class fields proposal progresses, but you won"t use them with form). For example, in the above code, when the key obj is added to the myObj , JavaScript will call the obj.toString() method, and use this result string as the new key.

You can also access properties by using a string value that is stored in a variable:

Var propertyName = "make"; myCar = "Ford"; propertyName = "model"; myCar = "Mustang";

Using a constructor function

Alternatively, you can create an object with these two steps:

1. Define the object type by writing a constructor function. There is a strong convention, with good reason, to use a capital initial letter.
2. Create an instance of the object with new .

To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called Car , and you want it to have properties for make, model, and year. To do this, you would write the following function:

Function Car(make, model, year) { this.make = make; this.model = model; this.year = year; }

Notice the use of this to assign values to the object"s properties based on the values passed to the function.

Now you can create an object called mycar as follows:

Var mycar = new Car("Eagle", "Talon TSi", 1993);

This statement creates mycar and assigns it the specified values for its properties. Then the value of mycar.make is the string "Eagle", mycar.year is the integer 1993, and so on.

You can create any number of Car objects by calls to new . For example,

Var kenscar = new Car("Nissan", "300ZX", 1992); var vpgscar = new Car("Mazda", "Miata", 1990);

An object can have a property that is itself another object. For example, suppose you define an object called person as follows:

Function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; }

and then instantiate two new person objects as follows:

Var rand = new Person("Rand McKinnon", 33, "M"); var ken = new Person("Ken Jones", 39, "M");

Then, you can rewrite the definition of Car to include an owner property that takes a person object, as follows:

Function Car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; }

To instantiate the new objects, you then use the following:

Var car1 = new Car("Eagle", "Talon TSi", 1993, rand); var car2 = new Car("Nissan", "300ZX", 1992, ken);

Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects rand and ken as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:

Car2.owner.name

Note that you can always add a property to a previously defined object. For example, the statement

Car1.color = "black";

adds a property color to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the Car object type.

Using the Object.create method

See also

• To dive deeper, read about the details of javaScript"s objects model .
• To learn about ECMAScript 2015 classes (a new way to create objects), read the JavaScript classes chapter.

Приветствую всех, кто читает данную публикацию. Сегодня я хочу разобрать с вами ключевой инструмент языка – объекты JavaScript. Напомню, что js является кроссбраузерным и функционирует во всех ОС (windows, mac os и т.д.). В отличие от объектно-ориентированных языков программирования, в js реализация объектов значительно отличается от привычного функционала и вариаций использования экземпляров, например, в C#.

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

Что из себя представляет объект в JavaScript и какими возможностями обладает?

В js объектами являются простые ассоциативные массивы (их еще также называют хэшами).

Что же такое ассоциативный массив?

Это структура данных, в которой хранится какое-то количество информации, относящееся и описывающее определенный элемент. Все данные структурированы и связаны между собой как «ключ =>значение».

К примеру, вам нужно описать автомобили. Тогда вы создаете объект avto и описываете в массиве его характеристики. Я решил описать марку машины (name), ее цвет (color) и стоимость (price). Ниже я прикрепил код реализации описанного задания.

1 2 3 4 5

var avto = { name: "BMW 116i", color: "black", price: 588000 };

var avto = { name: "BMW 116i", color: "black", price: 588000 };

Вот вы видите один из способов создания объекта с именем «avto». Name, color и price являются ключами, по которым в ходе написания приложения можно будет обращаться.

Этим примером я забежал вперед, поэтому сейчас разберем все по порядку.

Создать объект можно несколькими способами:

var avto = {}; или var avto = new Object ();

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

Все про свойства

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

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

Таким образом, можно сразу создать все ключи или же объявлять их по мере поступления. И даже если в ходе написания программы вы обратитесь к несуществующим ключам, ошибки не будет. В этом случае вернется “undefined”.

Первый способ.

Создание и обращение к свойствам через точку. Для реализации такого варианта нужно написать имя объекта, а после через точку приписать к нему наименование ключа и далее через знак равно присвоить какое-то значение:

avto.name = “ BMW 116i”

А вот в такой способ к существующим ключам вы добавите еще один элемент:

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

Второй способ.

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

avto[“name”] = “ BMW 116i”

А приятным добавлением является возможность создавать наименование свойств в виде любой строки. К примеру,

avto[“name of the car”] = “ BMW 116i”

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

var avto = {}; avto.name = "BMW_116i"; avto.price = 588000; var key = "price"; // была запрошена цена машины alert(avto);

Теперь перейдем к удалению свойств. Здесь все очень просто. Для удаления используется команда delete . Так, если к последнему примеру снизу дописать вот такие 2 строки:

delete avto.price;

alert (avto);

То с вызовом alert во второй раз диалоговое окно выдаст “undefined”.

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

На текущем этапе я вам рассказал, как создать объект и описать его свойства. К этому я прикрепил контрольные примеры, однако самые внимательные из вас, дорогие читатели, заметили, что первый программный код несколько отличается от всех остальных.

А все потому что там используется компактное представление данных. Это очень популярный метод объявления ключей, так как он короче при написании и легче воспринимается визуально.

Давайте-ка переберем наши свойства

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

Если вы знакомы с другими языками программирования, то знаете, что чаще всего циклы создаются при помощи слова for , далее в круглых скобках прописывается условие перебора элементов.

В js оно напоминает своим внешним видом цикл foreach из языка C#. Ознакомьтесь с общим видом конструкции:

for (var obj in object) { // выполнение перебора}

где obj отвечает за название перечисляемых ключей,

object – за их значения.

А теперь вот вам конкретный примерчик.

1 2 3 4 5 6 7 8

var avto = { name: "BMW 116i", color: "black", price: 588000 }; for (var obj in object) { alert(obj + ":" + object) }

var avto = { name: "BMW 116i", color: "black", price: 588000 }; for (var obj in object) { alert(obj + ":" + object) }

Настало время познакомиться с методами

В скриптовом языке предусмотрено создание методов. Это абсолютно простой механизм, с помощью которого в любое время к любому объекту можно дописать метод или методы, которые расширяют возможности созданных ассоциативных массивов. Их также называют свойствами-функциями.

Js сам по себе очень динамичный и удивительный в какой-то степени. Это заключается в том, как можно создавать элементы разных типов. При изучении этого языка не нужно запоминать сложных конструкций, так как множество объявлений очень схожи между собой.

Так, для создания метода, нужно объявить объект, а после начать писать команду, точь-в-точь напоминающую создание свойств. Однако после «=» пишется уже не значение, а ключевое слово function (переменная). А далее в фигурных скобках ведется перечисление действий.

Вот реализация данного механизма:

var avto ={} avto.name = “BMV” avto.year = 1999 avto.drive = function(k) { alert(«Автомобиль проехал»+n+« км. »)} avto.drive(300) avto.drive(450)

Как видите, этот пример содержит свойства и методы, вызов которых изначально идентичен.

В JS есть еще и конструкторы?

Так точно! В этом языке все, что использует ключевое слово «new », автоматически становится конструктором. Так, выше вы видели объявление пустого объекта в виде: avto = new Object ();. Это и есть конструктор.

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

var bob = new Object ();

bob.name = «Bob Smith»;

Однако это не весь арсенал возможностей. В js можно создавать свои собственные конструкторы и после использовать их для объявления новых объектов.

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

function Avto (name, price) {

this.name = name;

this.price = price;

Теперь при создании неограниченного количества объектов и применения к ним этого конструктора, все они будут относиться к одному классу. Например:

var car1 = new Avto («BMW», 650000);

var car2 = new Avto («Audi», 520000);

В добавок к этому внутри конструктора можно создавать методы.

Особенности наследования в JavaScript

Обычно во многих языках наследование основывается на классах, которые могут наследовать друг друга. Тогда можно услышать такие выражения, как «класс-предок», «дочерний класс» и т.д.

Однако в js все иначе. Здесь наследуются объекты.

Все наследование основывается на внутренней ссылке между объектами, которая известна под именем «прототип». Если к методу приписать через точку «.prototype», а далее прописать имя прототипа, то все объекты выбранного метода будут наследоваться от этого прототипа.

Перейдем к примеру.

function Transport (name) { this.name = name this.canDrive = true } var transport = new Transport ("avto") // создали объект transport function Bike (name) { this.name = name } Bike.prototype = transport // указываем, что все новые объекты этого класса будут использовать в качестве прототипа transport bike1 = new Bike ("for_sport") bike2= new Bike ("for_child") console.log(bike1.name) console.log(bike2.name) console.log(bike1.canDrive)

На этом я, пожалуй, закончу. Я рассказал вам о фундаментальных аспектах скриптового языка. Однако это только поверхностные знания. Далее будем углубляться. А пока не забывайте вступать в ряды моих подписчиков и делиться ссылкой на статью с друзьями. Удачи!

Пока-пока!

С уважением, Роман Чуешов

Прочитано: 97 раз

С помощью CSS селекторов мы выбираем какие конкретно элементы на сайте стилизовать. О чем нам говорит эта запись?

H1 { color: red; } = селектор { свойство: значение }

Заголовку h1 присвоить красный цвет.

На этом уроке мы разберем основные виды CSS селекторов:

1. Селектор тегов
2. Селектор-идентификатор
3. Селектор классов
4. Селектор атрибутов
5. Универсальный селектор
6. Комбинированные селекторы

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

Пишется название тега без угловых кавычек.

H1 { ..
}

Давайте заглянем в консоль инструментов для разработчика какого-нибудь сайта.

На скриншоте отчетливо видно, что для селектора тега h1 задано свойство с конкретным значением (font-size: 34px;) по размеру шрифта. Те или иные значения свойств можно задать любому тегу на веб-сайте. Однако, проблема заключается в том, что теперь на сайте все заголовки h1 будет размером в 34 пикселя. Если мы так и задумали, то все ОК, а если нет, например на другой странице по задумке дизайнера, заголовок h1 должен быть 40 пикселей. Тогда переходим к следующему виду CSS селекторов .

2.Селектор классов

Вот этому особенному заголовку h1 размером в 40 пикселей присваиваем свой класс с произвольным название, например: "big" .

В HTML -документе:

Заголовок

Мы помечаем на HTML -странице только заголовки размером 40 пикселей классом "big" .

В файле CSS стилях:

Big { font-size: 40px; }

Перед названием класса всегда ставится точка, .big – селектор класса. Может применяться на сайте много раз. В случае, если мы точно знаем, что заголовок h1 размером 40 пикселей будет в единственном экземпляре. Переходим к следующему типу CSS селекторов .

3.Селектор-идентификатор

В отличии от классов применяется на сайте всего один раз и вместо точки ставится решетка # .

В HTML -документе:

Заголовок

В файле CSS стилях:

#big { font-size: 40px; }

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

Желательно id использовать для якорей или для скриптов. Старайтесь при верстке использовать только классы.

4.Селекторы атрибутов

Чаще всего селекторы атрибутов используются в формах, так как поля форм содержат атрибуты с разными значениями. Например наша форма содержит два поля с логином и паролем.

В HTML -документе:

Логин

Пароль

В файле CSS стилях:

/* Зададим фоновый цвет #fcf8e3; полю для ввода логина */
input {
background-color: #fcf8e3;
}
/* Зададим фоновый цвет #f2dede; полю для ввода пароля */
input {
background-color: #f2dede;
}

У нашей формочки поле для логина покрасится в желтый цвет, а поле для пароля – в розовый. Селекторы атрибутов записываются в квадратные скобки элемент [атрибут] .

5.Универсальный селектор

В общем случае синтаксис универсального селектора будет такой. Суть его состоит в том, что он применяет стили сразу ко всем элементам сайта. Раньше он использовался для того, чтобы обнулить все стили для элементов сайта. Например отступы, поля для того, чтобы в каждом браузере сайт изначально смотрелся одинаково. Верстальщик ставил универсальный селектор, обнулял маржины и паддинги, это устаревший уже способ.

* { margin: 0;
padding: 0;
}

Но сейчас все используют normalize.css с GitHub .

6.Комбинированные селекторы

Это CSS селекторы состоящие из нескольких селекторов. Рассмотрим самые распространенные типы комбинированных селекторов.

Мультиклассы

К тегу можно одновременно добавить несколько классов. Берется значение класса, стоящего в коде ниже.

В HTML -документе:

Заголовок

В файле CSS стилях:

Big1 { font-size: 34px;}
.big2 { font-size: 40px;}

К заголовку h1 применится значение класса big2 , он стоит ниже.

Вложенный селектор

Задаются через пробел. Очень знакома ситуация, когда внутри абзаца выделяется какое-нибудь слово курсивом.

Пример такого варианта выделения

P i {
font-style: italic; /* курсив */
}

Здесь

это родительский тег, а - дочерний тег, расположенный в контейнере

. В этом случае стиль будет применяться к тегу .

Дочерний селектор

div > span {..}

Тег span является ребенком, а div – родителем. Значение стиля всегда применяется к ребенку, если он прямой потомок и непосредственно расположен в контейнере родителя.

Соседний селектор

Соседними называются элементы страницы, когда они идут друг за другом.

B + i { color: gray; }

Тебе так идет серый цвет, особенно в сочетании с розовым.

А чтобы научиться применять ваши знания на практике, рекомендую ознакомиться с моим курсом

1. Что такое каскадные таблицы стилей css?

Итак, что же такое каскадные таблицы стилей css?

css (англ. Cascading Style Sheets - каскадные таблицы стилей ) - язык описания внешнего вида документа, написанного с использованием языка разметки. Что бы было проще понять новичку - каскадные таблицы стилей css предназначены для создания красивого, легкого в редактировании дизайна html страничек сайтов.

Впервые каскадные таблицы стилей стали использовать в 90-х годах прошлого столетия. Но поначалу они не были столь популярны как сейчас, потому, что разные браузеры по разному воспринимали и выводили html странички, в которых использовались css.

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

Мои наблюдения!!! По моим личным наблюдениям, такие последние версии браузеров, как Opera, Mazilla ForeFox, Maxthon, Google Chrome и Internet Explorer практически одинаково покапоказывают странички, в которых используются каскадные таблицы стилей, но если браузеры не последних поколений, то и сами странички сайтов будут выглядеть по другому. И для того, что бы Ваш сайт выглядел одинаково практически во всех браузерах, есть специальные технологии задания каскадных таблиц стилей.

Итак, давайте приступим к созданию новой таблицы стилей и подключим ее к нашему документу.

2. Как создать каскадную таблицу стилей css?

В этой части статьи мы создадим и подключим каскадную таблицу стилей к самой простой html страничке.

Итак, делаем так:

1. Создаем папку, в которой будут наша html страничка, и каскадная таблица стилей. Пусть, моя папка будет называться "css"

2. Создаем простую html страничку (index.html). Как это делается можете прочитать здесь.

3. Теперь создаем простой текстовый документ (аналогично созданию html странички), только называем его style.css.

В результате у Вас должно получиться вот что:

Все, файл который будет содержать в себе стили css готов.

Теперь давайт подключим созданную стаблицу стилей к файлу index.html.

3. Как подключить каскадную таблицу стилей css?

Итак, для того что бы подключить таблицу стилей к html страничке, необходимо в файле index.html в теге прописать тег:

Здесь, в атрибуте href="style.css" прописан путь к самому файлу со стилями css. В этом случае файл css и index.html находится в одной папке.

Например, если наш файл index.html будет иметь такой код:

Важно!!! Кстати, не забудьте при сохранении в блокноте файла index.html поставить кодировку 1251 (ANSI-кириллица). Так как если это не сделать и файл сохранить в другой кодировке, то браузер вместо текстов покажет Вам "каракули".

Если же все будет сделано и сохранено правильно, то в браузере Вы увидете следующее:

Вот и все, файл index.html создан, а так же к нему подключены таблицы стилей css.

Теперь давайте проверим работу таблиц стилей css.

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

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

Скачайте архив bg.zip, разархивируйте его и поместите файл bg.jpg в папку css. У Вас должно быть так:

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

body { background-image:url(bg.jpg); background-color:#f6f6f6; margin-top:0px; margin-bottom:0px; font-family:Verdana; font-size:12px; color:#000066; }

body {...} - задание стилей css для тега

background-image:url(bg.jpg); - фоновое изображение, где в параметре url(...jpg) указывается полный путь к изображению, которое будет фоновым

background-color:#f6f6f6; - фон тела документа (тега ). Этот атрибут включается в тех случаях, если в браузере посетителя отключены изображения

margin-top:0px; - расстояние от тела документа до верхней части браузера. В этом случает каскадные таблицы стилей css задают расстояние 0 px.

margin-bottom:0px; - расстояние от тела документа до нижней части браузера. В этом случает каскадные таблицы стилей css задают расстояние 0 пикселей

font-family:Verdana; - установка шрифта для документа по умолчанию

font-size:12px; - размер шрифта документа 12 пикселей

color:#000000; - цвет текста. В этом случае таблицы стилей css задают цвет шрифта - темно синий.

После того, как Вы сохраните файл style.css, в браузере Вы увидите следующее:

О технологии CSS. Стили CSS

Введение в CSS. Стили Способы применения стилей: Внутренние стили Глобальный стили Связанные/внешние стили Вы приступили к изучению каскадных таблиц стилей CSS . Значит Вы уже знакомы с языком разметки гипертекста HTML , так как приступать к CSS без знания HTML не имеет смысла. CSS (Cascading Style Sheets - каскадные таблицы стилей ) - технология, использующаяся для оформления веб-страниц с помощью стилей. Основная идея CSS состоит в том, чтобы разделить структуру и содержание веб страниц от их оформления: C помощью HTML создается страница - ее каркас, а также вносится ее содержимое. - с помощью CSS создается дизайн - задается оформление для элементов страницы. Стили - это набор правил форматирования, применяемых к элементам страницы для изменения их свойств и параметров представления на странице: в основном это касается их внешнего вида и занимаемого положения. Стили представлены свойствами CSS. Каждое свойство по своему влияет на оформление того или иного элемента страницы. Некоторые свойства не применимы к некоторым элементам. Элементы страницы - это теги HTML или их содержимое. Существует три способа применения стилей к элементам страницы: I способ - Внутренние стили Стилевое оформление задается при помощи параметра style , который может быть добавлен к любому тегу HTML, влияя при этом на оформление только этого тега и его содержимого. Фрагмент кода При помощи параметр style задано стилевой оформление для текста данного абзаца, установлен его размер и цвет. Результат: При помощи параметр style задано стилевое оформление для текста данного абзаца: установлен его размер и цвет. Этот способ оформления элементов страницы применяется редко. Ведь, согласитесь, что задавать одно и тоже оформление, скажем, для каждого абзаца страницы, во-первых, трудоемко, а, во-вторых, не практично, так как с увеличением объема исходного кода, будет расти и время загрузки страницы. II способ - Глобальные стили Стилевое оформление задается при помощи тега В голове документа задано единое стилевое оформление для всех абзацев текущей странички! А для этого абзаца оформление задано индивидуально! Единое оформление. Результат: В голове документа задано единое стилевое оформление для всех абзацев текущей странички! А для этого абзаца оформление задано индивидуально! Единое оформление. Этот способ оформления страниц применяется в тех случаях, когда их не много, или когда возникает необходимость задать оригинальное оформление какой-либо одной страничке сайта из остального множества его однотипных станиц. III способ - Связанные или внешние стили Стили описаны в отдельном файле с расширением .css , который может быть связан как с одним, так и с несколькими html-файлами, влияя при этом на их оформление. Если Вы еще не знакомы с визуальным HTML-редактором Dreamweaver , то для создания css-файла можно воспользоваться простым текстовым редактором, который является частью ОС Windows - Блокнотом . Например, мы имеем html-документ - файлindex.html , к оформлению которого необходимо применить стили, описанные в файле style.css . Для этого файлыindex.html и style.css нужно связать. Связь осуществляется с помощью тега , который располагается в голове документа index.html (между тегами и ), и в котором необходимо прописать следующее: "stylesheet" type= "text/css" href= "style.css" >. Эта строка указывает на то, что правила оформления для файла index.html берутся из файла со стилями style.css . С помощью атрибутаhref тега делается ссылка на файл со стилями (указывается абсолютный или относительный путь к файлу (подробнее здесь...) ) . Таким образом к любому html-документу можно применить стили из файла, находящегося даже на другом сайте. Фрагмент кода: "stylesheet" type= "text/css" href= "style.css" > Для абзацев и заголовков второго уровня Задано стилевое оформление. . Фрагмент кода из файла со стилями: p { border : #FF0000 solid 2px ; color : #33CC99 ; padding : 5px } h2 { border : #33CC99 solid 2px ; background-color : #FF0066 ; color : #FFFFFF ; padding : 5px } Результат: Для абзацев и заголовков второго уровня Задано стилевое оформление. Стили описаны в файле style.css, который связан с данным файлом с помощью тега . Применение этого способа позволяет связать файл со стилями style.css с любым количеством html-файлов и работать над их дизайном, редактируя лишь css-код одного файла. Что очень удобно!

Каскадные таблицы стилей, или CSS для начинающих (практикум "правильного" HTML)

Русская часть Интернета растет день ото дня. За последние год-два суммарный объем русскоязычных страниц увеличился более чем в два раза. Сегодня в России уже никого не удивишь словосочетанием <домашняя страничка> или английским словом . Если раньше создание web-страниц было уделом избранных и на просторах Рунета царили лишь признанные <киты> web-дизайна, то теперь даже мой десятилетний сынишка в свободное от учебы время мастерит потихонечку собственную страницу, собираясь разместить ее на каком-нибудь бесплатном сервере (вроде narod.ru или boom.ru), которых за последний год тоже развелось в Рунете множество. Web-конструированием сегодня не занимается, наверное, только не подключенный к Сети или ленивый. Множество людей, поблуждав по просторам Интернета, рано или поздно задумываются о создании собственной странички. Для них-то и написана эта статья.

Речь здесь пойдет о <правильном> HTML для новичков, а именно - о некоторых дополнительных возможностях, официально утвержденных интернет-консорциумом (http://www.w3.org/). В частности, о некоторых возможностях, предоставляемых динамическим HTML (DHTML). А еще точнее - о том, как с помощью CSS (cascade style sheets, или каскадных таблиц стилей) сделать страничку, которая будет выглядеть лучше, чем страницы, созданные посредством <классического> HTML, при этом занимать меньше места и, соответственно, быстрее грузиться.

Мало кто из людей, впервые решившихся на создание собственного web-представительства, вооружается notepad"ом или другим текстовым редактором вроде HomeSite. Обычно новичок думает следующим образом: <Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - тексты я создаю в MS Word, презентации - в MS PowerPoint, так возьму-ка я и для создания web-странички подобную программу - MS FrontPage...> Приняв такое решение, новоявленный web-ваятель дважды обкрадывает себя.

Первый раз - в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый MS FrontPage, вставляют в создаваемые страницы <отсебятину> - множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален - любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах. Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.

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

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

Логическое и физическое форматирование

Классический HTML версии 3.2, наиболее распространенный на данный момент в Сети, предоставляет нам средства физического форматирования документов, для чего имеются специальные теги (например, теги , , ) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web-форматирования принуждают нас снова и снова прописывать эти теги и атрибуты для каждого нового абзаца, что, конечно, сильно увеличивает размер кода страниц. Кроме того, при таком способе форматирования в случае анализа структуры документа остается непонятным, почему данное слово выделено жирным начертанием - просто для красоты или же чтобы обратить на себя особое внимание конечного пользователя? Если живой человек еще в состоянии худо-бедно разобраться в логических построениях страниц на классическом HTML, то о поисковых машинах или, к примеру, голосовых броузерах этого не скажешь. Им вынь да положь чистую логику в структуре страницы. Именно из-за такой <неподвластности> логическому анализу данный способ форматирования был назван физическим форматированием. В противовес ему при создании новой спецификации HTML 4.0 во главу угла было поставлено логическое форматирование, то есть такое форматирование, при котором структура и оформление документа были бы четко разделены. Этот способ форматирования рекомендован к применению интернет-консорциумом, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа как раз с помощью CSS.

Стоит отметить тот факт, что зачатки логического форматирования присутствовали и в классическом HTML - теги

,

,

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

Назначение стилей отдельным элементам страницы

CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу . Если стиль задан для тега , он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги и атрибуты color, size и т. п. для каждого абзаца на странице - достаточно задать некий стиль для тега , и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?

Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тега , присвоив ему соответствующее значение. Синтаксис такой:

12pt; color: darkgreen;">

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

Обратите внимание - когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на машине конечного пользователя не установлен шрифт Times New Roman, броузер подставит вместо него любой из имеющихся шрифтов с засечками, и отображение страницы будет максимально приближено к тому, что вы задумали. Причем приведенный пример будет понятен и для IE (4.0 и выше), и для NN (4.0 и выше). Хотя надо сразу оговориться, что Netscape Navigator поддерживает далеко не все возможности, предоставляемые CSS и DHTML, и это, безусловно, не увеличивает числа его поклонников.

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

Назначение стилей нескольким элементам одной страницы - создание внедренной таблицы стилей

Пока речь у нас шла о задании только одного стиля для одного элемента. А теперь мы научимся создавать именно таблицы стилей.

Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня - шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в <голове> страницы (в любом месте между тегами и ) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом . Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:

font-size: 12pt;

color: darkgreen;

font-size: 16pt;

font-weight: bold;

font-family: Arial, sans-serif;

font-size: 14pt;

color: greenyellow;

font-weight: bold;

font-style: italic;

Этот способ связывания CSS и HTML называется внедрением. Его рекомендуется применять в тех случаях, когда вы решили задать какой-либо набор правил форматирования только для одной страницы сайта, а все остальные страницы по вашему замыслу должны выглядеть по-другому.

Назначение стилей одновременно для нескольких страниц сайта

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

Вот пример содержимого такого файла (например, my.css):

font-family: "Times New Roman", serif;

font-size: 12pt;

color: darkgreen;

font-family: Arial, sans-serif;

font-size: 16pt;

font-weight: bold;

font-family: Arial, sans-serif;

font-size: 14pt;

color: greenyellow;

font-weight: bold;

font-style: italic;

Обратите внимание: теги внутри файла таблицы стилей не используются - расширение.css явно указывает броузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц). В html-файле для связывания нужно прописать в любом месте между тегами и следующую строку:

В этой строке указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла - .css (type="text/css") и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href="my.css"). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.

Обратите внимание на то, что inline-стили (стили, прописанные для отдельных элементов страницы с помощью атрибута style) и внедренные стили (стили, прописанные в <голове> страницы внутри тега-контейнера