CODE CARROTS

HTML/CSS

 

 

 

edycja 1  Warszawa 2015

Link do prezentacji

http://goo.gl/CXxT2T

Praca domowa

Typografia

p {
    font-size: 12px;
    color: red;
}
<h1>Nagłówek 1</h1>
<h2>Nagłówek 2</h2>
<h3>Nagłówek 3</h3>
<h4>Nagłówek 4</h4>
<h5>Nagłówek 5</h5>
<h6>Nagłówek 6</h6>

<p>Tekst. Tekst. Tekst. Tekst.</p>

<a href="http://google.pl">Łącze</a>

HTML

CSS

W większości przypadków domyślna wielkość tekstu w przeglądarkach to: 

h1 - 32px, h2 - 24px, h3 - 18px, p - 16px;

http://www.typewolf.com/

Typografia - jednostki

  • px - wielkość zależy od rozdzielczości monitora. Ten sam tekst na ekranie o rozdzielczości 800x600 będzie się wydawał większy niż na ekranie 1200x800.
  • em - określa wielkość fontu względem rozmiaru fontu zdefiniowanego dla jego rodzica (dziedziczenie). 
  • rem - wielkość elementu jest obliczana względem wartości rozmiaru fontu zdefiniowanego dla <html>. Słabsze wsparcie starszych przegladarek http://caniuse.com/#search=rem.

 

h1 {
    font-family: "Times New Roman", serif;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.4rem;
}
p {
    font-family: Arial, sans-serif;
    font-weight: bold;  
    line-height: 1.5rem;
    word-wrap: break-word;
}
a {
    text-decoration: none;
    text-align: center;    
}

Typografia - nowe właściwości CSS

CSS

Jeśli nie chcemy być ograniczeni tylko do fontów, które są już zainstalowane na komputerze użytkownika (www.cssfontstack.com) stosujemy regułę @font-face.​

@font-face {
    font-family: 'latobold';
    src: url('lato-bold.eot');
    src: url('lato-bold.eot?#iefix') format('embedded-opentype'),
         url('lato-bold.woff2') format('woff2'),
         url('lato-bold.woff') format('woff'),
         url('lato-bold.ttf') format('truetype'),
         url('lato-bold.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
p.bold {
    font-family: "latobold", Arial, sans-serif;
}

Typografia - reguła @font-face

CSS

https://css-tricks.com/snippets/css/using-font-face

@font-face {
    font-family: 'SourceSansPro-Regular';
    src: url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'SourceSansPro-Regular', Arial, sans-serif;
}

Ćwiczenie dodaj font

CSS

www.fontsquirrel.com

https://www.google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro

lub

p.bold {
    font-family: "Lato", Arial, sans-serif;
}

Typografia - Google Fonts

<link href='http://fonts.googleapis.com/css?family=Lato:700&subset=latin,latin-ext' 
rel='stylesheet'>

@import url(http://fonts.googleapis.com/css?family=Lato:700&subset=latin,latin-ext);

Google Fonts umożliwia nam dodanie fontów, które są na ich serwerze: www.google.com/fonts

HTML

CSS

2.

CSS

1.

h1 {
    font-family: 'Patrick Hand', cursive;
}

Ćwiczenie dodaj font

CSS

<link href='http://fonts.googleapis.com/css?family=Patrick+Hand&subset=latin,latin-ext' 
rel='stylesheet' type='text/css'>

HTML

O czym nie możemy zapomnieć, jeśli chcemy mieć pewność, że na naszej stronie tekst będzie mieć polskie znaki:

  • <html lang="pl">

  • <meta charset="utf-8" />

  • nasz plik zapisany z kodowaniem znaków UTF-8

  • wybrany krój pisma musi posiadać polskie znaki

  • jeśli dołączamy fonty z Google Fonts
    <link href="...&subset=latin,latin-ext" rel="stylesheet"/> 

 

​

Polskie znaki

Łącza

<a href="contact.html">Kontakt</a>

<a href="http://google.com" target="_blank">Link w nowym oknie</a>

<a href="#mojeId">Link do miejsca (mojeId) na stronie</a>

<p><a href="http://google.com">Link</a> z tekstem</p>

<a href="http://google.com">
    <img src="mojeZdjecie.jpg" alt="Moje zdjecie" />
    <p>Tekst 1</p>
    <p>Tekst 2</p>
</a>

HTML

HTML5 - Element <a> (inline) może otaczać zarówno elementy typu block i inline, jeśli tylko nie są to elementy interaktywne (inne linki, przyciski).

Przeznaczone dla elementów a:

:link - domyślnie,

:visited - określa wygląd odwiedzonych linków (zapisanych w historii przeglądarki). 

Mogą być nadane również innym elementom:​

:focus - określa wygląd linków wybrany za pomocą przycisku klawiatury,

:hover - określa wygląd elementu, na który najedziemy kursorem myszy,

:active - określa wygląd elementu podczas kliknięcia.

Łącza - pseudoklasy

a {
  text-decoration: underline;
  color: #a00;
}
a:visited {
  color: #844;
}
a:hover, a:focus, a:active {
  text-decoration: none;
  color: #fff;
  background: #800;
}

CSS

Ćwiczenie dodaj łącze

a {
    font-size: 20px;
    color: #293A4F;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 4px;
}
a:hover, a:focus, a:active {
    color: #CC3F69;
}

CSS

Pseudoklasy

<div>
    <p>pierwszy</p>
    <p>drugi</p>
    <p>trzeci</p>
    <p>czwarty</p>
</div>

:first-child, :last-child

http://www.w3schools.com/css/css_pseudo_classes.asp

HTML

p:first-child{
    color: green;
}
p:last-child{
    color: red;
}

CSS

:nth-child(odd), :nth-child(even), nth-child(3)

p:nth-child(odd){
    background-color: #B6C2D9;
}
p:nth-child(even){
    background-color: #E8DDB5;
}

CSS

Listy, których elementy są numerowane za pomocą liter, cyfr rzymskich lub liczby.

<ol>
    <li>Tekst 1</li>
    <li>Tekst 2</li>
    <li>Tekst 3 plus
        <a href="strona1.html">Link do strony 1</a>
    </li>
</ol>

Listy uporządkowane

Przeglądarki domyślnie wcinają zawartość list.

HTML

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

CSS

http://www.w3schools.com/cssref/pr_list-style-type.asp

Listy, których elementy są oznaczone znacznikami.

Listy nieuporządkowane

<ul>
    <li>Tekst 1</li>
    <li>Tekst 2 plus
        <a href="strona2.html">Link do strony 2</a>
    </li>
    <li>
        <a href="strona3.html">Link do strony 3</a>
    </li>
</ul>

HTML

CSS

ul {
    list-style: circle;
}

Stylowanie listy

https://css-tricks.com/almanac/properties/l/list-style/​

Listy zagnieżdżone

<ul>
    <li>Tekst 1
        <ul>
            <li>Tekst 1 listy zagnieżdżonej</li>
            <li>Tekst 2 listy zagnieżdżonej</li>
        </ul>
    </li>
    <li>Tekst 2 plus
        <a href="strona2.html">Link do strony 2</a>
    </li>
    <li>
        <a href="strona3.html">Link do strony 3</a>
    </li>
</ul>

HTML

Elementy blokowe i inline

<a href="http://www.google.com">Kliknij!</a>
<a href="http://www.google.com">Tu też!</a>

HTML

CSS

a{
    background-color: #D1DEDE;
    display: block;
}
<ul>
    <li>Tekst 1</li>
    <li>Tekst 2</li>
    <li>Tekst 3</li>
</ul>

HTML

CSS

li{
    display: inline;
}

Inline-block

<a href="http://www.google.com">Kliknij!</a>
<a href="http://www.google.com">Tu też!</a>

HTML

CSS

a{
    background-color: #D1DEDE;
    display: inline-block;
    height: 100px;
    width: 100px;
    margin-right: 10px;
}

Ukrywanie elementów

<p>Paragraf 1</p>
<p class="niewidoczny">Paragraf 2</p>
<p>Paragraf 3</p>
<p class="ukryty">Paragraf 4</p>
<p>Paragraf 5</p>

HTML

CSS

p.niewidoczny{
    display: none;
}
p.ukryty{
    visibility: hidden;
}

Dziękuję!

</codecarrots>

Prezentacja4

By code carrots

Made with Slides.com

Prezentacja4

Prezentacja 4 z zakresu HTML/CSS

  • 1,680

More from code carrots