Dostosuj Brandguide używając CSS – Getty Images Media Manager

Witaj w nowym serwisie Brandprzewodnik! Ten artykuł, jak równieżRozpoczęcie od BrandguideiBrandguide Building i Stylingprzechodzą przez Ciebie jak przenieść swoje treści do nowego doświadczenia. Możliwości edycji Twojego istniejącego Brandguide zostaną przerwane 1 września 2023 r. 1 grudnia 2023 r. dotychczasowy edytor Brandguide nie będzie już dostępny.

CSS lub „Cascading Style Sheets” to język projektowy, który jest używany przez programistów internetowych do tworzenia jednolitego i przyjemnego wizualnie spojrzenia na kilka stron witryny. HTML w dużej mierze określa treść tekstową, ale CSS określa strukturę wizualną, układ i estetykę strony.

CSS Syntax

Składnia CSS składa się z zestawu reguł. Zasady te składają się z 3 części: selektora, właściwości i wartości.

Wybór {
właściwość: wartość;
}

Wybór reprezentuje element HTML, który chcesz wystylować. Właściwość odnosi się do określonego aspektu elementu HTML, takiego jak kolor, rodzina czcionek lub margin. Każda właściwość używana w CSS posiada zestaw akceptowanych wartości, na przykład kod szesnastkowy lub wartość pikselu.

Selektor może mieć wiele właściwości i wartości pary oddzielone średnikami. Na przykład podane wartości właściwości zostaną zastosowane do wszystkich znaczników h1:

h1 {
font-family: comic sans;
font-size: 12 px;
color: blue;
}

Zwykły wybór CSS

Wybór typu CSS

Selektor typu CSS wybiera wszystkie elementy określonego typu na stronie.

Oto kilka przykładów wspólnych selektorów:

p: Zaznacza wszystkie znaczniki akapitów.
a: Wybiera wszystkie hiperlinki.
h1: Wybiera wszystkie tagi nagłówka h1.
szerokość: Wybiera wszystkie tagi zakresowe.
body: Wybiera wszystkie elementy w treści strony internetowej.
przycisk: Zaznacz wszystkie przyciski na stronie internetowej.
li: Wybiera wszystkie elementy listy.

Selektor klasy CSS

Klasa CSS jest cechą używaną do definiowania grupy elementów HTML. Umożliwia to dostosowanie wielu elementów za pomocą pojedynczego selektora. Możemy to zrobić, wpisując znak kropkowy (.) przed nazwą klasy w naszym CSS. Dla przykładu, zmiana czcionki nagłówka próbki i poniższy akapit:

<h1 class="i-am-a-class">nagłówek
ustęp

Użylibyśmy poniższego CSS do kierowania wszystkich elementów z klasą i-am-a-klasa:

.i-am-a-class {
font-family: helvetica;
}

Selektor identyfikatora CSS

Identyfikator CSS jest atrybutem używanym do zdefiniowania pojedynczego unikalnego elementu na stronie internetowej. Aby wybrać element z określonym identyfikatorem, wpisz symbol hash(#) przed identyfikatorem. Na przykład, aby zmienić czcionkę punktu poniżej:

akapit

Użylibyśmy poniższego CSS, aby wycelować tylko element o id i-am-an-id:

#i-am-an-id {
font-family: helvetica;
}

CSS Properties

Właściwości tekstu

rodzina czcionek: Ustawia czcionkę tekstową, np."Arial" lub "Czasy"
font-size: Ustawia rozmiar czcionki, np.5px lub 1 em
waga czcionki: Ustawia wagę czcionki lub "pogrubienie" np."pogrubienie" lub 200
kolor: Ustawia kolor tekstu, np.niebieski, #add8e6 lub rgb(135,206,250)
wysokość linii: Odstęp pionowy między liniami np.5px lub 1em
odstęp liter: Odstęp między znakami, np.5px lub 1em
odstęp słow: Spacja między słowami, np.5px lub 1em

Właściwości tła

kolor tła: Ustaw kolor tła elementu, np.niebieski, #add8e6 lub rgb(135,206,250)
background-image: Ustawia obraz tła na podstawie adresu url, np.url('sample-image.jpg')
pozycja tła: Ustawia pozycję początkową obrazu tła, np.środek lub 50%

Właściwości odstępu

Następujące właściwości akceptują auto, dziedziczenie, % lub dowolną jednostkę długości CSS

wysokość: Ustawia wysokość elementu
szerokość: Ustawia szerokość elementu
dopełnianie: Ustawia przestrzeń dopełniania elementu
margin: Ustawia przestrzeń na marginesie elementu

Długości i jednostki

px: Piksele (1px = 1/96 z 1 cala)
em: W stosunku do rozmiaru czcionki elementu (3em = 3 razy rozmiar aktualnej czcionki)
vw: W stosunku do 1% szerokości widoku
vh: W stosunku do 1% wysokości widoku
%: W stosunku do elementu nadrzędnego

Wyszukiwanie elementów przy użyciu Chrome DevTools

Chrome DevTools to zestaw narzędzi deweloperskich wbudowanych bezpośrednio w przeglądarce Google Chrome. Możemy użyć tych narzędzi do szybkiego zlokalizowania elementów HTML i istniejących stylów CSS na dowolnej stronie.

1. Aby uzyskać dostęp do DevTools, możesz kliknąć prawym przyciskiem myszy na stronie i wybrać "Sprawdź", lub użyj krótkich poleceń, takich jak komenda+Opcja+C (Mac) lub Control+Shift+C (Windows, Linux, Chrome OS).

2. Po otwarciu panelu DevTools wybierz narzędzie Zweryfikuj u góry strony.

3. Następnie możesz kliknąć element na stronie, który chcesz wystylować. Selektory które mogą być użyte do dostosowania tego elementu zostaną zaznaczone w zakładce elementy. Poniższa zakładka Style pokaże reguły stylu CSS, które są obecnie stosowane do tego elementu.

4. W tym przykładzie zmienimy kolor linku nawigacyjnego na #6b646b, korzystając z linku "nawigacyjnego" , który znaleźliśmy za pomocą inspektora DevTools. Dodamy również "! istotna właściwość" na koniec deklaracji, aby zastąpić wszystkie poprzednie style dla tej właściwości na elemencie.

5. Po aktualizacji CSS i zapisaniu zmian, zobaczysz, że kolor tekstu nawigacyjnego zmienił się na #6b646b:

Dodawanie czcionek zewnętrznych

@font-face to reguła CSS, która daje Ci możliwość importowania i korzystania z czcionek innych firm na Twojej Brandguide. Zalecamy dodanie czcionki za pomocą CSS na globalnym poziomie ustawień (w przeciwieństwie do poziomu bloku).

Możesz dodać czcionkę zewnętrzną na dwa sposoby.

Kopiowanie i wklejanie adresu URL

Pierwsza opcja to przejście do wybranej biblioteki czcionek i wybranie czcionki, którą chcesz dodać do Brandguide oraz skopiować i wkleić URL. Proces ten przedstawiono poniżej.

Nawigacja po BrandGuide

Możesz skopiować składnię poniżej i dodać ją do niestandardowego CSS w swojej Brandguide. To jest jedyny CSS który musisz zaimportować czcionkę. Aby zaimportować inną czcionkę, po prostu zmień rodzinę czcionek, źródłowy adres URL i format na wybraną czcionkę.

@font-face {
font-family: 'Satisfy';
src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');
}

Znajdowanie adresu i formatu czcionki:

1. Przejdź do wybranej biblioteki czcionek i wybierz czcionkę, którą chcesz dodać do Brandguide. W naszym przypadku wybierzemy "Satisfy" z Google Fonts.

2. Po wybraniu, musisz skopiować i wkleić adres URL @import do nowej zakładki przeglądarki.

3. To zabierze cię na stronę zawierającą adres URL i format potrzebny do zaimportowania czcionki do Twojej Brandguide.

4. Skopiuj adres src i wklej go do kodu @fontface wraz z rodziną czcionek. Następnie wklej kod do pola CSS. Twoje zmiany zostaną automatycznie zaktualizowane.

Wybierz Aktualizacja CSS, aby zapisać zmiany.

Nowo zaimportowane czcionki będą wypełniane w rozwijaniu domyślnym typu w globalnej flyoucie.

Konwersja czcionki do formatu WOFF lub WOFF2

Drugim niestandardowym typem jest przekształcenie czcionki w format woff lub woff2. To jest format czcionki sieciowej, który jest bardziej kompatybilny dla przeglądarek niż formaty plików tekstowych ttf/otf. Proces ten przedstawiono poniżej.

Własne czcionki

1. Konwertuj czcionkę do formatu woff lub woff2. To jest format czcionki sieciowej, który jest bardziej kompatybilny dla przeglądarek niż formaty plików tekstowych ttf/otf.

2. Prześlij czcionkę do sekcji plików w bibliotece.

3. Otwórz zasób, przejdź do zakładki osadzonej i wybierz Skopiuj link.

4. Przejdź do flagi ustawień globalnych. Możesz skopiować składnię poniżej i dodać ją do sekcji CSS globalnej flyoutu. To jest jedyny CSS który musisz zaimportować czcionkę. Aby zaimportować inną czcionkę, po prostu zmień rodzinę czcionek, źródłowy adres URL i format na wybraną czcionkę. Po wprowadzeniu składni, zmiany zostaną zapisane.

@font-face {
font-family: 'boldweb';
src:
url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff?auto=webp&format=woff;
}

5. Fonty zaimportowane w ten sposób nie spowodują wyświetlania czcionki w rozwijanej domyślnej liście typów. Zamiast tego należy ręcznie zastosować czcionkę w sekcji CSS. Poniżej znajduje się przykład zastosowania pogrubionej czcionki do zaimportowanych znaczników ustępowych.

p {
font-family: 'boldweb';
color: #333;
}

Dodawanie wideo

Możesz dodać film do swojej Brandguide poprzez następujące kroki:

Otwórz modalny składnik aktywów dla filmu.
Przejdź do zakładki Osadź.
Zlokalizuj kod osadzania wideo i wybierz Kopiuj link.
Wklej kod do bloku HTML.

Czy ta odpowiedź była pomocna?Tak Nie