10 прости примера за CSS код, които можете да научите за 10 минути

След като започнете да се занимавате с HTML, вероятно ще се заинтересувате да добавите още визуален удар към уеб страниците си. CSS е най -добрият начин да направите това. CSS ви позволява да прилагате промени в цялата си страница, без да разчитате на вградения стил.

Ето няколко прости примера за CSS, които ще ви покажат как да направите някои основни промени в стила на вашата уеб страница.

1. Основен CSS код за лесно форматиране на абзаци

Стилизирането с CSS означава, че не е нужно да посочвате стил всеки път, когато създавате елемент. Можете просто да кажете „всички абзаци трябва да имат този конкретен стил“ и сте готови.

Да речем, че искате всеки абзац (

, един от HTML таговете, които всеки трябва да знае) да бъде малко по -голям от обикновено. И с тъмно сив текст, вместо черен.

Свързани: HTML Cheat Sheet

CSS кодът за това е:

p { font-size: 120%; color: dimgray; }

Просто! Сега, когато браузърът изобразява абзац, текстът ще наследи размера (120 % от нормалното) и цвета („dimgray“).

Ако сте любопитни кои цветове на обикновен текст можете да използвате, проверете това CSS списък с цветове от Mozilla.

2. Пример за CSS за промяна на регистъра на знаците

Искате ли да създадете обозначение за абзаци, които трябва да са с малки букви? Пример за CSS за това би бил:

p.smallcaps { font-variant: small-caps; }

За да направите абзац, който е изцяло с малки букви, използвайте малко по -различен HTML маркер. Ето как изглежда:

Your paragraph here.

Добавянето на точка и име на клас към елемент определя подтип на този елемент, дефиниран от клас. Можете да направите това с текст, изображения, връзки и почти всичко друго.

Ако искате да промените набор от текст в конкретен случай, използвайте тези примери за CSS код:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Последната изписва с главни букви първата буква на всяко изречение.

3. Лесен CSS за промяна на цветовете на връзките

Промените в стила не се ограничават до абзаци. Има четири различни цвята, на които може да се присвои връзка: стандартният й цвят, посетеният цвят, цветът на курсора на мишката и активният цвят (който се показва, докато щраквате върху него). Използвайте този примерен CSS код:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

С връзки всяко „а“ е последвано от двоеточие, а не от точка.

Всяка от тези декларации променя цвета на връзката в определен контекст. Няма нужда да променяте класа на връзката, за да я накарате да промени цвета си.

4. Премахнете подчертаването на връзката с този примерен CSS

Докато подчертаният текст ясно показва връзка, понякога изглежда по -добре да се премахне това подчертаване. Това се постига с атрибута 'text-decoration'. Този пример за CSS показва как да премахнете подчертаването на връзките:

a { text-decoration: none; }

Всичко с маркер link ('a') ще остане без подчертаване. Искате да го подчертаете, когато потребителят задържи курсора на мишката върху него? Просто добавете:

a:hover { text-decoration: underline; }

Можете също така да добавите тази декорация на текст към активните връзки, за да сте сигурни, че подчертаването няма да изчезне, когато кликнете върху връзката.

5. Направете бутон за връзка с CSS код

Искате да привлечете повече внимание към вашата връзка? Бутонът за връзка е чудесен начин да го направите. Това изисква още няколко реда:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Нека обясним този примерен код на CSS.

Включването на четирите състояния на връзки гарантира, че бутонът няма да изчезне, когато потребител задържи или кликне върху него. Можете също така да зададете различни параметри за зависване и активни връзки, например промяна на бутона или цвета на текста.

Цветът на фона се задава с цвят на фона, а цветът на текста с цвят. Подложката определя размера на кутията --- текстът е подплатен с 10px вертикално и 25px хоризонтално.

Подравняването на текста гарантира, че текстът се показва в центъра на бутона, вместо встрани от едната страна. Украсата на текст, както в последния пример, премахва подчертаването.

критичният процес на син екран умря в windows 10

CSS кодът „display: inline-block“ е малко по-сложен. Накратко, той ви позволява да зададете височината и ширината на обекта. Той също така гарантира, че започва нов ред, когато е поставен.

6. Примерен код на CSS за създаване на текстово поле

Един обикновен параграф не е много вълнуващ. Ако искате да маркирате елемент на страницата си, може да искате да добавите рамка. Ето как да направите това с низ от прост CSS код:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Тази е ясна. Той създава плътна лилава рамка, широка пет пиксела, около всеки параграф от важен клас. За да накарате параграф да наследи тези свойства, просто го обявете така:

Your important paragraph here.

Това ще работи независимо колко голям е абзацът.

Има много различни стилове на границата, които можете да приложите; вместо „плътно“, опитайте „пунктирано“ или „двойно“. Междувременно ширината може да бъде „тънка“, „средна“ или „дебела“. CSS кодът дори може да дефинира дебелината на всяка граница поотделно, по следния начин:

border-width: 5px 8px 3px 9px;

Това води до горна граница от пет пиксела, дясна граница от осем, долна от три и размер на лявата граница от девет пиксела.

7. Елементи, подравнени по центъра с основен CSS код

За обща задача центрирането на елементи с CSS код е изненадващо неинтуитивно. След като го направите няколко пъти обаче, става много по -лесно. Имате няколко различни начина да центрирате нещата.

За блоков елемент (обикновено изображение) използвайте атрибута margin:

.center { display: block; margin: auto; }

Това гарантира, че елементът се показва като блок и че полето от всяка страна се задава автоматично. Ако искате да центрирате всички изображения на дадена страница, можете дори да добавите „margin: auto“ към img маркера:

img { margin: auto; }

За да научите защо работи по този начин, проверете Обяснение на модела на CSS кутия на W3C .

Но какво, ако искате да центрирате текста с CSS? Използвайте този примерен CSS:

.centertext { text-align: center; }

Искате да използвате класа „centertext“, за да центрирате текста в абзац? Просто добавете този клас към

етикет:

This text will be centered.

8. Примери за CSS за регулиране на подложката

Пълненето на елемент определя колко място трябва да има от всяка страна. Например, ако добавите 25 пиксела подложка в долната част на изображението, следният текст ще бъде избутан 25 пиксела надолу. Много елементи могат да имат подложки, а не само изображения.

Да предположим, че искате всяко изображение да има 20 пиксела за подложка от лявата и дясната страна и 40 пиксела отгоре и отдолу. Най -основното изпълнение на CSS код за това е:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Има обаче по -кратка CSS инструкция, която представя цялата тази информация в един ред:

img { padding: 40px 25px 40px 25px; }

Това задава горната, дясната, долната и лявата подложки до десния номер. Благодарение на използването само на две стойности (40 и 25) можете да го направите още по -кратък:

img { padding: 40px 25px }

Когато използвате само две стойности, първата стойност се задава за горната и долната част, докато втората ще бъде лява и дясна.

9. Откройте табличните редове с CSS кодиране

CSS кодът прави таблиците много по -хубави от мрежите по подразбиране. Добавянето на цветове, регулирането на границите и превръщането на вашата маса в отзивчива към мобилните екрани са лесни. Този прост пример за CSS ви показва как да маркирате редовете на таблицата, когато ги наведете с мишката.

tr:hover { background-color: #ddd; }

Сега, когато мишката върху клетка на таблица, този ред ще промени цвета. За да видите някои от другите готини неща, които можете да направите, разгледайте W3C страница на фантастични CSS таблици .

10. Примерен CSS за преместване на изображения между прозрачно и непрозрачно

CSS кодът може да ви помогне да правите готини неща и с изображения. Ето един пример за CSS за показване на изображения с по -малко от пълна непрозрачност, така че те изглеждат леко „избелени“. Когато преместите с мишката върху изображенията, те се довеждат до пълна непрозрачност:

img { opacity: 0.5; filter: alpha(opacity=50); }

Атрибутът „филтър“ прави същото като „непрозрачност“, но Internet Explorer 8 и по -ранни версии не разпознават измерването на непрозрачността. За по -старите браузъри е добра идея да го включите.

Сега, когато изображенията са леко прозрачни, можете да ги направите напълно непрозрачни при мишката:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 примера за CSS с изходния код

С тези примери за CSS код трябва да имате много по -добра представа за това как работи CSS. CSS шаблони може да помогне, но разбирането на суровите елементи е жизненоважно.

Тези 10 лесни примера за CSS код са резюмирани:

Лесно форматиране на абзаци
Промяна на буквите
Променете цветовете на връзката
Премахване на подчертаване на връзката
Направете бутон за връзка
Създайте текстово поле
Елементи, подравнени в центъра
Регулирайте подложката
Маркирайте редовете на таблицата
Направете изображения непрозрачни

Преглеждайки ги отново, ще забележите няколко модела, които можете да приложите към бъдещия код. И тогава знаете, че наистина сте започнали да ставате майстор на CSS. Но запомнянето му може да бъде трудно. Може да искате да маркирате тази страница за бъдещи справки.

Дял Дял Туит електронна поща Кодът за основни свойства на CSS3

Овладейте съществения CSS синтаксис с нашия лист за мами за свойства на CSS3.

Прочетете Напред Свързани теми

Програмиране
Уеб дизайн
CSS
Скриптове

За автора Кристиан Каули(1510 публикувани статии)

Заместник -редактор по сигурност, Linux, DIY, програмиране и обяснени технологии и наистина полезен производител на подкаст, с богат опит в поддръжката на настолни компютри и софтуер. Сътрудник на списание Linux Format, Кристиан е калайджия на Raspberry Pi, любител на Lego и фен на ретро игри.

Още от Кристиан Каули

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате