Od zera do programisty: czerwca 2017

Span

Wydziela cześć tekstu i pozwala nadać indywidualne właściwości:

<!DOCTYPE html>
<html>
 <head>
  <title></title>
 </head>
 <body>
  <p>This text is black, except for the word <span style="color:red">red!</span></p>
  <p>My favorite font is <span style="font-family:Impact">Impact</span>!</p>
 </body>
</html>

Css

Przykład podpinania pliku Css do kodu HTML:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="nazwapliku.css"/>
  <title>Fancy Fonts</title>
 </head>
 <body>
  <p>I'm a paragraph written in red font, but one of my words is <span>blue</span>!</p>
 </body>
</html>

część: <link type="text/css" rel="stylesheet"
przepisujemy ,
a pod href= wstawiamy nazwę pliku CSS

przykładowa zawartość pliku css:

p {
 color: red;
}

span {
 color: blue;
}

Zasada działania bardzo prosta, w pliku html nie określamy właściwości tagów-selektorów "p" i "span" (jak to było robione- patrz rozdział 16)
ale są one określone za pomocą atrybutu (color) i właściwości (red i blue) w pliku css.

W css linie z atrybutem i właściwością zakańczamy średnikiem.

Zawartość pliku css możemy umieścić prosto w kodzie html:

<html>
 <head>
  <style>
   p {
    color: purple;
   }
  </style>
  <title>Result</title>
 </head>
 <body>
  <p>Zobacz. Ten tekst jest w kolorze: purple!</p>
 </body>
</html>

Znacznie częściej jest on jednak w pliku osobnym

Komentarze:

W css komentarze określamy /* */
W html komentarze 

Przykład pliku css z trzema atrybutami dla selektora "p"

p {
    color: green;
    font-family: Garamond;
    font-size: 24px;
}

DIV
Wydziela obszar który można później zdefiniować w pliku css, może być nagłówkiem, stopką, obiektem, obszarem...

<!DOCTYPE html>
<html>
 <head>
 <link type="text/css" rel="stylesheet" href="w2_10_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <div></div>
 </body>
</html>

i zdefiniowanie w css:

div {
    background-color: #cc0000;
    height: 100px;
    width: 100px;
}

Wynik: czerwony kwadrat o wielkości 100 pikseli.

Tabele
Jeśli chcemy określić za pomocą css kod html tworzący tabelę:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="nazwapliku.css"/>
  <title></title>
 </head>
 <body>
  <table>
   <thead>
    <th colspan="3">Nine Blocks!</th>
   </thead>
   <tbody>
    <tr>
     <td></td>
     <td></td>
     <td></td>
    </tr>
    <tr>
     <td></td>
     <td></td>
     <td></td>
    </tr>
    <tr>
     <td></td>
     <td></td>
     <td></td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

To w pliku css, opisujemy nie tylko table ale i td:

table, td
 {
    height: 50px;
    border: 1px dashed blue;
}

Likwidacja podkreślenia linków:

Prosty kod z linkiem:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_12_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <p>The below link goes to Google!</p>
  <a href="http://www.google.com/">Google</a>
 </body>
</html>

i likwidacja dekoracji (podkreślenia) w css:

a {
    color: #cc0000;
    text-decoration: none;
}

Jak widać atrybut "color" określony jest heksadecymalne ( R G B)

Przykład dla różnych tagów-selektorów:

<!DOCTYPE html>
<html>
 <head>
     <link type="text/css" rel="stylesheet" href="w2_13_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
     <h1>H1</h1>
     <p>To jest paragraf</p>
     <img src="http://ecsmedia.pl/c/skarbonka-kaczka-zolta-m-iext8982607.jpg" />
     <p></p>
     <a href="www.wi.zut.edu.pl">Wydział Informatyki ZUT w Szczecinie</a>
 </body>
</html>

i zawartość css:

h1 {
    font-family: Verdana, sans-serif;
    color: #576D94;
}

p {
    font-family: Garamond, serif;
    font-size: 18px;
    color: #4a4943;
}

img {
    height: 150px;
    width: 150px;
    border: 1px solid #4682b4;
}

a {
    color: #cc0000;
    text-decoration: none;
}

Jak widać w nagłówku h1 atrybut font-family: zawiera właściwość "Verdana" i sans-serif.
Taki zapis działa w sposób następujący. Załaduj fonty Verdana, a jeśli w systemie nie ma takiej czcionki to dowolną szeryfową czcionkę.

Przykład klikanego odnosnika:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="nazwapliku.css"/>
  <title>Nice button</title>
 </head>
 <body>
  <br/>
  <br/>
  <div>
    <a href="http://www.facebook.com">Contact Me on <span>Facebook</span></a>
  </div>
 </body>
</html>

i zawartość css:

div {
    height: 50px;
    width: 120px;
    border-color: #6495ed;
    border-width: 2px;
    border-style: solid;  /*none,dashed,dotted,double,....*/
    background-color: #bcd2ee;
    border-radius: 5px; 
    margin: auto;      
    text-align: center;

}


a {
    text-decoration: none;
    color: red;
    font-family: Verdana;
}

span {
    color: #ffffff;
    font-size: 22px;
}

Zagnieżdżanie tagów i opis tego w css

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_15_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <h3>I'm plain old font!</h3>
  <div>
   <h3>Me, too!</h3>
   <div>
    <h3>Me three!</h3>
    <div>
     <h3>Forget you guys. I'm about to be red!</h3>
    </div>
   </div>
  </div>
 </body>
</html>

i css:

body {
    background-color: #c6e2ff;
}

div div div h3 {
    color: red;
}

w efekcie, tylko zagnieżdżony w 3 divie znacznik h3 będzie czerwony. pierwsze trzy będą czarne.

identyfikator "id" i klasa "class"

przykład 1:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="w2_18_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <h2 id="intro">Wprowadzenie</h2>
  <h3 class="moja_klasa">Class i ID w CSS'ie</h3>
  <p class="moja_klasa">Klasy i identyfikatory są łatwe. Właśnie ich używam.</p>
  <h3>Zwykły nagłówek H3</h3>
  <p>Jeśli nie używam klasy lub identfikatora, to element html'owy otrzymuje standardową stylizację z CSS'a. 
  </p>
 </body>
</html>

i css:

#intro {
    color: #b83c3a;
}

.moja_klasa {
    color: #f7ac5f;
    font-family: Verdana;
}

przykład 2:

<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_16_stylesheet.css"/>
  <title>The Great Tree of HTML</title>
 </head>
 <body>
  <div id="p1">P</div>
  <div id="p2">P</div>
  <div id="p3">P</div>
  <div class="space"></div>
  <div id="title">Title</div>
  <div id="div">Div</div>
  <div class="space"></div>
  <div id="head">Head</div>
  <div id="body">Body</div>
  <div class="space"></div>
  <div id="html">HTML</div>
 </body>
</html>

i css:

div {
 border-radius: 5px;
 border: 2px solid #6495ED;
 background-color: #BCD2EE;
 height: 18px;
 text-align: center;
 font-family: Garamond, serif;
}

#p1 {
 display: inline;
 position: relative;
 margin-left: 138px;
}

#p2 {
 display: inline;
 position: relative;
 margin-left: 10px;
}

#p3 {
 display: inline;
 position: relative;
 margin-left: 10px;
}

#div {
 display: inline;
 position: relative;
 margin-left: 70px;
 margin-top: 10px;
}

#title {
 display: inline;
 position: relative;
 margin-left: 50px;
}

#body {
 display: inline;
 position: relative;
 margin-left: 25px;
}

#head {
 display: inline;
 position: relative;
 margin-left: 65px;
}

#html {
 width: 50px;
 position: relative;
 margin-left: 93px;
}

.space {
 opacity: 0;
}

identyfikator ID jest unikalny, można przyporządkować jeden do 1 elementu
za to jeden element może mieć wiele klas.

przykład 3

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_22_stylesheet.css"/>
  <title>My Social Network</title>
 </head>
 <body>
  <div></div>
  <div></div>
  <div></div>

  <div class="friend"></div>
  <div class="family"></div>
  <div class="enemy"></div>


  
  <div class="friend"></div>
  <div class="friend" id="best_friend"></div>
  <div class="family"></div>
  <div class="enemy"></div>
  <div class="enemy" id="archnemesis"></div>



 </body>
</html>

i css

div {
 height: 100px;
 width: 100px;
 border-radius: 100%;
 border: 2px solid black;
 display: inline-block;
 margin-left: 5px;

}


.friend {
    border: 2px dashed #008000;
}

.family {
    border: 2px dashed #0000ff;
}

.enemy {
    border: 2px dashed #ff0000;
}




#best_friend {
    border: 4px solid #008000;
}

#archnemesis {
    border: 4px solid #ff0000;
}

jak widać ustawienie id czy klasy nadpisuje pierwotne ustawienia,

Kaskadowość

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="w2_17_stylesheet.css"/>
  <title>Ultimate Text Challenge</title>
 </head>
 <body>
  <p>Wprowadzenie: Kaskadowość w CSS</p>
  <div>
   <p>Opis: Gdy ustawisz atrybut selektora np. 'p' na pewną wartość, wartość ta odnosi się do <em>wszystkich</em> znaczników p !!!.
   Jeśli jednak ustalić ten sam atrybut na inną wartość dla bardziej konkretnej instancji p, zmiana ta <em>zastąpi</em> 'generalne reguły'.
   </p>
   
   <ul>
    <li><p>Jeśli ustawisz p { color: green}, wszystkie 'p' będą miały kolor zielony.</p></li>
    <li><p>ALE jeśli ustawisz li p {color: black}, 'p' na zewnątrz 'li' będzie miało kolor zielony a 'p' WEWNĄTRZ 'li' będzie miało kolor czarny.
    </p></li>
    <li><p>A co się stało, że mamy kolor niebieski???? 
    </p></li>
   </ul>
  
  </div>
  
  <p>Podsumowanie: Im większa specyfikacja, tym większy priorytet w stylizacji CSSa.</p>
 </body>
</html>

i css:

p {
    color: green;
}

ul p {
    color: black;
    text-decoration: underline;
}

body > p {
    font-weight: bold;
}

/* wskazanie na <p>, które jest bezpośrednio w <div> */
div > p {
    color: blue;
}

Zachowania linków
prosty przykład html:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_20_stylesheet.css"/>
  <title></title>
 </head>
 <body>
  <div>
   <p><a href="http://www.onet.pl">Onet</a></p>
   <p><a href="http://www.wp.pl">Wp</a></p>
   <p><a href="http://www.interia.pl">Interia</a></p>
   <p><a href="http://www.infoludek.pl">Infoludek</a></p>
   
  </div>
 </body>
</html>

i css:

a:link {
    text-decoration: none;
    color: black;
}

a:hover {
    color: blue;
}

a:visited {
    color: red;
}

link - opisuje zachowanie zwykłego linka (tutaj czarny i bez podkreslenia)
hover - opisuje zachowanie po najechaniu (tu niebieski)
visited - opisuje zachowanie odwiedzonych linków (tu kolor czerowny)

Rozmieszczanie

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_23_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
 </body>
</html>

i css:

* {
 border: 1px dashed blue;
}

div {
    display: block; /* block, inline-block, inline, none */
 height: 50px;
 width: 100px;
 border: 2px solid black;
 border-radius: 5px;
}

#one {
 background-color: #FF0000;
}

#two {
 background-color: #0000FF;
}

#three {
 background-color: #FFD700;
}

#four {
 background-color: #308014;
}

parametr display może przybierać: block, inline-block, inline, none

Model pudełkowy

przykład:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_25_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <div></div>
 </body>
</html>

i css:

* {
 border: 1px dashed black;
}

div {
 height: 50px;
 width: 100px;

 border-radius: 5px;
 background-color: #308014;
 border: 6px solid black; 
 
 padding: 30px; 
 
 margin: -20px 20px 20px 20px; 
}

padding - określa wielkość przestrzeni w koło obiektu

padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;

można zapisać tak:
padding: 25px 50px 75px 100px;

top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

margin - w koło ramki...

rozmieszczenie:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_26_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <div></div>
 </body>
</html>

i css:

div {
 height: 300px;
 width: 100px;
 border: 2px solid black;
 border-radius: 5px;
 background-color: #308014;
 
 float: right;  /* left */
 
}

float: na prawo (right) albo na lewo (left)

czyszczenie obszaru:

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <link type="text/css" rel="stylesheet" href="zad.2.5css.css"/>
    </head>

    <body>

  <div id="header"><p> Naglowek szablonu </p></div>

  <div class="left"><p> Menu nawigacyjne </p></div>

  <div class="right"><p> Tresc strony </p></div>

  <div id="footer"><p> Stopka serwisu </p></div>



    </body>
</html>

i css

#header {
 background-color: lightgreen;
 margin-bottom: 0px;
}

.left {
 background-color: lightgrey;
 float: left;

}

.right {
 float: left;
}

#footer {
 background-color: lightgreen;
 clear: left

}

aby stopka była w prawidłowym miejscu należy dodać polecenie "clear: left"
jeśli tego nie zrobimy wstawi stopkę pomiędzy dwoma poprzednimi divami
clear czyści obszar i pozwala stopce pojawić się pod nimi

Od zera do programisty

18 Bootstrap

17 HTML + CSS