Знакомство с CSS лучше начинать с азов в моем посте
"Введение в CSS"Пример к «Знакомство с CSS» пример№1
Еще один пример:
<!DOCTYPE html>
В этом примере мы добавили ВСЕ свойства элементов. И все изменилось. Посмотрите как.
"Введение в CSS"Пример к «Знакомство с CSS» пример№1
<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8">
<title>Введение в CSS</title>
</head>
<body>
<div
class="scene">
<div class="roof"></div>
<div class="house">
<div class="door"></div>
</div>
</div>
</body>
</html>
CSS
/*
.scene {
width:
400px;
height:
500px;
margin: 0
auto;
}
.roof {
width: 0;
margin: 0
auto;
margin-top:
-50px;
border:
150px solid white;
border-bottom-color: red;
}
.house {
width:
200px;
height:
200px;
margin: 0
auto;
background-color: blue;
overflow:
hidden;
}
.door {
height:
100px;
width: 50px;
margin-top:
100px;
margin-left:
50px;
background-color: red;
}
*/
Еще один пример:
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Свойства
для оформления текста</title>
</head>
<body>
<h1>Оформление текста и
CSS</h1>
<p>При оформлении текста с
помощью CSS очень часто используется тег <span> с
классами.</p>
<p>Например, можно выделять слова
<span class="underline">подчёркиванием</span>, <span
class="bold">жирностью</span> или <span
class="italic">курсивом</span>.</p>
<p class="bold">Можно
выделять не только отдельные слова, но и целые абзацы.</p>
<p class="italic
underline">И даже комбинировать классы.</p>
</body>
</html>
CSS
.underline {
text-decoration: underline;
}
.bold {
font-weight: bold;
}
.italic {
font-style:
italic;
}
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Свойства
для задания размеров и отступов</title>
</head>
<body>
<h1>Блочные элементы и
CSS</h1>
<p
class="p-first">Размеры и отступы с помощью CSS можно задавать
блочным элементам. Абзац, тег <p>, является одним из
них.</p>
<p
class="p-second">Блочным элементам можно задавать внутренние и
внешние отступы.</p>
<p
class="p-third">Также им можно задавать ширину и высоту.</p>
</body>
</html>
CSS:
p {
margin: 16px
0 16px 0;
background-color: #dff0d8;
}
.p-first {
margin-left: 50px;
}
.p-second {
padding: 20px;
}
.p-third {
width: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Позиционирование элементов</title>
</head>
<body>
<h1>Как выпасть из
потока?</h1>
<p>Существует понятие «document
flow» или «поток документа». Оно определяет то, как располагаются элементы на
HTML-странице.</p>
<p
class="p-absolute">Абсолютно позиционированные элементы
исключаются из потока.</p>
<p>Другие элементы как бы
перестают их замечать и то место, где располагается абсолютно позиционированный
элемент, считают пустым.</p>
</body>
</html>
CSS:
.p-absolute {
padding: 20px;
background-color: rgba(0, 255, 0, 0.25);
position:
absolute;
left:
100px;
bottom: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Создание сетки страницы</title>
</head>
<body>
<div
class="header">Логотип и меню</div>
<div
class="left-column">Основное содержание страницы</div>
<div class="right-column">Боковая колонка</div>
<div
class="footer">Подвал</div>
</body>
</html>
CSS:
div {
margin-bottom: 15px;
padding:
10px 25px 10px 25px;
background-color: #dff0d8;
}
.left-column {
width: 50%;
min-height:
100px;
background-color: #fcf8e3;
float: left;
}
.right-column {
width: 25%;
min-height:
100px;
background-color: #d9edf7;
float:right;
}
.footer {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Декоративные
свойства</title>
</head>
<body>
<h1>Красивые
оповещения</h1>
<p>Чтобы создать красивое
сообщение-оповещение, нужно подобрать подходящие цвета текста и фона.</p>
<div class="alert">
Используйте CSS для оформления
элементов.
</div>
</body>
</html>
CSS:
.alert {
padding:
10px;
border: 1px
solid #d6e9c6;
background-color: #dff0d8;
color:
#468847;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Каскадность
и приоритеты</title>
</head>
<body>
<h1>Каскадность и
приоритеты</h1>
<p
class="blue">Каскадность — это очень мощный механизм.</p>
<p
class="green">Веб-разработчик, постигший тайны каскадности,
достигает просветления в вёрстке и становится гуру.</p>
<p class="blue
green">Веб-разработчик, не стремящийся постигнуть каскадность, так и
останется подмастерьем.</p>
</body>
</html>
CSS:
p {
padding:
10px;
outline: 2px
solid rgba(0, 0, 0, 0.1);
}
.green {
background-color: #dff0d8;
}
.blue {
background-color: #aaddff;
}
Переносим выделенное вверх. И меняется приоритет.
вот так
p {
padding:
10px;
outline: 2px
solid rgba(0, 0, 0, 0.1);
}
.blue {
background-color: #aaddff;
}
.green {
background-color: #dff0d8;
}
Теперь приоритет у зеленого!!!!
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Каскадность. Коктейль из классов</title>
</head>
<body>
<h1>Каскадность. Коктейль из
классов</h1>
<p class="blue
nice-box">Каскадность — это очень мощный механизм.</p>
<p class="green
nice-box">Веб-разработчик, постигший тайны каскадности, достигает
просветления в вёрстке и становится гуру.</p>
<p class="blue
nice-box">Веб-разработчик, не стремящийся постигнуть каскадность, так и
останется подмастерьем.</p>
</body>
</html>
Здесь ко всем обзацам добавили класс = nice-box
p {
padding:
10px;
}
.green {
background-color:
#dff0d8;
}
.blue {
background-color: #aaddff;
}
.nice-box {
border-radius: 15px;
box-shadow:
3px 3px 4px #cccccc;
}
изменили border-radius:5px; на 15.
Получили более закругленные углы, во всех случаях
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Наследование</title>
</head>
<body>
<h1>CSS-свойства</h1>
<p>В
CSS существует огромное количество свойств. Их можно разбить на следующие
группы:</p>
<ul>
<li>оформление
текста;</li>
<li>работа с размерами и
отступами;</li>
<li>позиционирование
элементов;</li>
<li>работа с сеткой
страницы;</li>
<li>декоративные: цвета, фон,
тени;</li>
<li>другие.</li>
</ul>
</body>
</html>
CSS:
body {
color:red;
}
ul {
font-style: italic;
}
В это примере добавили свойства для body и ul. Получили всю таб красную и курсив
в списке.
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Ненаследуемые свойства</title>
</head>
<body>
<h1>CSS-свойства</h1>
<p>В CSS существует огромное
количество свойств. Их можно разбить на следующие группы:</p>
<ul>
<li>оформление
текста;</li>
<li>работа с размерами и
отступами;</li>
<li>позиционирование
элементов;</li>
<li>работа с сеткой
страницы;</li>
<li>декоративные: цвета, фон,
тени;</li>
<li>другие.</li>
</ul>
</body>
</html>
CSS:
body {
padding:
20px;
}
ul {
border: 1px
solid #cccccc;
padding:
30px;
}
В этом примере мы добавили ВСЕ свойства элементов. И все изменилось. Посмотрите как.
Комментариев нет:
Отправить комментарий