Definicje i przykłady CSS
Definicje i przykłady CSS
Klasa
Zdefiniować klasę, nadając mu nazwę
z fullstop (.) tuż przed:
. Tabele
. Sidetitle
. Tytuł
. Tabele
. Granic
i tak dalej ..
Po zdefiniowaniu klasy, można odwołać się do niego w całej swojej strony internetowej, jak pokazano poniżej.
Css ustawić styl ten jest umieszczony w tagi HEAD:
<style type='text/css'>
. Leftside (
color: # 336699;
background-color: # C0C0C0;
font-family: helvetcia
)
. Rightside (
color: # 336699;
background-color: # 708EA0;
font-family: Arial
)
. Mystuff (
color: # 336699;
background-color: # C0C0C0;
font-family: Verdana
)
</ Style>
Css te odniesienia może być umieszczony w organizmie tagi:
<div class="leftside"> tekst tutaj </ div>
<span class="rightside"> tekst tutaj </ span>
<div class="mystuff"> tekst tutaj </ div>
Przykład:
W ten sposób "Leftside" tekst będzie wyglądać na stronie.
ID
Przykład:
# Maincontent
Chociaż można użyć ID ten sam sposób korzystania z klasy,
Identyfikator powinien być używany tylko raz na stronie. Na przykład, należy użyć identyfikatora główny obszar, gdzie jest to konieczne tylko raz i klasy dla obszarów, które będą korzystać z klasy więcej niż raz.
IE.
# Maincontent ()
# Leftside ()
# Rightside ()
(# Maincontent
color: # 52648F;
font: 9pt Verdana, Arial, Helvetica;
font-weight: bold;
padding-right: 5px;
padding-left: 5px;
padding-top: 10px
)
(# Leftside
border: 1px solid # DFDFDF;
padding-left: 10px;
padding-right: 10px;
color: # 666666;
font-weight: normal;
font: 8 \ ~ pt Arial, Verdana
)
(# Rightside
position: absolute;
top: 0;
na stronie: 0;
padding-right: 5px;
padding-left: 5px;
padding-top: 5px
)
Po zastosowaniu css ID info na głównej ulicy, takich jak główny Font i dopełnienia, możesz dodać style klasy dla bardziej szczegółowych obszarów w przestrzeni ID.
Font-size
CSS mogą korzystać pt (punkty) i px (pixals) odniesienie do wielkości czcionki.
Mamy tendencję do faworyzowania pt (punkty), jak również wyświetla na Mac i PC.
Przykład:
. Txt5 (
font-family: Verdana;
font-size: 9pt;
)
Jest popularnym rozmiarze między 7PT i 12pt.
Nic poza 12pt dostaje dość brzydki.
Przykład:
7PT Rozmiar czcionki
8 \ ~ pt Rozmiar czcionki
9pt Rozmiar czcionki
Rozmiar czcionki 10pt
Rozmiar czcionki 11pt
Rozmiar czcionki 12pt
Inline przykład:
<span> tekst tutaj </ span>
Inny szybki sposób zmienić rozmiar czcionki w css:
font-size: xx-small
font-size: x-small
font-size: small
font-size: średnia
font-size: duży
font-size: x-large
font-size: xx-large
Wyjście:
xx-small
x-small
mały
medium
duży
x-large
xx-large
wartość Font-FamilyThe w przykładzie poniżej jest lista priorytetów czcionki nazwiska i / lub nazwy własne rodziny.
Pierwsza wartość lub nazwa żądaną czcionkę. Inne nazwy są często dodawane, oddzielonych przecinkami wskazuje, że są alternatywy:
Przykład:
body (
font-family: Verdana, Arial, Helvetica, sans-serif
)
Inline przykład:
<span> tekst tutaj </ span>
Chociaż niemal każdym czcionki można umieścić w liście czcionek,
arkusz stylu zachęca projektantów do zaoferowania co najmniej jeden ogólny rodziny czcionek jako ostatnia możliwość.
Linki stylu
Imię i nazwisko:
: Link
: Aktywny
: Visited
: Hover
Bo linki są elementami aktywnymi, ze zmianą działania użytkownika.
Linki cztery państwa o nazwie "psuedo-klasy":
1) link: nieodwiedzonych link czeka na kliknięcie.
a: link ()
2) wizyta: link, który został "odwiedził" lub kliknąć wcześniej.
: visited ()
3) aktywny: link, który jest w stanie ich kliknięciu.
: aktywny ()
4) hover: link, który jest "unosił się" nad przez kursor myszy.
a: hover ()
Przykład:
a: link (
color: # 039C0B;
text-decoration: none
)
a: visited (
color: # 039C0B;
text-decoration: none
)
a: hover (
granicy: 1 solid;
border-color: # FE6001
)
Kliknij mnie
Wszystkie atrybuty są dziedziczone z wyjątkiem pierwszej i List pierwszego rzutu.
Filtry
Nazwy filtru:
Poświata
Plama
Cienia
Cień
Fala
Flipv
Fliph
Wszystkie filtry muszą mieć wartości z nimi związane ..
Można stosować filtry te obrazy lub tekst.
Przykłady:
Filtr: Ogień (color = # F8B745, siła = 2))
Dodaje efekt blasku wokół tekstu / obrazu
Filter: Blur (Add = 1, Direction = 90, siła = 11)
daje tekst / obraz rozmazany efekt
Filtr: cienia, (color = # c0c0c0, OFFX = 2, Offy = 2)
daje tekst / obraz efekt cienia
Filtr: Shadow (color = # 94BAC9, Direction = 225) szerokość: 257, wysokość: 10
daje tekst / obraz efekt cienia
Filter: Wave (Add = 0, Freq = 6, LightStrength = 2 = 2 fazy, siła = 2)
daje tekst / obraz efekt fali
Filtr: wysokość Flipv: 1
odwraca tekstu / obrazu w pionie
odwraca tekstu / obrazu w pionie
Filtr: wysokość Fliph: 1
odwraca tekstu / obrazu w poziomie
odwraca tekstu / obrazu w poziomie
Inline przykład:
<span style="Filter:dropshadow(color=c0c0c0,offX=2,offY=2) font-size:9pt;width:290px"> daje tekst / obraz <efekt cienia / span>
Kolorowe bary Scroll
Jest to jeden z najbardziej popularnych skryptach css:
można również użyć szesnastkowa wartości w miejsce kolorów strony domyślnej.
Przykład hex kody do poniżej kolor:
# 808080 = szary
# 000000 = czarny
= Biały # FFFFFF
<style type="text/css">
body (
scrollbar-base-kolor: szary;
scrollbar-face-kolor: szary;
scrollbar-track-kolor: szary;
scrollbar-arrow-color: black;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: black;
scrollbar-highlight-color: black;
scrollbar-shadow-color: black;
)
</ Style>
Usuń podkreślenie na linki
Spowoduje to usunięcie podkreślenia na linki, dzięki czemu wyglądają schludniejszy i jest bardzo popularne ...
<style type="text/css">
(
text-decoration: none
)
</ Style>
Przewijania w warstwach
Skrypt ten pozwala paski przewijania w warstwach.
Dodaj to w warstwie
<div> tag:
style = "overflow: auto"
Więc skrypt warstwę stanowi:
<div id = "Layer1" style = "position: absolute;
width: 200px;
height: 115px;
overflow: auto ">
</ Div>
Kierunku własności - lewy pasek przewijania
To zmiany kierunku tekstu, jak również zmienić pasek przewijania z prawej do lewej.
Kierunku własności mogą być dodawane do ciała:
<style type="text/css">
body (
kierunek: rtl
)
</ Style>
ltr - Text kierunku od lewej do prawej
rtl - Text kierunku od prawej do lewej
Kursory
Ten styl pozwala na tworzenie własnego kursora zamiast strzałki domyślne.
<style type="text/css">
body (
cursor: url ("mycursor.cur")
)
</ Style>
