CSS: An Overview. CSS Syntax #6

Проверь себя прежде чем идти дальше

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

задание

1. Добавьте тег <link> между тегами <head> </head> ссылающийся на ваш файл stylesheet.css
2. Задайте заголовку <h1> шрифт Verdana (убедитесь, что написали название шрифта правильно)
3. Задайте заголовку <h3> шрифт Courier (убедитесь, что написали название шрифта правильно)
4. Задайте тексту в абзаце фиолетовый(purple) цвет
5. Добавьте комментарий в css! Напишите в нем все что угодно. (Помните: комментарий html и css пишутся по разному)

подсказка

Не стесняйтесь заглянуть в предыдущие упражнения если вам не удается что то вспомнить.

решение index.html

<!DOCTYPE html>
<html>
    <head>
            <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <h1>Change me to Verdana.</h1>
        <h3>Change me to Courier.</h3>
        <p>Make me purple!</p>
    </body>
</html>


решение stylesheet.css

h1{
    font-family: Verdana;
    }
h3{
    font-family: Courier;
    }
p{
    color:purple;
    }
/* вроде все как надо :)*/


CSS: An Overview. CSS Syntax #5

Цвет комментариев

Отлично! У вас действительно все получается.

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

Как вы помните комментарии в html выглядели так:

<!—я комментарий !-->

CSS комментарии выглядят по-другому:

/* я комментарий*/

Помните: компьютер не воспринимает то что написано в комментариях но писать их является хорошим тоном.

задание

Посмотрите css код мы добавили селектор p в наш stylesheet.css. Закомментируйте его т.е. поставьте /* перед “p” и */после закрывающейся кавычки “}”.

решение stylesheet.css

/*p {
    color:red;
}*/


CSS: An Overview. CSS Syntax #4

Важность точки с запятой

Когда вы все больше пар свойство-значение главное не забывать поставить точку с запятой в конце каждой строки.

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

Кроме того не забывайте что все пары свойство-значение должны быть в фигурных скобках (“{}”)для каждого селектора.

задание

Наш stylesheet.css испорчен в некоторых фигурных скобках пропущен точки с запятой. Ваша задача исправить это.

решение stylesheet.css

h3 {
    font-family:Verdana;
    color:blue;
}
 
p {
    font-family:Garamond;
    font-size:16px;
}


CSS: An Overview. CSS Syntax #3

Больше селекторов, больше свойств

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

задание

1. сделайте все h3 заголовки красными
2. сделайте все абзацы шрифтом “Courier”
3. второй абзац содержит теги <span> </span> сделайте цвет фона для <span> желтым (воспользуйтесь подсказкой, если вам нужна помощь)

подсказка

Напоминаем синтаксис:
селектор{
свойство:значение
}

решение stylesheet.css

/*You can do this! Write your CSS below.*/
h3{
    color:red;
    }
p{
    font-family:Courier;
    }
span{
    background-color:yellow;
    }


CSS: An Overview. CSS Syntax #2

Один селектор, множество свойств

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

p{

font-family:Arial;

color:blue;

font-size:24;

}

Главное не забывайте в конце каждой пары ставить точку с запятой!

Пожалуйста, обратите внимание, если в вашем браузере изменен масштаб отображения страницы, то наши манипуляции с размером шрифта могут отображаться неправильно. Чтобы исправить это, нажмите Ctrl+0 или Cmd+0 чтобы вернуть значения по умолчанию.

задание

Под значением color:green добавьте еще пару значений (но до того как закроете скобку “}”), установите font-family со значением Garamond и font-size со значением 24px.

подсказка

Убедитесь что вы правильно написали Garamond

решение stylesheet.css

p{
    color:green;
    font-family:Garamond;
    font-size:24px;
}


CSS: An Overview. CSS Syntax #1

Синтаксис залог победы

Синтаксис css отличается от того что вы привыкли видеть в html, но не надо беспокоиться: он довольно понятен! Общий формат выглядит следующим образом:

селектор{

свойство:значение;

}

Селектор это любой элемент html такой как <p>, <img> или <table>. Вы просто пишете его без кавычек <>! Допустим если вам надо сделать текст абзаца красным вы должны в вашем css файле написать:

p{

color:red;

}

Свойство это аспект селектора. Например, вы можете изменить шрифт, цвет и размер шрифта на веб-страницах (и многое другое).

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

Не забывайте заканчивать каждое значение точкой с запятой (;). Так вы даете знать css  что закончили с этой парой и надо переходить дальше.

задание

Вот и настало время написать свой css. Во вкладке stylesheet.css задайте селектору P значение цвета “зеленый”. (Воспользуйтесь подсказкой если вам нужна помощь.)

подсказка

Помните общий синтаксис css:
Селектор{
Свойство:значение;
}

решение stylesheet.css

p{
    color:green;
}