, , і
.
h1 {
border-width: thick; border-style: dotted; border-color: gold;
}
h2 {
border-width: 20px; border-style: outset; border-color: red;
}
p {
border-width: 1px; border-style: dashed; border-color: blue;
}
ul {
border-width: thin;
border-style: solid; border-color: orange;
}
При необхідності можна об'єднувати кілька властивостей в одне, використовуючи слово border, наприклад:
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
або
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
p {
border: 1px solid blue;
}
2.8 Спливаючі елементи (поплавці)
Необхідно отримати наступне відображення:
HTML-код для цього прикладу:
causas naturales et antecedentes, idciro etiam nostrarum voluntatum ...
Щоб рисунок перемістився вліво, а текст оточував його, необхідно визначити ширину боксу навколо рисунка, і встановити в властивості float значення left:
#picture {
float: left; width: 100px;
}
Floats можна використовувати для виведення колонок в документі. Для цього ви визначаєте необхідні колонки в HTML-коді тегами таким чином:
Haec disserens qua de re agatur
et in quo causa consistat non videt ...
causas naturales et antecedentes, idciro etiam nostrarum voluntatum ...
nam nihil esset in nostra potestate si res ita se haberet ...
Тепер необхідну ширину колонок встановимо, наприклад, 33%, а потім встановимо спливання кожної вліво у властивості float (float може мати значення left, right або none.)
# column1 {float: left; width: 33%;
}
# column2 {float: left; width: 33%;
}
# column3 {float: left; width: 33%;
}
Властивість clear
Властивість clear керує переміщенням спливаючих елементів документа. За замовчуванням послідовні елементи зміщуються вгору, заповнюючи простір, який звільняється, якщо бокс спливає в сторону (текст автоматично зміщується вгору вздовж зображення Біла Гейтса). Властивість clear може мати значення left, right, both або none. Принцип такий, що якщо clear, наприклад, має для боксу значення both, то верхній край рамки цього боксу завжди буде знаходитися під нижнім краєм поля можливих спливаючих зверху боксів.
Bill Gates
causas naturales et antecedentes, idciro etiam nostrarum ...
Щоб не дати тексту спливати вгору перед малюнком, необхідно додати такий код CSS.
#picture {float: left; width: 100px;
}
.floatstop {clear: both;
}
Якщо ми хочемо розташувати його на 100px від верхньої межі документа і на 200px зліва, ми повинні ввести наступний код CSS.
h1 {position: absolute; top: 100px;
left: 200px;
}
Висновки. В межах другого навчального питання було розглянуто особливості синтаксису роботи з таблицями стилів. Особливу увагу було приділено поняттю селектора та їх різновиди: селектори тегів, селектори класів, селектори ID, селектори груп, універсальні селектори.
Питання 3. Застосування каскадних стилів у HTML-документах.
Час на відпрацювання 25 хв.
Є три способи застосування CSS до HTML-документу.
Вбудовані таблиці стилів;
Внутрішні стилі елементів;
Зовнішні таблиці стилів.
- З використанням тегу ;
- За допомогою правила @import.
Метод 1: Інлайн / In-line (атрибут style). Вбудовані таблиці стилів
Вбудовані стилі знаходяться між тегами
Висновки. В рамках розгляду третього навчального питання було розглянуто методи підключення до HTML документа таблиць стилів. Розглянуто переваги та недоліки кожного з методів. Слід звернути увагу, що в реальних проектах найчастіше використовується метод таблиць глобальних стилів.
IІІ. ЗАКЛЮЧНА ЧАСТИНА
Час на відпрацювання 5 хв.
1. Нагадати курсантам:
- тему;
- мету;
- навчальні питання;
- актуальність основних положень щодо змісту заняття.
2. Визначити ступінь досягнення мети заняття.
3. Провести розбір роботи курсантів, вказати на характерні недоліки та способи їх усунення.
4. Оголосити оцінки.
5. Відповісти на питання курсантів.
6. Визначити індивідуальне завдання :
Опрацювати конспект з теми
- Трансформування елементів з допомогою CSS [1] ст. 150-155
Старший викладач кафедри телекомунікаційних та інформаційних систем
старший лейтенант Сергій ТАБЕНСЬКИЙ
«____» ____________ 2020 р.
- і
.
h1 {
border-width: thick; border-style: dotted; border-color: gold;
}
h2 {
border-width: 20px; border-style: outset; border-color: red;
}
p {
border-width: 1px; border-style: dashed; border-color: blue;
}
ul {
border-width: thin;
border-style: solid; border-color: orange;
}
При необхідності можна об'єднувати кілька властивостей в одне, використовуючи слово border, наприклад:
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
або
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
p {
border: 1px solid blue;
}
2.8 Спливаючі елементи (поплавці)
Необхідно отримати наступне відображення:
HTML-код для цього прикладу:
causas naturales et antecedentes, idciro etiam nostrarum voluntatum ...
Щоб рисунок перемістився вліво, а текст оточував його, необхідно визначити ширину боксу навколо рисунка, і встановити в властивості float значення left:
#picture {
float: left; width: 100px;
}
Floats можна використовувати для виведення колонок в документі. Для цього ви визначаєте необхідні колонки в HTML-коді тегами
таким чином:
Haec disserens qua de re agatur
et in quo causa consistat non videt ...
causas naturales et antecedentes, idciro etiam nostrarum voluntatum ...
nam nihil esset in nostra potestate si res ita se haberet ...
Тепер необхідну ширину колонок встановимо, наприклад, 33%, а потім встановимо спливання кожної вліво у властивості float (float може мати значення left, right або none.)
# column1 {float: left; width: 33%;
}
# column2 {float: left; width: 33%;
}
# column3 {float: left; width: 33%;
}
Властивість clear
Властивість clear керує переміщенням спливаючих елементів документа. За замовчуванням послідовні елементи зміщуються вгору, заповнюючи простір, який звільняється, якщо бокс спливає в сторону (текст автоматично зміщується вгору вздовж зображення Біла Гейтса). Властивість clear може мати значення left, right, both або none. Принцип такий, що якщо clear, наприклад, має для боксу значення both, то верхній край рамки цього боксу завжди буде знаходитися під нижнім краєм поля можливих спливаючих зверху боксів.
causas naturales et antecedentes, idciro etiam nostrarum ...
Щоб не дати тексту спливати вгору перед малюнком, необхідно додати такий код CSS.
#picture {float: left; width: 100px;
}
.floatstop {clear: both;
}
Якщо ми хочемо розташувати його на 100px від верхньої межі документа і на 200px зліва, ми повинні ввести наступний код CSS.
h1 {position: absolute; top: 100px;
left: 200px;
}
Висновки. В межах другого навчального питання було розглянуто особливості синтаксису роботи з таблицями стилів. Особливу увагу було приділено поняттю селектора та їх різновиди: селектори тегів, селектори класів, селектори ID, селектори груп, універсальні селектори.
Питання 3. Застосування каскадних стилів у HTML-документах.
Час на відпрацювання 25 хв.
Є три способи застосування CSS до HTML-документу.
- З використанням тегу ;
- За допомогою правила @import.
Метод 1: Інлайн / In-line (атрибут style). Вбудовані таблиці стилів
Вбудовані стилі знаходяться між тегами
Висновки. В рамках розгляду третього навчального питання було розглянуто методи підключення до HTML документа таблиць стилів. Розглянуто переваги та недоліки кожного з методів. Слід звернути увагу, що в реальних проектах найчастіше використовується метод таблиць глобальних стилів.
IІІ. ЗАКЛЮЧНА ЧАСТИНА
Час на відпрацювання 5 хв.
1. Нагадати курсантам:
- тему;
- мету;
- навчальні питання;
- актуальність основних положень щодо змісту заняття.
2. Визначити ступінь досягнення мети заняття.
3. Провести розбір роботи курсантів, вказати на характерні недоліки та способи їх усунення.
4. Оголосити оцінки.
5. Відповісти на питання курсантів.
6. Визначити індивідуальне завдання :
Опрацювати конспект з теми
- Трансформування елементів з допомогою CSS [1] ст. 150-155
Старший викладач кафедри телекомунікаційних та інформаційних систем
старший лейтенант Сергій ТАБЕНСЬКИЙ
«____» ____________ 2020 р.
Haec disserens qua de re agatur
et in quo causa consistat non videt ...
causas naturales et antecedentes, idciro etiam nostrarum voluntatum ...
nam nihil esset in nostra potestate si res ita se haberet ...
Тепер необхідну ширину колонок встановимо, наприклад, 33%, а потім встановимо спливання кожної вліво у властивості float (float може мати значення left, right або none.)
# column1 {float: left; width: 33%;
}
# column2 {float: left; width: 33%;
}
# column3 {float: left; width: 33%;
}
Властивість clear
Властивість clear керує переміщенням спливаючих елементів документа. За замовчуванням послідовні елементи зміщуються вгору, заповнюючи простір, який звільняється, якщо бокс спливає в сторону (текст автоматично зміщується вгору вздовж зображення Біла Гейтса). Властивість clear може мати значення left, right, both або none. Принцип такий, що якщо clear, наприклад, має для боксу значення both, то верхній край рамки цього боксу завжди буде знаходитися під нижнім краєм поля можливих спливаючих зверху боксів.
Bill Gates
causas naturales et antecedentes, idciro etiam nostrarum ...
Щоб не дати тексту спливати вгору перед малюнком, необхідно додати такий код CSS.
#picture {float: left; width: 100px;
}
.floatstop {clear: both;
}
Якщо ми хочемо розташувати його на 100px від верхньої межі документа і на 200px зліва, ми повинні ввести наступний код CSS.
h1 {position: absolute; top: 100px;
left: 200px;
}
Висновки. В межах другого навчального питання було розглянуто особливості синтаксису роботи з таблицями стилів. Особливу увагу було приділено поняттю селектора та їх різновиди: селектори тегів, селектори класів, селектори ID, селектори груп, універсальні селектори.
Питання 3. Застосування каскадних стилів у HTML-документах.
Час на відпрацювання 25 хв.
Є три способи застосування CSS до HTML-документу.
Вбудовані таблиці стилів;
Внутрішні стилі елементів;
Зовнішні таблиці стилів.
- З використанням тегу ;
- За допомогою правила @import.
Метод 1: Інлайн / In-line (атрибут style). Вбудовані таблиці стилів
Вбудовані стилі знаходяться між тегами
Висновки. В рамках розгляду третього навчального питання було розглянуто методи підключення до HTML документа таблиць стилів. Розглянуто переваги та недоліки кожного з методів. Слід звернути увагу, що в реальних проектах найчастіше використовується метод таблиць глобальних стилів.
IІІ. ЗАКЛЮЧНА ЧАСТИНА
Час на відпрацювання 5 хв.
1. Нагадати курсантам:
- тему;
- мету;
- навчальні питання;
- актуальність основних положень щодо змісту заняття.
2. Визначити ступінь досягнення мети заняття.
3. Провести розбір роботи курсантів, вказати на характерні недоліки та способи їх усунення.
4. Оголосити оцінки.
5. Відповісти на питання курсантів.
6. Визначити індивідуальне завдання :
Опрацювати конспект з теми
- Трансформування елементів з допомогою CSS [1] ст. 150-155
Старший викладач кафедри телекомунікаційних та інформаційних систем
старший лейтенант Сергій ТАБЕНСЬКИЙ
«____» ____________ 2020 р.
1 2 3 4 5 6 7 8