Каскадные таблицы стилей (CSS)

Содержание

Слайд 2

Cascading Style Sheets (CSS)

10.4.2.2 использовать CSS для разработки web-страниц

Cascading Style Sheets (CSS) 10.4.2.2 использовать CSS для разработки web-страниц

Слайд 3

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

CSS означает Каскадные таблицы стилей. CSS описывает, как элементы HTML должны отображаться
на экране, бумаге или других носителях.
CSS можно добавить к элементам HTML тремя способами:
Inline -используя атрибут style в элементах HTML
Internal - с помощью элемента

This is a heading

This is a paragraph.


Слайд 6

Внешний CSS

Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.
Чтобы

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

This is a heading

This is a paragraph.


This is a heading
This is a paragraph.

Слайд 7

Внешнюю таблицу стилей можно записать в любом текстовом редакторе. Файл не должен

Внешнюю таблицу стилей можно записать в любом текстовом редакторе. Файл не должен
содержать HTML-код и должен
быть сохранен с расширением .css.
body {     background-color: powderblue; } h1 {     color: blue; } p {     color: red; }

Слайд 8

CSS свойство color определяет цвет текста, который будет использоваться.
Свойство CSS font-family

CSS свойство color определяет цвет текста, который будет использоваться. Свойство CSS font-family
определяет шрифт, который будет использоваться.
Свойство CSS font-size определяет размер текста, который будет использоваться.


Шрифты CSS

Слайд 9

CSS Border (граница)

Свойство CSS border определяет границу вокруг элемента HTML :
p {    

CSS Border (граница) Свойство CSS border определяет границу вокруг элемента HTML :
border: 1px solid powderblue; }

CSS Padding

Свойство CSS padding определяет отступ (текст) между текстом и границей:
Example
p {     border: 1px solid powderblue;     padding: 30px; }

CSS Margin

Свойство CSS margin определяет поле (пространство) вне границы :
p {     border: 1px solid powderblue;     margin: 50px; }

Слайд 10

CSS Syntax and Selectors

Набор правил CSS состоит из селектора и блока объявления:

Блок

CSS Syntax and Selectors Набор правил CSS состоит из селектора и блока
объявлений содержит одно или несколько объявлений, разделенных точками с запятой. Каждое объявление включает имя свойства CSS и значение, разделенное двоеточием.

Слайд 11

The id Attribute

Чтобы определить конкретный стиль для одного специального элемента, добавьте к

The id Attribute Чтобы определить конкретный стиль для одного специального элемента, добавьте
нему атрибут id:

I am different


then define a style for the element with the specific id:
Examples
#p01
{     color: blue; }
#para1 {     text-align: center;     color: red; }