Domanda | Risposta | |||
---|---|---|---|---|
Inline
|
typ zapisu jezyka CSS
|
|||
Internal
|
typ zapisu jezyka CSS
|
|||
External
|
typ zapisu jezyka CSS
|
|||
id=" ..."
|
oznaczenie danego tagu w css
|
|||
class=" ... "
|
przydzielenie do pewnej klasy w css
|
|||
rel= " ... "
|
do uzupelnienia bo wsumie nie wiem po co tego uzywac
|
|||
href="..."
|
sluzy do podlinkowania czegos, albo do polaczenia dwoch plikow
|
|||
<title></>
|
nazwanie strony
|
|||
<link rel="stylesheet" href="...">
|
sluzy do polaczenia css i html
|
|||
CSS
|
Cascading Style Sheets
|
|||
color: red itd
|
zmiana koloru na dany kolor
|
|||
color: rgb(0-255,0-255,0-255)
|
zmiana koloru przez dane rgb=red blue green
|
|||
color: 59ff5f
|
zmiana koloru przez dane HEX= hexadecimal values
|
|||
color: hsl(0,0%,0%)
|
zmiana koloru przez dane hsl=hue, saturation, and lightness
|
|||
font-family:"Times New Roman" (CSS)
|
typ czcionki
|
|||
font-size: 1em (1em=100% of normal size) / 18px
|
rozmiar czcionki
|
|||
font-weight: normal/bold
|
grubość czcionki
|
|||
font-style: normal/italic
|
styl czcionki
|
|||
@font-face{src: url(.../...); font-family: ...}
|
korzystamy aby zmienic rodzaj czcionki na wybrana np z fonts. google.com
|
|||
border: solid
|
rodzaj obramowki
|
|||
border: dashed
|
rodzaj obramowki
|
|||
border: dotted
|
rodzaj obramowki
|
|||
border: double
|
rodzaj obramowki
|
|||
border: groove
|
rodzaj obramowki
|
|||
border: ridge
|
rodzaj obramowki
|
|||
border: inset
|
rodzaj obramowki
|
|||
border: outset
|
rodzaj obramowki
|
|||
border: none
|
rodzaj obramowki stosujemy gdy jest juz jakas a nie chcemy zadnej
|
|||
margins
|
space around an element
|
|||
float
|
allows other elements to flow around it
|
|||
display: flow-root
|
uzywamy np: gdy nie chcemy aby obrazek nam uciekl z obramowki
|
|||
overflow
|
property that sets the desired behavior when content does not fit in the parent element box(overflows)
|
|||
overflow: visible
|
rodzaj wlasciwosci overflow
|
|||
overflow: hidden
|
rodzaj wlasciwosci overflow
|
|||
overflow: clip
|
rodzaj wlasciwosci overflow
|
|||
overflow: scroll
|
rodzaj wlasciwosci overflow
|
|||
overflow: auto
|
rodzaj wlasciwosci overflow dziala tak samo jak scroll tylko gdy nie ma potrzeby to nie pojawiaja sie paski do przesuwania tekstu
|
|||
overflow-clip-margin: 20px
|
np poza obramowka widac tekst na 20 pixeli, ktory wczensniej byl ukryty przez funkcje, overflow: clip
|
|||
display
|
property specifies if/how an element is displayed
|
|||
block-level
|
start on a new line, take up the full width available (h1, div, p, form, header, footer)
|
|||
inline
|
do not start on a new line width is limited to what is needed (span, a, img)
|
|||
display: inline-block
|
cos co bierze pod uwage height i width ale bierze tylko tyle miejsca ile potrzebuje
|
|||
display: none
|
nie ma tego wogole
|
|||
display: hidden
|
nie jest widoczne ale zabiera miejsce
|
|||
display: block
|
zamienia sie w blocka
|
|||
display: inline
|
zamienia sie w inline
|
|||
height: 100vh
|
vh=viewport height
|
|||
box-sizing: border-box
|
uzywamy np gdy chcemy uzyc float ale nam nie dziala przez border, wiec wpisujemy ta komende i ona to lekceważy
|
|||
*{}
|
all elements
|
|||
padding: 25px
|
tworzy dookola czegos miejsce w rozmiarze 25px
|
|||
width/height: px, %, vh, auto (samo sie dostosuje)
|
zapis rozmiarow szerokosci i dlugosci
|
|||
min/max - height/width
|
minimalna/ maxymalna, dlugosc /szerokosc
|
|||
position: relative
|
positioned relative to where it normally
|
|||
position: sticky
|
positioned based on scroll position
|
|||
position: fixed
|
positioned relative to the viewport
|
|||
position: absolute
|
positioned relative to nearest ancestor
|
|||
position: static
|
default position for an element
|