Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Właściwości obramowania border

Obramowanie elementu posiada następujące właściwości:

  1. styl - border-style. Taki zapis ustali styl obramowania całego elementu, możemy jednak sprezyzować o którą krawędź nam chodzi: lewą - border-left-style, górną - border-top-style, prawą - border-right-style lub dolną - border-bottom-style. Styl może mieć następujacą postać:
    • none - brak obramowania
    • hidden - ukryte
    • dashed - linia kreskowa
    • dotted - linia kropkowa
    • solid - linia ciągła
    • double - linia ciągła podwójna
    • groove - "rowek"
    • ridge - "grzbiet"
    • inset - "ramka"
    • outset - "przycisk"
  2. Grubość linii obramowania - border-width, przy czym podobnie jak w stylach, możemy sprecyzować konkretną krawędź.
  3. Kolor linii obramowania - border-color, przy również możemy nadać kolor jednaj krawędzi.

Zastosowanie różnych stylów obramowania do utworzenia przycisku - ćwiczenie 3_2_7_1

W ćwiczeniu chcemy uzyskać efekt wciskania. Podobne ćwiczenie już wykonywaliśmy, teraz znając właściwość border, podejdziemy do problemu bardziej profesjonalnie. Należy utworzyć dwa pliki.

plik cwicz_3_2_7_1.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="przycisk">
      <a href="http://www.glowacki.p9.pl" class="a1">Strona naszej szkoły</a>
    </div>    
  </body>
</html>

Jak widać na potrzeby ćwiczenia znacznie uprościliśmy sekcję head, jednak podczas tworzenia "prawdziwej" strony takich uproszczeń dokonywać nie wolno.

plik style.css:

.przycisk
{
  display:block;
  height:30px; 
  width:300px;
  background-color:#f2f7fb; 
  line-height:30px; 
  text-align:center;
  font-family:Arial; 
  color:black;
  font-size:17px; 
  font-weight:bold; 
  border:4px outset #02639a; 
  border-radius:10px;
  letter-spacing:4px;
}

.przycisk:active
{
  border-style:inset; 
  border-width:2px; 
}      

a.a1
{
  text-decoration:none;
  display:block;
  cursor:default;
}
  • Zwróć uwagę, ze można jednocześnie określić wszystkie właściwości obramowania, tak właśnie postąpiliśmy pisząc border:4px outset #02639a; w definicji klasy przycisk.
  • W celu zaokrąglenia obramowania określiliśmy border-radius:10px;, gdzie 10px jest promieniem, który można podać w różnych jednostkach długości.
  • Pseudoklasa active obejmuje cechy i wartości przypisane obiektom podczas wciśnięcia nad obiektem lewego przycisku myszki, aż do jego zwolnienia. Aby uzyskać efekt wciskania zmieniliśmy dwie właściwości obramowania: border-style:inset; oraz border-width:2px;.
  • Cechy:
    • line-height - wyskokość linii tekstu,
    • text-align - wyrównanie tekstu,
    • font-family - zastosowana czcionka,
    • color - kolor czcionki,
    • font-size - rozmiar czcionki,
    • font-weight - waga czcionki,
    • letter-spacing - odstęp miedzy znakami,
    • cursor - kursor myszki.

Zastosowanie stylów, grubości i kolorów obramowania akapitów - ćwiczenie 3_2_7_2

Utworzymy jeden plik cwicz_3_2_7_2.html. Obramowania akapitów zdefiniujemy w stylach lokalnych.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <p style="border:solid 8px red;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Proin nibh augue, suscipit a, celerisque sed, lacinia in, mi. 
      Cras vel lorem. Etiam pellentesque aliquet tellus. 
      Phasellus pharetra nulla ac diam.    
    </p>
    <p style="border:solid 8px red; border-top-color:green;
        border-right:dotted 8px blue;border-bottom:dashed 8px black";>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Proin nibh augue, suscipit a, celerisque sed, lacinia in, mi. 
      Cras vel lorem. Etiam pellentesque aliquet tellus. 
      Phasellus pharetra nulla ac diam.    
    </p>
    <p style="border-style:solid;border-width:8px;border-left-color:red;
      border-top-color:green;border-right-color:blue;border-bottom-color:black;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Proin nibh augue, suscipit a, celerisque sed, lacinia in, mi. 
      Cras vel lorem. Etiam pellentesque aliquet tellus. 
      Phasellus pharetra nulla ac diam.    
    </p>
  </body>
</html>

Jak wykonać strzałę wykorzystując obramowanie - ćwiczenie 3_2_7_3

Utworzymy dwa pliki cwicz_3_2_7_3.html oraz style.css. Zwróć uwagę, że "zabawa" z border może dać ciekawe efekty - można na przykład zrobić strzałkę.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="strzalka_bg">
      <div class="strzalka1">
      </div>
      <div class="strzalka2">
      </div>
      <div class="strzalka3"> 
      </div>
      <div class="strzalka4"> 
      </div>
    </div>
  </body>
</html>

.strzalka_bg
{
  position:relative;
  display:inline-block;
  height:40px; 
  width:110px;
  padding:0px;
  margin-left:30px;
}

  .strzalka_bg .strzalka1, .strzalka_bg .strzalka2, 
  .strzalka_bg .strzalka3, .strzalka_bg .strzalka4
  {
    display:block;
    position:absolute;
    height:0; 
    width:50px;
    border:20px solid transparent; 
  }

  .strzalka_bg .strzalka1, .strzalka_bg .strzalka3
  {
    border-top-color:#b50e42;
  }

  .strzalka_bg .strzalka2, .strzalka_bg .strzalka4
  {
    border-bottom-color:#b50e42;
  }

  .strzalka_bg .strzalka3
  {
    left:20px;
    top:20px;
  }

  .strzalka_bg .strzalka4
  {
    left:20px;
    top:-20px;
  }