Skocz do zawartości

HTML & CSS - to musisz wiedzieć ! :-)


Cuan
 Udostępnij

Rekomendowane odpowiedzi

Witam,
To kolejny mój poradnik i raczej ostatni na jakiś czas, gdyż nie mam zbytnio czasu. Każdy powinien dowiedzieć się czegoś nowego, co w przyszłości ułatwi mu pracę lub wpłynie na optymalizację strony WWW.
Bez dalszego ględzenia...

1. Białe znaki przy blokach wyświetlanych w lini.
Jeżeli wyświetlamy jakieś bloki w lini (display: inline-block;), musimy wiedzieć, że na odstęp między nimi wpływają białe znaki.
Białe znaki - spacje, tabulatory, nowe linie itp.
Dla body diva dajmy sobie taki CSS:

body {
	width: 100%;
}

div {
	width: 50%;
	height: 32px;
	display: inline-block;
}

i teraz dwie wersje HTML:
Wersja 1:

<body>
<div>
A
</div>
<div>
B
</div>
</body>

Wersja 2:

<body>
<div>
A
</div><div>
B
</div>
</body>

Efekt: W wersji 1 "A" i "B" będą w dwóch oddzielnych liniach, natomiast w wersji 2 "A" i "B" będą w jednej linii.

2. Poprawne układanie kodu (otwieranie i zamykanie znaczników).
Jak już wiemy istnieją znaczniki które otwieramy i zamykamy (np.), oraz które tylko używamy (np.).
Często w kodzie HTML widać np.

<link rel="stylesheet" href="style.css">

niestety jest to błędne wg. edytora. Powinno to wyglądać tak:

<link rel="stylesheet" href="style.css" />

Przykład jak edytor widzi kod z /> i bez.
Bez /> (meta)

<head>
	<meta charset="utf8">
		<title>Tytuł</title>
		</head>

Z /> (meta)

<head>
	<meta charset="utf8" />
	<title>Tytuł</title>
</head>

W skrócie: "/>" daje edytorowi HTML informację, że ten znacznik zamyka się w chwili otwarcia.

3. Semantyka kodu znacznie wpływa na pozycjonowanie naszej strony.
Szybkie wyjaśnienie: "Boty" odwiedzające naszą stronę (np. Google) są niewidome i posługują się znacznikami semantycznymi (header, footer, main, section, aside, p, article, strong itd.).

4. Selektor bezpośredniego dziecka.
To zalicza się do podstaw, lecz mało kto tego używa.
HTML:

<div>
	<span>tekst1</span>
	<div>
		<span>tekst2</span>
	</div>
</div>

Przykład 1:
CSS:

div>span {
	color: #00ff00;
}

Efekt: "tekst2" będzie zielony.
Przykład 2:
Dużo osób tak czy siak używa:

div span {
	color: #00ff00;
}

Efekt: "tekst1" i "tekst2" będzie zielony.

5. Uniwersalny selektor CSS.
Jeżeli chcemy przypisać coś wszystkim możliwym elementom HTML używamy uniwersalnego selektora - *.
Przykład 1:
CSS

* {
	color: #ff0000;
}

Efekt: Wszystkie elementy będą posiadały czerwony kolor tekstu.
Przykład 2:
CSS

div>*>span {
	color: #0000ff;
}

HTML

<div>
	<div>
		<span>Niebieski tekst</span>
		<div>
			<span>Normalny tekst</span>
		</div>
	</div>
</div>

6. Domyślne wartości CSS i ich reset.
Elementy HTML mają domyślne wartości CSS, np. lista (TUTAJ POWINNA BYĆ LISTA) ma ustawiony margin i padding.
Oczywiście nam to nie na rękę i chcemy sami ustawić sobie np. margines. Już w wielu szablonach widziałem "głupie" wymienianie większości znaczików i przypisywanie im zerowe wartości. Abyśmy nie musieli wymieniać wszystkich znaczników, z pomocą przychodzi opisany wyżej uniwersalny selektor.

* {
	margin: 0px;
	padding: 0px;
	border: none;
}

Czemu tylko margin, padding i border? Dlatego, że najczęściej posiadają one domyślne wartości, prawie wszystkie elementy HTML mają jeszcze domyślny display, lecz z reguły jest on ustawiony po naszej myśli.

7. Szukajka w atrybucie (selektor).
CSS

a[href*="webmasteruj"] {
	color: #ffffff;
}

HTML:

<a href="https://www.pecetowicz.pl">Link1</a>
<a href="http://nydylier.pl">Link2</a>
<a href="http://domena.pl/webmasteruj/test">Link3</a>

Efekt: "Link1" i "Link3" będą miały kolor biały, gdyż w ich atrybucie href znaleziono "webmasteruj".

Liczę na piwka i opinie.
Pozdrawiam! 

Edytowane przez SeNioR
poprawa
Odnośnik do komentarza
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

  • Podobna zawartość

    • Mam pytanie nie wiem jak zrobić na stronie aby pokazywało styl? Jak dodać zewnętrzny arkusz stylów do HTML?
      Będę wdzięczny za pomoc.
    • Skrypt, który ma pokazać ile dni ma dany miesiąc po wskazaniu miesiąca i roku z formularza przez użytkownika.  
      Nie wiem gdzie mam błąd. Proszę o poprawienie błędu w kodzie php.
      <form action="ostatni_dzien_miesiaca.php" method="post"> <label for="miesiac">Miesiąc:</label> <select name="miesiac"> <?php for($l=1; $l<=12;++$l) echo '<option value="'.$l.'">'.$l.'</option>'; ?> </select></br></br> <label for="rok">Rok:</label> <select name="rok"> <?php for($i=1900; $i<=2090;++$i) echo '<option value="'.$i.'">'.$i.'</option>'; ?> </select></br></br> </br></br><input type="submit" name="sprawdz" value="Sprawdź dzień tygodnia" /> </br></br><input type="reset" name="reset" value="Wyczyść" /> </form> <?php $rok['rok'] = $miesiac['miesiac']; for ($i = 1; $i <= 12; $i++) { $miesiac[$i] = date("t", mktime(0, 0, 0, $i, 1, $rok)); } var_dump($miesiac); ?>
    • Witam Jestem początkująca .
      Chce zrobić kalkulator z jednym polem input, gdzie użytkownik wprowadza działanie np. 2 + 2 = lub 2 + 2 + 2 = itp. Użytkownik może wprowadzić dowolną ilość liczb np. 2 + 2 +  2 + 2 = Po kliknięciu oblicz pokazuje się wynik.
      Zrobiłam formularz html, ale nie wiem jak zrobić php. Proszę o pomoc.
      <form action="kalkulator2.php" method="post"> <p>Wpisz działanie</p> <input type="text" name="oblicz_dane" placeholder="wprowadż działanie"> </form> <p>Wynik</p>
    • Witam. Z racji tego, że pracujemy już nad nowym portfolio to postanowiliśmy udostępnić poprzednie do pobrania
      Strona była pisana na szybko, więc może posiadać lekkie niedociągnięcia - w razie czego prosimy pisać w prywatnej wiadomości - pomożemy naprawić.
      Projekt wykonany został w ciemnych kolorach i jest w pełni responsywny.
      Screen:
      Demo: JSend.pl - Life is programming!
      Download:

      Ukryta zawartość
      Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.
    • Hey, szukam godnych polecenia książek do nauki językow wymienionych wyżej, mogą być audiobooki ale nie jakieś strony czy cos w tym stylu, niestety próba uczenia się z stron kończy się u mnie fiaskiem bo wszystko mnie rozprasza dlatego szukam zwykłej książki.
      Ps. Jeśli chodzi o naukę języków to co jest lepsze uczenie się typowo pod strony www czy c++/c jeśli chciałbym wiązać to ze swoją przyszłością zawodową? 
  • Najnowsze tematy

  • Ostatnio rozwiązane

×