Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Конструктор сайтов uGuide
Главная » Css » Osnovy-css-bazovyj-sintaksis

Основы CSS. Базовый синтаксис.

Этот урок будет посвящен основам CSS, а именно базовому синтаксису. Изучая HTML вы должны были заметить, что почти для каждого тега есть свои атрибуты и для записи значений этих атрибутов используются свои правила написания (синтаксис). Так вот в CSS с давнего времени существуют свои правила написания и синтаксис отличается от HTML, но в нём нет ничего сложного. Общий (базовый) синтаксис такой:

Селектор { свойство1: значение; свойство2: значение; ... свойство(n): значение;}

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Заголовки</title>
  <style type="text/css"> 
   h1 { color: #333366; font-weight: normal; } 
   p { 
    color: red; 
    border-bottom: 1px solid black; 
   }
  </style>
 </head>
 <body>
  <h1>Заголовок первого уровня</h1>
  <p>Этот текст красного цвета с нижней линией черного цвета,
 толщиной один пиксель</p>  
 </body>
</html>

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

базовый синтаксис css

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

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

А что делать если код очень большой, и разработчик не может найти нужный ему селектор отвечающий за определенный элемент на страничке сайта. Для этого в CSS, да впрочем как и во многих языках придумали комментарии.
Комментарии — это как заметки (памятка). Поставить комментарий можно, где угодно. Он не отображается на странице браузера. Но стоит помнить, что комментарии нужны только вам и разработчикам сайтов, а также они увеличивают размер файла, поэтому перед тем как выложить файл на хостинг их обычно убирают. Форма добавления комментария следующая:/* … */. Ну и в качестве примера воспользуемся предыдущим примером:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Заголовки</title>
  <style type="text/css"> 
/* Стили текста */
   h1 { color: #333366; font-weight: normal; } 
   p { 
    color: red; /* Цвет текста */ 
    border-bottom: 1px solid black; /* Значения нижней линии 
текста */
   }
  </style>
 </head>
 <body>
  <h1>Заголовок первого уровня</h1>
  <p>Этот текст красного цвета с нижней линией черного цвета, 
толщиной один пиксель</p>  
 </body>
</html>

Вот и подошёл к концу этот урок. Надеюсь он вам понравился. В следующем уроке вы познакомитесь со значениями стилевых свойств.



наверх