Obrazek użytkownika cytrynek

Wprowadzenie do CSS (Kaskadowe Arkusze Styli)

Treść: 

Selektory w CSS:

http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

 

Blok

 

Treści (tekst, obraz, media itp.) mozna umieszczać w blokach, kontenerach. Cześć znaczników tj.: <div>, <p>, <article>, <header>, <aside>, <footer> może pełnić rolę bloku, w którym to może się znajdować inny znacznik.

Hierarchia poszczególnych elementów jest pokazana poniżej:

 

 

 

Na początku mamy treść (Content), która to może mieć wewnętrzny margines (padding), ramkę (broder) oraz margines zewnętrzny oddzielający od pozostałej treści, nieujętej w blok (margin).

 

div {

    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

 

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

 

 

Tło:

 

background-color

background-image

background-repeat

background-attachment

background-position

background-size

 

Tło obrazkowe:

body {
    background-image: url("paper.gif");
}

Tło z jednolitym kolorem

Tutaj należy napisać, że w HTML możemy użyć kilka sposobów zapisu barw:

  • RGB w zapisie szesnastkowym np: #FF0000
  • RGB w zapisie dziesiętnym: rgb(255,0,0)
  • RGBA (z kanałem Aplha): rgba(255,0,0, 0.5)
  • HSL (Hue, Saturation, Lightness) hsl(0,100,57)
  • HSLA hsla(0,100,57,0.5)
  • 140 nazwanych kolorów http://www.w3schools.com/htmL/html_colornames.asp

 

{
    background-color: #e0ffff;
}

{
    background-color: rgba(100,0,0,0.5);
}

 

Powtarzanie tła

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

 

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

 

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

 

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

 

Sposób wyświetlenia tła

 

background-attachment: scroll|fixed|local|initial|inherit;

 

body 
    background-image: url('w3css.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

 

div {
    background-color: yellow;
    background-clip: content-box;
}

 

div {
    background: url(img_flwr.gif);
    background-size: 80px 60px;
    background-repeat: no-repeat;
}

 

Tekst

 

kolor tekstu

 

body {
    color: blue;
}

 

Wyrównanie:

h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}

 

wygląd tekstu

 

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

{
    text-decoration: none;
}

 

modyfikacja tekstu

 

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

 

wcięcie tekstu

 

{
    text-indent: 50px;
}

 

Czcionki

 

rodzina czcionki

 

{
    font-family: "Times New Roman", Times, serif;
}

 

krój czcionki

 

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

 

ustawienie wielkości czcionki 

 

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

{
    font-size: 14px;
}

 

ustawienie wielkości czcionki w jednostce em

 

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

{
    font-size: 0.875em; /* 14px/16=0.875em */
}

 

ustawienie wielkości czcionki w jednostce procentowej

 

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

{
    font-size: 0.875em;
}

 

Waga (grubość) czcionki

 

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

 

Odnośniki

 

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

 

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

 

Listy

 

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

 

Obrazek w liście

 

ul {
   list-style-image: url('sqpurple.gif');
}

 

Pozycja na liście

opcje atrybutu: inside|outside|initial|inherit;

 

ul {
    list-style-position: inside;
}

 

Skrótowy zapis listy

 

ul {
    list-style: square inside url("sqpurple.gif");
}

 

Tabele

 

table, th, td {
   border: 1px solid black;
}

 

zwijanie ramek

border-collapse opcje atrybutu: separate|collapse|initial|inherit;

 

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

 

Wyrównanie poziome tekstu w tabeli

 

opcje atrybutu: left|right|center|justify|initial|inherit;

 

th {
    text-align: left;
}

 

Wyrównanie pionowe tekstu w tabeli

 

opcje atrybutu: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit

 

td {
    height: 50px;
    vertical-align: bottom;
}

 

Szerokość tabeli

 

table {
    width: 100%;
}

th {
    height: 50px;
}

 

Margines wewnętrzny tabeli

 

td {
    padding: 15px;
}

 

Kolorowanie tabeli

 

table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}

 

Ramki

 

 

rodzaj ramki

 

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

 

{
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dashed;
    border-left-style: solid;

    border-width: 5px;

}

{

    border-width: 1px 2px 1px 2px;

}

lub

{

    border-width: 1px 2px;

}

 

Szybszy zapis 

{
    border: 5px solid red;
}

 

Tagi: 
ZSP nr 5 im. Leszka Kołakowskiego
ZESPÓŁ SZKÓŁ PONADGIMNAZJALNYCH
NR 5 IM. LESZKA KOŁAKOWSKIEGO
W KOŻUCHOWIE

wspomagane przez open source