CSS. Справочный материал

Оглавление

CSS. Справочный материал        

Подключение стилевого файла        

Свойство COLOR        

Свойство BACKGROUND-COLOR        

Шрифты в CSS        

Рамки в CSS        

Стили рамки        

Понятие блочной структуры        

Отступы и поля        

Подключение стилевого файла

index.html

<html>

<head>

<title>Пример CSS</title>

<link rel="stylesheet" href="my.css" type="text/css">

</head>

<body>

...

</body>

</html>

my.css

body {

          color: green;

}

Свойство COLOR

Свойство BACKGROUND-COLOR

H1 {
        
color: blue;
        background-color :# ffff00;
}

BODY {
        
background-color : #0000ff;
}
H1 {
        color: blue;
        
background-color :# ffff00;
}

Шрифты в CSS

font-family                - гарнитура шрифта.

font-style                - стиль шрифта:  normal – обычный ,  italic - курсивный;)

font-weight                - normal –обычный, bold-жирный

font-size                - размер шрифта в px

font                        - cокращенная запись:

в такой последовательности: font-style_ font-weight_font-size_font-family

р{
   
font-style: italic;
   
font-weight: bold;
   
font-size: 30px;
   
font-family: arial, sans-serif;

Сокращенная форма:

р {

    font : italic bold 30px arial;

}

Рамки в CSS

border-width        - толщина в рх    или thin (2px) , medium (4px) и thick (6px)

border-color

border-style        -

border – сокращенная форма в такой последовательности: толщина_стиль_цвет

h1 {
        
border-width: 10px;
        
border-style: solid ;
        
border-color: green;
}

В сокращенной форме:

h1 {
   
border: 10px solid green;

}

Стили рамки

Понятие блочной структуры

Для браузера каждый тэг – это контейнер, у которого есть:

Отступы и поля

Внутренний отступ        - padding 

Внешние поля        - margin

h1 {

                color:       red;

                border:   3px solid #FFDE3C;

                padding: 20px;                margin:   10px 90px;

        }

Запись в следующей последовательности: top_right_bottom_left