Урок 9. Size Your Images връзка>>
CSS има свойство, наречено ширина, което контролира ширината на елемента. Точно както при шрифтовете, ще използваме px (пиксели), за да посочим ширината на изображението.
Например, ако искаме да създадем CSS клас, наречен larger-image, който дава на HTML елементите ширина от 500 пиксела, ще използваме:
<style>
.larger-image {
width: 500px;
}
</style>
Задача: Създайте клас, наречен smaller-image, и го използвайте, за да преоразмерите изображението, така че да е широко само 100 пиксела.
Урок 10. Add Borders Around Your Elements
CSS borders (рамки) имат характеристики като style, color и width. Например, ако искаме да създадем червена рамка от 5 пиксела около HTML елемент, можем да използваме този клас:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
Задача: Създайте клас, наречен thick-green-border. Този клас трябва да добави 10px, плътна (solid) зелена рамка около HTML елемент. Приложете класа към снимката на вашата котка. Не забравяйте, че можете да приложите множество класове към елемент, като използвате неговия атрибут class, като разделите всяко име на клас с интервал. Например: <img class="class1 class2">
Урок 11. Add Rounded Corners with border-radius
Вашата снимка на котка в момента има остри ъгли. Можем да закръглим тези ъгли със свойство на CSS, наречено border-radius.
Можете да посочите радиус на границата (border-radius) в пиксели.
Задача: Дайте на снимката на котката си граница с радиус от border-radius: 10px.
Забележка: Това предизвикателство позволява множество възможни решения. Например, можете да добавите border-radius към класа .thick-green-border или класа .smaller-image.
Урок 12. Make Circular Images with a border-radius
В допълнение към пикселите, можете също да посочите радиуса на границата/border-radius, като използвате процент.
Дайте на снимката на котката си border-radius от 50%.
Продължете към урок: Give a Background Color to a div Element
Вижте всички уроци Responsive Web Design >>